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.
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.
posted by Lauren Smith at 7:10 AM
0 Comments:
Post a Comment
<< Home