Dynamic binding of GWT UI components

Ladislav Gažo

Aug. 11, 11 · Interview

Like (0)

Save

17.39K Views

Introduction

Probably all of you know the chapter in GWT documentation about Declarative Layout with UiBinder. It describes a way how to bind individual components within a panel to its UI representation - written in a HTML-like markup language. It allows you to define the UI layout and compile it, so you don't have to do it in the code of the panel directly and are able to switch the UI anytime with different one.

But what if you need to switch the layout while the application is already running?

That is the point where Dynamic UI binder comes. It allows you to specify the binding information in HTML and GWT panel the same way you do in GWT's UiBinder. The only difference is that you don't need to have the layout template in that time. You can load it later using a service or read it/modify it in the code dynamically.

So let's take a look how you would do that.

Showcase

For those impatient: You can find a showcase of this in acris-showcase-widgets project.

Let's suppose we are going to create a simple calculator of how many ships our space fleet has. We have to "leaders" responsible for their ships. So we will have two text boxes to enter the number and a button to calculate everything:

<div class="dyn-panel">
        <div ui:field="message" class="dyn-message">Status messages are shown here</div>
        <div class="fleet-container">
                <div ui:field="description" class="dyn-description"></div>
                <input type="text" ui:field="ashtarShips" />
                <input type="text" ui:field="ptahShips" />
                <button ui:field="recalculateFleet">Recalculate fleet</button>
        </div>
</div>

As you can see we will output status/error messages and have a link pointing to a description (you may wonder why it is a "div" tag, explanation will follow).

OK, let's construct the panel. We start with binder definition:

public class DynamicallyBoundPanel extends Composite {
        interface DynamicallyBoundPanelUiBinder extends DynamicUiBinder<Widget, DynamicallyBoundPanel> {}

        private static final DynamicallyBoundPanelUiBinder binder = GWT.create(DynamicallyBoundPanelUiBinder.class);

        ...
}

As you can see, the syntax is similar to GWT's one, instead of UiBinder we use DynamicUiBinder.

And the fields will follow:

        @UiField
        protected Label message;

        // this is acris-widget Hyperlink because GWT's misses wrap method!
        @UiField
        protected Hyperlink description;

        @UiField
        protected TextBox ashtarShips;

        @UiField
        protected TextBox ptahShips;

        @UiField
        protected Button recalculateFleet;

Hmm, so now the only piece missing is the glue between the template and the binding:

        public DynamicallyBoundPanel() {
                // load the template e.g. from service ...
                String htmlTemplate = "<div class=\"dyn-panel\"><div ui:field=\"message\" class=\"dyn-message\">Status messages are shown here</div><div class=\"fleet-container\"><div ui:field=\"description\" class=\"dyn-description\"></div><input type=\"text\" ui:field=\"ashtarShips\" /><input type=\"text\" ui:field=\"ptahShips\" /><button ui:field=\"recalculateFleet\">Recalculate fleet</button</div></div>";
                binder.setViewTemplate(htmlTemplate);

                // known from GWT UiBinder - initialize
                initWidget(binder.createAndBindUi(this));
        
                ...
        }

For the purposes of the explanation the HTML template is directly put into the variable "htmlTemplate". Usually you will read it from service.

Every tag that has to be matched to a field-widget in the panel must have corresponding name in the attribute ui:field. The value is the same as a name of the field.

The main difference between GWT's UiBinder and DynamicUiBinder is the template setup. Before you execute binder.createAndBindUi(this), the binder needs to have it. You can consider the binder as a factory of panels, so consecutive calls to the pair of methods setViewTemplate/createAndBindUi can lead to different results (if the template changes). That way you can keep one such binder factory initialized and provide only the template based on businness logic requirements.

With bound fields you can perform ordinary GWT coding, e.g. setting the value of the message:

        message.setText("You accessed " + event.getValue() + ". Thank you for your interest in AcrIS. For more information, please visit http://acris.googlecode.com");

And that's it for the showcase... feel free to check it out at AcrIS pages.

Binding (linguistics)

Opinions expressed by DZone contributors are their own.

Comments

Dynamic binding of GWT UI components

Introduction

Introduction

Showcase

Showcase

Popular on DZone

Partner Resources