java GUI editor - Toggle between Source and Design views

At the top left of the toolbar for GUI editor there are Source and Design buttons. Click on Source to see the generated code, and Design to work on the the window's appearance.

Design view. The default view is GUI design view, which shows approximately what the window will look like. You can select GUI components from the pallette at the top right, and click on the window to place them. You can drag and stretch them to get the right layout.

Source view. This shows the code that has been generated by NetBeans to build this GUI. The code with the blue background, called "guarded text", is uneditable. The sections in white can be edited to customize the code in several ways, but especially to add data binding code to connect it to your model/logic. The parts that are uneditable are:

• The declarations of the components, which are placed at the end, which is a bit unusual. You can change the names of components in the design view properties pane.
• The initComponents() method, which is called from the constructor. You can edit the constructor to add your own code as necessary (eg, to initialize your model class.
• The headers and enclosing braces of "handlers" (methods called by listeners to handle the event. You must write the code for the body of the handlers to make them do what they need to do.

There are several things that you need to do to make this into a useful program.

• Layout components. Use the GUI editor to layout your program. This is the most fun because you can create some good looking designs very quickly, in contrast to the normal layout struggles with the clumsy Java layout managers. With a little practice you can get things to work pretty well.
• Edit component properties. You will want to edit some of the properties of components.

  Right click component. Some of the very most common properties can be set by right clicking the component and selecting one of the options (eg, to change the text, the name of the corresponding variable, and create a listener).

  Properties pane. There are a huge number of properties, but only a few are useful. The Properties panel puts them in several categories, and you will probably only need to use the first category, if any (Properties, Other Properties, Layout, and Accessibility).

• Listeners and handlers. If you specify that a component should respond to an event (eg, ActionPerformed for a button), the GUI editor generates an anonymous, inner-class listener, which calls a method based on the name of the component. For example, if you have button in a variable called greetingButton, when you indicate that you want an action listener by right clicking the component and selecting Events > Action, it creates a listener that calls a handler method called greetingButtonActionPerformed(). Type code for the action you want inside this method.

  Alternative - Properties pane. In the Properties window or popup there are three tabs at the top. The Events tab lets you specify which method should be called by the listener. Type in the method name and it will be created if necessary. Type your code in this method.

GUI editor - Structure of the generated source code

NetBeans automatically generates a lot of code for the GUI. Most of it can be ignored, and you only have to write the code in the event handlers, and initialize your "model" (logic) in the constructor.

• Blue shaded areas are generated code that you can't edit.
• Expand/collapse controls at are the beginning of each section. Just hit the "+" to expand, and the "-" to collapse the view.
• No imports are used, so all library classes will be fully qualified (eg, javax.swing.JButton instead of just JButton as a human would write it).
• Instance variables are declared at the end of the class, not near the beginning, as is the normal human style.
• The constructor calls on the initComponents() method to do all the initialization. initComponents() is in the collapsed, uneditable area below the constructor.

  The constructor itself is editable, so you can put your own initializations in it. Because you should separate your model/logic from the user interface, you may create an instance of your model in the constructor, and declare an instance variable at the end to hold it. The listener methods can then use that instance variable to interact with the model.

• The initComponents() code is generated by NetBeans, and isn't necessarily a good model for writing code yourself. If you decide to look at it, you will see several unfamiliar things. For example, GroupLayout won't appear until Java 6. Button listeners are done as anonymous, inner-class listeners, ...
• The main method is defined near the end, just above the instance variables, and contains what might be an unfamiliar way to display the window. This is equivalent to

      YourGUIClass window = new YourGUIClass();
     window.setVisible(true);

  This runs the initialization code on the EventQueue thread because there are some (uncommon) situations where it makes a difference. Don't bother to change it, but when you write your own programs you can use the simpler code above. Or you can use the NetBeans main style. In any case, it's probably easiest to just collapse this code and never take another look at it.