What is Firefox OS ?
  • Firefox OS is a new mobile operating system, developed by Mozilla, and based on Linux and the Gecko engine.
  • Firefox OS is Linux-based open source code.
What applications do you need?

To develop and test apps made for Firefox OS you will need:
  • A recent version of the Firefox Browser.
  • The Firefox OS Simulator.
  • A text editor for programming.
Installing the Firefox OS Simulator

After installing Firefox, the next step is the installation of the Firefox OS simulator that will be used to test our applications. With Firefox installed and running, go to the Tools menu and select Add-ons.
Setup For Firefox OS App Development

First Firefox Web Browser open going to the menu bar click Tools -> Add-ons button click:
Using the search box on the top right corner, search for Firefox OS Simulator and install the add-on by clicking the install button.

After the installation of the add-on, you will be able to access the simulator by going to the menu Tools -> Web Developer -> Firefox OS Simulator.

Firefox OS App Development

First start for a "Hello World" app, right now!

Create a file index.html

<!DOCTYPE html>
<html>
<head>
<title>My First App!</title>
</head>
<body>
<h1>Hello, World!</h1>
<br>
<input type='text' id='myTextInput' value="Type something!"/>
<button id='myButton'>Click Me!</button>
<!-- Insert Our Script -->
<script src='hello.js'></script>
</body>
</html>

Next Create manifest.webapp file in project.

 File name manifest.webapp 

 {
"name": "Hello World",
"description": "Yet another Hello, World app!",
"launch_path": "/index.html",
"icons": {
  "128": "/icon.png"
},
"developer": {
"name": "Your name or organiztion",
"url": "http://www.example.com"
},
"default_locale": "en"

}


Create a file named hello.js

// Refer 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);
})

You have created your first Firefox OS app!                 




Comments

Post a Comment