App Framework and Firefox OS

Intel’s App Framework is an open source, MIT licensed, cross platform HTML5 framework for building mobile applications. It is hosted on GitHub where you can contribute to the project, especially the Firefox OS theme.

App Framework is comprised of three main areas.

  1. Query selector library
  2. UI/UX library
  3. Plugins

The query selector library implements a subset of jQuery* API’s, with additional API’s targeted for mobile development. The UI/UX library offers top notch performance on a broad range of devices, including responsive design for phones and tablets. Plugins, the heart of App Framework UI, allow developers to write and share code for App Framework applications.

Firefox OS support

With the 2.1 launch of App Framework, Firefox OS is now officially supported. This was easy to accomplish, due to Firefox supporting vendor neutral prefixes on many CSS features, like CSS transforms. We will be adding an official Firefox OS theme soon.

Getting the code

To see everything that is offered in the framework, take a look at the App Framework website. You can find the quickstart guide, API documentation, and the UI component preview. You can clone the source code at GitHub

Download the zip from GitHub and extract the zip file. View the index.html file to see a sample of the kitchen sink and example API’s. You can test drive App Framework UI and see a demonstration of the provided plugins.

Building your first app

Here we will build a sample Hello World app with App Framework UI. Create a new folder and copy over the following files from the kitchen sink into your project

  1. build/ui/appframework.ui.min.js
  2. build/css/af.ui.base.css
  3. build/css/icons.css

Next create an index.html file, manifest.webapp, and app.js. You can find documentation for the manifest.webapp on MDN. See below for the folder structure for this project.

__folder__
    index.html
    manifest.webapp
    js
        appframework.ui.min.js
        app.js
    css
        af.ui.base.css
        icons.min.css

Open up your index.html file in your favorite editor and copy in the following code for the basic ‘Hello World’ app

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
 
    <head>
        <title>FF OS sample</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/af.ui.base.css" />
        <script type="text/javascript" charset="utf-8" src="ui/appframework.ui.min.js"></script>
        </head>
 
    <body>
        <div id="afui">
            <!-- this is the main container div.  This way, you can have only part of your app use UI -->
            <!-- this is the header div at the top -->
            <div id="header">
            </div>
            <!-- content is where your panels live/scrollable area -->
            <div id="content">
                <!-- here is where you can add your panels -->
                <div data-title='Firefox OS' id="main" class="panel" selected="true">
                    Hello World
                </div>
            </div>
            <!-- bottom navbar. Add additional tabs here -->
            <div id="navbar">
                <a href="#main" id='navbar_home' class='icon home'>home</a>
            </div>
        </div>
    </body>
 
</html>

Test

Now you can test your sample app on the Firefox OS simulator or a device. You should see the header with the title “Firefox OS”, “Hello World” in the content area, and a footer with a single icon at the bottom. Since we did not add any additional panels, there isn’t much you can do. Let’s update our code and add more. Open up index.html in your editor and change it to the following.

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
 
    <head>
        <title>FF OS sample</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/af.ui.base.css" />
        <script type="text/javascript" charset="utf-8" src="ui/appframework.ui.min.js"></script>
        </head>
 
    <body>
        <div id="afui">
            <div id="header">
            </div>
            <div id="content">
                <div data-title='Firefox OS' id="main" class="panel" selected="true">
                    Hello World
                </div>
                <div data-title='Page 2' id="page2" class="panel">
                    <ul class='list'>
                        <li>
                            <a href='#page2'>Item 1</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 2</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 3</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 4</a>
                        </li>
                        <li class='divider'>
                            Divider
                        </li>
                        <li>
                            <a href='#page2'>Item 5</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 6</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 7</a>
                        </li>
                    </ul>
                </div>
 
            </div>
            <!-- bottom navbar. Add additional tabs here -->
            <div id="navbar">
                <a href="#main" id='navbar_home' class='icon home'>home</a>
                <a href="#page2" id='navbar_home' class='icon gear'>home</a>
            </div>
        </div>
    </body>
 
</html>

View the new code

Run your updated code again in the simulator or device. You will see two items in the bottom tab bar, and a link to “Page 2”. Navigate to Page 2 and you will see the slide up transition, along with a stylized list. You can scroll the list using the built in JavaScript scroller. Hit the back button at the top to go back in the history stack.

What’s next?

Get a starter template and start building your application! Check out the App Framework website for more documentation and tips.

We are working on a Firefox OS theme and you can check our work out. We love feedback and are happy to fix any bugs found. Just head on over to GitHub and report the issues. If you want to extend your app more, build plugins and share them with other developers

Screenshots

Below are some screen shots from the Intel® XDK App Preview application, powered by App Framework. This is a cross platform application that runs on phones and tablets.

login

list

demo

*Other names and brands may be claimed as the property of others.

About Ian Maffett

Ian Maffett is a software engineer at Intel working on the Intel® XDK products. He is the creator of App Framework, a high performance mobile HTML5 framework for building cross platform applications. His primary focus is HTML5 performance and UX on mobile devices.

More articles by Ian Maffett…

About Jason Weathersby

Jason Weathersby is a Technical Evangelist for Mozilla, evangelizing Firefox OS. He is also a committer on the BIRT project at the Eclipse Foundation, and has co-authored several books on BIRT integration. He is a proponent of HTML5, Open Source and all things related to web-based gaming.

More articles by Jason Weathersby…


8 comments

  1. Mte90

    So now Intel XDK App Framework support Firefox OS?
    In the page of XDK i haven’t found nothing about it.

    May 28th, 2014 at 09:39

    1. Ian Maffett

      *edit* sorry – they are not available yet (my fault). We are working on getting support in the XDK and will have information when it’s ready.

      May 28th, 2014 at 12:55

  2. Alfredo Ramirez

    Already have an app published in the Firefox Marketplace using the Intel’s App Framework!

    May 28th, 2014 at 09:59

  3. Ian Maffett

    @Mte90 – Firefox OS builds are available as “beta” currently in the XDK.

    May 28th, 2014 at 12:52

  4. Web developer

    I’m a big fan of Mozilla and Firefox but I also have to be realistic and take a look at the bigger picture. Firefox OS is so far behind the competition that there is simply no conceivable way for it to catch up and become relevant.

    May 29th, 2014 at 02:21

    1. Chris Heilmann

      Can you elaborate on that? It is one point saying everything else is better, it is much more useful to tell what is missing and why something is behind the competition.

      June 9th, 2014 at 02:32

      1. Web developer

        Android keeps 52 percent of smartphone sales , iOS about 41.9 percent, leaving just 7 percent of the market for other players to fight over.

        BlackBerry and Windows Phone are struggling for the market left behind by iOS and Android.
        Firefox OS is a new player, and is too young to get enough marketplace to grow and make real money.

        Personally I think Firefox OS can improve the web by encouraging developers to build better applications that can be run on any device with a Web browser.

        June 9th, 2014 at 03:13

  5. Sorin

    @Web developer, as history teaches us so often sales are quite a very subjective indicator of grouth. I am primarily an Android Developer and belive me when I say that Android as a framework is a very cumbersome, cluggy overly complicated system. Whiles in Firefox OS you have a slick simplified structure.No Java runtime no overly optimized VM or such. Furthermore, Anndroid is power hungry, it generates way to many objects, and you generally have to write much more Programatic code for custom Views animations etc. Whiles on Firefox OS you can use the elegance and simplicity of the web tech, no matter what framework or implementation. What I do hope is for Firefox OS to also run on Modular hardware Phones. Like The Project Google is working on, project Ara. If Firefox OS manages to bring out a phone that is modular and cheap they will soure sky high in the comming years.

    June 12th, 2014 at 01:39

Comments are closed for this article.