Login Demo
Also available as a screencast.Creating a Login Window
A login window is very simple GUI to design. We have the following basic requirements:- Let the user enter a username
- Let the user enter a password
- Do something with this when the user clicks "Login", or abort if they click "Cancel"
- Sensible resize behaviour
- Sensible initial size on all look-and-feels (responds well to Window.pack)
Thankfully, you will get the above for free when using either GridBagLayout or JGoodies' FormLayout. By the time we are done, we will have a GUI that looks like this:
First version
For the first version, we'll create the simplest thing possible. We'll be creating three files:-
The view
This is the actual user interface, which is generated and maintained by GUIDE. -
The controller
This is where we respond to events. -
A demo program
Just a simple program with main method to test our app.
The View
We'll start by creating the view first. Right-click on the source package you want to work in and select "New -> Java Form"
The form creation dialog will open. You will need to enter a class and factory method name. At this stage, we're not going to worry about input parameters. We'll call this class LoginView and the method create. The form:
Click "Create" to get started. For the view, we're going to need a few JLabels, a JTextField for the username, a JPasswordField for the password, a "Cancel" button for nervous users and a "Login" button to finish it off. You can drag these items from the palette at the bottom of the screen. Drag everything onto the design and then start aligning the components up.
By default, the frame's contentPane will be set to GridBagLayout. GridBagLayout is a very powerful, but incredibly difficult to use layout manager. GUIDE exposes the layout as freeform design, continuously inferring the optimum constraints from the position of the components. Notice also how components will snap to guides when they line-up or approach other components. This snapping makes it very easy to set up correct layout behaviour. Another thing to note, is that when you align the JTextField with a JLabel, you'll see a guide representing baseline alignment. We'll use these features to create a nice looking view.
Once we have everything aligned up, we can start editing the properties. You can edit the text of JButtons and JLabels directly by double-clicking on them.
That's mostly it for the view. You can test your view using the design preview function. From the menu, select "Design -> Preview" to test your view. In the design preview, you can test the view's resize behaviour, how it looks in different look-and-feels, and how it will respond to the pack() method.
At this stage, you may want to have a look at the file GUIDE has generated. As we have chosen the "New -> Java Form" from the menu, GUIDE has generated a factory method that generates a JFrame. It should be fairly obvious how to use this, although at this stage our GUI doesn't do anything useful.
The Controller
Now that we have created a view, we need to create the Controller to respond to user actions. In GUIDE, a controller must satisfy the following:- Must have a nullary constructor (one that takes no arguments)
- Must be public (and static if an inner class)
- Must not be final or have any final methods
- Must not be abstract
The most obvious place to start to with our controller, is the login event; or what to do when the user clicks "Login". To do this we create an action on our controller. An action is just a public method that takes no arguments. Now our controller looks something like this:
This doesn't do anything useful yet, but we can still get started by linking the button to this method. But first, we need to let GUIDE know about our new controller. Open up the view in your editor and change the signature of the factory method to take our controller as an argument.
If we return to GUIDE, it will detect the file change and load your controller. If you click on the "Actions" tab of inputs, you should see this:
Our method, or action, now shows up. To create an EventHandler that responds to button clicks, simply drag the action from the "Actions" tab onto the login button. If you return to your editor, you will see that GUIDE has create java.beans.EventHandler that calls the login method in response to an "actionEvent". You can test this out immediately using "Preview" from the design menu. Note that when you click the "Login" button, the "Message" pane of the Preview Controller logs the event.
Now we need to actually do something useful in the login method. Nominally, the login method will need to valid the input of both the JTextField and JPassword field. Clearly, it will need a reference to these two components. If we just create simple setters for these components on our controller, GUIDE can inject the values from the view. Our new controller now looks like this:
When we return to GUIDE, it will pick up the changes and if you click on the "Properties" tab of inputs you will see the two setters. To tell GUIDE what to inject, Alt-drag (or CMD-drag on the Mac) the JTextfield onto the userNameField setter, and the JPasswordField onto the passwordField setter. It's time to test our GUI as a standalone program
Putting it all together
The thing we need to do is put this all together in the form of a program. Our program would look something like this:
That's it. There's more to be done, but it's more of the same type of thing. Make sure to look at the finished controller in the Sample Project.