I would like to do absolute layout using said panel by only using ui.xml file however it isn't clear if this is possible since the documentation concentrates on the code and ignores the layout language altogether. I'm assuming, since the tutorial doesn't mention this, it is impossible but would like to know for sure.
I know this is old, but they updated the uibinder for AbsolutePanel
Use in UiBinder Templates
AbsolutePanel elements in UiBinder
templates lay out their children with
absolute position, using
elements. Each at element should have
left and top attributes in pixels.
They also can contain widget children
directly, with no position specified.
For example:
<g:AbsolutePanel>
<g:at left='10' top='20'>
<g:Label>Lorem ipsum...</g:Label>
</g:at>
<g:Label>...dolores est.</g:Label>
</g:AbsolutePanel>
You are right - there's no way to do this at the moment. This could be addressed in a future GWT release by introducing some custom syntax, like it was done for DockLayoutPanel. But I doubt it - you'd want to write code like this:
<g:AbsolutePanel ui:field="absolutePanel">
<g:Button x="50px" y="50px">Test</g:Button>
</g:AbsolutePanel>
However this conflicts with the "bean" (as in Java Beans; if you have a getSomethingCool method, you can write somethingCool="kewl" in the UiBinder code and it will autmagically call the appropriate get/set method) style - because Button doesn't have a setX/Y method. This could be bypassed by replacing the setX/Y calls with appropriate calls to existing methods (CSS positioning, etc) at compile time. But this introduces yet another custom behavior, dependent on the wrapping Widget/Panel - I think the GWT devs would like to avoid that.
Related
Are there any advantages (other than clean code and the like) of using #UiFactory to construct widgets as opposed to declaring them in #UiField and then making additions/changes in the code after the initWidget()?
You can of course use #UiField to let UiBinder instantiate the fields for you during createAndBindUi(). You can then modify them afterwards.
You can of course use #UiField(provided=true), and instantiate the fields yourself, before calling createAndBindUi(). (This way, you can use any constructor you like, and it also allows for Dependency Injection.) And obviously, you can still modify them after createAndBindUi().
So what's the point of #UiFactory? Well, I use it sometimes, when I have many similar elements in the same ui.xml file. So e. g. I have a page that shows a keypad with digits 0-9. Instead of having ten #UiFields, I prefer to use #UiFactory, which constructs the widgets, and puts them in a java.util.Map (plus performs some common setup).
There might be parameters to your UiBinder file that can not be constructed using a simple constructor (e.g. a CssResource to share styles across many UiBinder files).
Using #UiFactory you can inject those resources into your UiBinder file.
I've used JSP tag libs, freemarker, tiles, JSF-Facelets extensively in the past. Similar to their use of taglibs, is there anyway I could do the following in GWT UiBinder:
1) Composition: create a tag library in UiBinder (no java code) and include the tag into another uiBinder file
2) Inheritance: create a base layout UiBinder file (master layoyut) and override specific content areas in child UiBinder files?
3) Pass clientside variables into UiBinder ($(map.property))
In general, I'm not sure how UiBinder compares with other templating libraries.
To insert a content of one page in another with UiBinder create a class mypackage.Header together with a file Header.ui.xml in the same package mypackage. Then your UiBinder holder-file should look like this:
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:mypackage'>
<g:HTMLPanel>
<my:Header />
<!-- other content -->
</g:HTMLPanel>
</ui:UiBinder>
In the first place UiBinder is a very convenient tool for separating UI from its behavior. In addition it helps productivity(it's true!), maintainability, and has other features.
UiBinder in GWT is very different from JSF approach. This tool isn't a render. In contrast to JSF it not contain any loops or condition. There are no if statements in its markup and only a very limited expression language. All the logic is in Java class. And rightly so. It's logical to have loops and conditionals in the class than in view.
UiBinder is not a templating tool. The idea is that XML is easier to read and maintain than Java.
UiRenderer (GWT 2.5) and SafeHtmlTemplates are, but they're quite basic. They answer your 3rd point only.
GWT doesn't answer your first two points.
Having used Wicket recently, I've come to really appreciate its RepeatingView and ListView objects.
They essentially allow you to specify the format of a "row" of data in an HTML template (which roughly corresponds to a UIBinder Foo.gwt.xml), and then in the corresponding Java class you loop over some data, which is then formatted and displayed according to the template.
The GWT version of this seems to require defining a brand new Row.gwt.xml template and Row.java class, which you then reference from the containing Foo.gwt.xml and Foo.java class.
Is there a way to do something like this in a single GWT UIBinder file/class, without creating a subsidiary Row.gwt.xml and Row.java?
does this help ?
http://ptrthomas.wordpress.com/2008/09/04/wicket-and-gwt-compared-with-code/
I'm just going through the GWT Tutorial and one point which just don't understand is when and why to use dependent secondary styles. If I define a style in the .css stylesheet, and use the addStyleName method it seems to have the same effect.
E.g. applying a secondary dependent style to a button or applying the it as a non-dependant style seems to yield the exact same results.
Basically the dependent name is more general, since it's calculated at runtime. You can add a dependent name of "highlighted" to any Widget without knowing what it is, and GWT will come up with the appropriate css class name for you. You don't have to hard code button-highlighted, select-highlighted, mycustomthing-highlighted in GWT this way (you do still need to create them all in your css code).
I'm liking the new GWT2 UiBinder, however, it's not clear whether certain things are achievable using the declarative UI style.
For instance, ToggleButton only takes the image instances at construction time (no setters for up/down images). As I understand, UiBinder works in a JavaBean-like reflective way, where the assignable attributes are mapped to corresponding setters. Is this style possible with widgets like ToggleButton, where certain attributes have to be specified at construction time?
<g:ToggleButton ui:field="myBtn"></g:ToggleButton>
#Matt Moriarity: Thanks for the tip! I found I had to do it like this:
<g:ToggleButton ui:field="foo">
<g:upFace><img src="images/bar.png"/></g:upFace>
</g:ToggleButton>
If you don't specify other faces (e.g. downFace), that image is used for all button states.
Edit: I guess you use ui:image when you're formally specifying external resources?
You can create these widgets using a #UiFactory or by providing it using #UiField(provided=true)
See http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Using_a_widget
Try something like this:
<g:ToggleButton>
<ui:image src="..." />
</g:ToggleButton>