Building a Java text editor
About this tutorial
Step 1: Creating the project
To start this tutorial, create a project that contains the necessary files for building your user interface.
Using the Project wizard
There are two wizards you can use to speed up this process: the Project wizard and the Application wizard.
- Choose File|New Project to open the Project wizard.
- Make the following changes in the fields:
- Project Name: TextEditor
Note: JBuilder uses the project file name to extract the package name for the classes in the project.
- Type: jpr
- Project Directory Name: TextEditor
- Accept all other defaults.
- Click Next to go to Step 2 of the Project wizard.
- Accept the defaults in Step 2 as shown in the image below. Note where the project, classes, and source files will be saved. Also note that the Make Project Notes File is checked. This option saves the project notes filled out in Step 3 of the wizard to an HTML file.

- Click Next to continue to Step 3 of the Project wizard.
- Fill out the optional title, author, company, and project description fields.
- Press Finish to create the project.
See also:
"How JBuilder constructs paths" and "Where are my files?" in "Creating and managing projects" in Building Applications with JBuilder
Changing the project properties
Now, let's change one of the project properties for this project.
- Select Project|Project Properties and click the General tab.
- Uncheck the Enable Source Package Discovery And Compilation option. In most cases, it's best to leave this option on. For a description of this option, press the Help button on the General page.
See also: "Setting project properties" in "Creating and managing projects" in Building Applications with JBuilder
Selecting the project's code style options
Before you go on, make sure you select the same code style options we used for the JBuilder-generated code in the sample. You do this in the Project Properties dialog box.
To change the code style options,
- Right-click
TextEditor.jpr
in the project pane (upper left), and choose Properties.
- Click the Code Style tab in the Project Properties dialog box.
Choosing the event handler type
First, you need to choose which style event handler to generate. JBuilder can use either anonymous inner classes or separate adapter classes. In this tutorial, we use separate adapter classes.
On the Project Properties Code Style tab, check Standard Adapter for the Event Handling option.
Note: Regardless of which style event handler method you use, the code you put inside the method will be the same.
For more information on the differences between event handler styles,
see Choosing which type of event handler to use in the topic "Working with events."
Choosing how to instantiate objects
Choose which method to use for instantiating objects. JBuilder gives you the option of instantiating objects using Beans.instantiate()
, as well as using the keyword new. This tutorial uses new.
On the Code Style tab, make sure Use Beans.instantiate is unchecked, then press the OK button to close the Project Properties dialog box.
Using the Application wizard
Now add the application files to the project.
- Choose File|New to open the object gallery.
- Double-click the Application icon to open the Application wizard.
- Change the application class name in Step 1 to:
Class:
TextEditClass
- Click Next to go to Step 2 of the Application wizard.
- Change the name and title of the frame class on Step 2 to:
Class: TextEditFrame
Title: Text Editor
- Check all the options on Step 2. The wizard automatically generates code for the selected options. (Notice what each option is as you check it off.)
- Click the Finish button.
- Save the project using File|Save Project.
Click the Design tab at the bottom of the AppBrowser window to open the UI designer.
- The UI designer appears in the content pane.
- The component tree appears in the structure pane.
- The Inspector appears to the right of the designer.
JBuilder in design view

Tip: If the design area is too narrow to see the entire UI in the AppBrowser, you can maximize the JBuilder window and adjust the AppBrowser panes by dragging their borders.
Suppressing automatic hiding of JFrame
By default, a JFrame
will hide when you click its close box. This is not the behavior we want for this tutorial, because the Application wizard added an event handler to call System.exit(0)
when the close button is pressed. Later we will be adding code in this handler to ask the user about saving the file on exit, and we do not want the window to automatically hide if the user says no.
To change the default behavior,
- Select
this
in the component tree.
- Click the Properties tab in the Inspector, and select the
defaultCloseOperation
property.
- Choose DO_NOTHING_ON_CLOSE from the property's drop-down list.
Setting the look and feel
Design time look and feel
If you have changed the JBuilder look and feel from its default, before you start using the UI designer, set up JBuilder so the designer will use the Metal Look & Feel. You can, of course, use others, but we'll use Metal for this tutorial since it is a good choice when designing cross-platform applications.
There are two ways to change the design time look and feel:
- Right-click in the UI designer and choose Metal from the Look And Feel pop-up list. This only changes the look and feel in the UI designer and only for the current project. Using this method, you can design in one look and preview it in the runtime look, all without leaving the UI designer.
- Choose Tools|IDE Options, and select Metal from the Look And Feel drop-down list on the Browser page. This changes the look and feel for the JBuilder environment, but you can still use the first method to switch the look in the designer.
Runtime look and feel
Setting the look and feel on the designer pop-up menu or in the JBuilder IDE Options dialog box does not have any effect on how your UI will look at runtime. To force a particular runtime look and feel, you have to explicitly set it in the main()
method of the class that runs the application (in this case, TextEditClass.java
).
By default, the Application wizard generates the following line of code in the main()
method of the runnable class:
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
This means the runtime look and feel will be whatever the hosting system is using.
To specify Metal, do the following:
- Double-click
TextEditClass.java
in the project pane to open the file in the editor.
- Click
main(String[] args)
in the structure pane at the bottom left, or scroll down in the content pane until you find public static void main(String[] args){
.
- Highlight the
setLookAndFeel()
line of code and copy it to the line just below it.
- Place two forward slashes in front of one of them to comment it out.
// UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
- Change the parameter of the other one as follows:
UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
Note: The following lines of code would be used if you wanted to specify CDE/Motif or Windows Look & Feel:
UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFeel");
or
UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");
If you know you want your runtime to be a particular look and feel, in this case Metal, then be sure to use the same look and feel in the UI designer so you can see the end results. For example, Motif puts more space around components, like buttons, and you have no control over that.
Choose File|Save All to save the project and its files, then proceed to the next step. (It's a good idea to save frequently during this tutorial, for example, at the end of each step.)