RhoElements - Building Your First App - Part 2 Getting Started

Before we get into coding, let's first download and install RhoElements. After downloading, simply launch the executable and walk through the install wizard. If you connect your device to your computer RhoElements will automatically be installed.

If you launch RhoElements at this point, you will see a startup wizard that basically instructs you to start editing something called a Config.XML file.

As you know RhoElements is a platform that allows you to build and run applications. By itself it does not do anything. You must provide it a set of files (html, javascript, css, etc) that it will intepret and render the final application to the user. The Config.xml file does many things (to be covered in a separate blog posting) including tell RhoElements where the application is.

As I said before, the application files could either be in a remote server (where you would specify the start page to be http://...) or locally on the device's file system as denoted in the above image. For the start of this walk through we will be using the local file system to store the application files that you will build.

While we are on the topic of Config.xml, let's discuss some settings you may want to tweak to make your development experience easier. For this we will be editing the config.xml file that is installed to the device's \Program Files\RhoElements\Config folder:

Copy this file to your computer and edit it with a standard editor. Since RhoElements uses standard HTML languages, you can choose to use any editor of choice. With the config.xml file is open let's make a few adjustments. Please keep in mind that this file is a standard XML file, so use caution to make sure the XML format is not corrupted (i.e. missing quotes, end tags, etc). Also at this time, the Config.Xml file does not support commenting with

, if you put comments in, RhoElements will not launch.

By default, RhoElements runs essentially in 'kiosk' mode. That means it will run in full screen and lock you out of getting to the rest of the device's operating system. So the first thing you will want to do is turn debug mode on by changing the DebugButtonsEnabled tag's value to 1:

What this will do is put a few useful things at the top of the application that will allow you to easily refresh the page, exit the application and enter a different location of the application. (Note that these items overlay the top of your page, so the start of your HTML will be right under it). We will explore the use of these standard buttons in a separate post, for now we will use it just to enable debugging.

Also, by default logging is turned off, but for development you will probably want to turn on logging so that you can debug any errors in your code (I know you are not going to make any mistakes, but for the sake of this example we will turn on logging). Find the tag in the config.xml and change the "0" to "1" for LogError, LogWarning, LogInfo, LogUser and LogMemory. Also note the location where the log file will be stored:

Now that we turned on a useful developer features in the config.xml, let's also change the start page location so that we are ready for the Attendee Tracker application that we will build. Locate the tag and change the value attribute to "file://\RhoApps\MyFirstApp\index.html". We will create this folder on the device to store the application files that we will use. Note: If you have a web server installed on your laptop, you could also just store the files their and set the start page to your server location. This tends to be easier when you are developing so that you don't have to keep copying files over to the device. In a separate blog post I will show you how you can develop a RHoElements application without a device, but for now I am assuming you have a device that RhoElements supports (check the release notes for the list). For this example I am using an ES400 for testing.

Save the file locally to to your computer. Launch RhoElements again and you will see now that it does not show the Getting Started wizard, but it shows the debug buttons and a warning that the start page was not able to be found.

I know you are anxious to start coding at this point, but before we do that, let's take a look at the Help File that was also installed with RhoElements. I know you are saying, "Who reads the manual??". I hate manuals too, but this one is actually quite useful and contains a whole bunch of code snippets that you can copy and paste. Go back to your computers start menu and open up the RhoElements folder to see the documentation link:

In the help file you will find useful information to help you with writing your application to take advantage of the device capabilities. You will notice that it talks about two methods to do things. One method is the use of tags. The second method is through the use of Javascript. Essentially they can accomplish the same things, but each method may be better under certain situations. A separate blog post covers the details. For this example we will be using the javascript methods.

Spend some time perusing the helpfile. For each RhoElements object, it discusses the associated properties you can set, the methods you can call and the events that it may trigger.

You are now ready to begin coding your first RhoElements application. or go