First Time Firefox OS - Hello World

First Time Firefox OS- Hello World

Pedro Tavares, [email protected]://infptavares.blogspot.pt

Mozilla has launched its mobile operat-ing system (OS). In the general opin-ion, this is one of the toughest markets

to compete, given the competition composedby Apple iOS and Google Android.

Where can I get a Firefox OSphone?

Fireweb the new LG mobile phone with Firefox OS.

LG is already part of the family Firefox OSwith LG Fireweb, which is sold for e150 eurosunlocked. There are 3 devices on the market withFirefox OS. Brazil is the first country to have 2simultaneously, LG and Alcatel One Touch FirewebFire.

This OS is not yet a rival of iOS and Android.

The technical specifications of this LG leave thisclear:

Operating System: Firefox OS v1.1Display: 4 (480 x 320)Camera: 5 MP with flashInternal memory: 2GBBattery: 1,540 mAhConnections: Bluetooth, Wi-Fi, 3GWeight: 122.50 g

Movie demonstration on Youtube .

First Time Firefox OS - Hello World

-Firefox OS Simulator

To begin the application development, it is necessaryto have installed the latest version of the browserMozilla Firefox.

Then will be presented all steps necessary toinstall the emulator of the operating system.

1. First of all, is necessary install the latest versionof the Firefox Browser. The version for this tutorialis 26.0.

of 4

http://www.youtube.com/watch?v=t_7sTP7IRn4

2. Through the Firefox, access the following link.https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/

3. This will bring up the following Add-On pageas shown below:

4. Click on the green Add to Firefox button.This will start downloading the Firefox OS Simulatoradd-on as shown. It might take a while on slowconnections, so be patient. A downloading progresswindow will be presented, as depicted below.

5. When the download is complete, it will show adialog where the permission to go ahead and installthe add-on will be asked.

6. Then the Dashboard appears in the browser.Otherwise, just follow the following steps.

7. To start the simulator, one must click ”run-ning”, marked with a circle in the following image.

What is Firefox OS?

Firefox OS is an operating system from Mozilla,Linux-based but designed in HTML, to allowthat applications communicate directly with thehardware using JavaScript.

of 4

https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/

https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/

Hello World Firefox OS

To build an application for the Firefox OS at leastfour files are needed: 1 HTML file, 1 CSS file, 1JavaScript file and a manifest.webapp file.

For this first example, lets keep things simple. Wewant to simply display a Hello World at the top ofa picture, that just opens a message when clicked.

HTML (index.html)

1 <! doctype html><html>

3 <head><meta cha r s e t=”UTF−8”>

5 <t i t l e >Hel lo World F i r e f ox OS</ t i t l e ></head>

7 <body><a r t i c l e c l a s s=” content ”>

9 <h1>HELLO WORLD Fi r e f ox OS</h1><img id=” p i c tu r e ” width=”100%” s r c=”

imagem . png” a l t=”Cl i ck me”>11 </a r t i c l e >

<s c r i p t s r c=” s c r i p t . j s ”></s c r i p t>13 </body>

</html>

Javascript (script.js)

( func t i on ( ) {2 var $p i c tu r e = document . getElementById ( ’

p i c t u r e ’ ) ;

4 $p i c tu r e . on c l i c k = func t i on ( ) {a l e r t ( ’ http :// i n f p t ava r e s . b logspot . pt ’ )

6 } ;}) ( ) ;

Manifest (manifest.webapp)

1 {” ve r s i on ” : ” 1 . 0 ” ,

3 ”name” : ”He l lo World” ,” launch path ” : ” index . html” ,

5 ” d e s c r i p t i o n ” : ”He l lo World” ,” i c on s ” : {

7 ”16” : ”/ i c on s /16 . png” ,”22” : ”/ i c on s /22 . png” ,

9 ”32” : ”/ i c on s /32 . png” ,”48” : ”/ i c on s /48 . png” ,

11 ”64” : ”/ i c on s /64 . png” ,”128” : ”/ i c on s /128 . png”

13 } ,” deve loper ” : {

15 ”name” : ”Pedro Tavares ” ,” u r l ” : ” http :// i n f p t ava r e s . b logspot . pt”

17 } ,” i n s t a l l s a l l ow ed f r om ” : [ ”∗” ] ,

19 ” d e f a u l t l o c a l e ” : ”en”}

The manifest.webapp file contains the informa-tion that the browser needs to interact with theapplication. This is a JSON file that contains thename and description of the app, information on theprogrammer, the homepage of the application andthe icons used.

At this point, it is necessary start the simulator,click Add Directory and select the manifest of yourapp, if the manifest is valid click the Run button.

Add the application into simulator

To open Firefox OS click the Firefox button - WebDeveloper - Firefox OS Emulator. If you arenot using Windows go to Tools - Web Developer- Firefox OS Emulator.

The application will be automatically installed inthe emulator. After that, go to the menu and openit.

of 4

The project initially conceived is now available inthe emulator. The whole basis for building appli-cations pass through HTML, interconnected withJavascript. It is extremely easy create applicationsfor this operating system.

HTML5 is here to stay and will be the languageof the web for many years. Firefox OS implementsthe latest specifications and allows the applicationsto use these web languages. With the free marketplace for programmers and cheap mobiles, FirefoxOS has everything to grow and become a successfuloperating system.

Document generated via LatTeX.

of 4

First Time Firefox OS - Hello World

Documents

Transcript of First Time Firefox OS - Hello World