Content Using an Integrated Development Environment (IDE) for developing applications saves you time by managing windows, settings, and data. In addition, an IDE can store repetitive tasks through macros and abbreviations. Drag-and-drop features make creating graphical user interface (GUI) components or accessing databases easy, and highlighted code and debugging features alert you to errors in your code. The NetBeans IDE is open source and is written in the Java programming language. It provides the services common to creating desktop applications -- such as window and menu management, settings storage -- and is also the first IDE to fully support JDK 6.0 features. The NetBeans platform and IDE are free for commercial and noncommercial use, and they are supported by Sun Microsystems. This tutorial is aimed at those who are new to using IDEs, fairly new to programming, and new to the Java platform. You'll learn to create a simple desktop application with a GUI interface and functionality that calculates overtime pay using basic features of the NetBeans IDE. This tutorial provides explanations for the code where appropriate, as well as links to the Java API and information about objects as they are introduced. Though the NetBeans environment also provides many rich features for the various Java platforms, such as Java Platform, Enterprise Edition (Java EE) and Java Platform, Micro Edition (Java ME), this article covers only Java Platform, Standard Edition (Java SE) technology, which is generally the entry point for new developers and programmers. Future tutorials will discuss more advanced features. To follow this tutorial, you need to have downloaded and installed the JDK and the NetBeans IDE. Or you can download JDK 6 and NetBeans 6.1 separately to ensure that you have the latest versions. Because the NetBeans IDE is open source is undergoing continual improvement, you may notice slight differences between the screen captures in this article and the latest download. This tutorial is based on NetBeans 6.1 and may vary slightly from later versions as they become available. The NetBeans IDE has many features and tools for each of the Java platforms. Those in the following list are not limited to the Java SE platform but are useful for building, debugging, and deploying applications and applets: Source Code Editor
GUI Builder
Database Support
The NetBeans IDE also provides full-featured refactoring tools, which allow you to rename and move classes, fields, and methods, as well as change method parameters. In addition, you get a debugger and an Ant-based project system. To get started, download the latest stable version from the NetBeans.org web site and install it on whatever platform you use for programming and development. The NetBeans.org web site lists the computer requirements needed to run the IDE. NetBeans can automatically upgrade its core and extension modules over the Internet, and it has a module that runs periodically on your behalf to check for updates to the version of NetBeans you're using. In addition, the Update Center can update and install any modules you okay or request. When you start the application, you should get a welcome screen similar to Figure 1. You'll notice that this welcome screen makes getting started right away an easy process by displaying a Quick Start Guide up front, as well as the options to begin a project or open one. In addition, you can select the Sample Project for a quick example of how code is set up in this IDE. NetBeans is fairly intuitive to use, especially if you've used IDE software in the past. You'll get familiar with three concepts right away: projects, nodes, and workspaces. Within NetBeans, you work within the context of a project, which consists of an organized group of source files and associated metadata; project-specific properties files; an Ant build script and run settings; and all the tools you'll need to write, compile, test, and debug your application. You can create a main project with subprojects, and you can link projects through dependencies. So getting started is as easy as giving your project a name.
Once you tell NetBeans the name of a new project, it then:
Click File from the main menu and select New Project. The New Project wizard pops up and looks similar to Figure 2.
From there, you can choose the type of application you want to create by selecting a category such as Java, Web, or Enterprise. Notice that within the Java category, you can create a project containing an empty application. Choose Java and select Java Application. Next, name the project and select a location within your file system. Note that the IDE automatically creates a main class for your application if you want it to. Click Finish. The Projects window displays only the files that are likely to be regularly edited, such as source files and tests. To see more details about your project, click on the Files tab. The Files tab shows a directory-based view of your project, as shown in Figure 3 above. If you click on the project folder you created, you'll see that the folder contains the Ant script and properties files that control how your project is built and run:
The Files folder also contains the output folder for compiled classes, JAR files (for Java SE projects) or WAR files (for web projects), and Javadoc. This displays as a NetBeans allows you to see all your objects in a project represented as nodes of a tree, each having its own icon to represent the type of object the node represents. Within the Files tab, you can easily view the trees and representative nodes. If you double-click on a node, it opens up into a subtree that contains more detail. You can collapse or expand trees as necessary. Right-clicking on any node provides easy access to specific functions that you can perform and tools that you can use on that object. Expand the subtrees of the project node that you just created, and you will notice that the fields, constructors, methods, and bean patterns appear as node branches. The Services window lists various facilities available to your project, such as servers, databases, enterprise beans, and web services. In addition, you can see what operations have been performed and troubleshoot some types of runtime errors, such as when a remote method invocation (RMI) connection is causing a problem. You'll get more familiar with this window after you have written, compiled, run, tested and debugged your applications.
Return to the Projects window. Notice the file system that has been created. Files and directories associated with an application project are organized in a logical fashion. Double-clicking a source file automatically opens the file in the workspace to the right, bringing up the appropriate Source Editor. Double-click the When your application is organized into several projects, the main project serves as the entry point to the application. Usually, the main project contains the main class that starts the application. To make a project the main project, right-click the project's node in the Projects window and choose Set Main Project. You can click right into the Source Editor and write code. When you write code this way, you'll notice that the editor automatically highlights code in color as appropriate and provides suggestions for code-completion as you type. You can customize colors in the highlighting by going to Tools > Options (NetBeans > Preferences on a Mac) > Fonts and Colors. Code completion finishes package names, classes, interfaces, and common methods. As handy as code completion can be, you may sometimes not want it. You can easily turn off this feature by pressing Esc. Or you can deactivate it more permanently by going to Tools > Options (NetBeans > Preferences on a Mac) > Editor > General, and under Code Completion, deselecting the Auto Popup Completion Window checkbox. You can also save time by assigning abbreviations that the Source Editor expands for you. To set abbreviations, go to Tools > Options (NetBeans > Preferences on a Mac) > Editor > Code Templates. Type the first few letters of an abbreviation and press the spacebar. The Source Editor then expands the abbreviation. Turn on line numbering easily by right-clicking in the Source Editor's left sidebar and selecting Show Line Numbers. When programming in Java, you can add to your source code by making use of commonly-used code templates. Press Ctrl-I in the Source Editor to view the Insert Code pop-up menu. Add properties to classes, create constructors, generate accessor methods, and override methods from superclasses. When adding properties, the IDE provides you with a dialog as in Figure 5. For more information on editing features in the IDE, see Java Editing Enhancements in NetBeans IDE 6.0
The refactoring tool goes to work and makes all the necessary changes based on your single entry. Refactoring is the restructuring of code, using small transformations, where the result does not change any program behavior. Just as you factor an expression to make it easier to understand or modify, you refactor code to make it easier to read, simpler to understand, and faster to update. A refactored expression must produce the same result, and the refactored program must be functionally equivalent with the original source. Some common reasons for refactoring code include the following:
NetBeans provides the following features for refactoring:
To view the Refactor menu, right-click and choose Refactor from an item in the Projects window, or right-click and choose Refactor of an opened file in the Source Editor. Within the NetBeans IDE, you can debug by setting breakpoints and watches in your code, then running your application in the debugger. You can execute your code one line at a time and examine the state of your application in order to discover any 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, any executable class, and any 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 like examining the value of variables and single-stepping through your program. The Source Editor indicates a breakpoint by highlighting the line in red and placing an annotation in the left margin. Except for line breakpoints, all Java breakpoints are defined globally for all IDE projects. For example, if you set a breakpoint on a class, the IDE will stop execution every time it encounters that class during a debugging session regardless of what project you are debugging. To set a line breakpoint, click on the left margin of the line in the Source Editor. Figure 6 shows two breakpoints; a line breakpoint is denoted by a red square, and a field breakpoint is displayed as a triangle.
You can customize a breakpoint by right-clicking on the breakpoint icon and choosing Breakpoint > Customize. The Customizer dialog enables you to set conditions and actions on the breakpoint. You can set other types of breakpoints as well, such as the following:
To run the debugger tool, click the Debug Main Project icon (
Now that you're familiar with the nuts and bolts of the NetBeans IDE, the next sections will step you through creating, compiling, and running an application that uses a simple GUI interface with some background functionality that calculates the rate of regular and overtime pay.
Your finished application will look something like Figure 7. In creating this application, you will learn how to:
Though you can do a great deal through wizards, forms, and drag-and-drop features, you still need to write some lines of code for the functionality of the application. The following sections explain some of these lines of code. Start by creating a new project for the application.
To begin creating the GUI, you are going to start the Form Editor by creating a top container for your application using a specific form. The Java API provides GUI components, often referred to as Swing, and provides three useful top-level container classes: Start by using the File wizard to create a JFrame component.
To see what the wizard has created, click on the Files tab and expand the nodes listed under the new project. Double-click Above the Source Editor, you should see two buttons that allow you to toggle between the Design view, which gives you a visual view of your application, and Source view, which allows you to work with the raw code. In other words, you can switch from the GUI drag-and-drop editor to the code editor. Each editor gives you slightly different options in the tool bar, as shown in Figures 8 and 9.
Click into the Source view to see the code that has been generated for the class. Then click back into the Design view to use the Design Editor. You can now begin the process of building the GUI interface. You started this application with the
From this editor, you will add and edit components by using three panes that are docked at the sides of the IDE (see Figure 10 above):
As you use components from the Palette, NetBeans automatically generates code, instantiating those objects. If you change the components' properties by using the Properties pane, that code is also generated. You'll notice as you look at the Source Editor that this generated code appears as blue guarded blocks. It is recommended that you not change this code. However, you can modify the way initialization code is generated and even write custom code to be placed within the initialization code. For this tutorial, do not change the generated code. So far, you have created a project and a
Your Inspector window should now look similar to Figure 11, and the components in your Design Editor should look like Figure 12 below.
Click on any of the objects in the Inspector pane, and you'll see that the properties for each component appear in the Properties pane. In addition, you can right-click the components in the Inspector window and select Properties from the menu to make the Properties window display. To change the text for each tab, click on the corresponding To see the code generated for your application so far, click on Source in the tool bar above the Editor, as shown in Figure 9 above. The Source Editor reveals guarded code, which by default is shaded in grey background, as well as code that you can add to or change. As you examine the code, you may notice that you can collapse or expand segments of code as you add to this file.
You may have observed that a layout manager also has been added just beneath each
Return to the Design view, and you should now have an application that reveals two tabs with the titles that you input in the Properties box for the For this application, you'll need to add eight labels, two text fields, and a button. The labels contain information for what the user should enter and for what will appear when the user clicks the button. The text fields are editable for user input. The components need to be arranged on this panel in a way that makes sense. While the usual layout managers are available to you, the Free Design layout is ideal for this scenario. This layout manager allows you to arrange components in a number of ways, and the Matisse GUI builder makes this really easy to do. To begin adding the components to the first
Once you've added the components, you'll need to rename them, change the default text that each displays, and arrange them on the panel. You can change the default text for components by either double-clicking on the component directly in the Design Editor, or right-clicking a component in either the Design Editor or the Inspector, and choosing Edit Text. Change the default text for the following components:
To rename a component, right-click it in either the Design Editor or the Inspector and choose Change Variable Name. Change names for the following components:
In order to arrange the components the way you want, simply drag the components to their positions in the Editor. Make use of the guidelines that display to align components vertically and horizontally. You can also resize components manually by clicking on their edges or corners. Arrange your components so that they appear similar to Figure 14. To edit a component's properties, first select that property, either in the Editor or in the Inspector window. That component's properties automatically appear in the Properties pane. Scroll through the items, changing the text, changing the background or foreground colors as you like, setting column width, and changing any other properties you feel appropriate. Experiment with various properties, changing back to the default whenever you need to. Because the user will enter information into the two text fields, it would be better to give those objects variable names that reflect the information being entered. Go to the Inspector window, right-click on the first When writing code in a simple text editor, you would have to compile the code frequently to see what your GUI looks like. NetBeans has a preview feature that allows you to see how your application looks with a simple click of the Preview Design ( If you would like to compile and run the application, that is also a simple process. You can make use of the icons displayed in the IDE's main tool bar; click Build ( Compile your application now. Notice the output that displays in the Output window at the bottom of the IDE. Once the build is complete, you can try running the application. The application will run and pop up on the screen. A quick way to build is to press F11. You can also press F6 to run the application. So far, this application is a simple GUI and no more. It doesn't yet have functionality. You will add an event handler for the button soon, but first create a top menu for the application. Though menus are often one of the first objects created in an application, you're creating the menuing system now to demonstrate how easy it is to move around within your application, creating in whatever order you need, without messing up code. This is one of the big advantages of the Inspector window: the way you can click on any object within your application, add to it, or move around within it.
In the Inspector, double-click on The last item to complete in the GUI portion of this application is the Images pane (see Figure 17), so that you learn how to add images easily. One way to display images is by decorating Swing components, such as labels, buttons, and tabbed panes, with an icon -- a fixed-sized picture. An icon is an object that adheres to the
To add an image to the Images panel in your GUI, you can use a
When you click on Preview Design (
The first statement creates the Now the GUI is complete, but the application still doesn't do anything. Next, you need to give it functionality. Java technology programs rely on events that describe user actions. These events are represented by objects that a user initiates, such as text entered, a button pushed, or a mouse moved over a component. The component must listen for an event if you want to handle the event with an action, such as displaying text or writing to a database. Without an IDE, you'd have to follow these steps to create event handlers:
When a user fires an event through a GUI component, a method call is made to any objects that have been registered with the component as listeners for the type of event that took place. An event listener is an object that is notified when an event occurs. Events generated from buttons and text fields need the class to implement the NetBeans simplifies creating event handlers by creating much of the code for you. You need to know which interface you'll need to implement, and then you'll need to write the code for the logic that goes into the Go to Design view and in the editor click the button you created, then right-click and choose Events > Action > Action Performed. You are then taken to the Source view and shown the following:
Also, the following lines of code have been added to register the button with a listener:
Because the user is entering the information into the text field, that data comes in as a The classes you'll need to be familiar with are A common need is to convert strings to numerical values. Once these are converted, you can manipulate that value like any other data primitive (for instance, an To convert a The following list shows the mapping from primitive type to wrapper class. In almost all cases, the wrapper class has the same name as the primitive data type, with the first letter capitalized:
Each of these wrapper classes, except the
This converts the contents of the
There is one exception: The
If the The
results in:
You can control the display format and arrange input into the needed output format by using the The class has methods for three standard formats:
To format a primitive, start by returning an object of type
To be certain the amount is formatting correctly for a specific country, you specify the locale this way:
The result is:
To compile these, you'll need to import the following packages and add them to the top of the file:
Now, back to the application you are building: Add the following code to the
After entering the above code, make sure to add imports for Compile and run the application. Test it out by entering hours worked and pay rate. Your application should look similar to Figure 7 above.
You'll notice that the menus are still nonfunctional. You can follow the same procedure to add events to your menu items. In the Inspector, right-click
Type in the following code (changes in bold):
Select Clean and Build Project, then run your application, closing it with the Exit menu. Follow the same procedure for each menu item and any other objects that require functionality. If there are any objects you don't want in your application, select the object in the Inspector. Right-click and select Delete. The item immediately disappears from the view. You can then Clean and Build ( Documenting your application is always a good idea, especially if many people are working on one project. This sample application is a bit small for a good demonstration of the Javadoc tool feature, but the following steps provide you with an idea of the kind of information that goes into the documentation and see how NetBeans does all the hard work for you. Click into the Files window, then click your project node. Go to the Build Menu and select Generate Javadoc for JavaApplication (or whatever name you gave your project). The IDE generates the Javadoc in the You have completed a small desktop application and learned some of the basics of the NetBeans IDE. A big advantage of using the NetBeans IDE platform is that you won't outgrow it. As your development knowledge and skills build, you can delve into other technologies and platforms, such as web development, including EJB and web service applications, or mobile applications using the Java Micro Edition (Java ME) platform. In addition, NetBeans is extensible, meaning that many of the extensions, or modules, that work in NetBeans also work seamlessly within other products. The IDE evolves with your needs and experience, and you build on the experience you gain using a common IDE platform, rather than having to learn an entirely new toolset as your needs change. For More Information
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||