We'll focus on the Windows platform although AppUp encapsulator will also produce packages that will run on the netbook version of MeeGo. The intention is that these applications will also run on other platforms in the future, such as Tizen™, with little or no changes.
All of the source files described in this article can be downloaded from here .
Note that at the time of writing, the AppUp encapsulator tool is still in beta test. There may be some differences between what is described and shown here and the final release.
<title>HTML5 Application: Simple Example</title>
<link href="app.css" rel="stylesheet" type="text/css" />
Listing 1: Main HTML File Part 1
Now let's implement the body of the web page with a heading and some text. This is shown in Listing 2:
<h1>HTML5 Application: <em>Simple Example</em></h1>
This is a simple first example of an HTML5 application. It illustrates
what is needed to use Encapsulator to package an HTML5 application for
and style sheet. It shows how to call some of the Encapsulator AppUp
APIs and use some HTML5 features.
Listing 2: Main HTML File Part 2
<a href="#" id="FullScreen" class="button black" onclick="fullScreen()">Set Full Screen Mode</a>
<a href="#" id="ExitFullScreen" class="button white" onclick="exitFullScreen()">Exit Full Screen Mode</a>
<a href="#" id="CloseApp" class="button blue" onclick="closeApplication()">Close Application</a>
Listing 4: Main HTML File Part 4
Finally, we provide a style sheet, app.css, that provides some styling for our buttons. I won't list the entire file here as it is somewhat large and not particularly interesting. You can download and examine it if you wish. Listing 6 shows a portion of the file.
margin: 0 2px;
font: 14px/100% Arial, Helvetica, sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
Listing 6: Portion of CSS File
The final thing we need to satisfy AppUp is an icon file. This will be used when the application is packaged. It needs to needs to be in PNG format, named icon.png, and needs to be square with a resolution of at least 128 by 128 pixels. Figure 1 shows the icon I created:
Figure 1: Application Icon
Now that our application looks ready, we can proceed to use Intel AppUp encapsulator to package it as an application.
Using Intel AppUp™ encapsulator
Intel AppUp encapsulator is a web-based tool that takes our HTML5 application and packages it as a native application for AppUp for each platform.
Figure 2: Making the ZIP file
Now we are ready to go to AppUp encapsulator by opening the URL with a web browser. After reading the information in the Introduction tab, go to Make your app. We need to fill in the required fields in the form. If you need help understanding any of the fields, click on the "?" button. After filling in all the information, click on Choose File to select and upload the ZIP file containing the application files. Figure 3 shows an example for our simple example application:
Figure 3: Filling Out AppUp encapsulator Fields
Now you can click on Make it and AppUp encapsulator will examine your application files and let you know if there are any problems; itis pretty good at detecting errors and telling you what is wrong, e.g. missing or too small icon file, incorrect version string format, etc.
If all goes well, the Check status and download tab will become active and you can monitor the status as the AppUp encapsulator packages your application for each platform. The screen shot in Figure 4 below illustrates this.
Figure 4: Check Status and Downloads
When your application is successfully packaged, the web interface will indicate this and provide a link for you to download the packages. For Windows it will be an MSI file and for MeeGo an RPM package. If packaging fails, the reason should be indicated and you can go back and fix the problem and submit it again.
Let me say a few words about what is happening behind the scenes to build the packages: Intel AppUp encapsulator builds a native application which has an HTML rendering engine. Currently it uses the Qt toolkit and QtWebKit. The web view in the application opens your application's index.html file. This wrapper application is compiled for each platform and packaged in the appropriate format, including the icon and any other files you included in the zip archive.
On MeeGo the package is an rpm file. It uses the version of Qt that is installed on MeeGo for netbooks. The package can be installed with the "rpm" command.
On Windows the package is an MSI file which includes a graphical install/uninstall wizard. The package includes Qt and any other DLLs that are needed by the native wrapper application.
Installing, Running, and Uninstalling
Now that our package is built, let's install and test it. On Windows, download the generated MSI file and run it. You should see an installer like the one below in Figure 5:
Figure 5: Application Installer
After the installer completes you can launch the application, either from the icon on the desktop or start menu. For our simple application, it should appear as in Figure 6 below:
Figure 6: Simple Example Running
Now you can finish testing. With our simple application you can try the three buttons and confirm that they perform the expected functions.
If you want to uninstall the application you can do that from the Windows Control panel. On Windows 7 it should look like the screen shot in Figure 7 below:
Figure 7: Uninstalling the Application
Deploying to the Intel AppUp(SM) center
For a real application that you want to offer as a download, you'll want to deploy it to the Intel AppUp center. We'll cover the additional steps to do this in a future article.
Here are a few miscellaneous tips that you may find useful.
Figure 8: Web Inspector
As the HTML5 standard is still evolving, web rendering engines don't support all features. There are some limitations in the Qt WebKit-based rendering engine used by the AppUp encapsulator wrapper program. The HTML5 features that this tool supports are documented here. Over time, you can expect the level of HTML5 support to continue to improve.
You can't do too much testing! Here are some things to consider when you test your application:
- exercise all the features of your application
- test on all platforms you want to support (e.g. Windows and MeeGo)
- test on multiple versions of the platform, e.g different versions of Windows
- verify that the installer program installs all required files, and no more and no less
- verify that the uninstaller removes all files
In this tutorial we've covered the basics of using Intel AppUp encapsulator to package a simple HTML5 application. I hope this simple example provides a good starting point for your applications. In future installments we will look at some more complex HTML5 applications that illustrate additional HTML5 features supported by the AppUp encapsulator.
Copyright © 2011, Intel Corporation.
Tizen™ is a trademark of the Linux Foundation