05 Oct 2013

Hello World Firefox OS

The next big thing is already here  – Firefox OS. And just like everybody else, they have a “marketplace” for selling apps too. The race has already began. With HTML5, we must understand that every web developer will be in the race to build the most amazing app for Firefox. So let’s not lag, here is a quick Hello World tutorial for FX OS.

PRE-REQUISITES

HTML/JS/CSS basics.

WHAT YOU NEED

A text editor, Firefox browser, FxOS Simulator addon and Firebug addon for debugging.

LET’S BEGIN

In FxOS we design the User Interface with HTML/CSS and Javascript for programming controls like buttons, forms etc. We’ll be making 3 basic files – an HTML (.html) , Javascript (.js) and CSS (.css).

Creating the main page

Create a directory to save your files, say Hello in your hard disk. And create a file index.html (any name will do) and save it with the basic HTML tags.

[code lang=”html”]

<!DOCTYPE html>
<html>
<head> <title>Hello Firefox</title>
</head>
<body>
<h1> Hello Firefox</h1>
</body>
</html>

[/code]

You can test if the file is working by opening it in Firefox browser. You can also use CSS media queries to build a responsive layout for the application. Use ctrl+shift+M to check your app in different screen sizes in Firefox browser.

preview

Writing a manifest

 Every Firefox OS app needs a file called Manifest with the extension .webapp. This file contains the app’s name, description, permissions it requires and other settings like author, icon, launch path etc. So open up your text editor and type these:

[code lang=”js”]

{

"name": "Hello World",

"description": "My first Firefox OS app",

"launch_path": "/index.html",

"icons": {

"128": "/img/icon-128.png"

},

"developer": {

"name": "Your name or organization",

"url": "http://your-homepage-here.org"

},

"default_locale": "en"

}
[/code]

And save it as manifest.webapp in your directory.

Time to see it in action

Fire up the Firefox OS Simulator by going to Tools>Web Developer>Firefox OS Simulator from the Firefox browser. Now click on Add Directory and browse to the manifest.webapp you have just created.

RunSimulator

Tada! Your Hello World is now installed and running in Firefox OS.

Let’s make it little interesting

Now let’s add a button and an input box. In index.html, add an input box and a button inside the <body></body> tag.

[code lang=”js”]

<input type=’text’ id=’testInput’ value=’something’ />
<button id=’testButton’>Click here</button>
<script src=’helloworld.js’></script>

[/code]

Programming the controls

 As we know that the programming parts are done by Javascript, we now write the helloworld.js. In your text editor type these:

[code lang=”js”]
// get the added elements

var button = document.getElementById(‘testButton’);

var txtInput = document.getElementById(‘testInput’);

// click event

button.addEventListener(‘click’, function(){

var text = txtInput.value;

// Show alert box with this text

alert(text);

})
[/code]

And save it as helloworld.js in your directory. Open Firefox OS Simulator and click update.

Congratulations! You have made your first FxOS app. Now start experimenting.

Download project files

Resources

HTML
https://developer.mozilla.org/en-US/docs/Web/HTML

CSS
https://developer.mozilla.org/en-US/docs/Web/CSS

JS
https://developer.mozilla.org/en-US/docs/Web/JavaScript

FxOS API
https://developer.mozilla.org/en-US/docs/Web/API

Demos
https://developer.mozilla.org/en-US/demos/?menu

Enjoy app making.