Page 1 of 2
Finding out how to create a User Interface (UI) using the Java Swing library is not only a useful skill, it also is an ideal way to learn about objects and to make sure that the ideas really have sunk in.
A User Interface (or UI) is an essential for a desktop or web application and creating one is very easy using the Swing Library that we first met in Chapter 2. In this chapter we take a closer look at the way you can work with UI objects in both code and within the drag-and-drop designer.
Modern Java Contents
- Getting started with Java
- Introducing Java - Swing Objects
- Writing Java Code - Methods
- Command Line Programs
- The Java User Interface - More Swing
- Working With Class
- Class Inheritance
- Building a Java GUI - Containers
In Chapter 2 we looked at the very basics of Swing in this chapter we go deeper and discover more about the controls that are available to build a user interface. On the way we look at how properties are implemented using get and set methods and start the study of events and how to use them.
A button and some Text
Starting right at the very beginning, the two most basic UI components are buttons and some explanatory text. Let's create a simple example.
Using NetBeans (see Chapter 1), start a new Java Application and call it UITest.
Make sure you have Create a main class unticked and accept all the other defaults.
When the project opens right click on the Source Packages folder in the Projects window and select New, JFrame Form.
Call the new JFrame MyJFrame.
As explained in Chapter 2 a JFrame is a basic display window and you can place other UI components within it using the drag-and-drop editor.
To get us started lets drag a button onto the JFrame.
Now if we run the project - click the green button or use Run, Main Project menu option then the code will start being executed - where exactly?
A program generally has a single place to start running and in our case we need to specify that MyJFrame.java is the place to start. If you select Run then you can specify the class where the code starts executing - MyJFrame in this case.
Alternatively you can specify there the code starts using the command Project,Properties and select Run in the dialog box that appears and specify where the program starts.
The button that you have placed on the form is an example of an object and you can create objects using the drag-and-drop editor in this way or you can write code that does the same job. In fact the drag-and-drop editor simply generates the necessary code for you.
Next drag and drop a Text Field object onto the design surface. Use the mouse to size and position this second object.
You could continue to add UI components like this to build up a much richer and more complex form. However for the moment let's concentrate on the button and the Text Field.
Objects, all objects have properties, methods and events that they can respond to.
Let's look at each in turn
Properties are variables that store data.
However in the Swing framework and Java in general a property is generally implemented as a method. There is a lot more to say about this later when we look at objects in depth but for now just accept the fact that there are advantages to defining properties in this slightly more complicated way.
A property corresponds to two methods - a set and a get method - that, as their names suggest get and set the value of the property.
If you click on the button say in the editor then you will see its properties displayed in the Properties window usually down at the right of the Netbeans display.
The properties window displays all of the properties that the Button has and it shows you what their initial settings are.
For example, if you scan down the list and you will see that the Button has a property called text and this is currently set to jButton1.
You can change this to Click Me simply by typing this into the data box. Now if now look at the designer you will see that the Button now has a new caption "Click Me". You can use the Property window to set the initial value of any property that a UI component has.
If you look down the list most of the properties should be fairly easy to understand - background, font, foreground and so on. A lot of the others will only make sense when you dig deeper into how the UI components work.
As well as being able to set properties using the Property Window you can also change properties in code.