- MoSync support for HTML5 applications
- File system structure - drop your content in the LocalFiles folder
- Resource handling
- Hints for making a web-based user interface
- Building and deploying your application
- Example programs
- Adding an application icon
MoSync support for HTML5 applications
To get started quickly, create a new project from one of the HTML5 templates. This will give you an HTML5 project which is ready to build and run. MoSync's HTML5 templates are small working applications that give you a starting point to modify and extend. Here is what the different templates do:
- HTML5/JS/C++ Hybrid Project - This is like the HTML5/JS WebUI template app, but it is set up to show you how to extend your app with code written in C/C++.
Another way to get started is to copy one of the HTML5 example applications and alter it. To copy a project is easy to do in Eclipse, just select the project you wish to copy in the Project Explorer, right click it and select copy. Then right click again and select paste.
File system structure - drop your content in the LocalFiles folder
This is the file system layout you get when creating an HTML5 template project.
The main HTML file and the starting point of the application is index.html. You can name this file anything you want, but if you change the name, also update the following line in main.cpp that opens the start page:
// This line is in main.cpp showPage("index.html");
// This line is in index.html document.addEventListener("deviceready", displayDeviceInfo, true);
Study the sample index.html generated by the template for further details.
Put all your HTML5 resource files (images, audio files, videos, etc.) in the /LocalFiles folder (or in a subfolder to /LocalFiles.) In your HTML5, use relative paths to identify the resources that your application needs, within the /LocalFiles folder.
The /Resources folder contains the data files for the C/C++ layer. Generally, you do not to put anything in this folder unless you are working to develop a C/C++ layer for your app.
(During a normal build, there is a build step called "Bundle", which takes the folders and files in /LocalFiles and packages them into a single file called LocalFiles.bin. (LocalFiles.bin won't be created until you actually build the project, it isn't visible in the file list initally). In /Resources, there is a file called Resources.lst, which specifies which data to package with the application, and it includes LocalFiles.bin. At runtime, when the application is launched, the contents of LocalFiles.bin is unpacked and copied to the application's local file system on the device. To speed up application launching, the system computes a checksum of the content in LocalFiles.bin, and only copies the data if this checksum has changed. If you have very many files, the first application launch may take some time, but subsequent launches will be fast.)
The /Resources folder also contains a sound file, beep.wav, which is used to play the system "beep" sound.This file is referenced in main.cpp. You can replace this file with your own sound file, if you wish. (For more about C/C++ resource handling, see our Resource Compiler Reference.)
For most HTML5 applications, you don't need to touch anything in main.cpp.
Hints for making a web-based user interface
Making cross-platform web-based user interfaces has always ben considered a challenge, first on desktop browsers, and now on mobile devices. The web is full with advice on how to develop mobile web apps, here we highlight some useful advice.
Setting the viewport width
A useful trick for controlling the initial zoom level is to set the width of the browser viewport the head section of the HTML-page, using the viewport meta tag. The following sets the width to 320 pixels and also prevents the page from being zoomed:
<meta name="viewport" content="width=320, user-scalable=no">
- A tale of two viewports — part one
- A tale of two viewports — part two
- A pixel is not a pixel is not a pixel
- Android: Targeting Screens from Web Apps
- Safari Web Content Guide: Configuring the Viewport
- W3C: Use Meta Viewport Element To Identify Desired Screen Size
Using em's as measurement unit
Another trick is to use em's as the unit for page elements and font sizes. One em is equal to the size of the current font size, and thus scale between different screen sizes. For example, in your style sheet, you can use:
Search the web for mobile application development with HTML and CSS and you will find a vast source of information. Keep in mind, however, as HTML5/CSS evolve and new platforms enter the market, best practices for user interfade design and layout may be revised.
Building and deploying your application
- PhotoGallery is a more advanced example app that uses a mixed UI composed of Native Tab screens and multiple WebViews. The code shows how to send messages between WebViews, and how to invoke custom code in C++.
- NFCExample is an example that has the purpose of demonstrating NFC (Near Field Communication). It is a C++ app that has an HTML/CSS user interface. (NFC is currently available only on Android.)
To make your app have an nice icon, you need to have two files in your project. One XML-file with a .icon extension, for example App.icon, and one SVG file with the actual icon image. If your SVG file is named Icon.svg, this is the content of App.icon:
<?xml version="1.0" encoding="UTF-8"?> <icon> <instance size="default" src="Icon.svg" /> </icon>
Place the XML-file and the SVG-file in the top-level root directory of your project (same level as main.cpp).
To create a new XML-file, right-click on the project name in the Project Explorer in Eclipse, and select New/File. Name the file App.icon.
To create an SVG-file, use a drawing program and save the file in the MoSync project folder. Remember to right-click the project name and select Refresh (F5) to make the file be visible in Eclipse. You can also copy an existing SVG-file and paste it into the project by right-clicking the project folder and selecting Paste.
When you rebuild the program in Eclipse, the icon will be added to the resulting application package.
More details can be found in the Application Icons guide.