Connecting the User Interface to the Application Logic

Example 1 – calling a simple nullary method in a controller

 

We’ll start by writing a class with one method – helloWorld() – and create a user interface to call that method. We go through this in painstaking detail to introduce the facilities of the builder for those who’ve never used a similar product. Don’t be put off – there’s not actually very much to do!

 

public class HelloWorld {

    public void helloWorld() {

        System.out.println("Hello, world");

    }

}

 

  1. Create a project (or use an existing project) in your IDE for the HelloWorld class.  Place the HelloWorld class in the project and compile it.
  2. Launch Bob.
  3. Create a new Bob project (File->New->Project) in Bob.
  4. Make up a name for the Bob project and then save it in the project directory created above - (File->Save As…).
  5. Expose the project properties dialog (File->Project properties…).
  6. Adjust the (relative) classpath to the subdirectory of the project that contains the HelloWorld class (if this directory is “classes” you don’t need to do anything here). If the classes are in the top-level directory, include a blank entry in the class path – i.e. either delete it or have “;” as the first character.
  7. Create an instance of the HelloWorld class as an input to your GUI design. Type “HelloWorld” into the “Input class name: “ field and press tab. You should see an instance of the helloWorld class appear in the inspector next to the node called “input”.  If it doesn’t, make sure the class path is correct and that that class has been compiled – clear the input class name field, press tab and then repeat this step.
  8. Close the project properties dialog.
  9. Create a new frame. (File->New->Frame).
  10. Make a button that calls the method. Click on the node called “input” in the tree to expand it. Drag the “helloWorld” method in the HelloWorld instance on to the new frame.
  11. Run the application. (Press the “run” toolbar button)
  12. Check that it’s working. Press the button in the app you’ve created and check the console that ran the builder – you should see the string “Hello, world” appear in it each time you press the button.
  13. Put the builder back in edit mode. Press the “run/edit” toggle button again.
  14. Save the application. (Press the “save” toolbar button)

 

Example 2 - making the application independent of the builder

 

  1. Expose the project properties dialog (File->Project properties…).
  2. Choose a name for the main class. Type in the new name for the new class in “Main class name:” and press return.
  3. Press “Generate Main class”.

 

This should create a class that looks something like the code below:

 

import java.io.*;

import java.beans.XMLDecoder;

public class Test {

    public static javax.swing.JFrame create(HelloWorld input) {

        InputStream archive = Test.class.getResourceAsStream("/HelloWorld.xml");

        if (archive == null) {

            throw new RuntimeException("Can't find resource: \"/HelloWorld.xml\"");

        }

        XMLDecoder d = new XMLDecoder(new BufferedInputStream(archive), input);

        try {

            return (javax.swing.JFrame) d.readObject();

        } finally {

            d.close();

        }

    }

 

    public static void main(String[] args) {

        create(new HelloWorld());

    }

}

Example 3 – passing information between user interface and application logic

 

In this example we’ll pass information from the user interface to the application logic and vice versa.

 

Compile and instantiate the Calculator class in the builder by going through steps 1-9 above – using the name “Calculator” instead of “HelloWorld:. Then:

 

  1. Drag the properties “a”, “b”, and “c” onto the frame.
  2. Type some numbers into the textfields for properties “a” and “b”. The Calculator class should ensure that “a + b = c” holds while you edit.

 

This example uses strings to represent numbers. It would have been more natural to use integers and the builder will work just the same way if the types of the three variables are converted from strings to java’s primitive “int” type. There is no built-in text editor for integers in the swing library however so we would have had to use the Jslider instead – which would make things a little more difficult to see what is going on.

 

 [Note also the use of PropertyChangeSupport here. The cleanest way to update the user interface in response to changes of state in the application logic is to fire propertyChangeEvents either by using the PropertyChangeSupport class or by implementing the three property change listener methods yourself. This way, the user interface can respond to events in the application logic in the same way that the application logic responds to events in the user interface.]

 

Example 4 – placing a property of the Application Logic into the User Interface

 

In this example we’ll create a model in the application logic and use it as the model of a JTable.

 

Compile and instantiate the MultiplicationTable class in the builder by going through steps 1-9 above. Then:

 

  1. Drag the multiplicationTable instance onto the frame.
  2. You should see a Jtable appear with numbers in it.

 

 

Back to top.