Tutorial Nine: Creating a Java Applet or Application

In this tutorial, you will create a set of classes that can be run as an applet or an application. (The finished application is shown in Example Java Application .) This tutorial moves along quickly. For more detailed information on creating and customizing objects, see the example, Java Example .

Example Java Application

Start Builder Xcessory

If you have been using Builder Xcessory, select New from the Browser File menu to begin a fresh session. Be sure that you have chosen Java as your language (Browser:Options:Choose a Language).

Start Builder Xcessory.

Create container window

The menu bar snaps to the top of and stretches to the width of the frame container.

You can drop the menu on top of the menuBar instance name in the Browser.

Instantiate a frame object.
Change the "layout" resource to BorderLayout.
Add an AwtMenuBar to the frame.
Add an AwtMenu to the menuBar.
Note: The "menu" is actually a collection consisting of menu, menuPane, and menuItem.

Rename the menuItem to "dialogButton" using the Instance Name field of Resource Editor, and set its label to "Dialog".
Add a menuSeparator below the dialogButton by dragging with MB2 and dropping on top of the menuPane.
Add another menuItem below the menuSeparator, renaming the instance "closeButton" and setting its label to "Close".
Add a Panel to the awtFrame, renaming the instance "mainContainer".

Select the awtFrame, and make it a class by selecting Make Class from the Edit menu.

Enter Classes view.

Set the label resource for the menu to "File".

The new instance, mainContainer, takes the default constraint resource of Center, resizing to fill the frame.

If you skip this step, Builder Xcessory still creates the awtFrame and its children as a single class in the generated code.

Enter "A" when you are prompted for a name for the class.

Most of our remaining edits will take place in Class view.

Working with Dialogs

Dialogs (and Frames) are automatically created as classes so that the events are handled correctly. Builder Xcessory generates a handleEvent() method that is placed on the top-level element of each class you create.

Create a Dialog as child of an awtFrame. (For more information on creating a Dialog, see Tutorial Three: Creating a Dialog .)
Place a Dialog as a child of the Frame.
Enter "D" when you are prompted for the class name.
Note: If a class contains AWT objects that are subclassed from the abstract class Window (Frame, Dialog, FileDialog), this can be a problem as they do not propagate events up the instance hierarchy. Therefore it is important that these objects are always created as classes with their own handle.Event() methods.

The hierarchy in Classes view now looks like Class View Hierarchy :

Add a Button to the awtDialog, naming the instance "dismissButton", and set its label to "Dismiss".

Class View Hierarchy

Editing the Layout

Next, add children to the mainContainer.

Type

Instance Name

gridX

gridY

List

awtList

Choice

choice

Button

clearButton

Label

label

TextField

textField

Label

label1

Label

selectLabel

Instance Name

Resource

Value

awtList

fill

BOTH

gridHeight

gridWidth

choice

fill

HORIZONTAL

clearButton

fill

HORIZONTAL

selectLabel

fill

HORIZONTAL

gridWidth

textField

fill

HORIZONTAL

Change the layout resource on the mainContainer to GridBagLayout.
Add the following children to the mainContainer instance, naming them and editing their gridX and gridY resources using the extended editors:
Set these additional GridBagLayout constraints for each of the mainContainer children as follows:

Refer to GridBag Layout Illustrated for an illustration of how these settings affect object layout:

· Resource gridX and gridY specify the location of the object on the grid.

· gridWidth and gridHeight specify the number of cells to span.

· Fill specifies the dimension in which to span the cell.

Note: Layout changes as you change the constraint resources.

Final layout

GridBag Layout Illustrated illustrates the final layout:

GridBag Layout Illustrated

4. Set the following resources:

Instance Name

Resource

Value

awtList

visibleRows

choice

items

Single Select

Multiple Select

clearButton

label

"Clear"

label

"Add Item:"

textField

columns

label1

label

Select Item(s):

selectLabel

label

nothing selected

Setting Font Styles

Now create a style for the font according to the following steps:

Creating the DefaultFont style

With BaseStyle selected, select Create Substyle from the Style Manager Edit (MB3 Quick Access) menu.

Double-click on the style or select Edit Style from the Style Manager Edit (MB3 Quick Access) menu.

Display the Style Manager by selecting Styles from the Browser Managers menu.
Create a substyle of the BaseStyle.
Edit the new style.
Change the Style Name to DefaultFont.
Select "font" from the Resources combo box.
Set "font" to "Helvetica-18" either by entering the value or using the extended editor.
Apply the definition to the style.

Creating the ItemFont style

To create the ItemFont style:

Create another substyle of BaseStyle.
Change the new style's name to ItemFont.
Select "font" from the Resources combo box.
Set "font" to "Courier-22".

Apply styles to classes

To apply styles to classes:

Select "To selected Tree" from the Style Manager Apply menu. Note that the style can't be applied to the dialog instance "d". Instead, you should apply the style to the dialog class "D".

Apply the definition to the style.
Select DefaultFont in the Style Editor and select the awtFrame inside of class "A" and apply the DefaultFont style to the tree.
Select ItemFont in the Style Editor and apply it to awtList.
Apply the ItemFont style to selectItem.

Adding events

Add the following events using the Resource Editor:

Instance Name

Event

Value

awtList

listDeselect

select()

listSelect

select()

choice

stateChangedEvent

changeSelection()

clearButton

actionEvent

clear()

textField

actionEvent

addItem()

dialogButton

actionEvent

activateDialog()

closeButton

actionEvent

close()

dismissButton

actionEvent

dismissDialog()

Adding code to the events

Now add code to the events, as follows:

Click the (...) button next to the event to bring up the Callback Editor.
Select the Edit button and add the code to appropriate event.
Note: You can generate the class file and load it into an editor to edit all the events at once. Refer to Generating and Compiling Java Code .

Code

All code should go into the User Code Blocks:

public boolean select(ItemEvent e)

{

// Begin user code block <select>

String str[] = _awtList.getSelectedItems();

String selItems;

int i;

System.out.println("Length = " + str.length);

if (str.length == 0)

{

_selectLabel.setText("nothing selected");

}

else {

selItems = str[0];

for (i = 1; i < str.length; i++) {

selItems += ", " + str[i];

}

_selectLabel.setText(selItems);

}

return true;

// End user code block <select>

}

public boolean changeSelection(ItemEvent e)

{

// Begin user code block <changeSelection>

_awtList.setMultipleMode(_choice.getSelectedIndex()==1);

return true;

// End user code block <changeSelection>

}

public boolean clear(ActionEvent e)

{

// Begin user code block <clear>

int count = 0;

int i;

count = _awtList.getItemCount();

for (i = 0; i <= count; i++) {

_awtList.deselect(i);

}

_selectLabel.setText("nothing selected");

return true;

// End user code block <clear>

}

public boolean addItem(ActionEvent e)

{

// Begin user code block <addItem>

_awtList.addItem(_textField.getText());

_textField.setText("");

return true;

// End user code block <addItem>

}

public boolean activateDialog(ActionEvent e)

{

// Begin user code block <activateDialog>

_d.show();

return true;

// End user code block <activateDialog>

}

public boolean close(ActionEvent e)

{

// Begin user code block <close>

if (e.getActionCommand().equals("Close")) System.exit(0);

return true;

// End user code block <close>

}

public boolean dismissDialog(ActionEvent e)

{

// Begin user code block <dismissDialog>

if (e.getActionCommand().equals("Dismiss"))

this.setVisible(false);

return true;

// End user code block <dismissDialog>

}

You have now finished building your Java application.

Save your interface

Save your interface (Browser:File:Save) and generate the code (Browser:File:Generate).

You are now ready to compile your Java source into byte codes and run the finished application.

Generating and Compiling Java Code

Compiling the application

To run this as an application, you can use the class A directly (because it has a main() routine), or run it from the MainApp class generated by Builder Xcessory.

Depending on which method you use, compile the code by entering on the command line:

javac MainApp.java

javac A.java

Since the Java code generator automatically creates a Makefile, you can also use the following command to compile your code:

make -f makefile-java

Running the application

To run the application, on the command line type either:

java MainApp

java A

Java Applet

If you are creating an applet that pops up the frame from within a browser, use the driver class created by Builder Xcessory (MainApp by default). To make the MainApp class an applet, select the Make Main File An Applet toggle button on the Application panel of the Java Generation Preferences dialog (Browser:Options:Code Generation Preferences).

To compile the java code, on the command line enter:

javac MainApp.java

Embedding the example in a browser

To embed this example within a browser, you cannot use the Frame class, the MenuBar, or the Dialog. Instead, you must start this tutorial by creating an Applet from the Palette.

Follow the directions for this tutorial from step Add a Panel to the awtFrame, renaming the instance "mainContainer". on Add a Panel to the awtFrame, renaming the instance "mainContainer". . Upon completion, deselect the Main and HTML toggles on the File Names panel of the Java Generation Preferences dialog (Browser:Options:Code Generation Preferences).

Compiling Java code

To compile the Java code enter:

javac MainContainer.java

Running Your Java Applet

Java Applet

To run this example as an applet that pops up the frame from within a browser, select one of the following methods:

· Start the browser and read the file MainApp.html .

· If you created an Applet from the Palette and named it MainContainer, read in the file MainContainer.html.

You have now completed Tutorial Nine.

Documentation:

Builder Xcessory 5.0 Users Guide

Search form

Documentation: