STEP 1: CREATE A DIRECTORY NAMED FIREFOXOS
Create a directory named firefox anywhere in your computer.
This will be the base directory – we put all files of our app here.
Create a file index.html (it doesn’t need to be index.html, it could be any name with .html extension) in the hello directory.
SEE IT IN YOUR BROWSER
Open the index.html file with your Firefox Browser. You can double-click or right-click then open with Firefox.
But…doesn’t look like a mobile app!
Because, we’ve not taken care of screen size & others.
TIPS
To test mobile screens with various sizes, press Control + Shift + M in your Firefox!
STEP 3: CREATE MANIFEST FILE
All Firefox OS apps need a manifest file. The manifest file tells the app’s name, description, permissions it requires and some other basic settings.
Manifest file can have any name,I used heremanifest.webapp but it should have .webapp extension.
{
"name": "Hello FireFox OS",
"description": "This An FireFox Hello World Apps",
"launch_path": "/index.html",
"version": "0.0.1",
"icons":{
"16": "/img/icon-16.png",
"32": "/img/icon-32.png",
"48": "/img/icon-48.png",
"60": "/img/icon-60.png",
"128": "/img/icon-128.png"
},
"developer": {
"name":"The DevLine",
"url":"http://www.thedevline.com"
}
"default_location":"en"
}
INSTALL APP IN THE SIMULATOR!
1. Open App Manager by typing about:app-manager in the address bar of browser
2. click Start Simulator > Firefox OS x.x from the bottom bar
3. Click Add Packaged App & select the folder which contains manifest.webapp file you just created.
4. Click update
Go to the simulator & fine our app installed.
MORE FUN: ADD SOME SCRIPTS
We will add a text input box and a button in our simple app.
When user clicks button, an alert box with the text in the input field will be shown.
CHANGE THE index.html FILE
TO ADD THE INPUT ELEMENTS
CREATE A FILE NAMED apps.js
INSIDE YOUR PROJECT JS DIRECTORY( Create A JS Directory for put JS file only )
And Add the flowing code insert your apps.js file .
//to UI elements
var button = document.getElementById('myButton');
var txtInput = document.getElementById('myTextInput');
// Bind click event of the button with an event listener
button.addEventListener('click', function(){
var text = txtInput.value;
// Show alert box with this text
alert(text);
})
Open Simulator and click Update And See the Result
Done! You have created your first Firefox OS app!
PUBLISHING YOUR APPOnce you’ve completed your app, you need to upload it in a server, and share the link.You can submit your app in the Firefox Marketplace for more publicity!
MOZILLA DEVELOPER NETWORK (MDN)
MDNWill be your one-stop center for docs. You may also check out: HTML5,JavaScript,CSS
