Volume Number: 15 (1999)
Issue Number: 5
Column Tag: Tools Of The Trade
by Shelly Kochhar, Metrowerks, Inc.
CodeWarrior tools have always let programmers rapidly write program code. New capabilities of the Integrated Development Environment (IDE) now let you quickly build complete applications by automatically generating the Java rhetoric (the vital but tedious-to-write skeleton code that binds the application together and provides basic UI services), so you can concentrate on building the application itself. As expected of CodeWarrior products, this release includes the flexibility of supporting multiple languages, platforms and application frameworks.
For many moons, programmers could quickly write, test, and deploy programs using CodeWarrior's IDE. But what they always longed for was a set of Rapid Application Development (RAD) tools-as has been available on other platforms-that would let them quickly construct a working interface for their programs. Such tools allow the programmer to craft an application user interface (UI) that would forward any user event it captures to the appropriate program functions.
The long wait is finally over. CodeWarrior Professional Release 5 provides a set of RAD tools that let you visually construct an application. The tools automatically generate code that handle generic initialization functions and manage the drawing of the UI. Of course, this generated code can be edited to suit your application's specific needs. In this first release, the RAD tools support Java code development and include the AWT and Swing classes. Support for PowerPlant and MFC classes will follow in subsequent versions of CodeWarrior.
The RAD tools automate much of the UI programming processes (i.e. rhetoric) so you can concentrate on writing the core application code. CodeWarrior's plugin architecture lets you pick and choose what type of Java program you wish to write. The plugins in this release let you write Java applications, applets, and Java Beans. The RAD tools require JDK 1.1.6 or later for Java code development and execution.
The CodeWarrior RAD tools relieve you of the tedium of manually writing boilerplate code to implement a UI. The tools provide a class-authoring interface which lets you visually create and edit classes, methods, and data members. The RAD tools automatically synchronize declarations and definitions as you modify objects. A Class Wizard walks you through the steps of creating a class, letting you dictate the class' access (private or public), its name, its inheritance, and other defining parameters.
In the building of an application, the RAD tools internally use what's termed a component model. Components are objects that the chosen framework uses to implement application functions. For Java, a component is a Java Bean, and in C++ it is a class object. Components are self-describing objects in that all of the methods, properties, and events they support are contained within the object. Components provide important services such as data persistence and automation.
The RAD tools define catalogs, which are containers of components targeted for a specific purpose. You select a component from these catalogs to construct objects whose capabilities range from one that displays a window, to one that implements a working applet. Selecting the framework dictates at least one default catalog automatically. For example, when building a Java application, you pick components from Java-specific catalogs. CodeWarrior provides catalogs that contain AWT and Swing components.
Components are arranged in the Layout Editor to visually represent the UI elements. You can drag and drop these components from a Component palette onto the Layout Editor's window to form your application's UI. As you make and save changes in the Layout Editor, its display is updated and-behind the scenes- CodeWarrior generates and modifies the application's source code to reflect the arrangement. Components from one or more palettes can be mixed and matched when creating the UI.
The Bean and Application wizards jump-start the development of stand-alone Java programs.
A Bean Wizard generates a skeleton Bean and allows the editing of its exposed properties, methods, and events. The Bean Builder is an extension of the CodeWarrior class browser that provides a hierarchical and alphabetical look at the classes, their methods, and associated fields.
The Application Builder uses components to create a complete application or applet. You use it to connect UI events to Beans, and to hook Beans together into a final application.
To illustrate CodeWarrior's RAD capabilities, we'll build a simple application that displays a joke in a text box in response to a button-press. An alarm bean will count down and cause the application to display the punchline in the same text box. Additionally, the application will include a menu; selecting an item from the menu will clear the text box.
Selecting File->New within the CodeWarrior IDE invokes the dialog box shown in Figure 1.
Figure 1. New Item Dialog Box.
You can create a new RAD project by selecting one of these displayed Wizards:
This panel shows the available stationery and project Wizards. Begin by selecting a project type and enter its name in the Project Name text field. Click OK and the first page of the Wizard appears. You can modify the default settings presented in each pane and move through them using the Back and Next buttons. For example, you can select either the AWT or Swing palette as the default component palette for this project.
When you are satisfied with the configuration, click Finish to display a Summary page showing the settings you have selected, (see Figure 2). Click Generate to create a new project file and the Wizard produces boilerplate code based these settings..
Figure 2. Wizard Summary.
Figure 3 shows the Project View of the Java RAD application. As you can see, the RAD project already has a project skeleton, plus a new user-visible element, called Design . A design includes a particular set of UI layouts and components that are part of the application. A project may contain one or more designs and each design may contain one or more build targets. The IDE uses designs to organize and manage RAD projects. As new source files are created, they are automatically added to each design.
Figure 3. Project Window.
Initial compilation generates the basic frame and application classes: com.metrowerks.JokeFrame and com.metrowerks.JokeApp. Double-click on JokeFrame.java in this window to view the automatically-generated code that defines the frame, shown in Listing 1. [Editor's note: Both the JokeFrame.java and JokeApp.java files are included in the article archive at the MacTech website: <www.mactech.com/>]
When the Wizard configuration is complete this code is automatically generated to define the frame.
/* Title: Joke Application
Copyright: Copyright goes here
Company: Company name goes here
Author: Author goes here
Description: This is an application that tells a joke
*/
package com.metrowerks;
import java.awt.*;
import java.awt.event.*;
public class JokeFrame extends Frame
{
// BEGIN GENERATED CODE
// member declarations
// END GENERATED CODE
public JokeFrame()
{
}
public void initComponents() throws Exception
{
// BEGIN GENERATED CODE
// the following code sets the frame's initial state
setSize(new java.awt.Dimension(350, 450));
setLayout(null);
setTitle("com.metrowerks.JokeFrame");
setLocation(new java.awt.Point(0, 0));
addWindowListener(new java.awt.event.WindowAdapter() {
public void windowClosing(java.awt.event.WindowEvent e) {
thisWindowClosing(e);
}
});
// END GENERATED CODE
}
private boolean mShown = false;
public void addNotify() {
super.addNotify();
if (mShown)
return;
// move components to account for insets
Insets insets = getInsets();
Component[] components = getComponents();
for (int i = 0; i < components.length; i++) {
Point location = components[i].getLocation();
location.move(location.x, location.y + insets.top);
components[i].setLocation(location);
}
mShown = true;
}
// Close the window when the closed box is clicked
void thisWindowClosing(java.awt.event.WindowEvent e)
{
setVisible(false);
dispose();
System.exit(0);
}
}
Embedded comments let you know where to write code that completes the frame or component initialization. You can see from the listing that code is automatically generated that registers this object as an event listener. Code to close the window when the application is quits is also generated.
Similarly, double-clicking on JokeApp.java displays the application code shown in Listing 2.
This code is automatically generated by the wizard to define the application.
/* Title: Joke Application
Copyright: Copyright goes here
Company: Company name goes here
Author: Author goes here
Description: This is an application that tells a joke
*/
package com.metrowerks;
public class JokeApp
{
public JokeApp()
{
try {
JokeFrame frame = new JokeFrame();
frame.initComponents();
frame.setVisible(true);
}
catch (Exception e) {
e.printStackTrace();
}
}
// Main entry point
static public void main(String[] args)
{
new JokeApp();
}
}
The frame and application classes are automatically modified as objects are added through the Layout Editor. Figure 4, shows the AWT and Swing components available to drop into the Layout Editor. This example uses the button, text area and a menubar from the AWT Component palette to create the application's UI.
Figure 4. AWT and Swing Palettes.
Adding components to the Layout Editor is simply a matter of selecting an object from the Component palette and dropping it into the editor window. Once an object is in the window, you can move and resize it as needed. In addition, you can call up the Object Inspector and modify the associated Java Bean's properties such as its color, size, and location, or the events that it handles. Figure 5 shows the GUI under construction.
When you save the Layout, the RAD tool creates the source code. The only exception to this rule is the event handler. When the Events tab in the Object Inspector is selected, and you choose an event to modify, an editor window opens. In this window you type handler code that processes the event; however, the connection to the handler isn't complete until you save the layout.
The code snippet that the RAD tool generates in JokeFrame when button1 is added to the Layout appears in Listing 3.
The first code snippet is the declaration for button1 . When the Layout is saved, this code is generated and placed with other declarations. The second snippet defines the button's attributes and is automatically generated in the body of the code.
// member declarations
java.awt.Button button1 = new java.awt.Button();
and
// the following code sets the frame's initial state
button1.setSize(new java.awt.Dimension(91, 30));
button1.setLocation(new java.awt.Point(220, 330));
button1.setLabel("CLICK HERE");
Figure 5. Layout Editor with button1 and textArea1.
The Properties tab of the Object Inspector for button1 is shown in Figure 6. The Object Inspector window lets you identify to which events the object will respond. By default, all events are disabled. In the Events tab, double-click on the field to the right of the actionPerformed event. This invokes the text editor window that's pre-filled with an empty method for the action selected. Listing 4 shows the auto-generated code and the code we will use to replace it.
The first 4 lines below show code generated by the Wizard for the action to be performed when button1 is pressed. The final line shown defines the action to be performed and replaces line 3 of the auto generated code.
public void button1ActionPerformed(java.awt.event.ActionEvent e)
{
// Fill in code here...
}
We will fill in the code to be:
textArea1.setText ("How many psychiatrists\ndoes it take to change a\nlightbulb?");
Figure 6. Object Inspector for button1.
When the application is run and the button is pressed, this joke will be displayed in textArea1.
After you add the TextArea and save the Layout, the code snippet shown in Listing 5 becomes part of JokeFrame.
This code is added to two different locations within JokeFrame after textArea1 is added to the Layout Editor.
java.awt.TextArea textArea1 = new java.awt.TextArea();
and
textArea1.setSize(new java.awt.Dimension(190, 210)); textArea1.setLocation(new java.awt.Point(110, 60));
The Object Inspector for textArea1 is shown in Figure 7.
Figure 7. textArea1 Object Inspector.
Saving, compiling and running the application displays the Frame as shown in Figure 8.
Figure 8. Running Application.
Voila, we have created our first executable RAD application simply by filling out the Wizard fields, dragging a push button and text area on to the Layout Editor, and modifying two lines of code.
Next, let's add a menubar to clear textArea1 when selected. Building a menu is just as easy as adding any other component. The menu is added to the application by dragging the menubar icon from the palette to the Layout Editor where only a placeholder is seen during construction. The menu editor is accessed by a double-click on the placeholder and a screen such as Figure 9 will appear, allowing you to specify the menu parameters.
Figure 9. Menu Item Editor.
The menu editor also includes dialog boxes the let you set properties for each item (for example, whether an entry should be checked, specified as a separator, a popup menu, etc.) The Object Inspector, of course, can fine-tune the attributes and events of menus and menu items. As you construct menu items with the menu editor, you can see the layout of the growing menu, Figure 10. At runtime it will appear as a menu of the application.
The class declarations added to JokeFrame to support the addition of the menubar are shown in Listing 6.
Figure 10. Menu Under Construction.
After the menubar is added to the Layout and it is saved, the following code snippet is automatically generated in JokeFrame, followed by the initialization code added to a different part of JokeFrame.
java.awt.MenuBar menuBar1 = new java.awt.MenuBar(); java.awt.Menu menu1 = new java.awt.Menu(); java.awt.MenuItem menuItem1 = new java.awt.MenuItem();
and
menuBar1.add(menu1);
menu1.setLabel("File");
menu1.add(menuItem1);
menuItem1.setLabel("Clear");
setMenuBar(menuBar1);
The code in Listing 7 is automatically generated when the actionPerformed event of menuItem is double-clicked in the object inspector.
This code is added to provide functionality when a menu option is selected.
public void menuItem1ActionPerformed(java.awt.event.ActionEvent e)
{
// Fill in code here . . .;
}
We will fill in the code to read
textArea1.setText("");
in order to clear the text box when the Clear menu item is selected. Save, compile and run the application. Pressing the button displays the joke and selecting Clear from the pull down menu clears the text area, Figure 11.
This is the second stage of completion for this application. The text area can now be cleared by selecting the menu option.
Figure 11. Running App with Menu Selection.
The final task is to automate the delivery of the punchline by adding an alarm Bean to the application. We downloaded the alarm Bean (alarm.jar) from the web; it came with documentation which explained its functionality and exposed interface.
The alarm Bean counts down, in seconds, from a specified value and generates an event when the countdown is complete. A reset button is required to begin a new countdown.
The Bean is imported into CodeWarrior by selecting Catalog->Import Components. The alarm Bean now appears in the custom palette of the component catalog.
Similar to the menubar, the alarm object displays a placeholder in the Layout Editor. When the application is run, no alarm object component is visible to the user. The Object Inspector for the alarm Bean is viewed by selecting the alarm placeholder in the Layout Editor. A second button is added to the Layout Editor to provide an alarm reset.
In this application, the alarm will trigger an event five seconds after the reset button is pressed. Adding the alarm to the Layout generates the two lines of code in the frame shown in Listing 8.
Code automatically generated for addition of the alarm.
com.ibm.alarm.Alarm alarm1 = new com.ibm.alarm.Alarm();
alarm1.setTime(new java.util.Date(99,2,4,11,50));
Skeleton code is generated in JokeFrame for the alarm functionality and the actionPerformed event of the alarm is modified to the statement alarm1.setTimerFromCurrent(5);. This statement tells the alarm to count down five seconds from the time the reset button is pressed; then, the alarm's actionPerformed event will execute textArea1.setText ("One good one, but the light bulb has to really want to change");.
Figure 12 shows the completed Layout editor with all objects including the menubar and timer placeholders.
Figure 12. Completed Layout Editor.
Listing 9 shows the entire frame code.
/* Title: Joke Application
Copyright: Copyright goes here
Company: Company name goes here
Author: Author goes here
Description: This is an application that tells a joke
*/
package com.metrowerks;
import java.awt.*;
import java.awt.event.*;
public class JokeFrame extends Frame
{
// BEGIN GENERATED CODE
// member declarations
java.awt.Button button1 = new java.awt.Button();
java.awt.TextArea textArea1 = new java.awt.TextArea();
java.awt.MenuBar menuBar1 = new java.awt.MenuBar();
java.awt.Menu menu1 = new java.awt.Menu();
java.awt.MenuItem menuItem1 = new java.awt.MenuItem();
com.ibm.alarm.Alarm alarm1 = new com.ibm.alarm.Alarm();
java.awt.Button button2 = new java.awt.Button();
// END GENERATED CODE
public JokeFrame()
{
}
public void initComponents() throws Exception
{
// BEGIN GENERATED CODE
// the following code sets the frame's initial state
button1.setSize(new java.awt.Dimension(91, 30));
button1.setLocation(new java.awt.Point(220, 330));
button1.setLabel("CLICK HERE");
textArea1.setSize(new java.awt.Dimension(190, 210));
textArea1.setLocation(new java.awt.Point(110, 60));
menuBar1.add(menu1);
menu1.setLabel("File");
menu1.add(menuItem1);
menuItem1.setLabel("Clear");
alarm1.setTime(new java.util.Date(99,2,4,11,50));
button2.setSize(new java.awt.Dimension(64, 30));
button2.setLocation(new java.awt.Point(130, 330));
button2.setLabel("RESET");
setMenuBar(menuBar1);
setSize(new java.awt.Dimension(350, 450));
setLayout(null);
setTitle("com.metrowerks.JokeFrame");
setLocation(new java.awt.Point(0, 0));
add(button1);
add(textArea1);
add(button2);
button1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
button1ActionPerformed(e);
}
});
menuItem1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
menuItem1ActionPerformed(e);
}
});
alarm1.addAlarmEventListener(new com.ibm.alarm.AlarmEventListener() {
public void AlarmAction(com.ibm.alarm.AlarmEvent e) {
alarm1AlarmAction(e);
}
});
button2.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
button2ActionPerformed(e);
}
});
addWindowListener(new java.awt.event.WindowAdapter() {
public void windowClosing(java.awt.event.WindowEvent e) {
thisWindowClosing(e);
}
});
// END GENERATED CODE
}
private boolean mShown = false;
public void addNotify()
{
super.addNotify();
if (mShown)
return;
// move components to account for insets
Insets insets = getInsets();
Component[] components = getComponents();
for (int i = 0; i < components.length; i++) {
Point location = components[i].getLocation();
location.move(location.x, location.y + insets.top);
components[i].setLocation(location);
}
mShown = true;
}
// Close the window when the closed box is clicked
void thisWindowClosing(java.awt.event.WindowEvent e)
{
setVisible(false);
dispose();
System.exit(0);
}
public void button1ActionPerformed(java.awt.event.ActionEvent e)
{
textArea1.setText("How many psychiatrists\ndoes it take to change a\nlightbulb?");
}
public void menuItem1ActionPerformed(java.awt.event.ActionEvent e)
{
textArea1.setText("");
}
public void alarm1AlarmAction(com.ibm.alarm.AlarmEvent e)
{
String oldtext = textArea1.getText();
textArea1.setText(oldtext +
"\n\nOne good one, but the\nlightbulb has to really\nwant to change");
}
public void button2ActionPerformed(java.awt.event.ActionEvent e)
{
alarm1.setTimeFromCurrent(5);
}
}
Save, compile and run the code. Pressing the CLICK HERE button displays the joke and pressing the RESET button displays the punchline. Selecting File->Clear empties the text area. Figure 13 shows the completed, running application.
Figure 13. Completed, Running Application.
Metrowerks continues it support of the Mac and Mac developers with this release of CodeWarrior. It has combined state-of-the-art visual RAD development with arguably the best compiler on the market.
The addition of RAD tools to the IDE makes programming for both the novice and warrior easier. The RAD Wizards are fast, intuitive, and offer fill-in-the-blank type solutions to remove the tedium of UI programming. For the novice, the tools provide an excellent educational environment, yet they are flexible enough to offer advanced features and custom setup for the warrior.
Future releases will include RAD support for the PowerPlant and MFC frameworks, and Java RAD tools will incorporate features that can create executable applications without user coding or compilation.
Alarm.jar was downloaded from: http://www.alphaworks.ibm.com/stats/beanstat.nsf/a6a0e8acc4ba382b882565ff003dd4a9?createdocument&file=/Alarm/Alarm_100.zip.
Shelly Kochhar is the Product Marketing Manager of Desktop Products at Metrowerks. When she is not doing the marketing thing, she enjoys restoring her Norton 850. Thoughts?, comments?, suggestions?, questions?, skochhar@metrowerks.com.
