Mozilla FireFox comes preinstalled on Ubuntu OS. If it is not preinstalled on your flavor of Linux, install Mozilla FireFox from the below link.
https://www.mozilla.org/en-US/firefox/all/
Once Mozilla Firefox is installed, launch the Mozilla browser and hit ‘Shift + F8’. This will launch the Web IDE. Alternatively you can launch Web IDE by Open Menu --> Developer --> Web IDE.
![mozilla-ubuntu-22 mozilla-ubuntu-22](http://lh3.googleusercontent.com/-Lx9yIbzxWcw/Vcj4iBjIv9I/AAAAAAAAJY8/V8nYTUszXvo/mozilla-ubuntu-22_thumb%25255B1%25255D.jpg?imgmax=800)
![clip_image004 clip_image004](http://lh3.googleusercontent.com/-Pt1rLk9bPtU/Vcj4jnC9NPI/AAAAAAAAJZU/jG-qCx-eutE/clip_image004_thumb%25255B1%25255D.jpg?imgmax=800)
Once the Web IDE is launched, you can create new apps, open existing apps, launch the simulators or create new simulators.
![mozilla-ubuntu-2 mozilla-ubuntu-2](http://lh3.googleusercontent.com/-zaVAsJMgx4c/Vcj4kslvf5I/AAAAAAAAJZs/VFKFbxuw1tw/mozilla-ubuntu-2_thumb%25255B1%25255D.jpg?imgmax=800)
To install a new simulator, select ‘Select Runtime’’ and Click on ‘Install Simulator’ to install a new simulator.
![mozilla-ubuntu-3 mozilla-ubuntu-3](http://lh3.googleusercontent.com/-cXRKEFg9-Ss/Vcj4l8Py1qI/AAAAAAAAJaE/bO2QITYMqUg/mozilla-ubuntu-3_thumb%25255B1%25255D.jpg?imgmax=800)
![mozilla-ubuntu-3-1 mozilla-ubuntu-3-1](http://lh3.googleusercontent.com/-uLSrnjMr4qE/VcpEaC0uYMI/AAAAAAAAJho/9VsMnLHNjnU/mozilla-ubuntu-3-1_thumb%25255B1%25255D.jpg?imgmax=800)
Click on the ‘Install’ against the latest version of the FireFox OS simulator to install the latest version of the simulator.
![mozilla-ubuntu-4 mozilla-ubuntu-4](http://lh3.googleusercontent.com/-XBvZZ4hIQxw/Vcj4mzvms-I/AAAAAAAAJac/IfDd8TAoWzY/mozilla-ubuntu-4_thumb%25255B1%25255D.jpg?imgmax=800)
![mozilla-ubuntu-5 mozilla-ubuntu-5](http://lh3.googleusercontent.com/-xZQkohlTmkI/Vcj4oXZsMbI/AAAAAAAAJa0/9LAYFkERHE0/mozilla-ubuntu-5_thumb%25255B1%25255D.jpg?imgmax=800)
![mozilla-ubuntu-6 mozilla-ubuntu-6](http://lh3.googleusercontent.com/-FuaxyWi-38o/Vcj4plJRnOI/AAAAAAAAJbM/AYTd4H4j4DI/mozilla-ubuntu-6_thumb%25255B1%25255D.jpg?imgmax=800)
It won’t take long to install the Firefox OS simulator. Installing Firefox OS simulator is really fast.
Once the simulator is installed, click on ‘Select Runtime’ from the Firefox WebIDE.
![mozilla-ubuntu-8 mozilla-ubuntu-8](http://lh3.googleusercontent.com/-5Onm3oVyeBo/Vcj4q4vCTxI/AAAAAAAAJbk/_6Xyodz5CEo/mozilla-ubuntu-8_thumb%25255B1%25255D.jpg?imgmax=800)
![mozilla-ubuntu-8-1 mozilla-ubuntu-8-1](http://lh3.googleusercontent.com/-WZ5y15cdwkc/VcpEbT5ChfI/AAAAAAAAJh4/Px7Cnjs4T6Y/mozilla-ubuntu-8-1_thumb%25255B1%25255D.jpg?imgmax=800)
In ‘Simulators’, select version of the Firefox OS you want to simulate. The simulator will be launched.
![mozilla-ubuntu-7 mozilla-ubuntu-7](http://lh3.googleusercontent.com/-ymhk-muUGDg/Vcj4sIPynKI/AAAAAAAAJb8/jYoCi3V-y2Y/mozilla-ubuntu-7_thumb%25255B1%25255D.jpg?imgmax=800)
Now let us run a demo app in the simulator.
In Firefox WebIDE, click on ‘Open App’ and select ‘New App’.
![mozilla-ubuntu-9 mozilla-ubuntu-9](http://lh3.googleusercontent.com/-tUdCa_v5mRI/Vcj4tetPKAI/AAAAAAAAJcU/u8jGIzQaxrA/mozilla-ubuntu-9_thumb%25255B1%25255D.jpg?imgmax=800)
Now you need to select a template for our demo app. Since this is our first app, we will select the ‘HelloWorld’ template.
![mozilla-ubuntu-10 mozilla-ubuntu-10](http://lh3.googleusercontent.com/-jRL-BV3Dn4g/Vcj4uvYJZ8I/AAAAAAAAJcs/idik_kChXlI/mozilla-ubuntu-10_thumb%25255B1%25255D.jpg?imgmax=800)
Provide the project name. It can be anything you like, I just provided it as ‘MyFireFoxProject’’'. Click ‘OK’ after providing the Project Name.
![mozilla-ubuntu-11 mozilla-ubuntu-11](http://lh3.googleusercontent.com/-WW2UIt7qlP8/Vcj4v6C5RtI/AAAAAAAAJdE/Lmmbl2YH-Qg/mozilla-ubuntu-11_thumb%25255B1%25255D.jpg?imgmax=800)
Select a location where the projection can be saved.
![mozilla-ubuntu-12 mozilla-ubuntu-12](http://lh3.googleusercontent.com/-1bKq_e6Bphc/Vcj4xKgtaxI/AAAAAAAAJdc/qQNLQ8fN1dE/mozilla-ubuntu-12_thumb%25255B1%25255D.jpg?imgmax=800)
![mozilla-ubuntu-13 mozilla-ubuntu-13](http://lh3.googleusercontent.com/-GijhwloqV1g/Vcj4yMRfE6I/AAAAAAAAJd0/GeLEVcv2ByY/mozilla-ubuntu-13_thumb%25255B1%25255D.jpg?imgmax=800)
The project is created and displayed in the Firefox WebIDE.
![mozilla-ubuntu-14 mozilla-ubuntu-14](http://lh3.googleusercontent.com/-EXMIS1ewCrY/Vcj4zdrcnpI/AAAAAAAAJeM/6oietM4ZfzY/mozilla-ubuntu-14_thumb%25255B1%25255D.jpg?imgmax=800)
Select the Firefox OS version you want to simulate on right side drop down from the controls in the 2nd line of the Firefox WebIDE and click on
![clip_image010 clip_image010](http://lh3.googleusercontent.com/-ALvfas3YL48/Vcj40nwZAsI/AAAAAAAAJWk/KUj0G-JqQA8/clip_image030_thumb.png?imgmax=800)
![mozilla-ubuntu-15 mozilla-ubuntu-15](http://lh3.googleusercontent.com/-YQGfGMyoJUc/Vcj41wVCW0I/AAAAAAAAJek/cSGJfL4IjkU/mozilla-ubuntu-15_thumb%25255B1%25255D.jpg?imgmax=800)
Once the app is launched on the simulator, the ‘Stop ‘button beside the ‘Start’ button will be enabled and the ‘Start’ button is changed to the ‘Install and Run.’
![mozilla-ubuntu-23 mozilla-ubuntu-23](http://lh3.googleusercontent.com/-Ak--wbyybls/VcpEdNkaOKI/AAAAAAAAJiI/wfe-GTS4cU8/mozilla-ubuntu-23_thumb%25255B1%25255D.jpg?imgmax=800)
![mozilla-ubuntu-16 mozilla-ubuntu-16](http://lh3.googleusercontent.com/-GA0vjT8fKxs/Vcj44WlO5PI/AAAAAAAAJfU/RaU07NsWSYk/mozilla-ubuntu-16_thumb%25255B1%25255D.jpg?imgmax=800)
The app is launched in the simulator and the below screen is displayed. Since we haven’t really added any code and ran only the template, it is perfectly fine.
![mozilla-ubuntu-18 mozilla-ubuntu-18](http://lh3.googleusercontent.com/-UNpsu0Eb50g/Vcj45WNYgCI/AAAAAAAAJfs/Hz5uw2fSvxQ/mozilla-ubuntu-18_thumb%25255B1%25255D.jpg?imgmax=800)
Click on stop button to stop the app running in the simulator.
![mozilla-ubuntu-24 mozilla-ubuntu-24](http://lh3.googleusercontent.com/-QrYIj9oTlec/VcpEebj_lBI/AAAAAAAAJiY/AA-l61uwpkE/mozilla-ubuntu-24_thumb%25255B1%25255D.jpg?imgmax=800)
Now let us make a small change to the app. Select índex.html’ and the file content is displayed.
![mozilla-ubuntu-19 mozilla-ubuntu-19](http://lh3.googleusercontent.com/-F49CzH3hlA4/Vcj48LBLp3I/AAAAAAAAJgc/WT151_QdT3E/mozilla-ubuntu-19_thumb%25255B1%25255D.jpg?imgmax=800)
Now let us change the ‘Hello World’ to ‘Hello Firefox OS’ and save the modifications by doing a Ctrl+S.
![mozilla-ubuntu-20 mozilla-ubuntu-20](http://lh3.googleusercontent.com/-ilx1U27_Dm4/VcpEfpFm5CI/AAAAAAAAJio/2hanQ0_eY8I/mozilla-ubuntu-20_thumb%25255B3%25255D.jpg?imgmax=800)
Now Ínstall & Run‘ the app and modifications done are reflected in the app on the simulator.
![mozilla-ubuntu-21 mozilla-ubuntu-21](http://lh3.googleusercontent.com/-M8TTDPCgch8/Vcj4-T5XcEI/AAAAAAAAJhM/gUmOdWHwVOA/mozilla-ubuntu-21_thumb%25255B1%25255D.jpg?imgmax=800)
We have configured the environment to develop FireFox apps and test them on simulators and ran sample apps. We should be able to create more complicated apps following the same process.
< Previous
No comments:
Post a Comment