Wrapping HTML Content into UIBinder

[Mohammed]

Hi Folks,

  I am using GWT 2.6 to develop my web application.Since i am getting the HTML prototype from UX/UI designer can i wrap the html directly into uibinder in GWT?

• Is so,then how to write event handler or validation for the component?
• Can i expect the same output (as looking in HTML prototype)?
• Generated code will be match exactly as looking in HTML,Is this Possible using UIBinder Approch?
• Is there any performance Issue?
• some time HTML Prototype will internally having jquery component,Can i wrap JQuery in GWT using UIBinder Approach?

Please give me your valuable suggestion?Thanks in advance?

[Benjamin Possolo]

You should start by reading the UiBinder documentation.

That has a lot of good examples that you can follow.

In order to wrap just basic HTML, you should use an HTMLPanel widget.

<g:HTMLPanel>

  <p>Your basic html goes inside the HTMLPanel like this</p>

  <div class="foo">bar</div>

</g:HTMLPanel>

Performance is very good with UiBinder templates. It is better than constructing the UI programmatically because it involves a lot less function calls. Not to mention its just easier to read/understand.

If you want to manipulate the html/dom elements that exist in your UiBinder template, You'll need to bind them to the Java class

So the aforementioned example would look like this:

<g:HTMLPanel>

  <p>Your basic html goes inside the HTMLPanel like this</p>

  <div class="foo" ui:binder="foo">bar</div>

</g:HTMLPanel>

In your java class

@UiBinder

DivElement foo;

when your java class is instantiated (and after a call to binder.createAndBindUI()) the foo variable will have a reference to the div element and you can execute methods on it like set inner text, set inner html, add styles programmatically, etc.

Event handlers are done in a similar way. See UiBinder documentation above for examples.

To use jQuery in your code, you need to add the <script> element with the link to the jquery javascript in your HTML host page....and then you need to create JSNI methods: java code that wraps your javascript code.

See the GWT JSNI documentation for that. Too complicated for me to explain here.

Benjamin