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.