GWT UiBinder Use Cases

Could someone provide an example on how to user UIBinder and the DockLayoutPanel??

Still working on it. Its non-standard add() semantics require a custom parser, which I'm writing as we speak.

Could someone tell if it is possible to achieve something like (syntax is definitely wrong but I hope you get the idea - it's more of a pseudo code )

foreach (String s in stringList)

<div class='{res.style.mainBlock}'>

<div ui:apply='{res.style.userPictureSprite}'>

Well hello there <ui:gwtLabel value={bind to s} />

</div>

</div>

I've seen that it possible to define a filed of for example list and then in java class add items to that field.. but I would prefer something like above - to have a loop which would generate widgets and bind there property to a value.

I wonder personnaly why javafx syntax was not chosen instead of the UIBinder xml one in order to express cleanly and in a declarative manner a GUI... A GUI specific DSl is in my sense more efficient, especially is it is javafx which is chosen as a basis. regards

@xavier.mehaut According to samples above, one of the goals is to support a subset of the native HTML syntax, such as <div> and <span>. XML looks like a reasonable compromise to achieve this. In JavaFX it would not be as natural. My 2 cents.

This system is most emphatically not meant to be a template system, in the sense of JSP. It's not something you "run" every time you need to update data -- rather, it's a simpler way to write widget construction code that can be a giant pain in Java. It also makes it much, much simpler to mix in simple HTML constructs where appropriate, without having to go through all the difficulty of using widgets like HTMLPanel by hand.

As to XML vs. JavaFX, I think Yegor pretty much captures it -- if there were no HTML involved, it would probably be a toss-up. But there's no getting around the fact that we do have to interoperate deeply with HTML constructs, which really are sometimes the best (and often the most efficient) way to get things done in a browser.

Could someone tell if UiBinder supports DialogBox?? - I tried it but got compilation errors in generated UiBinderImpl? class... Moreover, it passes all dialog's content (including GWT widgets as a string in setHTML method:

f_DialogBox1?.setHTML("<gwt:VerticalPanel? horizontalAlignment='rigth'>...?</gwt:VerticalPanel?>");

While it doesn't make a great deal of sense to put a DialogBox? in a .ui.xml file, because it's intended to be displayed via its own show() method, we should be giving a better (and earlier) error than this. Note that you can still create a dialog box's contents using UiBinder.

I could imagine wanting to do this, though. Suppose I'm making a bit of UI that needs a dialog to show up on occasion. Having it in my main ui.xml seems natural and convenient.

The main thing fighting this is our current insistence that there is a single root element in ui.xml file. If we relaxed that, you could create something like:

<ui:UiBinder ...>

<g:HTMLPanel field='root'> ... </g:HTMLPanel> <g:DialogBox? field='dialog'> ... </g:DialogBox?>

Makes me wish that createAndBindUi returned void.

2.1?

@jgw I think it makes sense to have view objects initialized from a .ui.xml file as a whole. Since DialogBox is a view, why do I have to describe dialog's content in xml and at the same time initialize dialog itself (set its caption, other view related properties like animationEnabled etc) in my code?

And more general question: I am trying to understand if it is possible to follow MVP pattern with UiBinder, e.g. can I follow practices described at Google I/O and in this blog?

BTW, I have found a workaround for the DialogBox? problem.

At first I had to create a subclass for DialogBox? implementing HasWidgets? interface:

public class HasWidgetsDialogBox extends com.google.gwt.user.client.ui.DialogBox
        implements HasWidgets {
    @Override
    public void add(Widget w) {
        Widget widget = getWidget();
        if (widget != null && widget instanceof HasWidgets) {
            ((HasWidgets) getWidget()).add(w);
        } else {
            super.add(w);
        }
    }
}

Then goes my test Dialog (note it is the owner of its controls):

public class TestDialogBox extends HasWidgetsDialogBox {

    @UiTemplate("TestDialogBox.ui.xml")
    interface MyUiBinder extends UiBinder<TestDialogBox, TestDialogBox> {
    }

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    @UiField
    Label labelTextToServer;
    @UiField
    Label labelServerResponse;
    @UiField
    Button buttonClose;

    public TestDialogBox() {
        uiBinder.createAndBindUi(this);
    }

    @UiFactory
    protected TestDialogBox createDialog() {
        return this;
    }

    @UiHandler("buttonClose")
    protected void doClose(ClickEvent event) {
        this.hide();
    }
}

And finally corresponding .ui.xml:

<gwt:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
              xmlns:gwt='urn:import:com.google.gwt.user.client.ui'
              xmlns:my='urn:import:yd.tests.gwt.client'>
    <my:TestDialogBox text="Remote Procedure Call" animationEnabled="true">
        <gwt:VerticalPanel horizontalAlignment="ALIGN_RIGHT">
            <gwt:HTML>
                <b>Sending name to the server:</b>
            </gwt:HTML>
            <gwt:Label ui:field="labelTextToServer" />
            <gwt:HTML>
                <br/>
                <b>Server replies:</b>
            </gwt:HTML>
            <gwt:Label ui:field="labelServerResponse"/>
            <gwt:Button ui:field="buttonClose" text="Close"/>
        </gwt:VerticalPanel>
    </my:TestDialogBox>
</gwt:UiBinder>

I agree on the DialogBox? use case, and will try to make it work. Thanks for the workaround.

Oh, and yes: UiBinder gets along just fine with MVP. One thing I want to start experimenting with is having binder instances injected by GIN, e.g.:

MyView extends Widget {
  public interface Binder extends UiBinder<MyView, Widget> {}
  private static final Binder defaultBinder = GWT.create(Binder.class);

  public MyView() {
    this(defaultBinder);
  }

  @Inject
  public MyView(Binder binder) { 
    binder.createAndBindUi(this);
  }
}

Although this will require making UiFields? public, which is kind of gross.

Are you running into any particular problems?

Folks,

is there a way to bind more than one element to a method, e.g.

  @UiHandler("textField1")
  @UiHandler("textField2")
  protected void updateLogin(KeyUpEvent event) {
    model.validate();
  }

And is there anything planned for two-way bindings? I was playing around with gwittir but I was not very happy with it so far. I like the UIBinder approach which makes accessing the UI elements easier and saves a lot of code, but with gwitter i like in principle the two-way binding, converting, validating, etc. Any comment or idea?

  @UiHandler({"textField1", "textField2"})
  protected void updateLogin(KeyUpEvent event) {
    model.validate();
  }

Hi guys!

I coudn't get this <g:Image resource='{res.logoImage}'> working and I realy like ImageBundle? so here is a tip to use ImageResource and ImageBundle? with UiBinder

package com.google.gwt.user.client.ui;

import com.google.gwt.resources.client.ImageResource;

public class UiImage extends Image {

	public void setResource(ImageResource resource) {
		setUrl(resource.getURL());
		setWidth(resource.getWidth() + "px");
		setHeight(resource.getHeight() + "px");
	}
	
	public void setBundle(AbstractImagePrototype prototype) {
		prototype.applyTo(this);
	}
}

<ui:with field='resources' type='com.gwt.test.client.ColorPickerResources'/>
<ui:with field='bundle' type='com.gwt.test.client.ColorPickerBundle'/>

<g:FlowPanel>
  <g:UiImage resource='{resources.marker}'></g:UiImage>
  <g:UiImage bundle='{bundle.marker}'></g:UiImage>
</g:FlowPanel>

rjrjr, thanks, I've just started studying GWT and looking for best practices to save time. I am playing with GWT starter application refactoring it to use UiBinder, runAsync and to follow MVP, Humble Dialog patterns etc.

One problem I found is that attributes of UiBinder-generated VerticalPanel? are set at the end of panel construction:

buttonClose.setText("Close2");
f_VerticalPanel2.add(buttonClose);
f_VerticalPanel2.setHorizontalAlignment(com.google.gwt.user.client.ui.HasHorizontalAlignment.ALIGN_RIGHT);
f_TestDialogBox1.add(f_VerticalPanel2);

while to make it look as in original starter app, it there should be the way to call it before button "close" is added:

                        dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);
dialogVPanel.add(closeButton);

It there any way to get Close button right-aligned?

One more thing: to give Presenter more flexibility to manipulate DialogBox? view, it might be useful to introduce cancellable closing event for dialog, similar to FormPanel?.SubmitEvent?. Do you think it makes sense?

@gal.dobler

That won't work until http://gwt-code-reviews.appspot.com/77805 lands, later today I expect.

@dygger, that sounds like a plain old bug on VerticalPanel?, but I doubt we'll fix it. That panel is on the verge of being deprecated in favor of the new Layout classes. Look for the samples to be updated accordingly in the coming weeks.

Re: the cancelable close event on DialogBox?, that's a fine idea (God knows when we'll get to that fine idead, but...) Would you mind filing an issue?

Thanks!!

UiBinder + GIN. I have a hard time to understand how to mix GIN-injected classes with widgets instantiated by the UI Binder. The problem is that same widget (if declared in the ui xml) can be instantiated twice, once by the binder, another time by GIN.

I know I can declare fields as provided=true. But it does not solve the problem really in case of a bottom level class owning a corresponding @UIField. This class has to be injected in order to provide the value for the ui field, which means it cannot be itself instantiated by the binder. So some upper class has to provide it too, and so on, going all they up to the top most widget class. So it seems like UI Binder is orthogonal to GIN injection mechanism. Any ideas how these two can work together?

Hello everybody, I've just started studying GWT with UiBinder. good ! Which WYSIWYG editor can I use to produce design with UiBinder(equivalent to Microsoft Blend) ?

If not exist how create a design and maintains it with a standard WYSIWYG Html editor like dreamweaver ?

Thanks!!

Galb.

I wouldn't if the Google Eclipse Plugin gets updated to support UiBinder in the near future, but it probably won't happen until GWT 2.0 is out. You'll have to ask Miguel Mendez :)

Is there a UIBinder dtd or schema anywhere to which we can validate and use in our IDE for auto-completion?

Not yet, though it's on the list.

Hello all.

I have a question concerning how to access/modify the size of a DockLayoutPanel?'s widget outside of the .ui.xml file in the java code.

For instance, say I have a DockLayoutPanel? with a West widget and a Center widget as follows:

<g:DockLayoutPanel unit='EM'>
    <g:west size='20'>
       <layouts:WestWidget ui:field='westWidget' />
    </g:west>
    <g:center>
      <layouts:CenterWidget ui:field='centerWidget' />
    </g:center>
  </g:DockLayoutPanel>

Is it possible to dynamically change the width of the westWidget somewhere in the associated java code, or can it only by modified in the .ui.xml file.

The problem is, I would like to be able to hide/show the westWidget and have the centerWidget fill the remaining space dynamically when the app is running, but changing the width of westWidget in the java code has no effect on the width of the West Pane of the DockLayoutPanel? that was hard-coded in, there is a disconnect between them.

Any help would be greatly appreciated.

Sincerely,

George.

I may be missing something but shouldn't the argument to the initWidget call in Apply different xml templates to the same widget be

  protected FooPickerDisplay(UiBinder<Widget, FooPickerDisplay> binder) {
    initWidget(binder.createAndBindUi(this));
  }

@jchimene Fixed, thanks.

first of all thank you guys for the great work!

why is nowhere an example to find from the scratch to html design? i searching for it very intensive, but iam not founding it...

i am searching for an example where i can embed the xml with html sites for multiple modules. i would like to create themes for my gwt app. am i asking on the right place? i hope so.

@OsorioJaques?, we're still stumbling toward just how to use UiBinder effectively in a themed app. The last example, "Apply Different XML Templates..." is a hint of how it might be done, though its a bit over complex.

I expect we'll wind up with widgets that have default UiBinder instances as final static fields, GWT.created to allow substitutions; and which accept binder instances as constructor arguments to use instead. Something like:

  class MyWidget {
    public interface Binder extends Binder<Widget, MyWidget>{}
    private static final DEFAULT_BINDER = GWT.create(Binder.class);

    MyWidget() {
      this(DEFAULT_BINDER);
    }

    MyWidget(Binder binder) {
      ...
    }
  }

The ugly bit here is that it would effectively require the themed Widget's bound fields to be public and non-final, so we'll probably have to teach UiBinder some new tricks to make it more palatable.

I think theres a couple of errors in the "Using an external resource with a UiBinder" example, in the .ui.xml file:

The image's resource attribute references {res.logoImage} rather than {res.widgetyImage} - what the image is called in the Resources clientbundle

The nameSpan is identified using ui:field="userNameField", which does not match the field name in the LogoNamePanel? class, where it is called nameSpan.

I'd like to use a Css file from which I'm not using ALL the stylesnames initially. However, I've noticed the generated CssResource does not include unused stylenames. Is there a way to solve this solution (somewhere in the code to use addStyleName) ?

@alex.dobjanschi, that's not an accident. It sounds like you want to create your own CssResource and pass it into your template via <ui:with>

@keith.rogers79 Fixed, thanks.

@alex.dobjanschi, you might find com.google.gwt.resources.css.InterfaceGenerator? handy.

I've got error messages with the new rc1 and the new plugin : Field xxx has no corresponding ui:field in template file yyyy.ui.xml But 1) it worked before rc1, 2) have got an ui:field spelled correctly.

The view.java

public class WidgetsView extends Composite 
             implements WidgetsPresenter.Display {

	interface MyUiBinder extends UiBinder<Panel, WidgetsView> {}

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

	@UiField CssResources style;
	
	@UiField Localization msg;
	

	@UiField(provided = true)
	final ResultTable<PersonVto> table = new ResultTable<PersonVto>();
	
	public WidgetsView(){
...

The ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
  			 xmlns:g='urn:import:com.google.gwt.user.client.ui'
		        xmlns:pix='urn:import:com.publigroupe.common.gwt.widgets.client'
		        xmlns:table='urn:import:com.publigroupe.common.gwt.widgets.client.table'
		        xmlns:menu='urn:import:com.publigroupe.gwtdemo.client.screen.menu'>
        
        <ui:with field='style' type='com.publigroupe.gwtdemo.client.screen.widgets.CssResources'/>
        <ui:with field='msg' type='com.publigroupe.gwtdemo.client.screen.widgets.Localization'/>
        			
        <g:VerticalPanel width='100%'>
        	<g:Label styleName='{style.h1}'>Boutons standards</g:Label>
	        <g:VerticalPanel width='100%' spacing='5'>
				<pix:PixButton text='Retour'/>
				<pix:PixButton text='Annuler'/>
	        </g:VerticalPanel>
			<g:Label styleName='{style.h1}'>Boutons actions</g:Label>
	        <g:VerticalPanel width='100%' spacing='5'>
				<pix:PixButton type='action' text='Login' enabled='false'/>
				<pix:PixButton type='action' text='Valider'/>
			</g:VerticalPanel>
			<g:Label styleName='{style.h1}'>ResultTable</g:Label>
	        <g:VerticalPanel width='100%' spacing='5'>
				<table:ResultTable ui:field='table' styleName='pix-ResultTable'/>
			</g:VerticalPanel>
		</g:VerticalPanel>
		
</ui:UiBinder> 

@rjrjr+pe...@google.com

"That panel is on the verge of being deprecated in favor of the new Layout classes."

Can you please tell us what the new layout-classes are? Are they documented in the API reference?

Actually, I was wrong: VerticalPanel? and HorizontalPanel? are not yet deprecated in 2.0. (Although I can't think of any reason at all to use VerticalPanel? rather than a plain old <div>.)

In 2.0 StackPanel?, TabPanel? and DockPanel? are all deprecated in favor of StackLayoutpanel?, TabLayoutPanel? and DockLayoutPanel?.

I found these UiBinder use cases very helpful in understanding the APIs.

However, I am unable to determine if UIBinder addresses the gwt 1.7 issues I have with formatting my app layout using CSS.

Specifically,

• HTML generated by gwt layout widgets is not transparent/explicit, obscuring the application/intrepretation of css to the layout
• HTML generated by gwt layout widgets is table based, foregoing the possiblity of many css layout techniques

Is one of the intentions of UiBinder to facilitate the use of CSS for app Layout by:

• Allowing definition of an explicit HTML structue in the UIBinder xml to which css can be applied
• Allowing app structure to be defined without use of the table based gwt widgets

Thanks for your feedback.

@vincent.case: It's not clear precisely what you're referring to when you reference the "gwt layout widgets". Are you referring to the new LayoutPanel? structures or the existing panels such as DockPanel?, Horizontal/VerticalPanel? and such? The existing panels derived from CellPanel? are all based on tables, which we know to be problematic under some circumstances.

The newer LayoutPanel? classes do not use tables, are much more predictable in their behavior, and fully support standards-mode doctypes, unlike the older table-based panels.

If you want to use common CSS layout techniques involving tricks like float:left, explicit large margins, and so forth, there's nothing stopping you from using regular widgets in FlowPanels? and HTMLPanels and applying whatever CSS trickery you like. UiBinder actually makes this much easier by making it simple to use HTMLPanel and mix arbitrary HTML and widgets.

Hi all,

About that Hello World example, I want to know how to get the Hello World example running in GWT. Do I create a separated xml file (HelloWorld?.ui.xml) or should I need to put it in the original xml file?

Also do I need to make a different class for the Hello World java code or do I need to put the code in the entry point class?

public class HelloWorld? extends UIObject { // Could extend Widget instead

interface MyUiBinder? extends UiBinder<DivElement?, HelloWorld?> {} private static MyUiBinder? uiBinder = GWT.create(MyUiBinder?.class); ...............................

I already have installed the latest Gallileo Eclipse 3.5 and gwt-2.0.0-rc2.

Please give me an explanation.

Thank you in advance.

@revoltcss, it's much simpler than that, updated the example

How do I add a widget that is generic? For example, a Table<RowType> ?

all set to try the new uibinder,

@johan.rydberg, generics support is anemic, trying only not to break things. You can't specify generics in your ui.xml file, and you'll need to instantiate your Table<RowType> in your owner class.

I'm pretty sure this should work (making some presumptions about your typed Table class):

<my:Table ui:field='rowTypeTable' />

@UiField(provided = true)
final Table<RowType> rowTypeTable = new Table<RowType>() {}