Mobile-Web-App: Firefox OS

Showing posts with label Firefox OS. Show all posts

Monday, September 9, 2013

Firefox OS Demo

Firefox OS Demo
Find out more: www.mozilla.com/firefoxos

Sunday, September 8, 2013

Hello World! for Firefox OS WebApps

To build a simple Hello World run on Firefox OS:

Hello World run on Firefox OS Emulator

Create a working directory to hold your source code.

Create a HTML file, named index.html, in the working directory.

<html>
<header>
 <title>Mobile-Web-App</title>
</header>
<body>
 <p>Hello! from <a href="http://mobile-web-app.blogspot.com/">Mobile-Web-App</a>.
</body>
</html>

Create another file, "manifest.webapp".

{ "name": "Hello Firefox OS",
 "description": "Hello from Mobile-Web-App",
 "launch_path": "/index.html"
}

Run with Firefox OS Simulator on desktop: start Firefox browser, start Firefox OS Simulator by Tools from Firefox menu -> Web Developer -> Firefox OS Simulator.

Click on Add Directory button, browse to select your manifest.webapp. The Emulator will start and load your WebApp.

Alternative, you can click the Simulator Stopped if it is not yet started. Then click Connect button.

Firefox OS Simulator

Firefox OS Simulator is a test environment for Firefox OS. Use it to test your apps in a Firefox OS-like environment that looks and feels like a mobile phone. After installing it, go to Web Developer > Firefox OS Simulator to access its features.

Visit https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/ using Firefox Browser to install Firefox OS Simulator Extension.

After installed, you can open Firefox OS Simulator Dashboard by selecting Tools from Firefox menu -> Web Developer -> Firefox OS Simulator.

Firefox OS Simulator Dashboard

Next: Hello World! for Firefox OS WebApps