In the previous article we covered setting up the development tools that were needed to be successful in the development of BlackBerry 10 WebWorks apps. Well, now that we have all of the tools you may be wondering what’s next. We like to start with the tried and true starter program of Hello World. In this tutorial we will be creating an HTML5 WebWorks application to deploy on out BlackBerry 10 Dev Alpha as well as our BlackBerry PlayBook.

To start out with we will need to open up our favorite text editor/web editor. In this case, we are using Microsoft Expression Web 4 to do the creation of these projects. What ultimately needs to happen is we need to create a folder to house a index html page and a xml file we are going to eventually name config. You can see below the image of the folder we created along with the 2 files we will be creating.

Once the folder is created we can go back to our text editor and create/save a file with the save name “index.html” in the folder we just created. After this is done we want to create another file and save it as config.xml. Once these two files are created we can go back to the file we named index and start creating the Hello World application.

Once we are in the HTML document we want to give it the basic layout of an html web page. Most of our readers will be familiar with this information so the code below will be pretty self explanatory.

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Hello World</title>
</head>
<body>
   <div style="text-align:center">Hello World</div>
   <script src="webworks.js"></script>
</body>
</html>

We are going to need to include the webworks.js file in any BlackBerry WebWorks projects we do from now on. When installing the WebWorks SDK it also installed this file and can be found at:

C:\Program Files (x86)\Research In Motion\BlackBerry 10 WebWorks SDK 1.0.0.7\Framework\clientFiles

Once it is included in your project we are able to utilize BlackBerry specific features contained in the JavaScript file. Some of these include GPS, Device Motion, Local Database Storage and more. The next file we want to look at is the config.xml.

<?xml version="1.0" encoding="utf-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets"
   xmlns:rim="http://www.blackberry.com/ns/widgets"
   version="1.0.0.0" rim:header="WebWorks Sample">

   <name>Hello World</name>
   <description>This is a sample application.</description>
   <content src="index.html"/>

</widget>

This will define the application for the device we are going to use it on. In the widget node we can define the name of the application as well as the description and where to look for the initial content to load. The initial content we are using right now is going to be index.html but it could change depending on your needs.

This Hello World application is complete and with completing this tutorial you should be able to successfully create a HTML5 WebWorks application for the BlackBerry PlayBook or the Dev Alpha device. If there are any questions do not hesitate to ask in the comments below. Until the next tutorial in the series, Happy Hacking!

Share This