Presentation is loading. Please wait.

Presentation is loading. Please wait.

Getting Started with Firefox OS JOHN DEVIGHT DMVMUG Reston, VA

Similar presentations


Presentation on theme: "Getting Started with Firefox OS JOHN DEVIGHT DMVMUG Reston, VA"— Presentation transcript:

1 Getting Started with Firefox OS JOHN DEVIGHT DMVMUG Reston, VA

2 AGENDA

3 Overview Conference Application Demo

4 Overview Mobile OS Market * Taken from: CompanyOSMarket Share AppleiOS13.4% GoogleAndroid81.3% MicrosoftWindows Phone4.1% BlackberryBlackberry OS1.0% NokiaSeries 40N/A Linux FoundationMer< 1.0% Tizen AssociationTizenN/A Sailfish AllianceSailfish OSN/A Canonical Ltd.Ubuntu Phone?

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

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

10 Firefox OS Gaia Building Blocks   Look and Feel of other Firefox OS applications  Building Blocks Action MenuButtonsConfirm DrawerEdit ModeHeaders Input AreasStatusSwitches DrawerListsProgress and Activity ScrollingSeek barsTabs FiltersToolbars

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

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  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

14 Hosted Applications Manifest File  Must be named: manifest.webapp  Documentation at:  https://developer.mozilla.org/en-US/Apps/Developing/Manifest  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" }, "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:

19 Hello World Hosted Application Adding a Header Building Block and Content Hello World

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

21 Hello World Hosted Application Add.webapp and.woff MIME Types

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   Add HTML

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   Add HTML Date

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.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 #: time # # for (var idx = 0; idx < sessions.length; idx++) { # #: sessions[idx].title # # } #

33 Conference Hosted Application Displaying the Sessions Using Kendo UI Templates  Create a sessionList section element   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   Add the HTML for the Search field Cancel Clear

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   Add the HTML for the Dialog   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   Add the HTML for the Sidebar   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 hide sidebar menu Sessions

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

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 #: familyName[0] #, #: givenName[0] # # for (var tdx = 0; tdx < tel.length; tdx++) { # #: tel[tdx].type #: #: tel[tdx].value # # } # # for (var edx = 0; edx < .length; edx++) { # #: [edx].type #: #: [edx].value # # } #

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 Speakers Blog: Need more information on DMVMUG Visit Need more information on DMVMUG Visit


Download ppt "Getting Started with Firefox OS JOHN DEVIGHT DMVMUG Reston, VA"

Similar presentations


Ads by Google