1. Getting Started with Firefox OS
2014
Getting Started with Firefox OS
John DeVight
DMVMUG Reston, VA

2. AGENDA Overview Firefox OS Simulator Firefox OS Getting Started
Hosted Applications
Hello World Hosted Application
Conference Hosted Application
Conference Packaged Application

3. Overview Conference Application Demo

4. Overview Mobile OS Market
Company OS
Market Share
Apple
iOS
13.4%
Google
Android
81.3%
Microsoft
Windows Phone
4.1%
Blackberry
Blackberry OS
1.0%
Nokia
Series 40
N/A
Linux Foundation
Mer
< 1.0%
Tizen Association
Tizen
Sailfish Alliance
Sailfish OS
Canonical Ltd.
Ubuntu Phone ?
Saturated market
* Taken from:

5. Overview Why Firefox OS?
Firefox OS smartphones will arrive in extremely cost-sensitive markets like India and Indonesia where people often buy phones from a bin in a store." With an anticipated device price point of $25, Google (GOOG) and Apple (AAPL) have reason to fear.
The Indian and Indonesian markets are the most under-saturated in Asia.... smartphone penetration had reached just 23% in Indonesia and 18% in India... that leaves 1.2 billion users in the two countries currently without access to smartphones or tablets. Smartphone makers have struggled to satisfy the price sensitivity of the lower-end markets in both of these countries, and in doing so have lost out on driving brand adoption for first time users.
* Taken from:

6. Overview Why Develop for Firefox OS?
Demand for Web Technologies to be used in mobile app development.
On July 25, 2011, Dr. Andreas Gal, Director of Research at Mozilla Corporation, announced the "Boot to Gecko" Project (B2G) on the mozilla.dev.platform mailing list. The project proposal was to "pursue the goal of building a complete, standalone operating system for the open web" in order to "find the gaps that keep web developers from being able to build apps that are – in every way – the equals of native apps built for the iPhone [iOS], Android, and WP7 [Windows Phone 7]."
Make Web Technologies a 1st Class Citizen in a mobile operating system.
* Taken from:

7. Firefox OS Simulator Installation
Launch Firefox.
Click the orange “Firefox” button and select “Add-ons”.
In the “Search” textbox, type “Firefox OS Simulator”.

8. Firefox OS Simulator Overview
Dashboard
A tool hosted by the Firefox browser that enables you to start and stop the Simulator and to install, uninstall, and debug apps running in it. The Dashboard also helps you push apps to a real device and checks app manifests for common problems.
Simulator
The Firefox OS desktop client, a version of the higher layers of the Firefox OS that runs on your desktop.
* Taken from:

9. Firefox OS Architecture
Application Layer – HTML5 / JS /CSS
Gaia
Hosted Apps
Packaged Apps
Open Web Platform Interfaces
Security
Web APIs (Contacts, Settings, Camera, etc)
Gecko Runtime (Firefox OS Application Runtime)
Infrastructure Layer (Gonk)
Open Source Libraries
Device Operating System
* Based on the diagram at:

10. Firefox OS Gaia Building Blocks
Look and Feel of other Firefox OS applications
Building Blocks
Action Menu
Buttons
Confirm
Drawer
Edit Mode
Headers
Input Areas
Status
Switches
Lists
Progress and Activity
Scrolling
Seek bars
Tabs
Filters
Toolbars

11. Firefox OS Web APIs
WebAPI is the suite of device compatibility and access APIs that allow Web apps and content to access device hardware (such as battery status or the device vibration hardware), as well as access to data stored on the device (such as the calendar or contacts list).

12. Firefox OS Types of Applications
Hosted
Hosted on a web server.
All you need is a Manifest file.
Easy to deploy new versions without having to update.
Cannot access low level APIs to use the device hardware.
Packaged
Runs on the user’s device.
Zipped up with the Manifest file in the root directory.
Can access low level APIs.
Must be reviewed, vetted, and signed by a distributor.

13. Getting Started Resources
MDN: Your First App
MDN App Template
Boilerplate App
PluralSight
Beginning HTML5 Apps for Firefox OS by John Sonmez

14. Hosted Applications Manifest File
“An Open Web App manifest contains information that a Web browser needs to interact with an app.”
Must be named: manifest.webapp
Documentation at:
JSON format

15. Hosted Applications Manifest File JSON attributes
name: name of the application
description: description of the application
launch_path: path relative to the origin of the server
developer: JSON object containing:
name: name of the developer
icons: JSON object containing icon sizes to URIs of the icons
60: a 60 x 60 icon displayed on the device
128: a 128 x 128 icon displayed on the Firefox Marketplace
default_locale: the language that the manifest uses.

16. Hosted Applications Example manifest File JSON attributes
{ "name": "Conference", "description": "Display Conference Information", "launch_path": "/Conference.Hosted/", "developer": { "name": "John DeVight" }, "icons": { "60": "/Conference.Hosted/content/images/Users-Conference-icon.png“, “128": "/Conference.Hosted/content/images/Users-Conference-icon-128.png“ }, "default_local":"en" }

17. Hello World Hosted Application Creating the Project in Visual Studio
Create an ASP.NET Empty Web Application
Add HTML Page called index.html
Add the Gaia Building Blocks
Add HTML to index.html
Add manifest.webapp
Add file extension to Web.config file for manifest.webapp
Create an image that is 60x60 pixels

18. Hello World Hosted Application Adding reference to the Gaia Header Building Block
Required:
fonts.css
util.css
Header Building Block:
headers.css
Example:
<link href="building-blocks/fonts.css" rel="stylesheet" />
<link href="building-blocks/util.css" rel="stylesheet" />
<link href="building-blocks/styles/headers.css" rel="stylesheet" />

19. Hello World Hosted Application Adding a Header Building Block and Content
<section role="region"> <header class="fixed"> <h1>Hello</h1> </header> <article class="content scrollable header"> <p>World</p> </article> </section>

20. Hello World Hosted Application Adding manifest.webapp
{ "name": "Hello World", "description": "Hello World App", "launch_path": "/HelloWorld/", "developer": { "name": "John" }, "icons": { "60": "/helloworld.png" }, "default_local":"en" }
Why no 128 icon? Not deployed to the Firefox Marketplace

21. Hello World Hosted Application Add .webapp and .woff MIME Types
<configuration> <system.web> <compilation debug="true" targetFramework="4.0" /> </system.web> <system.webServer> <staticContent> <mimeMap fileExtension=".woff" mimeType="application/x-woff" /> <mimeMap fileExtension=".webapp" mimeType="application/x-web-app-manifest+json" /> </staticContent> </system.webServer> </configuration>

22. Hello World Hosted Application Add to Firefox OS Simulator
Add the URL for the manifest.webapp
Click Add Manifest

23. Conference Hosted Application Adding the Tabs and Conference Information
Add stylesheets for the Tab and List Building Blocks
Add the Conference and Session Tabs
Add a List to the Conference Tab
Populate the list with conference Information using Kendo UI MVVM

24. Conference Hosted Application Adding the Tab Building Block
Add stylesheet
<link href="content/building-blocks/style_unstable/tabs.css" rel="stylesheet" />
Add HTML
<ul role="tablist" data-items="2" class="skin-dark bottom">
<li id="home" role="tab">
<a href="#home" class="action-icon calendar-today"></a>
<div role=“tabpanel”></div>
</li>
<li id="sessions" role="tab">
<a href="#sessions" class="action-icon calendar-agendaview"></a>
</ul>

25. Conference Hosted Application Kendo UI MVVM
Kendo MVVM Overview
MVVM in Kendo UI Walkthrough
data-bind attribute
Identifies the attribute of an element to be bound to a “field” in the View-Model.
kendo.bind method
Binds the View-Model to an element.

26. Conference Hosted Application Adding the List Building Block to the Conference (home) Tab
Add stylesheet
<link href="content/building-blocks/style_unstable/lists.css" rel="stylesheet" />
Add HTML
<section id="homeList" data-type="list">
<header>Date</header>
<ul>
<li>
<p data-bind="text: date"></p>
</li>
</ul>
</section>

27. Conference Hosted Application Adding JavaScript for the Conference Tab
Select the first tab
window.location.hash = "#home";
Displaying the data in the List
var conference = Conference.Data.conference();
kendo.bind($("#homeList"), conference);

28. Conference Hosted Application Adding the Sessions Tab
Add stylesheets for the Drawer, Action Menu and Input Areas Building Blocks
Add a List to the Sessions Tab
Group sessions together based on the session time using Linq.js
Display the list of sessions using the Kendo UI Template
Display session details using a dialog (from the Action Menu Building Block)
Implement Search using Linq.js
Implement the Drawer Building Block to search by Tracks

29. Conference Hosted Application Linq.js – LINQ for JavaScript
Source code on CodePlex

30. Conference Hosted Application Grouping the Sessions by Time using Linq
Conference Hosted Application Grouping the Sessions by Time using Linq.js
Enumerable.From(sessions) .GroupBy(function (session) { return session.time; }, function (session) { return { id: session.id, track: session.track, title: session.title }; }, function (time, grouping) { return { time: time, sessions: grouping.ToArray() }; }) .ToArray();

31. Conference Hosted Application Kendo UI Templates
Kendo MVVM Templates Overview

32. Conference Hosted Application Create the Template Script
<script type="text/x-kendo-template" id="sessionListGroup"> <header>#: time #</header> <ul> # for (var idx = 0; idx < sessions.length; idx++) { # <li> <a data-id="#: sessions[idx].id #"> <p>#: sessions[idx].title #</p> </a> </li> # } # </ul> </script>

33. Conference Hosted Application Displaying the Sessions Using Kendo UI Templates
Create a sessionList section element
<section id="sessionList" data-type="list" style="padding:0 3rem 1.5rem; "></section>
Get the template script to create a kendo.template and display the sessions in the session list
var displayGroups = function (groups) {
var template = kendo.template($("#sessionListGroup").html()),
$sessionList = $("#sessionList");
$sessionList.empty();
for (var idx = 0; idx < groups.length; idx++) {
$sessionList.append(template(groups[idx])); } };

34. Conference Hosted Application Adding the Search Field
Add the Input Areas Building Block
<link href="content/building-blocks/styles/input_areas.css" rel="stylesheet" />
Add the HTML for the Search field
<form id="sessionSearch" role="search">
<button type="submit">Cancel</button>
<p>
<input id="sessionSearchText" type="text" placeholder="Search..."/>
<button type="reset">Clear</button>
</p>
</form>

35. Conference Hosted Application Implementing the Search Field
Add event handler to the search field to capture the [Enter] key to perform the search.
Filter for all sessions that contain the search value in the title, track or description.
Group the sessions by time.
Display the groups.

36. Conference Hosted Application Display session details
Add the Action Menu Building Block
<link href="content/building-blocks/styles/action_menu.css" rel="stylesheet" />
Add the HTML for the Dialog
<section id="details" class="fade-out" data-postion="back" style="display:none;"></section>
Add a click event handler to the session list item to
Get the session details and display the details in the dialog using Kendo UI MVVM
Show the dialog
Add a click event handler to the dialog cancel button to close the dialog

37. Conference Hosted Application Display a List of Tracks in a Sidebar to Filter Sessions
Add the Drawer Building Block
<link href="content/building-blocks/styles/drawer.css" rel="stylesheet" />
Add the HTML for the Sidebar
<section id="sidebar" data-type="sidebar"></section>
Populate the Sidebar with Tracks
Add a click event handler to the track list item to
Set the search field with the track name
Close the sidebar
Filter for all sessions that contain the track.
Group the sessions by time.
Display the groups.

38. Conference Hosted Application Display a List of Tracks in a Sidebar to Filter Sessions (cont)
Add link to show / hide the Sidebar
<header class="fixed">
<a href="#sessions"><span class="icon icon-menu">hide sidebar</span></a>
<a href="#drawer"><span class="icon icon-menu">menu</span></a>
<h1>Sessions</h1>
</header>

39. Conference Hosted Application Creating the Manifest
{ "name": "Conference", "description": "Display Conference Information", "launch_path": "/Conference.Hosted/", "developer": { "name": "John DeVight" }, "icons": { "60": "/Conference.Hosted/content/images/Users-Conference-icon.png" }, "default_local":"en" }

40. Conference Packaged Application Contacts Tab
Add a tab for Contacts
Add a button to add a new contact using the Contacts Web API
Display the list of contacts that have been added from the conference app.

41. Conference Packaged Application Contacts Web API
The Contacts API provides a simple interface to manage a user's contacts stored in the system's address book.
Add a Contact
Create an instance of a mozContact and fill all necessary properties.
Use the ContactManager.save() method to save the contact to the address book.
Find Contacts
Define the options to use to filter the contacts in the address book.
Use the ContactManager.find() method to retrieve contacts from the address book.
Contacts Web API

42. Conference Packaged Application Adding a Contact
Add the HTML for the Dialog
Create a mozContact and populate with values.
Save the contact
Display the list of contacts
var person = new mozContact();
person.givenName = $("#addContactGivenName").val();
person.category = ["Conference App"];
var request = window.navigator.mozContacts.save(person);
request.onsuccess = function () {
displayList(); }

43. Conference Packaged Application Displaying Contacts (cont)
Retrieve the list of contacts
var filter = {
filterBy: ["category"],
filterValue: "Conference App",
filterOp: "equals",
filterLimit: 100 };
var search = window.navigator.mozContacts.find(filter);
search.onsuccess = function () { }

44. Conference Packaged Application Displaying Contacts (cont)
Display the list of contacts
search.onsuccess = function () {
var $contactList = $("#contactList"),
template = kendo.template($("#contactListEntry").html());
$contactList.empty();
for (var idx = 0; idx < search.result.length; idx++) {
$contactList.append(template(search.result[idx])); }

45. Conference Packaged Application Displaying Contacts
Create a contact template
<script type="text/x-kendo-template" id="contactListEntry">
<header>#: familyName[0] #, #: givenName[0] #</header>
<ul>
# for (var tdx = 0; tdx < tel.length; tdx++) { #
<li>#: tel[tdx].type #: #: tel[tdx].value #</li>
# } #
# for (var edx = 0; edx < .length; edx++) { #
<li>#: [edx].type #: #: [edx].value #</li>
</ul>
</script>

46. Conference Packaged Application Creating the Manifest
{ "name": "Conference (Packaged)", "description": "Display Conference Information", "launch_path": "/index.html", "type": "privileged", "developer": {"name": "John DeVight" }, "icons": { "60": "/Conference.Packaged/content/images/Users-Conference-icon.png" }, "default_local":"en", "permissions": { "contacts": { "descriptions": "Required for contacts", "access": "readcreate" } }

47. Questions? Email: John.DeVight@gmail.com Speakers Blog:
Need more information on DMVMUG
Visit
Questions?