A Jigloo Swing Application Framework (JSR 296) Tutorial

In this simple tutorial you will create a small text editor application with an "About" dialog based on the Swing Application Framework (JSR 296).

You will use GroupLayout to arrange the elements on both forms, and will use pre-defined actions as well as creating some new ones.

Since some of the topics (involving basic use of Jigloo to create forms) have already been covered in "A Jigloo Swing Tutorial" they will not be repeated here.
You are therefore encouraged to at least have a brief  look at that tutorial.

New Topics covered:
 First you will need a Java project and (preferably) a package to hold your classes.
If you don't know how to do this then hitting Ctrl+N is a quick way to bring up the "Create" dialog from which you can perform both these steps.

NOTE: You also need to set your project to use Java 6, since the Swing Application Framework requires it.

Creating the main Application
Create new Empty SingleFrameApplication
...again, Ctrl+N will show the "create" dialog, from which you should select "GUI forms->Swing Application Framework->Empty SingleFrameApplication"


Before showing the editor Jigloo will offer to add the required jar files to your project - there are two of them and unless you have a good reason not to, you should accept - otherwise your classes won't compile or run.



Choose your editor preferences
Now we've got a Jigloo editor open, let's change how it looks. Click on the "Open Jigloo preferences editor" button in the toolbar to the left of the Jigloo editor. The Eclipse preferences window appears with Jigloo selected. Choose "Appearance and Behaviour" and then "Tabbed panels". This is useful when you want to maximize your design area, but "Split-pane" can be useful if you want to see immediately the connection between code and GUI.

Now hit "OK" and close and re-open the Jigloo editor (you need to do this to change to tabbed panels). If your java class does not immediately re-open in the Jigloo editor, you can ensure that it uses Jigloo's Form Editor by right-clicking on the class and choosing "Open with->Form editor".

You should now see something like this:


You can see that

Set layout to GroupLayout
You can either select the GroupLayout icon in the "layout" palette, or right-click on the JFrame and select "Set Layout->GroupLayout"


Add toolbar, editor pane and buttons
Add a JToolbar to the top-left of the main form and drag it across to the right side - you should notice that it is now anchored to both sides of the form (ie it expands horizontally).
Now add four JButtons to the toolbar - you can hold down CTRL+SHIFT after adding the first button to quickly add the other three.
Now add two buttons to the bottom right of the form.
Then add a JScrollPane under the toolbar and stretch it across the form and between the toolbar and bottom buttons.
Finally, add a JEditorPane to the JScrollPane, and reset the toolbar to it's default height.

You should have something like this:



Associate the pre-made actions with the toolbar buttons
Locate the "Copy" action in the outline tree view, then drag it and drop it on jButton1


Do the same with the other three actions and the other three buttons. You should see the following:




In order for the actions to function properly they must not be focusable, so select all four buttons and set their "focusable" property (probably in the "Expert" property category) to "false".

Now, although the buttons look OK in the editor, we need to stop the button text overwriting the action's text.
So open up the property file editor (tab on the bottom of the Jigloo editor) and remove the four lines that set the text properties of the four buttons.


Also, since we are here, edit the "mainFrame.title" property to say something like "A test text editor".

Now go back to the "GUI Editor" tab and notice how the form is re-parsed and re-generated after editing the properties file, and now shows a different title.

If you like, you could run the application now and see how the buttons work with the JEditorPane - when it has the focus.



Creating the "About" dialog and linking it to the main frame
Add the About JDialog
Create a new JDialog - and just for fun lets put it in a separate package. Jigloo will detect that the App Framework classes are in the build path and will assume that this JDialog should also use the App Framework classes. So, when the JDialog is opened in the GUI editor, Jigloo will create a resources folder and also a properties file for it.

Then, set the layout to GroupLayout and add a button and label (like in the Swing Tutorial). Also, add an okAction with text "OK" and associate it with the button.

If you need help with this, please refer to "A Jigloo Swing Tutorial".

Now edit the java code for the okAction as follows:
 
    @Action
    public void okAction() {
        dispose();
    }
As with the main frame, we will also need to remove the button's text property from the property file, so the action's text comes through.





Now, go back to our main application and add an action "aboutAction", associated with the bottom-right button. Then delete the button's text property from the properties file.

Now we will add code to the aboutAction, so double-click on the aboutAction in the Outline view. Then add the code:
    @Action
    public void aboutAction() {
        AboutDialog about = new AboutDialog(getMainFrame());
        about.pack();
        about.setLocationRelativeTo(null);
        about.setVisible(true);
    }

Do the same thing for the other button, but this time add a closeAction (with text "Close") and code:

    @Action
    public void closeAction() {
        getMainFrame().dispose();
    }


Running the app
Congratulations! You are all done! Hit CTRL+S to save the form. A quick way to run the main method of the class you just created is to click the "Run" button in the Outline view.


The main frame should appear in the middle of the screen.