Friday, October 8, 2010

WindowBuilder Pro brief sample – Part 3 of 3

In my previous post, WindowBuilder Pro brief sample – Part 2 of 3, I explained how to create a simple Swing frame with WindowsBuilder Pro. This time, I'm going to make some examples using SWT and Eclipse RCP.

The SWT plugin has biding capabilities that are similar to the Swing one (which I tested in my previous post), so I'm not going to cover them in this post. I prefer to show you integration with Eclipse RCP, which is really cool (sometimes, when I test new frameworks and tools, I feel like Hommer criticizing dinner).

The plugin can create a new SWT / JFace project, but this just adds such libraries to the project. I't is nice if you want to play for a while with SWT shells and JFace components.



But if we want to build an Eclipse RCP project, we must use the standard Eclipse option, Plugin Project:


You'll need the Eclipse Plug-in Development Environment installed. I recommend you reading this excellent Eclipse RCP tutorial before trying this one. At least, read the installation section.

Put any name for the project on the first wizard page. On the second one:


be sure of checking "This plug-in makes contributions to the UI" and choosing "yes" on "Would you like to create a rich client application?" radiobutton.

On the next step, select "RCP application with a view" template (some Eclipse versions have other templates, in such cases, look for a template that creates a view and a perspective).



In the last step, be sure of selecting "Add branding" option:



The wizard will create a View and a Perspective.  You can edit them just by opening with the graphical editor provided by the plugin. Let's add a button to the generated view. Before dropping the button, I recommend you dropping an absolute layout.




In order to run the application, select Run As -> Eclipse Application in project contextual menu. Something like this should appear:


Now, we aere going to add a new View and a new  Perspective. Start adding the view by selecting New -> WindowBuilder -> SWT Designer -> View Part. Follow the same path in order to create a Perspective. I'm going to call MyView and MyPerspective.

If you open the MANIFEST.MF file, you will see that the plugin automatically edited it in order to add the perspective. Cool.


Now, let's play with the perspective editor. Drop on it both, the first generated view and the new one. They appear in the "other" section.


And as last step (I promise), add the following line:

configurer.setShowPerspectiveBar(true);

to the preWindowOpen method on ApplicationWorkbenchWindowAdvisor class. Now, running the project, you should see something like this:


Changing the perspective, you will see the one that you created:


And that's all folks. I hope you enjoyed this three-steps tutorial.

Related posts:



Monday, October 4, 2010

New Group for Notifications

Since Blogger doesn't automatically notifies followers (too bad!), I just created a Google Group. I configured the blog so each time a new post is published, it is notified to oxen-software-studio@googlegroups.com.

In order to subscribe to the group, please go to:

http://groups.google.com/group/oxen-software-studio

Regards

Lautaro

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: