Tutorial One: The Clock
For this tutorial, we will start with a simple clock form, making use of the built-in TimerBean. Once we have this clock compiled and running successfully, we will then extend its functionality, adding the ability to set the time, and change the time and date format.
Part One
Startup:
- Click the New from Template... icon on the Main Window. The New From Template wizard will open, displaying a tree view of templates grouped into several categories. Expand the SwingForms node, select JFrame, and click Next.
- The Target Location page of the wizard will appear to prompt you to set a name and package for your new class. The tree view shows all directories that you have mounted as file systems in the Explorer. Expand the directory structure and choose
$FORTE4J_HOME/Development/examples
as the location, (where $FORTE4J_HOME is your Forte For Java installation directory) and type ClockFrame in the Object Name field. Click Finish when done.
Note: A dialog box may then appear and prompt you whether to make the class part of the current project. For the purposes of these tutorials, it does not matter whether you include them in the project or not.
- You should see the status line of the Main Window read
Opening Form: ClockFrame
. Several windows will open - the source Editor, the Form Editor window and the Component Inspector. Note there are sections of the source in the Editor which have a colored background - these sections are those regenerated by the Form Editor and may not be modified.The Component Inspector lists all components currently in the Form Editor and their properties. Initially there are no components except for the default layout (BorderLayout) and a heading for Non-Visible components - currently empty.
Add a component:
- We will use a standard JLabel for our clock display. Flip to the Swing tab of the Component Palette. You will see a grouping of common Swing components. Position your mouse cursor over each icon to see a tooltip identification.
- Select JLabel by single clicking on its icon. The icon will appear
clicked
, indicating it has been selected and is the active component.- Place it on the Center panel of the Form Editor surface by clicking once. You will see the generated code appear in the Editor and a new component listed in the Component Inspector. Note the currently selected component is marked with blue corner anchor marks. The item highlighted in the Component Inspector listing also indicates the selected component.
Modify the component's properties:
- Now we will modify the properties of the
JLabel
. Make sure the JLabel is selected, either by clicking it in the Component Inspector or by clicking it in the Form Editor window. Flip to the Code Generation tab of the JLabel in the Component Inspector - you will seeVariable Name
property and its value listed.- Click on the
Variable Name
field. The cursor will appear in the variable value field, ready to accept keyboard input. Type jlblCurrentTime. Once you press ENTER or click elsewhere in the IDE, the new variable name will be assigned.
- Next, find the
text
property on the Properties tab. Depending on the size of your Component Inspector widow, you may need to scroll down to see all available properties. Click on the property's value (currently set to a default ofjLabel1
) and enter the text to appear on the Label - type 00:00:00.- This JLabel will be the main display of our clock, so let's change the default font properties. Click the
font
property in the Component Inspector and select the "..." browse button which appears. A font properties dialog box will open. Change the font face to Serif, Bold, 36 pt. Click OK to confirm the selection. You should see the default text (00:00:00
) on the Form Editor window reflect your changes.- Lastly, we will center the time display. Change the
horizontalAlignment
property from its default value (LEFT
) toCENTER
.This completes the visual aspect of the first stage of this tutorial. Now we will add functionality to this form by adding the TimerBean and some code.
Functionality - Adding Code:
- First, we will add some imports to the code. Switch to the source Editor, and scroll to the top of the code. This form will require the standard date and time imports. Copy the following code, and paste it into the Editor directly under the line reading
package examples;
. When you paste your code into the Editor, it may not stay correctly indented. To indent a block of code, select the block and press TAB or SHIFT+TAB to correctly align the block.import java.util.Date; import java.util.GregorianCalendar; import java.util.Calendar; import java.text.SimpleDateFormat;We will also use the standard JOptionPane for error messages:
import javax.swing.JOptionPane;- Add the following three lines below the
Variables Declaration
block towards the end of the code (below the protected Form Editor code marked with a shaded background).private GregorianCalendar gCal = new GregorianCalendar(); private String timeFormat = "hh:mm:ss"; private SimpleDateFormat formatter = new SimpleDateFormat(timeFormat);
Add the TimerBean, and set an event handler:
- Choose the Beans tab of the Component Palette and select Timer. Place it anywhere on the Form work surface. The TimerBean is a non-visual component, so you will not see anything appear on the Form Editor window. However, you will see the TimerBean listed in the Component Inspector under the
NonVisual Components
heading.- Select the TimerBean in the Inspector, and change its
variable name
to tmrSeconds.- Flip to the Events panel of the TimerBean's properties in the Inspector. Set the
onTime
event totmrSecondsOnTime
. You will see the Editor window generate the new method. If you scroll back up through the code, you will see that the listener which invokes this method has also been generated.- Now we will add the code for this new method in the Editor. Add the following code under the
// Add your handling code here
line:gCal.add(Calendar.SECOND,1); String timeTxt = formatter.format(gCal.getTime()); if (jlblCurrentTime != null) jlblCurrentTime.setText(timeTxt);Compiling and Executing the form:
- The basic clock is now complete. Select the Execute icon from the Main Window. Watch the status bar of the Main Window - you will see the progress of the operation. Your form and code are first saved and then compiled.
- Assuming there are no errors and compilation is completed successfully, Forte For Java will switch to the Running Workspace and the form will open. Note that the Execution View, also open on the Running Workspace, displays the ClockFrame as a currently running process.
Again, assuming there are no errors, your clock should be displayed, showing the correct current time, with the seconds incrementing normally.
![]()
You've just built your first form!
To close the form, right-click on it in the Execution View, and choose Terminate Process. Note that while you can also terminate this form by closing the form window, this relies on the WindowClosing event being set. The JFrame Template we used to build this form has this event set to close the application as a default setting. Without it, closing the window would not actually terminate the process.
This concludes Part One of the Tutorial. In Tutorial One: Part Two, we will extend the functionality of this clock, adding the ability to set the current time.
Beginning | Prev | Next |