Getting Started With the NetBeans IDE BlueJ Plugin

   
By Dana Nourie, September 2008  

Articles Index

BlueJ is an integrated development environment (IDE) specifically designed for teaching students object-oriented programming using the Java programming language. Although BlueJ covers the introductory phase of learning to program, the NetBeans IDE offers powerful tools for professional developers. Taking the inevitable step from one into the other has been a difficult barrier for students -- until now.

The collaboration of the NetBeans IDE and BlueJ teams has resulted in the NetBeans BlueJ plugin. This tool creates a smooth migration path for students learning the Java programming language from beginner's stage through to the use of professional development tools. In addition, this IDE provides a seamless path for students to switch from educational tools into a full-featured, professional IDE. The BlueJ plugin makes the transition between these two environments easier for students and teachers. Even if you are not familiar with BlueJ, the NetBeans BlueJ plugin is a great way to learn to use an IDE.

This article gets you started using the NetBeans BlueJ plugin. First, you'll discover how easy it is to load existing projects and edit them, and then you'll learn to create a new project and use drag-and-drop features to create a graphical user interface (GUI).

Developers unfamiliar with the BlueJ software will also learn everything they need to get started with this IDE and will benefit by following along with the examples.

To follow the descriptions and code examples, download the NetBeans IDE version 6.1 or later. In addition, download the BlueJ project Calculator.zip, which the first part of this article uses as an example. In the second part of the article, you create a small application called Address Book to learn various other IDE features.

Setting Up the NetBeans BlueJ Plugin

Once you have installed and opened the NetBeans IDE, go to the Tools menu and select Plugins. Click the Available Plugins tab, and scroll down to select the box next to BlueJ Project Support as shown in Figure 1, then click the Install button. Once you accept the license, the plugin will be installed and ready to use.

Figure 1: Installing the BlueJ Project Support Plugin
 
NetBeans IDE Features for BlueJ Users

The NetBeans IDE provides a wealth of features that make writing applications of all types and sizes faster and easier. These features include the following:

  • Marking of syntax errors in the Source Editor before you compile
     
  • A variety of navigation commands that enable you to navigate easily between code elements and files
     
  • A GUI builder in which you visually design the user interfaces for Swing technology-based desktop applications
     
  • Code templates that allow you to enter long code snippets with just a few keystrokes

The BlueJ plugin for the NetBeans IDE includes support for the project structures of both the BlueJ and the standard NetBeans IDE. The coding productivity features work with both project types.

Opening and Working on Projects in the Source Editor

Next, unzip the Calculator.zip file that you downloaded, and save it in a special folder. In NetBeans IDE, go to the File menu, and select Open Project. Locate the place you uncompressed the files to, and click Open Project as shown in Figure 2.

Figure 2: Opened Project in the IDE
 

If you click on the Project tab, you'll see a set of smaller icons resembling a file structure rather than icons representing objects. If you click the BlueJ View tab, you'll see icons representing the objects. Double-clicking a class icon in either view opens an editor for that class's source code. Open the Calculator.java file by double-clicking the class icon.

The NetBeans IDE does not support direct interaction with objects. Instead, to execute a program in the NetBeans IDE, you must run its main method. Classes with a main method are indicated in the BlueJ Project View by a green arrow, as indicated in Figure 3. Notice that Calculator.java contains the main method for this application. Calculator.java opens in the Source Editor in the right side of the screen.

Figure 3: Green Arrow Indicating the Class With the Main Method
 

You can run a program in at least three different ways:

  • Right-click on the Calculator.java file name -- marked with a green arrow -- and select Run File.
  • Click on the Run menu and select Run Main Project.
  • Click the green arrow icon button in the NetBeans IDE toolbar, as show in Figure 4.
Figure 4: Green Arrow Icon Button in NetBeans IDE Toolbar
 

Code From Scratch

The Calculator.java class initializes itself and the other two classes: CalcEngine and UserInterface. It sets the application to show in case the application was closed. The UserInterface class contains all the code for creating the GUI, and the event handler initializes the CalcEngine class, which contains all the methods for what happens when the user presses the buttons.

Open the UserInterface class by double-clicking the file name. As you scroll down, you can see how much code had to be written for this application just to create the GUI. Later, you'll learn a fast way to create a GUI simply by dragging components onto a workspace and letting the IDE write the code for you.

Now open the CalcEngine.java file by double-clicking its name. This class contains the instruction for what happens behind the scenes within the calculator application. When a user presses a button, the event handler looks to this class for the corresponding method, and the CalcEngine sends the response to the UserInterface class to display the correct response. You still need to write this type of code by hand, but the IDE makes the writing go faster.

As you use this IDE, you can save your work simply by clicking on the floppy-disk icons in the tool bar as shown in Figure 5, or go to File and choose Save All.

Figure 5: The Save Icon
 

You can add or change the code in the usual manner by typing directly into the Source Editor pane.

In addition, the Source Editor has code templates that allow you to enter code snippets using an abbreviation. The Source Editor also lets you hide sections of code through a process called code folding, and it generates code for beans with properties and event sets. The NetBeans IDE BlueJ plugin contains many other useful features that you'll appreciate as you get to know this IDE.

Now you can add or change code as needed. One feature you'll notice right away is the Editor Hints feature. These hints warn you with a lightbulb icon if you are missing a semicolon or an import statement, or if you need to create a variable or a statement. When the lightbulb icon appears, press Alt-Enter to display the hint, or click the lightbulb icon with your mouse.

Configuring the Source Editor

You can configure the Source Editor to more closely suit your needs:

  1. From the main menu, choose Tools, then select Options.
     
  2. Select one of the panes on the left side of the Options window according to the settings that you want to adjust. The following three panels include settings for the Source Editor:
     
    • Editor. Includes settings for code folding, indentation, code templates, and macros.
       
    • Fonts & Colors. Enables you to fine-tune the fonts, foreground colors, background colors, and other markings for syntax elements, as well as markers such as breakpoints, errors, and bookmarks.
       
    • Keymap. Enables you to add, change, or remove keyboard shortcuts for commands throughout the IDE.
       
  3. Edit any properties that you want to modify.
     
  4. Click OK to apply the properties and close the Options window.

Compiling a Project

Once you have finished modifying the code, you can either compile classes individually or compile and build the entire project. You can compile individual classes by right-clicking each class's icon and selecting Compile File.

Click on the Build menu at the top of the screen, and click on Clean and Build Main Project. Notice that an Output window opens at the bottom of the screen, and the compiler immediately tries to override an old definition, which is an implementation detail of the IDE's project system that you can ignore. It then continues compiling until the build is complete. If there are problems with the build, the output appears in the Output pane.

Now click on the Run menu and select Run Main Project to run the Calculator project. If any exceptions are thrown, they appear in the Output window. Otherwise, the calculator should reappear on the screen. Test it out by adding or subtracting some numbers, and the result should look something like Figure 6.

Figure 6: Running the Calculator Project
 
Creating New Projects and Using the GUI Builder

In Java platform applications, the components that make up a GUI are stored in containers called forms. The Java programming language provides a set of user interface (UI) components from which you can build GUI forms. The NetBeans IDE GUI Builder helps you design and build Java forms by providing tools that simplify the process.

To see how the GUI Builder works and to get a feel for the various tools and uses, you are now going to create a GUI application. Although you will be creating a BlueJ-style project, you could easily build the same project with a standard IDE such as NetBeans.

For this article, you will create a simple application called PhoneBook that contains fields in which the user can enter a first name, a last name, and a phone number. The application also allows the user to select whether the information is for personal or business use.

First, close the Calculator project by going to File and selecting Close "calculator." Once that project is closed, you start a new project. Note: This IDE allows you to have several projects open at a time, but to keep this tutorial simple, close the Calculator project.

Click on the File menu and choose New Project. When the next window opens, select BlueJ from the Categories list. Click Next. In the next window, type PhoneBook in the Project Name field. You can save this project in any location you like by using the Browse button or by typing in a path where you want the files to reside. Lastly, click Finish. You are ready to create your first file for this project.

Click on the File menu and choose New File. Under Categories, choose Java GUI Forms, then under File Type, click JFrame Form, as shown in Figure 7. Alternatively, you can right-click the project name in the Projects pane, select New, then select JFrame Form.

Figure 7: New JFrame Form
 

Click Next and type PhoneBookFrame in the Class Name field. You can add this class to another package or create a new package, but for this article, leave the default phonebook package. Click Finish.

You now have the GUI Builder open and all of its tools available. Your screen should look something like Figure 8.

Figure 8: GUI Builder (click image for full size)
 

It's worth taking a tour around the IDE now. Notice the Palette pane on the far right. This pane contains a list of components available for adding to forms. You can customize the Palette window to display its contents as icons only or as icons with component names. Below that is the Properties pane, which lists the name of the file that is open and any properties for the file.

To the left of the Palette and Properties panes is the GUI Builder workspace. You can see the outline of the JFrame that you have created, and this remains blank until you drag and drop components into place. Above the workspace, note the Design button and next to it a Source button. These control how you view your application. Design view is the default, and this lets you see your application in a What You See Is What You Get (WYSIWYG) manner. You can use Design view only for a project that you create using the GUI Builder in this IDE. So you cannot, for example, return to the Calculator project and open it in Design workspace to add components.

Click on the Source button. You now leave the Design workspace and go to the Source Editor. Scroll through the code to see the code that GUI Builder has already created for you. Note the warnings about areas that you should not modify.

To return to Design view, click on the View menu at the top of the screen. Select Editors, then choose Design. Click on the Design button on the main window to bring back the Palette pane if it is not already visible. At the far left of the screen is the BlueJ View that you are familiar with, showing the first object in this application: the class that holds the main method.

Below the BlueJ View window is the Inspector pane, which displays a tree hierarchy of components that the currently opened form contains. Displayed items include any visual components and containers -- such as buttons, labels, menus, and panels -- as well as nonvisual components -- such as timers and data sources -- that you add as you build your application.

Now you are ready for some easy drag-and-drop GUI building. If you have hand-coded Swing technology applications in the past, you will appreciate how much work this IDE saves you.

You have already created the main JFrame component, so add a Panel component by selecting that component in the Palette pane. Hold down the mouse button and drag the panel into the workspace frame. When you see the square appear, pull and drag a corner of the JPanel component to resize JPanel until it's the size of the main JFrame form. Notice that the Properties window has changed to include the JPanel properties.

Also, note how the Inspector pane has changed, as in Figure 9: You can now see the hierarchy of your components. You can also change properties, rename the component, add an event, and so forth by right-clicking any of those items.

Figure 9: Inspector Pane
 

In the GUI Builder, you can simply put components where you want them as though you were using absolute positioning, placing them exactly where you want them without having to choose a layout that may be close but not exact. The GUI Builder figures out which layout managers are required and generates the code for you automatically.

The Phone Book application is now ready to accept a few more components. Drag and drop the following components onto the workspace:

  • JLabel
  • JTextField
  • JLabel
  • JTextField
  • JLabel
  • JTextField
  • JLabel
  • JRadioButton
  • JLabel
  • JRadioButton

Notice that as you add each object and drop it on the workspace, thereby creating it, the NetBeans IDE automatically numbers objects of the same name in sequence: jLabel1, jLabel2, and so forth.

As you can see, you can easily set each component exactly where you want it. As you add components to a form, the GUI Builder provides visual feedback for positioning components based on your operating system's look and feel. The GUI Builder provides helpful inline hints and other visual feedback regarding where you should place components on your form, automatically snapping components into position along guidelines.

To see how easy it is to remove objects, simply drag jLabel4 off the workspace. jLabel4 then goes into the Other Components folder in the Inspector pane. You can select the object in that folder and delete it. When you do, the NetBeans IDE removes the object and rewrites the code. If you want to reorganize the remaining objects, drag them around the workspace to rearrange them.

Now change the default names of the jLabel1, jLabel2, and jLabel3 objects by double-clicking each and typing in a name so that they read First Name, Last Name, and Phone Number, respectively. Then change the labels of the radio buttons to read Personal and Business, respectively. You may need to resize the objects and move them around a bit as you go.

Remove the default text, which is the same as the default object names, from the text fields by double-clicking and deleting the text. To cause the resize handles and anchoring indicators to reappear, click anywhere within the component to select it. Then pull the text field to the desired length and width.

Using the Properties window, you can easily add Tool Tips, change the font or color, and assign other property values for any given object.

In only a few minutes, you have programmed a user interface. Your application should look something like Figure 10.

Figure 10: Phone Book GUI Interface
 

Next, add the JRadioButton objects to a ButtonGroup object. First, drag the ButtonGroup object from the Palette to anywhere on the workspace. Then, in the Inspector pane, select both radio buttons by holding down the Ctrl key while clicking on each object, as Figure 11 shows.

Figure 11: Select Radio Buttons
 

Next, go to the Properties pane and click the down arrow on the buttonGroup element, as Figure 12 shows.

Figure 12: Down Arrow in buttonGroup
 

Select buttonGroup1.

Next, preview what you have done so far. You don't have to compile and run your application to see whether the user interface looks the way you want it. Instead, just click the Preview button from the menu above the workspace, and the IDE generates a preview for you. Figure 13 shows the highlighted Preview button to the right of the Design button.

Figure 13: Preview With Preview Button
 

Now click on the Source button in the workspace menu. The Source Editor takes you to where you need to insert your handling code. Scroll down and see the code that the IDE has created for you. Also, click on the plus (+) sign near the words Generated code, and you can see all the code that you didn't have to write yourself.

Now go back to the menu and click View. Select Editors and then Design. Now add an event for your JButton object. Ideally, you would write this type of input information to a database or to a flat file system, but to keep things simple in this tutorial, you'll send it to the Output window.

As with everything else in this IDE, you can accomplish this task in several ways:

  • You can right-click the object in which you will create an event: Right-click the JButton object, choose Events, then select Action, then actionPerformed.
     
  • ou can use the Connection Mode button: Click the Connection Mode button just above the workspace as shown in Figure 14. Go to the Properties pane and click Events. Click actionPerformed and Add the jButton1 object. Click on the Source tab.
Figure 14: Connection Mode Button Highlighted
 

If you added an event by right-clicking, the editor takes you right where you need to be in the Source Editor to overwrite the actionPerformed method for this button. Click after the colon and enter the following code, which will take your text field input and write it to the Output window once you press Enter:

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){  
// TODO add your handling code here:          
   String firstName = jTextField1.getText();          
   String lastName = jTextField2.getText();          
   String phoneNumber = jTextField3.getText();          
   String Personal = jRadioButton1.getText();            
   System.out.println("You entered your first name as:"                                                   + firstName);          System.out.println("You entered your last name as:"                                                    + lastName);          System.out.println("You entered phone number as:"                                                 + phoneNumber);            if ((evt.getSource() == Personal) || (evt.getSource()                                                   == jButton1))                        {                           System.out.println("This entry is personal");                       }                       else                    {                           System.out.println(                                        "This entry is business related");          }        }  


 

This is the first bit of code that you've had to write from scratch. Generally, you would write much more code in this part of the application to transfer the data from the getText methods to either flat files or a database, or you might write it back to JLabel objects to show on the screen.

As an experiment, try intentionally putting some typos in the text. The IDE automatically underlines the error and suggests corrections for you, as Figure 15 shows. Then you can correct the error.

Figure 15: Auto Error Underlining
 

From the menu, choose Build, then select Clean and Build Main Project. Next, click on the Run menu item, and select either Run Main Project or Run File. Now select the file name. Figure 16 shows some sample output.

Figure 16: Running Application
 

Modifying Source Code

While you are creating a GUI form in the GUI Builder, the IDE automatically generates guarded blocks of code, which it presents on a blue background. At times, you may need to modify that code. It's best to do that through the Design view and using the Properties pane.

You can modify the way the IDE generates initialization code for a component, form, or component property by editing its Code properties in the Properties pane in the lower right corner. In addition, you can write custom code and specify where it should be placed within the initialization code.

Debugging and Running Projects

Debugging is the process of examining your application for errors. You debug a project by setting breakpoints and watches in your code and running it in the debugger. This process runs code one line at a time, allowing you to examine the state of your application to discover problems. When you start a debugging session, all of the relevant debugger windows appear automatically at the bottom of your screen. You can debug an entire project, individual executable classes, and JUnit tests.

A breakpoint is a flag in the source code that tells the debugger to stop execution of the program. When your program stops on a breakpoint, you can perform actions such as examining the value of variables and going through your program one step at a time, also known as single-stepping. You can set several types of breakpoints using the New Breakpoint dialog box. You can also set line breakpoints directly in the Source Editor.

To set a line breakpoint, click the left margin of the line in the Source Editor or press Ctrl-F8. This IDE can set other kinds of breakpoints as well, such as Step Over, Step Into, and Step Out. See the Help files for more information.

To fix your code, from the main menu, choose Run, then select Apply Code Changes. This recompiles and allows you to begin repairing your source code.

A watch enables you to track the changes in the value of a variable or expression during program execution. When you create a watch, the value of the variable or expression is immediately evaluated and displayed in the Watches window. The value of the watch is based on the current context. When you change the current context, the Watches window is updated to show the value of the watch for that context.

To create a watch, select the variable or expression in the Source Editor, right-click, and choose New Watch (Ctrl-Shift-F7). The New Watch dialog box opens with the variable or expression entered in the text field. Click OK. The Watches window opens with the new watch selected.

After you have set breakpoints and watches, start a debugging session by right-clicking the project in the Projects window and choosing Debug Project. The IDE runs the project in the debugger until execution stops or a breakpoint is reached.

You can also start a debugging session on a file by selecting any runnable file in the Projects window. Then choose Run, Run File, and Debug my_file. The IDE runs the file in the debugger until execution stops or a breakpoint is reached.

The Help System and Other IDE Features

This article has shown you just a small sampling of the features in NetBeans IDE and the BlueJ plugin. This IDE is well suited to introduce the beginning developer to advanced concepts and can fully prepare you to move into a more advanced programming environment.

Be sure to read the NetBeans IDE's Help files, even if you feel that you are finding everything you need. There are many other gems to uncover, and the Help system fully details many of these features, such as managing the classpath; providing more details about debugging; modifying, sizing, and aligning components; modifying GUI source code; working with Ant and testing with JUnit; and working with layout managers. To read these detailed Help files, click on Help in the main menu and select Help Contents.

For More Information

Setting Up the NetBeans IDE for Educational Use
NetBeans IDE Tutorials, Guides, and Articles

Rate and Review
Tell us what you think of the content of this page.
Excellent   Good   Fair   Poor  
Comments:
Your email address (no reply is possible without an address):
Sun Privacy Policy

Note: We are not able to respond to all submitted comments.