If you encounter difficulty positioning the new text field, you can snap it to the left guideline of the Nickname JLabel as shown in the first image below. The rightmost JLabel shifts toward the right of the JTextField to accommodate the suggested horizontal offset. Move the cursor to the right of the Nickname label and click to place the text field. When the vertical alignment guidelines appear suggesting the margin between the text field and JPanel edges, release the mouse button to resize the JTextField.
Alignment is one of the most fundamental aspects of creating professional-looking GUIs. Every time you add a component to a form, the GUI Builder effectively aligns them, as evidenced by the alignment guidelines that appear. It is sometimes necessary, however, to specify different relationships between groups of components as well.
Click the Align Right in Column button in the toolbar. The JLabels' positions shift such that the right edges of their display text are aligned.
The anchoring relationships are updated, indicating that the components have been grouped. The JTextFields are set to resize horizontally at runtime. The alignment guidelines and anchoring indicators are updated, providing visual feedback of the component relationships. The JTextFields are all set to the same width and indicators are added to the top edge of each, providing visual feedback of the component relationships.
Now we need to add another JLabel describing the JComboBox that will enable users to select the format of the information our ContactEditor application will display.
The JLabel snaps into a right-aligned position with the column of JLabels above, as shown in the following illustration. As in the previous examples, double-click the JLabel to select its display text and then enter Display Format: for the display name. Notice that when the JLabel snaps into position, the other components shift to accommodate the longer display text.
Whenever you add or move components that include text JLabels, JTextFields, and so forth , the IDE suggests alignments which are based on the baselines of the text in the components. When we inserted the JTextField earlier, for example, its baseline was automatically aligned to the adjacent JLabels. Notice once again the baseline alignment guidelines that appear to assist us with the positioning.
Move the cursor immediately to the right of the JLabel we just added. The component snaps into a position aligned with the baseline of the text in the JLabel to its left, as shown in the following illustration.
It is important to understand, however, that another integral part of component placement is anchoring. Once placed, new components are also anchored to the nearest container edge or component to ensure that component relationships are maintained at runtime. The GUI Builder enables you to lay out your forms quickly and easily by streamlining typical workflow gestures.
Whenever you add a component to a form, the GUI Builder automatically snaps them into the preferred positions and sets the necessary chaining relationships so you can concentrate on designing your forms rather than struggling with complicated implementation details. Double-click the JLabel to select its display text. Then type E-mail Address: and press Enter. The JLabel snaps into the preferred position in the form, anchored to the top and left edges of the enclosing JPanel.
Just as before, a corresponding node representing the component is added to the Navigator window. Move the cursor immediately to the right of the E-mail Address label we just added. Its corresponding node is also added to the Inspector window. Move the cursor immediately below the E-mail Address JLabel we added earlier.
The JList snaps into the position designated by the alignment guidelines and its corresponding node is displayed in the Inspector window. Notice also that the form expands to accommodate the newly added JList. Since JLists are used to display long lists of data, they typically require the addition of a JScrollPane. It is often beneficial to set several related components, such as buttons in modal dialogues, to be the same size for visual consistency.
Move the cursor over the top right corner of the JList in the lower JPanel. Add two additional JButtons below the two we already added to create a column. Make certain to position the JButtons such that the suggested spacing is respected and consistent. If you forget to release the Shift key prior to positioning the last JButton, simply press the Escape key.
Set the display text for each JButton. Or you can click the button, pause, and then click again. Enter Add for the top button, Edit for the second, Remove for the third, and As Default for the fourth. The JButton components snap into the positions designated by the alignment guidelines. The width of the buttons changes to accommodate the new names. Often it is necessary to cluster multiple components under another component such that it is clear they belong to a group of related functions.
One typical case, for example, is placing several related checkboxes below a common label. Refer to the following illustrations while accomplishing this or click the View Demo link following the procedure to view an interactive demonstration. Make certain the label is left aligned with the JList above. Move the cursor below the JLabel that we just added. Shift-click to place the first radio button.
Move the cursor to the right of the first JRadioButton. Shift-click to place the second and third JRadioButtons, being careful to respect the suggested component spacing. Make certain to release the Shift key prior to positioning the last JRadioButton.
Set the display text for each JRadioButton. Now we need to add the three JRadioButtons to a ButtonGroup to enable the expected toggle behavior in which only one radio button can be selected at a time. Now we need to add the buttons that will enable users to confirm the information they enter for an individual contact and add it to the contact list or cancel, leaving the database unchanged.
Move the cursor over the form below the E-mail JPanel. Enter OK for the left button and Cancel for right one. You can also try the sample applications provided with the Scene Builder release. These samples are Netbeans projects, which means they can be compiled and ran directly after being opened in the NetBeans IDE.
Previous Page Next Page. To illustrate this feature, do the following: In the Scene Builder window, drag another Button control from the Library panel to the Content panel. Select File in the main menu and then Save. You can generate event handlers for all of them from the Events menu. The most common event you will use is an Action event.
How does event handling work? Every time you select an event from the Event menu, the IDE automatically creates a so-called event listener for you, and hooks it up to your component. Go through the following steps to see how event handling works.
These methods are called event handlers. Now scroll to a method called initComponents. First, note the blue block around the initComponents method. This code was auto-generated by the IDE and you cannot edit it. Now, browse through the initComponents method. Among other things, it contains the code that initializes and places your GUI components on the form. This code is generated and updated automatically while you place and edit components in the Design view.
This is the spot where an event listener object is added to the GUI component; in this case, you register an ActionListener to the jButton3. The ActionListener interface has an actionPerformed method taking ActionEvent object which is implemented simply by calling your jButton3ActionPerformed event handler. The button is now listening to action events.
Generally speaking, to be able to respond, each interactive GUI component needs to register to an event listener and needs to implement an event handler. As you can see, NetBeans IDE handles hooking up the event listener for you, so you can concentrate on implementing the actual business logic that should be triggered by the event. Apache NetBeans. Latest release.
Contributed by Saleem Gul and Tomas Pavek. Exercise 1: Creating a Project The first step is to create an IDE project for the application that we are going to develop. Deselect the Create Main Class checkbox if it is selected. Click Finish. Exercise 2: Building the Front End To proceed with building our interface, we need to create a Java container within which we will place the other required GUI components.
Enter NumberAdditionUI as the class name. Enter my. Renaming the Components In this step we are going to rename the display text of the components that were just added to the JFrame. Double-click jLabel1 and change the text property to First Number:. Double-click jLabel2 and change the text to Second Number:. Double-click jLabel3 and change the text to Result:. Rename the display text of jButton2 to Add. Rename the display text of jButton3 to Exit. Exercise 3: Adding Functionality In this exercise we are going to give functionality to the Add, Clear, and Exit buttons.
Making the Exit Button Work In order to give function to the buttons, we have to assign an event handler to each to respond to events. It will then perform addition of the two numbers. Click the Design tab at the top of your work area to go back to the Form Design.
0コメント