CODEWITHSUNDEEP
gwtuibinder
Javier Arias
Javier Arias

Reputation: 35

UiBinder variables

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.

Upvotes: 0

Views: 808

Answers (1)

Braj
Braj

Reputation: 46841

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>

Upvotes: 1

Related Questions