I am fitting with UiBinder in gwt. I am using collapse uibinder (bootstrap library). I have the follow code:
<b:Collapse b:id="toggle1" existTrigger="true" ui:field="toggle1">
<b:FluidRow>
<b:Column size="12">
<b:Alert close="false" animation="true" heading="Cabecera">
Text
</b:Alert>
</b:Column>
</b:FluidRow>
</b:Collapse>
My problem is I need change the b:id="toggle1" when I create it. I need use variable. Could someone explain me how to do it? I have looking on internet but I did not find a good explanation
Thank you very mucho in advice.
Set ID in JAVA after calling createAndBindUi().
collapseWidget.getElement().setId("toggle2");
Steps to follow:
Add below entry in you gwt.xml
<inherits name="com.google.gwt.user.Debug"/>
Use debugId along with ui:field as shown below in your ui.xml
<gwt:CheckBox ui:field="myCheckBox" debugId="myCheckBox" />
Now you can get the Id
myCheckBox.getElement().getId();
All the Ids are generated with default prefix gwt-debug- as shown below. If you want then you can remove it.
gwt-debug-myCheckBox
Use any one getElement().setId() or ensureDebugId(). The difference between them is prefixing with gwt-debug-. ensureDebugId() uses prefix.
Sample code: (Setting ID of cancelButton dynamically)
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Widget;
public class MyDialogbox extends DialogBox {
private static MyUiBinder myUIBinder = GWT.create(MyUiBinder.class);
#UiTemplate("MyDialogbox.ui.xml")
interface MyUiBinder extends UiBinder<Widget, MyDialogbox> {
}
public MyDialogbox() {
setWidget(myUIBinder.createAndBindUi(this));
System.out.println(cancelButton.getElement().getId());
cancelButton.getElement().setId("cancel");
}
#UiField
Button cancelButton;
#UiHandler("cancelButton")
void doOpenDialogBox(ClickEvent event) {
hide();
}
}
MyDialogbox.ui.xml
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:DialogBox autoHide="true" modal="false">
<g:caption>
<b>Caption text</b>
</g:caption>
<g:HTMLPanel>
Body text
<g:Button ui:field='cancelButton' debugId='cancelButton'>Cancel</g:Button>
<g:Button ui:field='okButton' debugId='okButton'>Okay</g:Button>
</g:HTMLPanel>
</g:DialogBox>
</ui:UiBinder>
Related
Below are the total files used in project. It is giving these errors
[ERROR] [cricketscore] - Deferred binding failed for 'test.client.UserDashboard.MyUiBinder'; expect subsequent failures
and
[ERROR] [cricketscore] - Unable to load module entry point class test.client.DashBoard (see associated exception for details).
Please help me resolve the problem in it.
Cricketscore.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
When updating your version of GWT, you should also update this DTD reference,
so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.0//EN"
"http://google-web-toolkit.googlecode.com/svn/tags/2.5.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='cricketscore'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->
<!-- Other module inherits -->
<!-- Specify the app entry point class. -->
<entry-point class='test.client.DashBoard'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>
Dashboard.java
package test.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
public class DashBoard implements EntryPoint{
#Override
public void onModuleLoad() {
RootPanel.get().add(new UserDashboard());
}
}
UserDashboard.ui.xml
<!-- UserDashboard.ui.xml -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:test.client' >
<g:HTMLPanel>
<my:CricketScores ui:field='scores' teamNames='AUS, SAF, WA, QLD, VIC'/>
</g:HTMLPanel>
</ui:UiBinder>
CricketScores.java
package test.client;
import com.google.gwt.uibinder.client.UiConstructor;
import com.google.gwt.user.client.ui.Composite;
public class CricketScores extends Composite{
public #UiConstructor CricketScores(String teamNames) {
this(teamNames.split("[, ]+"));
}
public CricketScores(String... teamNames) {
// TODO Auto-generated constructor stub
}
}
UserDashboard.java
package test.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiFactory;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class UserDashboard extends Composite {
interface MyUiBinder extends UiBinder<Widget, UserDashboard>{}
private static final MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
private final String[] teamNames;
public UserDashboard(String... teamNames) {
this.teamNames = teamNames;
initWidget(uiBinder.createAndBindUi(this));
}
#UiFactory CricketScores makeCricketScores() {
return new CricketScores(teamNames);
}
}
You have conflicting information in your code: a #UiConstructor and a #UiFactory (not conflicting actually, there's an order of precedence, but it can be confusing to the developer, i.e. you).
UiBinder will prefer the #UiFactory over the #UiConstructor, and your factory has no argument, so the teamNames attribute from your XML is tentatively mapped to a setTeamNames setter, which doesn't exist, hence the “Class CricketScores has no appropriate setTeamNames() method” error.
The problem is conceptual in your code: your UserDashboard is constructed with a list of team names that it passes to the CricketScores widget, so that widget shouldn't have a teamNames attribute in the XML.
I was getting same error and uiField(provided=true) was getting null but it got resolved when I created object of respective component in constructor
I am new to GWT and trying to making a page which is trying to inherit a composite widget but the value of the composite widget is dynamic.
My main page is somehting like:
.....
.....
<g:Button>Open composite widget</g:button>
.....
.....
which is opening an another popup panel which is something like:
.....
<table>
<tr><td>Top: <myCompany:userMeasurementUnit/> </td></tr>
<tr><td>Bottom: <myCompany:userMeasurementUnit/> </td></tr>
<tr><td>Left: <myCompany:userMeasurementUnit/> </td></tr>
<tr><td>Right: <myCompany:userMeasurementUnit/> </td></tr>
</table>
the above should show us
top (cm)
bottom (cm)
left (cm)
right (cm)
But I don't know how to pass the values from main page to custom widget i.e usermeasurementunit
<myCompany:userMeasurementUnit/>
My usermeasurementunit is something like:
UIBinder:
<htmlpanel tag="span" ui:field="unit"/>
and the composit widget is
usermeasurementunit extends Composite {
public usermeasurementunit(){
initwidget...
}
public onload() {
...
}
}
Now I want to pass any measurement unit cm or inches or meters upon clicking button. I tried it using the event bus but it didnt help because when I click the button popuppanel is not on the screen and its not catching the event. If any one of you can help me regarding this I would be really thankful as I am really struggling with this thing.
kind regards
First of all, you need to understand the object instantiation flow in GWT.
They call it "delayed binding", not "dynamic binding".
Uibinder xml file is a layout template. And the JAva source bean behind it is known in general programming terms as the "code-behind".
The role or purpose of the uibinder layout template is to off-load the laying-out (on the internet many non-English speaking programmers write "lay-outing" which, though syntax-wise amusing, is the same thing) so that the code-behind could be focused on controlling the layout's responses.
It's akin to the MVP attitude. View implementation separated from presentation control. You can write the code-behind error free without even knowing exactly the positions where those fields are laid out. You could even simply supply a template where the ui elements are not properly laid out so as to concentrate on your code-behind first. Perhaps after that. one uibinder template for mobile while another for desktop - but they can share the same code-behind.
The values displayed effected by the uibinder template is determined once-and-for-all during uibind. There is no dynamic binding of a uibinder field to the ever changing value of an object/variable declared in the code-behind.
To dynamically change/propagate the values of a uibinder field after uibind, you have to deliberately set its value in the code-behind or write a listener to detect its change.
public class Graceland {
#UiField
Label pressure;
#UiField
Button reset;
public void setPressure(int value) {
pressure.setText(value);
}
#UiHandler("reset")
void nameDoesNotMatter(ClickEvent ev) {
pressure.setText(default);
}
}
GWT.create() generates the Java source for the template during compile time. GWT.create is not a run-time function.
#UiField and #UiHandler are bound to the uifield in the template during uibind.
The role of uibind() is mostly not run-time but compile time too. Though, its finality is realised during run-time, all the javascript code and respective values to construct the objects are generated during compile time and executed once and only once during uibind at run-time.
Therefore, the intention is not to be able to completely replace the dynamic role of the code-behind but simply to free it from the task of laying-out, so that we the programmer could have a clean piece of code-behind being smudged as little as possible with the spaghetti source of the layout.
However, if you wish to "dynamically" affect the value of a uibinder field during bind time,then Ui:with is your friend.
package z.mambazo;
public class Graceland {
....
String initialPressure(){
/* "dynamically" obtain the pressure from the
* pressure gauge in the petroleum distillation stack
* during uibind
*/
}
}
Graceland.ui.xml:
<ui:UiBinder blah...blah>
<ui:with type="z.mambazo" field="zulu"/>
<g:VerticalPanel>
<g:Label
ui:field="pressure"
text="the temperature is :{zulu.initialPressure}"/>
</g:VerticalPanel>
</ui:UiBinder>
The ui:with bean does not have to be the template's code-behind. Either the ui:with bean has an no-argument constructor or you have to supply ui:with tag with attributes corresponding to the constructor arguments.
You have to take note that in order to use ui:with, the init value must be declared in the value attribute not in the tag text.
<g:Label
ui:field="pressure"
text="the temperature is : {zulu.initialPressure}"/>
Not
<g:Label ui:field="pressure">
the temperature is : {zulu.initialPressure}
</g:Label>
The second way, would simply reproduce the text as is.
However, you could also do it this way:
<g:HtmlPanel>
the temperature is :
<g:Label ui:field="pressure"
text="{zulu.initialPressure}"/>
</g:HtmlPanel>
Also, be reminded that all GWT UI Java code, even the interim generated ones, are all translated into browser Javascript. So, whatever class you reference with ui:with must be in Java source code not Java byte code. And those source code must not at any time down the calling chain call byte code.
What you need are shared resources. Here is an example:
MeasurementConstants.java:
package com.acme.client;
public class MeasurementConstants {
private final String measurementUnit;
public MeasurementConstants(String measurementUnit) {
this.measurementUnit = measurementUnit;
}
public String measurementUnit() {
return measurementUnit;
}
}
UiBinderMeasurement.java:
package com.acme.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiFactory;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class UiBinderMeasurement extends Composite {
private static UiBinderI18nUiBinder uiBinder = GWT
.create(UiBinderI18nUiBinder.class);
private MeasurementConstants constants;
interface UiBinderI18nUiBinder extends UiBinder<Widget, UiBinderMeasurement> {
}
public UiBinderMeasurement(MeasurementConstants constants) {
this.constants = constants;
initWidget(uiBinder.createAndBindUi(this));
}
#UiFactory
public MeasurementConstants getConstants() {
return constants;
}
}
UiBinderMeasurement.ui.xml:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:with type="com.acme.client.MeasurementConstants" field="constants"></ui:with>
<g:HTMLPanel>
<table>
<tr><td><g:Label text="Top ({constants.measurementUnit}):" /> </td></tr>
<tr><td><g:Label text="Bottom ({constants.measurementUnit}):" /> </td></tr>
<tr><td><g:Label text="Left ({constants.measurementUnit}):" /> </td></tr>
<tr><td><g:Label text="Right ({constants.measurementUnit}):" /> </td></tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
Now you can call it like this:
new UiBinderMeasurement(new MeasurementConstants("cm"))
I have a task to add a composite widget into the main ui.xml file, but it's not working for some reason. Here is my widget code:
public class MyClass extends Composite {
#UiTemplate("MyClass .ui.xml")
interface MyClassUiBinder extends UiBinder<Widget, MyClass > {
}
private static MyClassUiBinder uiBinder = GWT.create(MyClassUiBinder.class);
#UiField Label label;
public MyClass() {
initWidget(uiBinder.createAndBindUi(this));
} ...
Then in my main viewImpl.ui.xml class:
I declare the class package:
... xmlns:u="urn:com... client.view">
and then the widget itself:
<g:HTMLPanel ui:field="mainPanel" styleName="{style.mainPanel}">
<table align="center">
<tr>
<td align="center">
<u:MyClass/>
</td>
</tr>
I also tried setting up a ui:field declaration in the viewImpl class, but I got an error thrown at compile time:
ERROR] In #UiField myClass, template field and owner field types don't match: com.google.gwt.dom.client.Element is not assignable to com... client.view.MyClass
When I took the #UiField declaration out of the viewImpl and the ui.xml it compiled, but the widget wasn't displaying when the page loaded.
I created another composite widget class and tried to duplicate this with just a button widget.
Using firebug I see that the element has been added to the main ui.xml page, but it also is not displaying, so my binding isn't totally complete somehow.
What am I missing here?
I found the problem, GWT was telling me that I didn't do my declaration properly, but the error wasn't as descriptive as I would have liked.
In the main.ui.xml file I used:
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:u="urn:com.abc.client.view">
However, the last line should have had the word import in it:
xmlns:u="urn:import.com.abc.client.view">
This is where I found the answer.
I hope this helps someone, this cost me a lot of time!
You didn't show more UI binder markup around where you are inserting the MyClass widget, but if you have your widget inside some raw HTML you need to have all this HTML in an HTMLPanel.
Is it possible to reuse widgets defined on Uibinder
example:
<g:SuggestBox ui:field='searchBox' />
I mean using the same SuggestBox in two different places.
if it is possible how can I do the call or what ever ?
Thanks for help.
You can do that, here is an example:
Define a widget you want to reuse:
ExampleLabel.java:
package com.example.client;
import import com.google.gwt.user.client.ui.Label;
public class ExampleLabel extends Composite {
interface ExampleLabelBinder extends UiBinder<Widget, ExampleLabel>{}
private static ExampleLabelBinder binder=GWT.create(ExampleLabelBinder.class);
public ExampleLabel() {
initWidget(binder.createAndBindUi(this);
}
}
ExampleLabel.ui.xml
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:Label>Just some text</g:Label>
</ui:UiBinder>
To use it you do something like this:
UseExampleLabel.ui.xml:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:myWidgets='urn:import:com.example.client>
<g:FlowPanel>
<myWidgets:ExampleLabel></myWidgets:ExampleLabel>
<myWidgets:ExampleLabel></myWidgets:ExampleLabel>
<myWidgets:ExampleLabel></myWidgets:ExampleLabel>
</g:FlowPanel>
</ui:UiBinder>
The third line points to the package your widgets is in you want to reuse.
I'd like to use the following in UIBinder, so that I can programmatically set the href of the link in my code.
<g:HTMLPanel>
<g:Anchor ui:field="link">
<g:InlineLabel ui:field="firstName"/>
<g:InlineLabel ui:field="lastName"/>
</g:Anchor>
</g:HTMLPanel>
When I try this I get:
ERROR: Found widget in an HTML context Element <g:InlineLabel ui:field='firstName'> (:7).
How can I embed widgets inside an anchor? Previously I've resorted to using:
<a id="myAnchor">
etc...
</a>
And then manipulating the DOM in my code to set the HREF, but that's ugly. Is there a better way?
The class below acts exactly like a SimplePanel (i.e., you can put an widget in it), but uses an "a" instead of a "div". If you need more widgets just put another panel in it.
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.SimplePanel;
public class Link extends SimplePanel {
public Link() {
super(DOM.createAnchor());
}
private void setHref(String href) {
getElement().setAttribute("href", href);
}
private String getHref() {
return getElement().getAttribute("href");
}
public void setTarget(String frameName) {
getElement().setAttribute("target", frameName);
}
}
It is better to use a Panel (Flow or Horizontal) and add click handlers to the panel to simulate a link. Anchor, Button and similar widgets will not allow child tags inside them.