You should start by reading the UiBinder documentation 
<http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html>.
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 
<http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html> for 
that. Too complicated for me to explain here.

Benjamin


On Thursday, January 15, 2015 at 8:34:04 PM UTC-8, Mohammed wrote:
>
> 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?
>

-- 
You received this message because you are subscribed to the Google Groups "GWT 
Contributors" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-web-toolkit-contributors/e2696eea-f39f-4645-bc1d-d80c1e81dcac%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to