|
Building a Thinlet GUI
Figure 2
shows the first GUI you'll build:
Figure 2. The Thinlet GUI:
This example is basically an enhanced calculator.
This example is also a calculator, at least a beginning. For simplicity, I've only added the digits, a period character, a clear button, and the display area. To make the correct configuration file, remember the following:
- Always start the configuration file with a "panel" element.
- Define a table-like area in your panel consisting of 3 columns and 5 rows to hold the widgets.
- Define all widgets inside the panel element.
- If a widget (like the display area) occupies more than one cell in the table, specify the number of columns (or rows) using the rowspan and colspan properties.
A proper configuration file looks like this:
<panel columns="3" gap="4" top="4" left="4" right="4" bottom="4">
<button text=" 7 " name="7" action="display(this, result)" />
<button text=" 8 " name="8" action="display(this, result)" />
<button text=" 9 " name="9" action="display(this, result)" />
<button text=" 4 " name="4" action="display(this, result)" />
<button text=" 5 " name="5" action="display(this, result)" />
<button text=" 6 " name="6" action="display(this, result)" />
<button text=" 1 " name="1" action="display(this, result)" />
<button text=" 2 " name="2" action="display(this, result)" />
<button text=" 3 " name="3" action="display(this, result)" />
<button text=" C " name="C" action="clear(result)" />
<button text=" 0 " name="0" action="display(this, result)" />
<button text=" . " name="." action="display(this, result)" />
<textfield name="result" editable="false" colspan="3" />
</panel>
The Panel Element
Since the panel element specifies columns="3", you'll get a layout table with three columns and as many rows as you need. The widgets are laid out one by one, starting a new row every time a row is filled. The last widget—the textfield—uses colspan="3" to fill the whole row.
The properties gap, top, left, right, and bottom set the space around each cell. If you're familiar with HTML tables, most of the table layout will be familiar to you.
The Button Elements
The text property provides the text you see on each button. The spaces around the characters are only used to make the button somewhat wider. The name property can be given to any Thinlet component, but is often not necessary—use it to identify which button was pressed. The action property is the name and signature of a Java method in the program.
The Textfield Element
A textfield is normally an input field, but here, it is only used for display. Therefore, it is specified editable="false". The colspan property has been mentioned above.
Linking to Java Event Methods
Many widgets react on "events", for example, a press on a button. Since events are defined in the configuration file, but should be handled by a Java program, Thinlet needs to link these together. You can do this by entering the method call in the configuration file.
action="display(this, result)" activates a display method with two parameters. The first is the widget object itself; the second is the display area widget. You may also specify thinlet as a parameter, if your method needs the Thinlet instance, but most often you don't need it, since the method already belongs to the Thinlet instance.
Read more about events here.
To complete the Calculator, you need two methods: display and clear:
public void display(Object button, Object result) {
String s = getString(result, "text");
String t = getString(button, "name");
setString(result, "text", s+t);
}
public void clear(Object result) {
setString(result, "text", "");
}
Here's the complete Example1 program.
| Author's Note: All methods must be declared public or Thinlet will fail! |
Thinlet's Missing Object Model
You might think that Thinlet's widget is a kind of object possessing specific properties, but you'd be wrong. In actuality, Thinlet's widgets are objects, but they're java.lang.Object objects. This means that they don't have their own, specific properties you can play around with. You need some general, utility-like methods to handle their properties.
The text in a textfield for example, is retrieved by getString(texfieldObject, "text"). And it's set in a similar way by setString(texfieldObject, "text", "the new text"). The first parameter is the Thinlet component, and the next one is the name of the property. Thinlet component properties are not only strings, they are also integers, booleans, etc. For example, Table 1 shows the methods for handling properties.
Table 1. Use these methods to handle properties.
| Property type |
getter and setter methods |
| string |
String getString(Object component, String key)
void setString(Object component, String key, String value) |
| integer |
int getInteger(Object component, String key)
void setInteger(Object component, String key, int value) |
| boolean |
boolean getBoolean(Object component, String key)
void setBoolean(Object component, String key, boolean value) |
View the entire list of property types here.
The next thing you need to know is, of course, what properties are available and what their names are. Again, the full list—and it's long—may be found here. Table 2 shows some of the important properties common to all widgets.
Table 2. These properties are just a few of those common to all widgets.
| Key |
Type |
Default |
Description |
name |
string |
|
Identifies the component. |
enabled |
boolean |
true |
Enables or disables this component. A disabled component is
painted gray, and can't respond to user mouse or keyboard input, gain the
keyboard focus, and generate events. |
visible |
boolean |
true |
An invisible component doesn't take place in parent's
layout. |
width |
integer |
0 |
Fixed preferred width of the component irrespectively of
its content. If it is 0, the component will be asked for the preferred
width. |
height |
integer |
0 |
Preferred height of the component, or 0. |
colspan |
integer |
1 |
Specifies the number of cells in a column in the
component's display area. |
rowspan |
integer |
1 |
Specifies the number of cells in a row occupied by the
component. |
weightx |
integer |
0 |
Used to determine how to distribute horizontal space among
grid cells when more space is available for its parent component than
required. |
weighty |
integer |
0 |
The extra vertical space is distributed to each cell height in
proportion to its weight. Default value is 0. |
The width and height properties work with pixels units, and to make them work you must specify them both.
There is no way to write a program that retrieves a list of the properties for a given widget. You may, however, get the widget type by the method getClass(component). It returns a string that identifies the widget. If you want to know the widget properties inside a program, then a solution might be to insert Thinlet's own internal list, which can be found in the Thinlet source. Look for the dtd table at the end of the source code for this article.
New on the Java Boutique:
New Review:
Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling
API boasts simplicity, ease-of-integration, a well-rounded feature
set, and it's free!
New Applet:
Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA
sequences into three useful formats.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
|
