LWUIT Resource Editor Tutorial Part 1

the this is the first call of but universal city for real
%uh for this part I'm just going to demonstrate the basic usage of the results of the testing
Hello, this is the first part of the new resource editor tutorial For this part I'm just going to demonstrate the basic usage of the resource editor and its new gui builder
And try to show you how to create the most simple hello world application that you can imagin
to get started let's create a simple UI for hello world
And next time I'll try and
explain why it works this way and how you can improve on this
First of all create a form, form is the most basic UI in LWUIT
Its generally what you would think of as a screen
Lets create a button
We can drag it and place it anywhere we want, we can place it here we can place it anywhere
using a layout manager around it
for instance I can say I want it in anyone of these layouts
I can for instance, center it
So it will be centered
I'll call the button
Give it a label hello
or maybe
"Say Hello"
And it updated right here
now I'll create the dialog
Which is the dialog that says hello
and a dialog is just something that pops up
And in it I'm going to place a label that just says hello, like this
Now in the hello world I can define this as a command
which will essentially just popup up the dialog
So when we say hello we want to go to the hello dialog and show it
so this is just the simplest application we can create
It doesn't look like much right now
But lets show it working
We create a theme and everything in LWUIT is just a theme
So here we can say hello and we get the first label of the hello dialog
And go back to this screen
And now we want to customize it to make it look better
So to customize this we use theme properties
So here I can define for instance, the form
the form is the background of everything
I can say that I want my form to have
A bgGradient
First I'll have to define the type as a gradient
Right here
And I can place lots of different types for everything right here
for example I can say its a horizontal gradient or a vertical gradient for my case
And I can define the colors of the gradient
specifically for the gradient I can define it like this, say for instance I want
the gradient to go from red to black like this or you know what lets do blue
I can use obviously one of these color pickers to pick a better color
but right now this is enough
I can customize the button
and here I'll show you something a bit more elaborate
I'll use the border wizard
To create a more 3 dimensional button like this
I can here also pick colors like purple
and the white on top creates a sort of 3 dimentional look that sort of sticks out
Here I define the cuts of the image
How the corners will be cut in an image border, essentially
If you're familiar with a 9 part image border top/bottom left/right etc.
I want to apply it to a button
Here we go
And this is the buttons
selected and that unselected
and pressed
we don't really need all the complex types of buttons
it gets that pops up up
And here we have say hello which looks
much better right now
Now the dialog still doesn't look very good
so lets define a
the foreground color of the dialog, uh the background color
And lets use
That's the dialog, I want it to also have a bgGradient but
this time I'll make it green or something
green
Like this and obviously we'll need the bgType to apply to the dialog as well, like this.
better
And I want the label to have a foreground color
lets first of all make everything
lets make the label transparent, so we can see the dialog behaind it
and that's about it I think
so that's pretty much better
So this is a hello world
And if I go back here
so it will say hello
you can see that the theme
already updated itself even in the GUI builder
And that we can customize it
We can preview our UI in various resolutions
like this
and
We can customize allot of the behaviors in the commands like all of this I'll show you
next time when I demonstrate the GUI builder and the theme creator again
Until next time