Tutorial: Building a Java text editor
This tutorial builds a Java application in JBuilder called TextEdit, which is a simple text editor capable of reading, writing, and editing text files. It is also able to set the text font and color, as well as the background color of the text editing region. The tutorial demonstrates how you can work primarily with the visual design tools (UI Designer, Component Inspector, Component Tree, and Menu Designer) while switching to the editor to add event-handling code by hand as necessary.
Note: We recommend working from the online version of this tutorial, as it may be more up to date than the version in the hardcopy books. If you wish to work from paper, you can use the Print button on the JBuilder Help Viewer to print out each page of the tutorial. The tutorial takes approximately two hours to complete.
More about this tutorial
TextEdit application UI
Step 1: Starting your project with wizards
- Choose File|New and double-click the Project icon to create a new Java project.
- Edit the File field to read:
[d:]\JBuilder\myprojects\TextEdit\TextEdit.jpr
where [d:] is the drive in which JBuilder is installed.
- Choose Finish.
- Choose File|New again and double-click the Application icon to open the Application Wizard.
Note: If you have no projects open when you start the Application Wizard, JBuilder automatically runs the Project Wizard first to create the project, then opens the Application Wizard.
- Change the class field on Step 1 of the Application Wizard:
Class: TextEdit
- Click the Next button and change the following fields on Step 2:
Class: TextEditFrame
Title: TextEdit
- Check all the options on Step 2. (Notice what each option is as you check it off.)
- Click the Finish button.
- Select TextEditFrame.java in the Navigation pane (upper left), and click the Design tab at the bottom of the AppBrowser window to display the visual design tools.
- The UI Designer appears in the Content pane.
- Component Tree appears in the Structure pane.
- The Component Inspector appears at the right of the AppBrowser.
JBuilder in Design mode:
- Make sure the layout for the parent container (represented by this in the Component Tree) is BorderLayout. Look at the first node in UI section of the Component Tree. If it says anything besides this (BorderLayout), change the layout as follows:
- In the UI section of the Component Tree, select the parent container (the first one, called this).
- In the Inspector, select the layout property and click its down arrow. Select BorderLayout from the list, and press Enter to commit the change to the generated source code.
- Choose File|Save All to save the project and its files. (It's a good idea to save frequently during this tutorial, for example, at the end of each step.)