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.
WHAT YOU NEED
A text editor, Firefox browser, FxOS Simulator addon and Firebug addon for debugging.
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.
<head> <title>Hello Firefox</title>
<h1> Hello Firefox</h1>
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.
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:
"name": "Hello World",
"description": "My first Firefox OS app",
"name": "Your name or organization",
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.
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.
<input type=’text’ id=’testInput’ value=’something’ />
<button id=’testButton’>Click here</button>
Programming the controls
// get the added elements
var button = document.getElementById(‘testButton’);
var txtInput = document.getElementById(‘testInput’);
// click event
var text = txtInput.value;
// Show alert box with this text
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.
Enjoy app making.