Firefox OS Apps
•Als PPT, PDF herunterladen•
1 gefällt mir•253 views
An app for Firefox OS is structured with HTML5, CSS3, and JavaScript files including app.css, app.js, and a manifest file that contains metadata like the app name and permissions. The manifest is a JSON file that browsers use to interact with the app. Developers can install apps for testing via the Firefox OS simulator dashboard or directly in the browser to begin coding.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (13)
Andere mochten auch
Andere mochten auch (20)
Firefox OS Apps
- 2. App Development for Firefox OS HTML 5 CSS 3 JavaScript
- 3. Structure of an App App - app.css - app.js - manifest.webapp - images - icons and other images - index.html
- 4. The all important manifest! Web App manifest contains information that a Web browser needs to interact with an app. It is a JSON file with a name and description for the app, and it can also contain the origin of the app, icons, and the permissions required by the app, among other things.
- 5. Installing an App for testing Via the Simulator dashboard Via browser
- 6. Code ON!
- 7. Code ON!
Hinweis der Redaktion
- The main components for creation of apps for fOS are html5, css3, js.(For graphics – webgl libraries, device apis) HTMl5 and CSS3 take care of the designing part : this includes all the UI, buttons, interactive elements. JS contains the functional logic. Now, designing an app from the scratch using barebones html,css and js is quite tedious. Luckily we’ve got lots of Javascript frameworks which do just that. Eg: jQuery Mobile, Titanium mobile, Sencha Touch, Dojo mobile, Moo Tools..etc. They not only give readymade objects like lists, buttons and other controls optimized for touch, but also the css style sheets for designing. (Show code of the online demo launcher) Hemanth Devarapalli (kernelhunter92@gmail.com)
- These are the main contents of an App. As discussed before, we’ve got the CSS files for the styling. There are js files containing the logic. And we’ve got the html files which invoke them. The “index.html” by default is the first page to be called once the app is opened. Via this, other pages can be opened. Then, we have the images. Along with the images used for the pages, we also need images got the icons to be used. Finally comes the all important manifest file. This json contains all the necessary information and meta-data required by the app. The manifest is mandatory for all apps. Hemanth Devarapalli (kernelhunter92@gmail.com)
- This is perhaps one of the most important files in the App. This contains the essential information as well as the meta-data of the application. Some of the fields included are: the name, URL, developer info, launch_path, icons, app_cache, install_paths ..etc Hemanth Devarapalli (kernelhunter92@gmail.com)
- So, first we’ll try using the simulator dashboard. We give the location of the manifest. This automatically runs the app. Here, the whole folder is copied into the phone. Now, the next method is via the browser. This is done by invoking a simple javascript command (show the command). Now, this requires the paths in the manifest to be changed. Here, the origin of the app is considered to be the source url. So, more specific paths are to be given. Hemanth Devarapalli (kernelhunter92@gmail.com)
- A quick revision. We’ve gone through all the required technologies for writing fOS apps : html, css, js. Then, once the app is created and tested in desktop browser, we add the necessary code for making it mobile. That involves adding the manifest file : which contains all the meta-data and the info. Now the remaining part is how to install. Normally, once we finish writing the app, we submit it to the app store. Or else, you can host it on your own server/drive. So, in order to install from the site, we call “mozApps.install()” function giving it the location of our manifest. Although for testing purposes, simulator dashboard can be used for installing the app directly. This concludes the app demo. Hemanth Devarapalli (kernelhunter92@gmail.com)