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

    
        
        
        
        
        
        
        

    
        

            
            
            

            
            
            

                
                

                    Hello World
                
            
            
            

                home
            
        
    

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.

    
        
        
        
        
        
        
        

    
        

            

            
            

                

                    Hello World
                
                

                    

                        

                            Item 1
                        
                        

                            Item 2
                        
                        

                            Item 3
                        
                        

                            Item 4
                        
                        

                            Divider
                        
                        

                            Item 5
                        
                        

                            Item 6
                        
                        

                            Item 7
                        
                    
                

            
            
            

                home
                home
            
        
    

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.

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