Friday, October 1, 2010

WindowBuilder Pro brief sample – Part 2 of 3

Last week we started testing WindowBuilder Pro and created a simple GWT example project. This time I'm going to show you how to create a Swing project.

There is no specific Swing project option, so we should just create a standard Java project:


After creating the project we are going to create a JFrame class:


On the next screen, enter names for class and package (I'm going to put ar.com.oxen.test.swing - the main purpose of this blog is to make publicity for Oxen :P). When finished, you should have a class like this one:

package ar.com.oxen.test.swing;

import java.awt.BorderLayout;

public class MyFrame extends JFrame {

 private JPanel contentPane;

 /**
  * Launch the application.
  */
 public static void main(String[] args) {
  EventQueue.invokeLater(new Runnable() {
   public void run() {
    try {
     MyFrame frame = new MyFrame();
     frame.setVisible(true);
    } catch (Exception e) {
     e.printStackTrace();
    }
   }
  });
 }

 /**
  * Create the frame.
  */
 public MyFrame() {
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  setBounds(100, 100, 450, 300);
  contentPane = new JPanel();
  contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
  contentPane.setLayout(new BorderLayout(0, 0));
  setContentPane(contentPane);
 }

}

It's worth noting that the wizard created a main method, so we can just run the frame as a ordinary Java application.

In order to edit the frame, we must open the file and select the design tab:


By default, the frame has a BorderLayout. You can use any layout of your preference, depending the needs of your application UI (just drag the layout over the panel). I'm going to use an absolute layout just for this example. After adding A couple of JLabels and JTextFields, we have a nice registration screen:


In order to make the code more readable, be sure of putting a meaningful name in each JTextField variable name (properties view on design editor):


Now, I'm going to show you a pretty cool feature: bindings. With bindings, you can link values between object properties without writing specific code, which eases the implementation of MVC and MVP patterns. With this Swing plugin, a 3rd party library (org.jdesktop.beansbinding) is used. The editor allows a graphical and intuitive definition of such bindings. The SWT plugin has binding support also, but I'm going to test ti on the next post.

Let's begin by adding a JCheckBox for  enabling e-mail notifications (in our imaginary example).


Now, on the bindings tab, we are going to add a new binding, selecting the enabled property of the e-mail text field on Target (left) and selected property of checkbox on Model (right).


There is an option for selecting beans or widgets. For this binding, both sides must be widgets:


Add the binding by clicking on any of the + buttons:


Select READ on UpdateStrategy. This means that when the model is changed, the value is copied into the target. A READ_ONCE strategy makes a copy only one time (when the panel is shown) and a READ_WRITE strategy makes a bidirectional binding.

When you add the binding, you can specify a data converter and a data validator, but I'm not going to cover them on this post.

Now, when you run the example, the e-mail text field is enabled/disabled according to checkbox selection. If you don't believe me, just try it :)

Now, we are going to add a model bean. Let's suppose we have a Person bean which holds the name and the e-mail:

package ar.com.oxen.test.swing;

public class Person {
 private String name;
 private String email = "johann.sebastian@mastropiero.org.ar";

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getEmail() {
  return email;
 }

 public void setEmail(String email) {
  this.email = email;
 }
}

I intentionally put a default value on the e-mail just to show the bidirectionally of the binding. Now, we must add a Person property on the JFrame:



After that, we must add two READ_WRITE bindings from name and email to their respective field text properties (remember selecting "Bean" on Model panel):


This should wire all the properties. Just to test it, we are going to add a button that shows person data on a dialog. In order to achieve this, an action event handler must be added:



the code for the event handler could be as follows:

btnShowPerson.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        JOptionPane.showMessageDialog(null, "Name: " + person.getName()
                + " and e-mail:" + person.getEmail(), "Person data",
                JOptionPane.PLAIN_MESSAGE, null);
    }
});

This should be enough for running the example.

This is all for this post. I hope you enjoyed this mini-tutorial. On the next post (and last one of this serie) I'll play for a while with SWT/JFace editor.

Related posts:

2 comments:

  1. Thanks. This gave me a great introduction to using windowbuilder pro

    ReplyDelete
  2. Great. I'm glad if it was helpful to you. If you want to receive blog updates, please subscribe at http://groups.google.com/group/oxen-software-studio email group.

    ReplyDelete