Getting Started with Firefox OS 2014 Getting Started with Firefox OS John DeVight DMVMUG Reston, VA http://dmvmug.com

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

Overview Conference Application Demo

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: http://en.wikipedia.org/wiki/Comparison_of_mobile_operating_systems

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: http://seekingalpha.com/article/2042973-1_2-billion-reasons-why-firefox-os-is-important

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: http://en.wikipedia.org/wiki/Firefox_OS

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

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: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator

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: https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture

Firefox OS Gaia Building Blocks http://buildingfirefoxos.com 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

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). https://developer.mozilla.org/en-US/docs/WebAPI

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.

Getting Started Resources MDN: Your First App https://developer.mozilla.org/en-US/Apps/Quickstart/Build/Your_first_app MDN App Template https://github.com/chrisdavidmills/mdn-app-template Boilerplate App https://github.com/robnyman/Firefox-OS-Boilerplate-App PluralSight Beginning HTML5 Apps for Firefox OS by John Sonmez

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: https://developer.mozilla.org/en-US/Apps/Developing/Manifest JSON format

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.

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" }

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

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" />

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>

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

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>

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

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

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>

Conference Hosted Application Kendo UI MVVM Kendo MVVM Overview http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/overview MVVM in Kendo UI Walkthrough http://docs.telerik.com/kendo-ui/tutorials/mvvm-in-kendo-ui 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.

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>

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);

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

Conference Hosted Application Linq.js – LINQ for JavaScript Source code on CodePlex http://linqjs.codeplex.com/

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();

Conference Hosted Application Kendo UI Templates Kendo MVVM Templates Overview http://docs.telerik.com/kendo-ui/getting-started/framework/templates/overview

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>

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])); } };

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>

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.

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

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.

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>

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" }

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.

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 https://developer.mozilla.org/en-US/docs/WebAPI/Contacts

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(); }

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 () { }

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])); }

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 < email.length; edx++) { # <li>#: email[edx].type #: #: email[edx].value #</li> </ul> </script>

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" } }

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