Tutorial One: Part Two
Adding a Set Time panel
In Part One of this tutorial, we built a basic functional clock. We will now add the ability to set the time to our form.
First of all, since you have just executed the Clock form, Forte For Java has switched to the Running Workspace, where the source Editor, Form Editor and Component Inspector are not displayed (by default). Use the Workspace tabs on the Main Window to flip back to the GUI Editing Workspace, where all your editing tools are displayed.
Adding a panel and setting the Layout:
- First add a new JPanel for our new components. Flip to the Swing tab of the Component Palette, and select JPanel. Place it on the
North
panel of the Form Editor surface. You will see the new item in the Component Inspector.- Expand this new JPanel in the Component Inspector - you will see the default FlowLayout listed below this JPanel. For this example we will not use this default layout - in the Component Palette, flip to the Layout tab. Position your mouse over each of the icons in this group to see the tool-tip identifiers. Select GridLayout by single-clicking its icon, and assign this layout to our new JPanel by clicking once on the JPanel in the North part of the Form Editor. You will see the new layout replace FlowLayout in the Component Inspector and a grid appear on the Form Editor surface.
- The default GridLayout includes 3 columns and 2 rows. In fact, we only need 1 row - select the GridLayout in the Component Inspector, and change the
Rows
property from the default of 2 to 1. The grid displayed in the Form Editor window will change accordingly.Adding new components:
- Next we will add some visual Swing components to the new panel. Flip to the Swing panel of the Component Palette, select JLabel, and place it anywhere on the new panel.
- Now select JTextField from the Swing panel, and place it on the panel by clicking anywhere on the JPanel in the Form Editor window. Using this layout, visual components are ordered left to right in the order that you add them.
- Lastly, select JButton from the Swing panel of the Component Palette, and place it on the JPanel - you should now see the three components, equally sized, across the top of the Form.
Changing properties:
- Now we will modify the properties of these new components. Select the JLabel component, either by clicking on it in the Form Editor window or by clicking on it in the Component Inspector. Flip to the Code Generation tab in the Component Inspector.
- First change the
variable name
tojlblNewTime
.- Next change its
text
property on the Properties tab to New Time:. You will see the text appear on the Label in the Form Editor.- Find the
horizontalAlignment
property, and select the new alignment -CENTER
.- Click the JTextField component in the Component Inspector, change its variable
name
property to jtfNewTime, and set thetext
property to a default time of 00:00:00- Select the JButton in the Component Inspector. Change the
variable name
of the JButton to jbtnNewTime. Change itstext
value to Set New Time.Adding functionality:
- Select the JButton you have just added in the Component Inspector, and flip to its Events panel. Set the
actionPerformed
event to jbtnSetNewTimeClicked. You will see the new event handler generated in the Editor.- Add the following code to this new handler:
try { String timeStr = jtfNewTime.getText(); gCal.setTime(formatter.parse(timeStr)); } catch (java.text.ParseException e) { JOptionPane.showMessageDialog(this, "Invalid date format", "I don't understand your date format.", JOptionPane.ERROR_MESSAGE); }Compiling and executing:
- Press CTRL+F9 to execute the new form. Again you will see the status bar of the Main Window indicating the progress of the execution. Once compiled and running, try setting a new time by clicking the Set Time button. If you enter a time not in the default "hh:mm:ss" format, an error dialog box will open.
- Once you have verified your Clock is working, again terminate the process using the context menu in the Execution View window.
- This concludes Part Two of the Tutorial. In Tutorial One: Part Three, we will add a panel allowing the date and time format to be modified.
Beginning | Prev | Next |