Lesson 2: Getting started in the IDE

Before we get too far ahead of ourselves, it's probably a good time to take a break from actual UJML code and test drive the UIE SDK tools. UIE provides an Eclipse-based IDE which can be used to create, edit, debug, and finally release your brilliant UJML application.

It also comes with a clever little device emulator that allows you test your design on various screen sizes and resolutions. If that doesn't get your juices pumping, that very emulator also includes graphics that make it look like the device it's emulating! Maybe I'm getting a little carried away there.

Let's jump in. Fire up the IDE. It's called "UIE Developer" and it should be in your Start menu.

First thing you see is a screen with three possible selections.

New UJML Project
Samples
Support

The samples are very good, but a little advanced at this point. Support is provided by the online help. So what we are most interested in is taking our code from the last lesson and creating a new UJML project.

Click on New UJML Project. It should bring up some UJML source code in the Edit window. This is a very well-written Hello World sample that does all sorts of things that haven't been covered yet like centering text on the screen and changing the text color and using key accelerators to provide events to the program. It's worth your while to read through this source code and see how programmers at UIE use UJML to create their own applications.

I'm just going to go ahead and delete the entire source code and replace it with the code from the last lesson.

STOP! Wait a second. Last lesson I said we were going to use DTD 1.5, but at the top of this file it specifies DTD 2.0. That's good news for us, because we want to be using the latest and greatest UJML language implementation.

<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 2.0//EN" "http://www.uievolution.com/dtd/ujml-2.0.dtd" >

We'll replace the original 1.5 DTD in our old code with this one from now on. Sometimes it pays to play around with the software instead of reading the manual!

In any case, copy the previous lesson's code into the source code and save the file. Now you've got a working UJML 2.0 program which can be run from the IDE. To run the code, just click on the little green Play icon.

The first thing to notice is that the IDE compiles the program into an intermediate bytecode format called UJBC. Then it opens the emulator using the default skin (the RAZR skin is the default on my system) and loads the UJBC file as a program in the emulator.

The output should say "Hello World!" if you've followed along correctly.

To change the skin, click on the "Edit UJML Debugging Parameters" icon. It is right next to the Play icon and looks like a newspaper. The second tab is "Skin". All available emulator skins are listed along with the UIPlayer type (MIDP, DoJa, BREW, etc) and the screen resolution. Pick the skin that is most appropriate for your development. I use the DoCoMo SH505i skin because I think Sharp is the bestest.

I've only scratched the surface of IDE features, but you're always welcome to play with it and see what other goodies are available. We've covered creating a new UJML project, running an application in the Emulator, and changing the Emulator skin. It's not a lot, by any means, but these seem to be the most often repeated steps in UJML programming, so it's good to get them introduced right away.

Next time we discuss the IDE, it might make sense to talk about publishing and debugging. That will come later. For now, just poke around the IDE and see what you can find.

Lesson 1: Hello World!

Let's begin our first lesson by building a very simple UJML application. It doesn't have to do much, so we can just do the standard Hello World program.

UJML is based on XML, so it requires that a DOCTYPE be specified in order to validate the source code. What? A programming language based on XML? Isn't that a little <VERBOSE>???

Yes. But we'll just overlook that for now and see what sort of benefits we can gain with UJML as a programming language.

Back to the DOCTYPE. UIEvolution's SDK provides three DTDs which define different versions of the UJML language. Since we're hip and up to date, we'll stick with DTD 1.5. (This is subject to change as newer versions are released, but at the time I am writing this 1.5 seems to be the version all the SDK-supplied samples use.)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "http://www.uievolution.com/dtd/ujml-1.5.dtd">

That's boilerplate code right there. It will go at the top of every single UJML file you write. It imports the UIE UJML 1.5 DTD which can then be used to validate the UJML code that we will write later.

The next step is to begin writing code. All code in UJML must be gathered under the <ujml> element.

<ujml>
    some code
</ujml>

That's easy enough. This is also pretty much boilerplate code as well. The <ujml> tag tells the compiler that this is where the UJML code resides.

What comes next is an application element. Think of this as the main object of your program. You declare an application element using the <application> tag.

<ujml>
    <application>
        some code
    </application>
</ujml>

Underneath the <ujml> element, there are actually a few elements which may be used. <partition> elements are linked or included in another file at runtime. <extensions> elements are used to provide access to non-UJML code (native) implementations of functions and events that are not included in the UJML player. <component> is used to pull together related functions, templates, and state machines into a single package (like a C++ namespace). <interfaces> is used to describe the public services of a component. <uses> is used to include external source code directly into the current code.

Needless to say, except for <application> these are beyond the scope of our current program, but we will try to come back to them later.

What we've got so far will compile and run. It won't do anything, but this is the absolute shortest UJML program possible.

Let's make it do something.

There are actually quite a few UJML elements which may be used beneath the <application> element. What we are interested in, though, is getting something up on the screen. UJML uses the <display> tag to define the visual elements which are displayed when the application is active.

<ujml>
    <application>
        <display>
            some display elements
        </display>
    </application>
</ujml>

If you take a look at the Visual Elements reference page, it lists all the available elements that may be used within the <display> element.

We will use the <label> element to display the greeting text on the screen.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "http://www.uievolution.com/dtd/ujml-1.5.dtd">
<ujml>
    <application>
        <display>
            <label>
                <text>Hello UJML!</text>
            </label>
        </display>
    </application>
</ujml>

That's all there is to it! Now we've got a UJML program which will display "Hello UJML!".

Still, it's useless unless we can run it. Save this file for now as "Hello.ujml" and we'll compile and run it in the next installment of this series.

First things first

Hi. I'm Lauren and I'll be your guide to learning UJML. This will be an interactive learning experience for both you the reader and me the writer.

You see, I'm learning this stuff right along with you. So I look forward to your input and questions and we'll see where this can go.

The topic that I will focus on is programming UJML. UJML is UIEvolution's programming language for writing small, embedded programs that will run atop their UIEngine. The UIEngine itself runs on many platforms, so your UJML program will be automatically cross-platform once written. Or that's the promise at least.

Please keep in mind that nothing I say here represents the opinions of UIEvolution or its customers or sponsors or employees. Everything is offerred AS-IS and confers no warranty or license or anything else. Use this site at your own risk.