I'm trying to use uiBinder. I followed the tutorial provided by
google, but I don't know why clickevent doesn't work? I want to count number of clicks and show it in the span, it doesn't work, I also put window.alert but it seems that the event handler is not called at all! Can anyone help me? It's couple of hours I'm working on it but can't find the problem!
Thank you so much
P.S.
Below is my code
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
</ui:style>
<g:HTMLPanel>
<table>
<tr>
<td><img ui:field='imgPrd'/></td>
<td>
<span ui:field='lblNum'></span>
<g:Button ui:field='btnAdd'></g:Button>
</td>
</tr>
</table>
</g:HTMLPanel>
public class uiProductList extends Composite {
#UiField Button btnAdd;
#UiField ImageElement imgPrd;
#UiField SpanElement lblNum;
int count;
private static uiProductListUiBinder uiBinder =
GWT.create(uiProductListUiBinder.class);
interface uiProductListUiBinder extends UiBinder<Widget,
uiProductList> {
}
public uiProductList() {
initWidget(uiBinder.createAndBindUi(this));
}
#UiHandler("btnAdd")
void handleClick(ClickEvent e) {
Window.alert("test");
count++;
lblNum.setInnerText(Integer.toString(count));
}
}
You should correctly add your widget to the root panel. Use
RootPanel.get().add(uiProduct);
Otherwise the handlers are not initialized.
I had exactly the same problem and here is the conclusion:
RootPanel.getBodyElement().appendChild(uiProduct.getElement()); - NOT WORKING
RootPanel.get().add(uiProduct); - WORKING FINE
Related
I would like to include some HTML codes in my gwt UiBinder. For example, put a navigation menu bar in a UiBinder as follows.
MenuBarBinder.ui.xml
<g:HTMLPanel>
<div class="topnav">
<a ui:field="home" class="active" href="#home">Home</a>
<a ui:field="news" href="#news">News</a>
<a ui:field="contact" href="#contact">Contact</a>
<a ui:field="about" href="#about">About</a>
</div>
</g:HTMLPanel>
MenuBarBinder.java
public class MenuBarBinder extends Composite{
private static MenuBarBinderUiBinder uiBinder = GWT.create(MenuBarBinderUiBinder.class);
interface MenuBarBinderUiBinder extends UiBinder<Widget, MenuBarBinder> {
}
public MenuBarBinder() {
initWidget(uiBinder.createAndBindUi(this));
}
#UiField
//How can I refer the ui:field here?
}
How can I refer the ui:field in MenuBarUiBinder.java with #UiField?
Since HTML has more options on designing the UI than GWT widget, it would be very helpful to recommend a tutorial describing this.
Thanks
If the element is an anchor <a> then you would link that to a GWT AnchorElement:
<a ui:field="home" class="active" href="#home">Home</a>
...
#UiField AnchorElement home;
I am gwt2.3 with uibinder.In My application I am made a button and want to add a click handler
bu using #UiHandler annotaion.Below is my code: ui.xml
<g:HTMLPanel>
<g:VerticalPanel>
<g:HorizontalPanel >
<g:Button ui:field="btnAccessLevel" text="Access Level" styleName="submit" />
<g:Button ui:field="btnSave" text="Save" styleName= "submit" />
</g:HorizontalPanel>
<g:AbsolutePanel ui:field="formPanel">
</g:AbsolutePanel>
<g:AbsolutePanel ui:field="accessLevelPanel">
</g:AbsolutePanel>
</g:VerticalPanel>
</g:HTMLPanel>
.java
#UiField
Button btnAccessLevel;
#Inject
public DocumentFormView(final Binder binder) {
widget = binder.createAndBindUi(this);
#UiHandler("btnAccessLevel")
void handleClick(ClickEvent e) {
Window.alert("Hello, AJAX");
}
}
When I am trying this I am getting this error:
void is an invalid type for the variable handleClick
I am not getting what issue is.Please help me out.
Thanks in advance.
Your code is not legal Java - move the function declaration outside of the constructor.
Otherwise, your syntax for #UiHandler is correct!
I have a requirement where, when a button is clicked, the user should be prompted with a popup/dialog box to enter some additional details such as last name, DOB, etc.I tried to play with window.confirm() but I think this does not serve my purpose. Can some help me how this can be achieved in GWT through UIBinder?
I tried some thing like this in my UI binder.xml
<g:HTMLPanel visible="false" >
<g:DialogBox ui:field="dialogPanel"
animationEnabled="true" modal="false" glassEnabled="false">
<g:caption>More Details</g:caption>
<table>
<tr>
<td colspan="2" align="center">
<g:Datepicker ui:field="DOB">DOB:</g:Datepicker>
</td>
</tr>
<tr>
<td>UserName:</td>
<td>
<g:TextBox ui:field="usernameTextBox" />
</td>
</tr>
<tr>
<td></td>
<td align="right">
<g:Button ui:field="loginButton">OK</g:Button>
</td>
</tr>
</table>
</g:DialogBox>
</g:HTMLPanel>
I am not sure which one to go with: popup or dialog box!
Thanks.
Here is the skeleton for a GWT Dialog box using uibinder:
MyDialogBox.java
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Widget;
public class MyDialogBox extends DialogBox {
private static final Binder binder = GWT.create(Binder.class);
interface Binder extends UiBinder<Widget, MyDialogBox> {
}
public MyDialogBox() {
setWidget(binder.createAndBindUi(this));
setAutoHideEnabled(true);
setText("My Title");
setGlassEnabled(true);
center();
}
}
MyDialog.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:style>
.panel {
background-color: ivory;
}
</ui:style>
<g:FlowPanel styleName="{style.panel}">
<g:Label>Dialog Content</g:Label>
</g:FlowPanel>
</ui:UiBinder>
show it using:
MyDialogBox m = new MyDialogBox();
m.show();
DialogBox is a child of PopupPanel and has all its features. Additionally it has (from the docs):
..caption area at the top and can be dragged by the user.
About usage in UiBinder (again from the docs):
DialogBox elements in UiBinder templates can have one widget child and one
<g:caption> child.
So it seems that you need to replace your <table> with a GWT widget, most probably <g:HTMLPanel> and put whole <table> inside it.
Also, PopupPanel and DialogBox are standalone widgets and normally do not get added to other Widgets, but are shown via .show() and hide() methods. So, in your UiBinder, you can put
<g:DialogBox> at the root level.
I would like to share a CSS across multiple widgets using .
I can see that css class name are obfuscated but the class definition
is not showing up when I inspect the element in firefox / chrome.
Here're my codes. Can anyone suggest what am I missing? Thanks.
Style.css
.nameSpan { color: #3E6D8E; background-color: #E0EAF1;}
Resources.java
public interface Resources extends ClientBundle {
#Source("Style.css")
Style style();
public interface Style extends CssResource {
String nameSpan();
}
}
uibinder.ui.xml
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>
<g:HTMLPanel>
<div>
Well hello there
<g:InlineLabel ui:field='nameSpan' styleName="res.style.nameSpan">kevin</g:InlineLabel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
uibinder.class
public class uibinder extends Composite {
private static uibinderUiBinder uiBinder = GWT.create(uibinderUiBinder.class);
interface uibinderUiBinder extends UiBinder<Widget, uibinder> {}
#UiField(provided = true) final Resources res; // the style doesn't show no matter provided=true is declared or not.
public uibinder(Resources res) {
res = GWT.create(Resources.class);
initWidget(uiBinder.createAndBindUi(this));
}
You have to use res.style().ensureInjected()
You need to assign the style (styleName attribute) somewhere. For example:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>
<g:HTMLPanel>
<div>
Well hello there
<g:InlineLabel ui:field='nameSpan' styleName="{res.nameSpan}">kevin</g:InlineLabel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
The attribute ui:field you've declared does not set the css style. It defines the attribute that is to be filled in in your uibinder class. See the GWT doc for some guidance.
I created a widget using GWT uiBinder. It works fine, till the moment when I want to instance it second time. After i call constructor second time it returns only raw description from XML and statements in constructor (rootElement.add( new HTML( "panel1" ), leftId );) are just don't work. It throws no error or warning.
Please help
Java class:
public class DashboardLayout extends Composite {
final String leftId = "boxLeft";
final String rightId = "boxRight";
interface DashboardLayoutUiBinder extends UiBinder<HTMLPanel, DashboardLayout> {
}
private static DashboardLayoutUiBinder ourUiBinder = GWT.create( DashboardLayoutUiBinder.class );
#UiField
HTMLPanel htmlPanel;
public DashboardLayout() {
HTMLPanel rootElement = ourUiBinder.createAndBindUi( this );
this.initWidget( rootElement );
rootElement.add( new HTML( "panel1" ), leftId );
rootElement.add( new HTML( "panel2" ), rightId );
}
}
XML descriprion:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
>
<g:HTMLPanel ui:field="htmlPanel">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40%" id="boxLeft" class="boxContextLeft">
</td>
<td width="60%" id="boxRight" class="boxContextRight">
</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
Don't use id="myid" in widgets, as they will be global(which will screw you up) instead of scoped per instantiation of the widget; use ui:field="myid" and then create a corresponding UiField variable in the java class. This will allow the gwt compiler to obfuscate the id's so you don't get collisions between instantiations of the same widget.
DashboardLayout.java
public class DashboardLayout extends Composite {
interface DashboardLayoutUiBinder extends
UiBinder<HTMLPanel, DashboardLayout> {
}
private static DashboardLayoutUiBinder ourUiBinder = GWT
.create(DashboardLayoutUiBinder.class);
#UiField
HTMLPanel htmlPanel;
#UiField
HTML panel1;
#UiField
HTML panel2;
public DashboardLayout() {
HTMLPanel rootElement = ourUiBinder.createAndBindUi(this);
this.initWidget(rootElement);
// do stuff with panel1
panel1.setHTML("<blink>blink</blink>");
// do stuff with panel2
panel2.setHTML("<marquee>marquee</marquee>");
}
}
DashboardLayout.ui.xml
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel ui:field="htmlPanel">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40%" class="boxContextLeft">
<g:HTML ui:field="panel1"></g:HTML>
</td>
<td width="60%" class="boxContextRight">
<g:HTML ui:field="panel2"></g:HTML>
</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>