Nội dung Text: LWUIT 1.1 for Java ME Developers- P7

Chapter 11
You can modify the MIDlet such that the transition occurs between a form and a
dialog. The resulting transition would look like this:
Summary
This chapter has shown us quite a few things. We have seen how to animate
objects by implementing the Animation interface. We have also seen how to use
the transitions that come with the LWUIT library—for forms, dialogs, and menus
as well as for widgets like labels. We have also authored our own transition.
The intricacies of designing transitions that work with dialogs have been dealt
with in some detail. There are some more issues that may need to be addressed
while building custom transitions. The source code of LWUIT transitions provides
extensive insight into these factors, especially from the perspective of handling
graphics related issues and is an invaluable resource for a developer.
[ 287 ]

Painters
All LWUIT components have a multi-layered structure. The first layer erases a
visually obsolete widget, and the subsequent layers then paint the background
followed by the constituent parts of the new version. As a matter of fact, the
background too can be made up of several layers, and that is not all. After a form has
been fully rendered, we can place a layer above it that can be drawn upon regardless
of any changes or animations that may be taking place in the form below. Such a
layer—known as a GlassPane—is usually transparent or translucent so that the
form under it remains visible.
The classes that work as a background painter or a glass pane must implement the
Painter interface. In case more than one background painter is used, they can be
formed into a chain through the PainterChain class so that the background can be
rendered layer-by-layer. Similarly, a glass pane also can have many layers.
In this chapter, we shall familiarize ourselves with the Painter interface and the
PainterChain class. We shall also learn, with the help of examples, how background
painters and glass panes can be used.
The Painter interface
Painter defines the fundamental interface for all objects that are meant to
draw backgrounds or to render on a glass pane. This interface declares only one
method—public void paint(Graphics g, Rectangle rect)—for drawing inside
the bounding rectangle (specified by rect) of a component. The library provides
a class that implements Painter and is used as a default background painter for
widgets and containers. This is the BackgroundPainter class that has (you guessed
it) just the one method paint, which either paints the background image if one has
been assigned or fills in the bounding rectangle of the component with the color set
in its style.

Painters
When we want to paint a background ourselves, we can write our own class
that implements Painter, and set it as the background painter for the relevant
component. The DemoPainter MIDlet, discussed in the next section, shows how
this is done.
The DemoPainter application
This application creates a combo box and uses a theme to set the style for the
various elements that are displayed. When the application is compiled without
setting a custom background painter, the combo box looks as shown in the
following screenshot:
The MIDlet code has the following statement commented out in the MIDlet. When
uncommented, this statement sets an instance of ComboBgPainter as the background
painter for the combo box.
combobox.getStyle().setBgPainter(new ComboBgPainter(0x4b338c));
[ 290 ]

Chapter 12
The recompiled application produces the following display showing the new
background color:
The class responsible for drawing the background is ComboBgPainter, which
implements Painter. The constructor for this class takes the color to be used for
background painting as its only parameter. The paint method determines the
coordinates of the top-left corner of the rectangle to be painted and its dimensions.
The rectangle is then filled using the color that was set through the constructor.
class ComboBgPainter implements Painter
{
private int bgcolor;
public ComboBgPainter(int bgcolor)
{
this.bgcolor = bgcolor;
}
public void paint(Graphics g, Rectangle rect)
{
g.setColor(bgcolor);
int x = rect.getX();
int y = rect.getY();
int wd = rect.getSize().getWidth();
int ht = rect.getSize().getHeight();
g.fillRect(x, y, wd, ht);
}
}
[ 291 ]

Painters
Drawing a multi-layered background
In actual practice, there is hardly any point in using a custom painter just to paint
a background color, because the setBgColor method of Style will usually do the
job. Themes too can be used for setting background colors. However, painters are
very useful when intricate background patterns need to be drawn, and especially if
multiple layers are involved. PainterChain, described in the next section, is a class
designed for handling such requirements.
The PainterChain class
It is possible to use more than one painter to render different layers of a background.
Such a set of painters can be chained together through the PainterChain class.
The only constructor of this class has the form public PainterChain(Painter[]
chain) where the parameter chain is an array of painters. The contents of chain will
be called sequentially during the painting of a background, starting from the element
at index 0 to the last one.
There are two methods of the PainterChain class that provide support for adding
painters to the array underlying the chain. A new painter can be added either to the
top (the prependPainter method) or at the end (the addPainter method) of the
array. The array itself can be accessed through the getChain method.
PainterChain implements Painter so that the setBgPainter method can be used
to set a PainterChain as well as a lone painter, which means the paint method also
is present here. The function of paint in PainterChain is to call the paint methods
of the painter array elements one by one starting at index 0.
The DemoPainterChain application that comes up next shows how a chain of
painters can be used to draw the multiple layers of a background.
The DemoPainterChain application
The DemoPainterChain example uses alphaList (the list for DemoList MIDlet in
Chapter 5) to show a painter chain in action. After organizing the form and the list,
we set up a painter array to hold the three painters that we shall deploy.
Painter[] bgPainters = new Painter[3];
Once we have the array, we create three painters and load them into the array.
The first (lowest) painter, which will fill the bounding rectangle for the list with a
designated color, goes in at index 0. The next (middle) layer, at index 1, will draw
an image at the center of the list. Finally, the topmost layer for writing a text a little
below the center line of the list is inserted at index 2.
[ 292 ]

Chapter 12
bgPainters[0] = new Eraser(0x334026);
try
{
bgPainters[1] = new ImagePainter(Image.createImage(
"/a.png"));
}
catch(java.io.IOException ioe)
{
}
bgPainters[2] = new TextPainter("This is third layer");
Now we are ready to instantiate a PainterChain object, and install it as a
background painter for the list.
PainterChain bgChain = new PainterChain(bgPainters);
alphaList.getStyle().setBgPainter(bgChain);
The list itself will be drawn on top of these three layers, and the background layers
will be visible only because the list is translucent as determined by the transparency
value 100, set by the AlphaListRenderer instance used to render alphaList. The
list now looks as shown in the following screenshot:
[ 293 ]

Painters
A close inspection of the screenshot that we have just seen will show that the layers
have indeed been drawn in the same sequence as we had intended.
The three painters are very similar in structure to the ComboBgPainter class we
came across in the previous example. The Eraser class here is virtually identical to
ComboBgPainter. The other two classes work in the same way, except for the fact
that TextPainter draws a line of text, while ImagePainter draws an image.
class TextPainter implements Painter
{
private String text;
TextPainter(String text)
{
//set the text to be written
this.text = text;
}
public void paint(Graphics g, Rectangle rect)
{
//get the dimension
//of background
int wd = rect.getSize().getWidth();
int ht = rect.getSize().getHeight();
//create and set font for text
Font textFont = Font.createSystemFont(
Font.FACE_PROPORTIONAL,Font.STYLE_BOLD,Font.SIZE_LARGE);
g.setFont(textFont);
//set text color
g.setColor(0x0000aa);
//position text slightly below centerline
int textX = wd/2 - textFont.stringWidth(text)/2;
int textY = ht/2 - textFont.getHeight()/2 + 3;
//write text
g.drawString(text, textX, textY);
}
}
class ImagePainter implements Painter
{
private Image bImage;
ImagePainter(Image bImage)
{
//set the image to be drawn
this.bImage = bImage;
}
public void paint(Graphics g, Rectangle rect)
{
//get the dimensions
//of background
[ 294 ]

Chapter 12
int wd = rect.getSize().getWidth();
int ht = rect.getSize().getHeight();
//position image at center
int imageX = wd/2 - bImage.getWidth()/2;
int imageY = ht/2 - bImage.getHeight()/2;
//draw image
g.drawImage(bImage, imageX, imageY);
}
}
When an image is used on the background of a form, we have seen that it is scaled to
occupy the entire form real estate. But if the same image is used as an icon for a label,
then it is drawn in its actual size. This task of scaling the image for backgrounds is
taken care of by BackgroundPainter, which is used as the default bgPainter.
The scaleImage attribute of Style determines whether the background image of a
component should be scaled (scaleImage == true) or tiled (scaleImage == false),
and its default value is true. When required, scaleImage can be set to any value
by calling the setScaleImage method of Style. Before drawing the background
image, the default background painter calls the isScaleImage method of Style. If
the returned value is true and the dimensions of the background image are not the
same as those of the background (specified by the parameter rect of paint method),
then the image is scaled to the same size as that of the rectangle to be drawn into.
This image is then set as the background image so that the scaling does not have to
be done over and over again.
In our case, we need not check the scaleImage attribute, as we have already decided
that scaling is required. So all we need to do is compare the dimensions of the image
with those of the background we are drawing on and scale it if required. Then we
save the scaled version so that it will not be necessary to scale it the next time this
method is called. In order to see the effect of scaling, we replace the paint method
of the ImagePainter class with the following version. The highlighted code does
the scaling.
public void paint(Graphics g, Rectangle rect)
{
//get the dimensions and position
//of background
int imageX = rect.getX();
int imageY = rect.getY();
int wd = rect.getSize().getWidth();
int ht = rect.getSize().getHeight();
//check if image dimension different
//from component background dimension
if (bImage.getWidth() != wd || bImage.getHeight() != ht)
[ 295 ]

Painters
{
//scale image and save
bImage = bImage.scaled(wd, ht);
}
//draw image
g.drawImage(bImage, imageX, imageY);
}
The new paint method creates the following list. Note the change in background
color, which is now the same as that of the image, as it has been scaled up to cover
the original background.
Using a glass pane
A glass pane is indeed like a fully transparent and distortion free glass sheet placed
over a form. We can draw whatever we want on the pane, and only the part of the
form under that pattern will be obscured. The rest of the form will be visible. Also,
the pattern drawn on the glass pane will not be affected by any transition, animation,
or change of any kind that may take place on the form below.
In the world of LWUIT, a glass pane is also a painter. However, unlike the painters
we have used so far, a glass pane can only be used with a form. Let us see, with the
help of the DemoGlassPane example, how to install a glass pane.
[ 296 ]

Chapter 12
The DemoGlassPane application
For this application as well, the basic building block is alphaList on which we shall
place a glass pane with text written on it. The action required is very simple as the
following snippet shows:
try
{
demoForm.setGlassPane(new ImagePainter(Image.createImage(
"/text.png")));
}
catch(java.io.IOException ioe)
{
}
We just created an instance of our old friend ImagePainter and installed it as a glass
pane on demoForm. The statement invoked for installing the glass pane is one of the
two that can be used. We could have used the static method of PrinterChain shown
below to get the same result.
PainterChain.installGlassPane(demoForm, new ImagePainter(Image.
createImage("/text.png")));
The glass pane that is created by the previous code is shown in the next screenshot.
As expected, we find that only the portion of alphaList directly below the text is
obscured, but the rest of the list is clearly visible.
[ 297 ]

Painters
The fact that we have used ImagePainter to render text does not mean that it is
mandatory for a glass pane to incorporate an image, as we could also have used a
TextPainter object. It is just that writing diagonally positioned text is very easy
when an image is used. In general, any valid painting activity can be used for
glass panes.
In order to illustrate the ease with which image orientation can be changed, let us
write the same string as in the previous screenshot but rotated by 90°. In order to
do this, replace the statement within the try block in the code shown earlier for
installing the glass pane with the one shown below:
demoForm.setGlassPane(new ImagePainter(Image.createImage(
"/text.png").rotate(90)));
The following screenshot shows the new Glass Pane:
The rotate method used above assumes that the image to be rotated is a square one.
A word of caution here, rotating images through angles that are not multiples of 90°
is rather inefficient and should be avoided as far as possible. Also, such angles may
not be supported on all platforms.
[ 298 ]

Chapter 12
A GlassPane with multiple layers
A glass pane, like a background, can have as many layers as we want. Our next
example, DemoLayeredGP, has two layers. The first layer draws a circle at the center
of the pane, and the second draws a six pixel wide band right across its middle.
Obviously, the glass pane that we want has to be a painter chain, and we create
this chain exactly as we had created the chain for background painters.
Painter[] glassPanes = new Painter[2];
glassPanes[0] = new CirclePainter();
glassPanes[1] = new BandPainter();
PainterChain gpChain = new PainterChain(glassPanes);
Then the painter chain is installed using the same approach as the one for a single
layer glass pane in the previous example.
//install glass pane
//using either of the following statements
//PainterChain.installGlassPane(demoForm, gpChain);
demoForm.setGlassPane(gpChain);
The glass pane will now look like the following screenshot with the band over the
circle. Observe that both these figures remain stationary even if the list beneath
is scrolled.
[ 299 ]

Painters
We can reverse the order of the two panes simply by changing the respective indices
in the painter array.
glassPanes[1] = new CirclePainter();
glassPanes[0] = new BandPainter();
The circle will now be drawn over the band, as shown in the following screenshot:
[ 300 ]

Chapter 12
Summary
Painters are essentially layers on which we can paint. Such a layer can be placed
under the visual elements of a component forming its background. It can also be
placed above a form as a normally transparent pane through which the form can
be seen. Anything that is rendered on such a pane remains unaffected by changes
(such as animations) in the form below.
Painters are convenient tools, for example, when we want custom patterns to be
used as backgrounds. This is especially true when we need to support different
combinations of such patterns in a range of components. Such variability can be
easily programmed by arranging the constituents in layer sets that can be formed
into PainterChains. A chain can then be selected for use, depending on the
required combination.
There are many instances when a message needs to be superimposed on a UI.
Consider an email client, which shows a message overlay that first says "Sending
mail..." when the Send command is executed and then changes to "Your mail was
successfully sent" upon completion of the activity. Glass panes are very useful for
implementing such effects. As in the case of background painters, chains of glass
panes can be used to form varied combinations of a set of texts, images, or
rendered elements.
In this chapter, we have studied painters and their applications quite extensively.
The four examples have demonstrated the use of both background painters and
glass panes—single layered as well as chained.
[ 301 ]

Effects and Logging—
Useful Utilities
Effects is a class in the com.sun.lwuit.util package intended to implement visual
effects. The current implementation has just one effect, which appends a reflection of
an image just below the original one. In this chapter, we shall learn about this class
and go through an example that shows its use.
Logging has been around for a long time in the world of Java. We have had several
logging software products like Ceki Gülcü's log4j (now an Apache Software
Foundation project). We also have Sun's own logging API for JDK 1.4 as well as
Lumberjack for JDKs 1.2 and 1.3. Through the Log class, LWUIT provides an
easy to use and pluggable logging framework for Java ME applications.
Here we are going to gain considerable insight not only into the use of Log, but also
into its structure through three sample MIDlets. The first of these will use the Log
class to illustrate its application. The second will develop a subclass giving details
of what happens under its hood. Finally, the third example will demonstrate the
concept of installing a subclass.
Using Effects
The Effects class is intended to implement visual effects that enhance the
appearance of a widget. Currently this class supports one such effect that simulates
a reflected image placed below the original. The resulting combination looks as if the
original image is being reflected in still water.

Effects and Logging—Useful Utilities
The Effects class
Effects is a static class that has two methods to return the image received as a
parameter with the reflection appended.
Method Parameters Description
public static Image source—the image to which Returns the original image
reflectionImage the reflection effect is to be with its reflection appended
(Image source) added. to it. The height of the
reflection will be half that
of the source image. The
transparency of the image
will start from 120.
public static Image source—the image to Returns the original image
reflectionImage which the reflection effect with its reflection appended
(Image source, is to be added. to it. The height of the
float mirrorRatio, reflection will be determined
int alphaRatio) mirrorRatio—the ratio by mirrorRatio. The
of the height of the reflected transparency of the image
image to that of the source will start from alphaRatio.
image. Generally less than 1.
A mirrorRatio of 0.5f
will generate a reflection
that is half the height of
the source.
alphaRatio—the value of
transparency at the starting
point of reflection.
Our next section shows a demo application for Effects.
The DemoEffects application
This application creates an image and then calls the Label constructor with the
image returned by one of the static methods of the Effects class.
//create label with reflected image
//use either statement -- one at a time
Label effectLabel = new Label(Effects.reflectionImage(
sourceImage));
//Label effectLabel = new Label(Effects.reflectionImage(
sourceImage, 0.7f, 80));
[ 304 ]

Chapter 13
When the first statement is used, the resulting reflection is half the height of
sourceImage, and the transparency of the image at the starting point is 120.
This image is shown in the following screenshot:
If we now comment out the first statement and uncomment the second, then we shall
get a reflection that has a greater height than the one above. Also, the starting edge
of the reflected image will be somewhat lighter than what we saw in the previous
image, as alphaRatio is now 80. The following image is what we get with the
second statement:
The reflectionImage methods need careful handling with respect to background
color and alphaRatio. You may have to go through a few iterations to arrive at an
attractive rendition. The API documentation recommends an alphaRatio in the
range of 90 to 128 but sometimes, as in the case of this example, even 80 works
quite well.
[ 305 ]

Effects and Logging—Useful Utilities
Logging with LWUIT
The Log class provides a framework for recording information at runtime. By
default, the specified information is logged using the Record Management System
(RMS). If the device supports the File Connection API defined by JSR 75, then
the file system is used for logging. The recorded messages can be retrieved and
displayed to provide insight into the behavior of a program.
There are four levels at which logging can be done: DEBUG, INFO, WARNING,
and ERROR. The lowest (and default) level is debug, and error is the highest. The
basic function of this stratification is to establish a threshold so that only messages
allocated to a level equal to or higher than this threshold are logged. If the level
for logging has been set at debug, all messages will be logged. Similarly, with the
logging level set at warning, only warning and error messages will be logged. The
logic for classifying information into a hierarchy of levels has to be determined
by the programmer, and there is nothing in the framework to decide what kind of
information should fall into each category.
The debug level, as its name suggests, would normally be used to record information
required to debug code. Let us take a hypothetical method that uses five variables
that go through a series of computations after initialization. Finally, a division by
zero occurs, but it proves difficult to figure out how the divisor is being set to zero.
The situation may be something like the following:
int a = ....;
int b = ....;
int c = ....;
int d = ....;
int e = ....;
.
.
a = (c - d) * e;
.
.
b = e % c;
.
.
if(b > 11)
{
b = 11;
}
.
.
int f = ....;
.
[ 306 ]