UiBinder variables

Question

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.

Do you need to change the id ("toggle1") or the attribute as a whole? — Anders R. Bystrup, Mar 31 '14 at 13:38
I need change only the id. If I want to have some different collapses each one should have diferentes idetifiers. I want to set id as a parameter, for example: id="{variable}" and form the java class set it. Thanks Anders for answering so fast. — Javier Arias, Mar 31 '14 at 13:46
What is `b` here? How are you setting ID in XML? Please read [Add id to field with ui:field declaration](http://stackoverflow.com/questions/16070979/add-id-to-field-with-uifield-declaration). — Braj, Apr 02 '14 at 14:31
Sorry Braj for answering so late. I forgotten say that I was using bootstrap library. b is a part of its components. — Javier Arias, Apr 16 '14 at 16:47

Braj · Answer 1 · 2014-04-05T11:31:10.747

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>

Read here about [gwt uibinder ui:with - calling methods with arguments](http://stackoverflow.com/questions/8937269/gwt-uibinder-uiwith-calling-methods-with-arguments). — Braj, Apr 02 '14 at 14:47

UiBinder variables

1 Answers1