Ribs makes UI development for Swing easy, following the common UI methodology of Model-View-Controller (MVC) architecture better than any other solution. As a developer, you provide the model and Ribs provides the View. And you both collaborate on the controller, through just two methods: resetUI() and respondUI().

In this tutorial, we will construct a simple temperature conversion application to convert Fahrenheit to Celcius. We will cover the following different topics:

• The Model
• The View
• The Controller
  • getUI() method
  • resetUI() method
  • respondUI() method
  • main() method

The Model

The model is the term used to refer to your Java dataset. A contact manager might simply have a collection of Contact objects, implemented as a Java.util.List of instances of your custom Java class, Contact.java. For the purpose of this tutorial, our dataset will simply be a Temperature object:

public class Temperature {

    float    _fahrenheit = 0;

    public float getFahrenheit() { return _fahrenheit; }

    public void setFahrenheit(float aValue) { _fahrenheit = aValue; }

    public float getCelcius() { return (_fahrenheit-32)*5/9; }

    public void setCelcius(float aValue) { _fahrenheit = aValue*9/5 + 32; }
}

Save this file as Temperature.java.

The View

The view we simply draw in Ribs. Let's just add four controls with the following names:

• A text field named FahrenheitText
• A text field named CelciusText
• A button named FahrenheitButton
• A button named CelciusButton

Save this file as Convert.rib. You can also add some JLabels for readability.

The Controller

The final piece is the controller. The controller simply has three methods: getUI, resetUI, and respondUI. For this simple example, we will also have a main method.

public class Convert {

    // Our dataset - simply a temperature object
    Temperature _temperature = new Temperature();

    // The Swing GUI panel
    RJPanel _ui;

    public RJPanel getUI() { ... }

    public void resetUI() { ... }

    public void respondUI() { ... }

    public static void main(String args[]) { ... }
}

Save this file as Convert.java.

Get UI

The get UI method simply needs to load the rib file we created above. Ribs has one single line of API to accomplish this: Ribs.getRib(). This method generally takes only one argument, the controller, and Ribs will do several things with this given object: find the corresponding ".rib" file (assumed to be in the same directory as the .java), bind to any instance variables that have the same name and type as a control in the rib file, and bind all of the controls action listeners to the respondUI method of the given object. From the code standpoint, however, loading a Rib file is as simple as this:

    /** Returns Swing GUI panel for controller (load/cache, if needed). */
    public RJPanel getUI()
    {
        // If Swing UI panel hasn't been loaded, load it
        if(_ui==null)
            _ui = Ribs.getRib(this);

        // Return Swing UI
        return _ui;
    }

Reset UI

Whenever the model is changed we can tell Ribs that our controller needs updating by calling Ribs.reset(myController). This call registers for a resetUI() call on our controller and has several benefits. For one, it can be called several times for a single event and it will automatically coalesce, so resetUI is only called once. For another, it calls resetUI on the main AWT Event thread after delay, so it is thread safe and so any other change has had a chance to propagate.

From the code standpoint, though, we only need to implement a simple resetUI method. In this method we simply tell our Ribs top-level JPanel to update each of our controls. Ribs does this with it's universal accessor method, so that you don't have to check the docs for different controls or change your code if you swap in a different control:

    /** Updates the Swing GUI panel controls from our dataset. */
    public resetUI()
    {
        // Update FahrenheitText
        _ui.setValue("FahrenheitText", _temperature.getFahrenheit());

        // Update CelciusText
        _ui.setValue("CelciusText", _temperature.getCelcius());
    }

Respond UI

Whenever the user manipulates a Swing UI control in your panel, your controller's callback method is called. This is "respondUI" by default. In this method, you simply update your model from the given control:

    /** Updates our dataset from the Swing GUI panel controls. */
    public respondUI(Object anObj)
    {
        // Handle FahrenheitText and FahrenheitButton
        if(_ui.equals(anObj, "FahrenheitText") ||
            _ui.equals(anObj, "FahrenheitButton")) {
            _temperature.setFahrenheit(_ui.getFloatValue(anObj));
            Ribs.reset(this);
        }

        // Handle CelciusText and CelciusButton
        if(_ui.equals(anObj, "CelciusText") ||
            _ui.equals(anObj, "CelciusButton")) {
            _temperature.setCelcius(_ui.getFloatValue(anObj));
            Ribs.reset(this);
        }
    }

Main

Finally, since this is a very simple example, we need to kick things off in our main method:

    public static void main(String args[])
    {
        // Create controller, load UI and make visible
        new Convert().getUI().setWindowVisible(true);

    }

Summary

Well that was pretty easy, wasn't it!

Check out the example: [Convert Jar]