UpPreviousNext

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

  1. Start Builder Xcessory.
  2. 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).

Create container window

  1. Instantiate a frame object.
  2. Change the "layout" resource to BorderLayout.
  3. Add an AwtMenuBar to the frame.
  4. The menu bar snaps to the top of and stretches to the width of the frame container.
  5. Add an AwtMenu to the menuBar.
  6. You can drop the menu on top of the menuBar instance name in the Browser.

    Note: The "menu" is actually a collection consisting of menu, menuPane, and menuItem.
Set the label resource for the menu to "File".
  • 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".
  • The new instance, mainContainer, takes the default constraint resource of Center, resizing to fill the frame.
  • Select the awtFrame, and make it a class by selecting Make Class from the Edit menu.
  • 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.
  • Enter Classes view.
  • Most of our remaining edits will take place in Class view.

    Working with Dialogs

    1. Create a Dialog as child of an awtFrame. (For more information on creating a Dialog, see Tutorial Three: Creating a Dialog .)
    2. Place a Dialog as a child of the Frame.
    3. Enter "D" when you are prompted for the class name.
    4. 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.

      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.
    1. Add a Button to the awtDialog, naming the instance "dismissButton", and set its label to "Dismiss".
    2. The hierarchy in Classes view now looks like Class View Hierarchy :
     

    Class View Hierarchy

    Editing the Layout

    Next, add children to the mainContainer.

    1. Change the layout resource on the mainContainer to GridBagLayout.
    2. Add the following children to the mainContainer instance, naming them and editing their gridX and gridY resources using the extended editors:
    3. Type

      Instance Name

      gridX

      gridY

      List

      awtList

      0

      0

      Choice

      choice

      2

      0

      Button

      clearButton

      2

      1

      Label

      label

      0

      2

      TextField

      textField

      1

      2

      Label

      label1

      0

      3

      Label

      selectLabel

      1

      3

    4. Set these additional GridBagLayout constraints for each of the mainContainer children as follows:
    5. Instance Name

      Resource

      Value

      awtList

      fill

      BOTH

      gridHeight

      2

      gridWidth

      2

      choice

      fill

      HORIZONTAL

      clearButton

      fill

      HORIZONTAL

      selectLabel

      fill

      HORIZONTAL

      gridWidth

      2

      textField

      fill

      HORIZONTAL

    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

    4

    choice

    items

    Single Select

    Multiple Select

    clearButton

    label

    "Clear"

    label

    label

    "Add Item:"

    textField

    columns

    30

    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

    1. Display the Style Manager by selecting Styles from the Browser Managers menu.
    2. Create a substyle of the BaseStyle.
    3. With BaseStyle selected, select Create Substyle from the Style Manager Edit (MB3 Quick Access) menu.
    4. Edit the new style.
    5. Double-click on the style or select Edit Style from the Style Manager Edit (MB3 Quick Access) menu.
    6. Change the Style Name to DefaultFont.
    7. Select "font" from the Resources combo box.
    8. Set "font" to "Helvetica-18" either by entering the value or using the extended editor.
    9. Apply the definition to the style.

    Creating the ItemFont style

    To create the ItemFont style:

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

    Apply styles to classes

    To apply styles to classes:

    1. Apply the definition to the style.
    2. Select DefaultFont in the Style Editor and select the awtFrame inside of class "A" and apply the DefaultFont style to the tree.
    3. 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".
    4. Select ItemFont in the Style Editor and apply it to awtList.
    5. 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:

    1. Click the (...) button next to the event to bring up the Callback Editor.
    2. Select the Edit button and add the code to appropriate event.

    3. 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

    or

    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

    or

    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.

    UpPreviousNext