This section describes how to create and entry point file for your "Hello World"
HTML5 app.
The entry point for your app must be called index.html
because this file is the starting point for the project and the app screen on the
device. . Also, make sure that you always
include the file webworks.js in your
index.html file. This should be the first script tag in the head of
your page, and we'll include this shortly.
To create an index file for
your "Hello World" app:
-
In the HelloWorld directory, create a file called
index.html using your preferred editor.
-
Copy and paste the following code into your index.html
file.
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=800, height=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
.emboss {
font-size:4em; font-weight:bold; display:block; font-family: arial, sans-serif;
color: #888888;
text-shadow: 0 1px 1px #CCCCCC;
}
body, html {
height: 100%;
background: -moz-linear-gradient(top, #2a2a2a, #0a0a0a);
background: -webkit-gradient(linear, 50% top, 70% bottom, from(#444), to(#0a0a0a));
}
</style>
</head>
<body>
<a id="text" style="position:absolute;top:200px;left:200px" class="emboss">Hello World</a>
<script src="local:///chrome/webworks.js" type="text/javascript"></script>
</body>
</html>
-
Save the file as index.html to the same location as the
config.xml file you created earlier.
Now, let's take an in-depth look at the code we just added.
- <!DOCTYPE html>
- We start the file by declaring the HTML5 document type, which
must be the very first thing in your HTML file. It's an
instruction to your web browser to tell it what version of HTML
the page is written in.
- <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
- Specifies the character encoding for the document as well as the
content of the meta information.
- <meta name="viewport" content="width=800, height=480,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=no"/>
- The viewport meta tag provides more precise control
over zooming capabilities. To prevent a user from changing the
zoom level, we set the user-scalable property to no. To
set the width of the page to the default screen width of the
device, we set the value to device-width .
- <style>
- This section contains the information to specify the style used
for the "Hello World" app, such as background color and
font.
- <a id="text"
style="position:absolute;top:200px;left:200px"
class="emboss">Hello QNX!</a>
- In this area, we display the words "Hello World".
- <script src="local:///chromium/webworks.js"
type="text/javascript"></script>
- You must include this script tag in all of your
app web pages that use a feature provided by the BlackBerry
WebWorks framework (for example,
blackberry.identity). Furthermore, when you
package your app, the packaging process will automatically
bundle the latest webworks.js file as
chromium/webworks.js.
Before we go any further, let's test our "Hello World"
code and view the app in a browser. Make sure that you're using a
browser that’s HTML5 compliant, such as the Chromium browser.
With the configuration and index files saved, you can now build and package your
app. However, let's quickly test our basic "Hello Wolrd" app in the Ripple
emulator.