Tutorial Tutorial Step 04

Building a Java text editor

Step 3: Creating the menus

In this step, you are going to create the following menus:

TextEdit UI TextEdit UI TextEdit UI

JBuilder Foundation users omit the Edit|Font menu item.

  1. Click the Design tab on TextEditFrame.java if it's not already selected.

  2. Double-click jMenuBar1 in the Menu folder of the component tree to switch to the menu designer.
    (Alternatively, you can select a menu item in the component tree and press Enter.)
  3. Select the File|Exit menu item in the menu designer or jMenuFileExit in the component tree. The menu designer will highlight the selected item.

  4. Click the Insert button   on the menu designer toolbar, or press Insert on the keyboard. A new, blank, highlighted menu item is inserted above Exit.

  5. Type New in the highlighted area.

  6. Press the Down arrow to accept the new entry and move down to the next item (in this case the Exit menu item).

  7. Right-click Exit, and choose Insert Menu Item from the pop-up menu. Type Open.
    Note: All the toolbar actions are also available on the right-click pop-up menu.
  8. Similarly, insert menu items for Save and Save As.

  9. Select Exit and click the Separator toolbar button   to insert a bar. The File menu is now complete.

  10. Right-click the Help item on the main menu bar and choose Insert Menu. This creates a new menu between the File and Help menus. Type Edit as the name for this menu.

  11. Press Enter to move down to the next blank entry. You don't need to press Insert here because there are no menu items on this menu after the current entry.

    Tip: To delete an entry, select it and click the Delete toolbar button, or press the Delete key twice. (The first press of the Delete key clears the text in the entry. The second press removes the entry from the menu.)

  12. Continue to build the Edit menu as shown in the image above, adding three items: Font (JBuilder Professional and Enterprise), Foreground Color, and Background Color. If an entry is too wide for the edit area, the text will automatically scroll as you type. When you press Enter, the menu designer will adjust the width of the menu to accommodate the longest item in the list.

  13. Close the menu designer by double-clicking any component in the UI section of the component tree. This switches the view in the content pane back to the UI designer.

  14. Save the file, then run the application.

    Your UI should now look like this at runtime:

    TextEdit UI

    You should be able to play with the UI and type text in the text area, but the buttons won't do anything yet, and only the File|Exit and Help|About menus will work.

That's the extent of the UI design. Now on to making it functional.

Tutorial Tutorial Step 04