Reference elements in GwtBootstrap3 in code - gwtbootstrap3

I'm very new to GWT and GwtBootstrap3 so this might be a dumb question, but how can the elements from my ***.ui.xml file be referenced in the code?
For example, I have a paragraph in my ***.ui.xml file -
<b.html:Paragraph alignment="LEFT">
Lorem Ipsum
</b.html:Paragraph>
and I want to be able to change the text in my code.
Similarly, if I'm creating a List but can't statically provide the list elements in my ***.ui.xml file and need to provide them in my code, based on what choices are available, is there a way to do that?
Any suggestions/comments will be really appreciated.

Rohit, I noticed in your answer you changed your initial paragraph widget to a Label element. For anyone else visiting this question and wanting to work specifically with paragraphs: adding the attribute ui:field="myWidget" to an html Paragraph Element will allow you to perform this task directly
UIBinder
xmlns:b.html="urn:import:org.gwtbootstrap3.client.ui.html"
<b.html:Paragraph alignment="LEFT" ui:field="myWidget">
Lorem Ipsum
</b.html:Paragraph>
Java
import org.gwtbootstrap3.client.ui.html.Paragraph;
#UiField public Paragraph myWidget;
myWidget.setText("Dynamic text");

Found a way finally after research into GWT UiBinder.
I inserted a Label widget in the paragraph and provided an id to my Label using ui:field ='myWidget' and the then referenced it in my ***UIBinder.java using:
#UiField Label myWidget;
and set the text in the constructor using
myWidget.setText("Dynamic text");
This can also be done without using widgets

Related

How to add IDs for Tabs in Tabpanel in GWT?

I am trying to set ids for tabs in the tabpanel. The code that I have written is:
Panel dateTab = new VerticalPanel();
queryTabPanel.addTab("Date", dateTab);
where queryTabPanel is another TabPanel.
My Problem: is to set Ids for the Tabs. So that I can click on the 'Date' tab in the tabpanel.
What I have tried : is by manipulating DOM like :
DOM.setElementAttribute(productTab.getElement(), "id", "Swagatika");
But that does not seem to be working. :(
Has anyone any idea if that is possible, if so How difficult is to add IDs.
Thanks in advance.
For testing using WebDriver, you're supposed to use a special module that <inherits name="com.google.gwt.user.Debug"/> (see "Renaming module" in the GWT DevGuide), and call ensureDebugId on your widgets.
In your case, after calling queryTabPanel.ensureDebugId("queryTabPanel"), the first tab would have an ID of gwt-debug-queryTabPanel-bar-tab1 (see TabPanel.html#onEnsureDebugId for the details).
In addition to the Debug flag you need to use TabLayoutPanel.getTabWidget(...) and use ensureDebugId on it like the following:
SimpleLayoutPanel newTabPanel = new SimpleLayoutPanel();
tabLayoutPanel.add(newTabPanel, "Date Tab");
tabLayoutPanel.getTabWidget(newTabPanel).ensureDebugId("MyDateTab");
Notice that setting the debug ID before adding the Widget to the tabLayoutPanel won't have any effect. Also make sure to use getTabWidget(..) and not getWidget(...).

HTML Tags in GWT internationalization

I'm using the internationalization of GWT to manage the different languages of my application. I have a text where some words are in bold. Therefore I did the same thing as described here.
#DefaultMessage("Welcome back, {startBold,<b>}{0}{endBold,</b>}")
String testMessage(String name);
However, when I run the application, I get "Welcome back, < b>Peter< /b>" (the HTML is written out and not interpreted. I intentionally put a space between < b so that this text editor does not interpret the html tag).
Does anyone know how to solve this issue? Many thanks in advance!
P.S.
Code fragment which gets the language string:
Label label = new Label();
label.addStyleName("intro-Text");
label.setText(new HTML(trans.testMessage(name)).getHTML());
Instead of using a Label use the HTML widget.
HTML text = new HTML();
text.addStyleName("intro-Text");
text.setHTML(trans.testMessage(name));
Hope that helps.

Custom tags in UiBinder files

When using a <g:LayoutPanel> in UiBinder.ui.xml files, you can specify <g:layer> tags. Some other Google-built widgets have special tags like that as well - <g:tab> even has a sub-tag, <g:header>.
How can I specify these for my own widgets?
The new answer to this question, after some GWT improvements, is at https://stackoverflow.com/a/11785903/439317 . Copied below to avoid moderator deletion (maybe?).
You can use #UiChild to declare special functions in your widgets accessible in UiBinders.
for example,
class MyPanel extends AbsolutePanel {
#UiChild
public void addAt(Widget w, String parameter1, String parameter2) {
....
Then, in your uiBinder, you can say
<custom:MyPanel>
<custom:at parameter1="HI" parameter2="Anything you like!">
<g:AnySingleWidget />
</custom:at>
</custom:MyPanel>
See #UiChild at http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/uibinder/client/UiChild.html
What you're looking for is a custom element parser for UiBinder. See this issue. Unfortunately it's not supported yet.
You might be interested in this post for some guidance on how to extend the current parser on your own.

GWT page layout practices

I am making a GWT app based off of an HTML mockup. The mockup has about 4 or 5 different layouts made with divs and css. Right now I have one HTML page with just the basic elements of my layout (header, body, footer). The other layouts are the same thing, with different layouts for the body (i.e. two column, three column). I attempted to add the extra markup the the base template using the following code:
RootPanel.get("main_area").add(html);
Where main_area is the ID of my body div and html is an HTML object with the additional divs for the column layout.
This works fine, but when I try to add some text (or anything) to the divs I added:
RootPanel.get("left_column").add(new Label("test"));
I get the following error:
java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list
at com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose(RootPanel.java:122)
at com.google.gwt.user.client.ui.RootPanel.get(RootPanel.java:197)
I assume that I'm going about this completely wrong, but I have no idea what the correct way of doing this would be.
You may want to look into HTMLPanel.
i.e.
HTMLPanel hpanel = new HTMLPanel("<div id='morehtml'></div>");
hpanel.add(new Label("Hello, I am inside morehtml"), "morehtml");
RootPanel.get("main_area").add(hpanel);
I usually have an div which is the entry point and then I build all my GWT layout from that, e.g. ( not checked in IDE):
Panel root = RootPanel.get("entryPoint");
VerticalPanel rows = new VerticalPanel();
rows.add(new Label("Row 1"));
rows.add(new Label("Row 2"));
root.add(contents);

How can I format text in GWT label widget

I would like to break a long line of text assigned to the standard Label widget in GWT.
I was experimenting with inline <br /> elements but with no success.
Something like this:
label = "My very very very long<br />long long text"
You need to use the HTML widget, which extends the standard Label widget, and adds support for interpreting HTML tags.
See the JavaDoc.
I would use CSS to style the label to fit a given with and drop the <br/> all together.