Getting Started


Customer Information window

In this section of the tutorial, you'll begin building the parts of the Customer Information Window. You'll add labels and fields for the Customer Number, Customer Name, Contact, and Phone and connect those fields to data items in the CUSTOMER record. You'll add a label for the Address panel and Find and Cancel buttons.

Adding and connecting labels and fields

  1. From the list above the Beans palette, select the Swing category.
  2. Select JLabel Figure vjlabel not displayed. and drop this bean inside the Customer Information Window.
  3. Select JTextField JTextField and drop this bean inside the Customer Information Window.

    See Figure 97 for the placement of these beans. These beans are for the Customer Number label and its corresponding text area. You will need to resize the JTextField because it is small by default.

  4. Double-click JLabel1 in the Customer Information window.

    The Properties window is displayed with properties listed in alphabetical order.

  5. In the text field, type the name Customer Number.

    The JLabel now says Customer Number. It may be necessary to resize the JLabel so that all of the text is displayed.

  6. Close the Properties window to commit the changes.
  7. Select the Customer Number JTextField with mouse button 2.

    A context menu is displayed.

  8. Select Connect>Connectable Features from the context menu.

    The Start connection from window is displayed.

  9. Ensure that the Property radio button is selected and select text.
  10. Select OK

    The mouse pointer is displayed as Spider connected to a dashed line. This indicates that you are in the process of making a connection.

  11. Click the CUSTOMER record part with mouse button 1.

    A context menu is displayed.

  12. Select Connectable Features.

    The End connection to window is displayed.

  13. Select CUSNUM data, then select OK.

    A blue line is displayed connecting the Customer Number field and the CUSNUM data property in the CUSTOMER record. The description of the connection is displayed in the status area at the bottom of the Composition Editor.

  14. Double-click on the connection you just created.

    The property-to-property connection window is displayed.

  15. From the Source event drop-down list, select keyReleased, then select OK.

    Specifying the keyReleased event for this connection causes the data item CUSNUM in the CUSTOMER record to be updated when the Customer Number field is changed, and causes the Customer Number field (when displayed) to be updated when the data item CUSNUM is changed.

Use the same procedures to create labels and fields for the CUSNAME, CUSCONTACT, and CUSPHONE data items in the CUSTOMER record.

The basic steps you should follow add and connect these parts are:

  1. Add a label.
  2. Change the label to reflect data item name.
  3. Add the field.
  4. Make a property-to-property connection between the field and the appropriate data item in the CUSTOMER record and set the source event.

Adding the Find and Cancel buttons

Complete the following steps to add push buttons to the bottom of your Window.

  1. Press Ctrl and from the Beans palette, select JButton Figure vjbuton not displayed..
    Tip:Pressing Ctrl while you select a bean from the Beans palette enables the Sticky feature. Use Sticky to drop more than one of the same type of bean. To turn Sticky off, select another bean or the selection tool.
  2. Click twice at the bottom of the Window.

    Two push buttons are displayed at the bottom of the Window.

  3. Click the selection tool selection tool.
  4. To change the push button label, double-click on the button on the left side of the Customer Information window to display the Properties window.
  5. Click in the field beside text and type Find.

    The push button is now labeled Find.

  6. Close the Properties window to commit the changes.
  7. Double-click the second button
  8. Click in the field beside text and type Cancel.
  9. Close the Properties window to commit the changes.

Now that you have most of the visual parts of your user interface on the Window, you can use the tool bar to align those parts in the window.


[ Top of Page | Previous Page | Next Page | Table of Contents | Index ]