How to i18N localize the header of a tab in GWT TabLayoutPanel - gwt

I am unable to use the usual i18N localization of GWT to localize a tabs name ('header') in a TabLayoutPanel.
This works:
<g:TabLayoutPanel addStyleNames='LocationsModule' barUnit="PX" barHeight="30" >
<g:tab>
<g:header>Locations</g:header>
But I can't get any other version to work:
<g:header text='{messages.layersTabTitle}' />
or
<g:customHeader>
<g:Label text='{messages.locationsTabTitle}' />
<g:Label>'{messages.locationsTabTitle}'</g:Label>
</g:customHeader>
anyone been able to do this, without resorting to code?

I think you need to use a slightly different syntax here:
check this example:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/test/com/google/gwt/uibinder/test/client/I18nMessageTest.ui.xml?r=7940
so it should be something like:
<g:customHeader>
<g:Label><ui:text from="{messages.locationsTabTitle}" /></g:Label>
</g:customHeader>

You can also use the ui:text element directly within the g:header element, avoiding the need for g:customHeader or g:Label, e.g:
<g:header><ui:text from="{messages.locationsTabTitle}" /></g:header>
(This is similar - although not quite the same - to how the file linked to by Arne uses ui:text within an h2 element: http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/test/com/google/gwt/uibinder/test/client/I18nMessageTest.ui.xml?r=7940)
Tested in GWT 2.4.0.

Related

Is there a way to make DockLayoutPanel support right-to-left languages in a UiBinder template?

Consider the DockLayoutPanel be created in UiBinder like this:
<g:DockLayoutPanel unit='PX' >
<g:west size='100'><g:Label>Start</g:Label></g:west>
<g:east size="100"><g:Label>End</g:Label></g:east>
<g:center><g:Label>Center</g:Label></g:center>
</g:DockLayoutPanel>
When using a locale such as English, start appears correctly on the left-hand side. When the locale is for a right-to-left (RTL) language, it would be expected for start to appear on the right-hand side but it doesn't.
In Java code it's possible to use DockLayoutPanel.addLineStart or DockLayoutPanel.addLineEnd instead of DockLayoutPanel.addWest and DockLayoutPanel.addEast, respectively. This places the elements in the appropriate location based on the locale. Is there a way to achieve the same effect with UiBinder?
Note that it's also possible to have an alternative RTL UiBinder template and link that version depending on whether the locale is for right-to-left but I'd prefer to have one template that works for both directions.
It's perfectly possible to use lineStart and lineEnd inside a DockLayoutPanel in UiBinder. In essence, UiBinder is able to call these methods the same way it's able to call methods on custom widgets.
So here's the code that should be used in UiBinder:
<g:DockLayoutPanel unit='PX'>
<g:lineStart size='100'><g:Label>Start</g:Label></g:lineStart>
<g:lineEnd size="100"><g:Label>End</g:Label></g:lineEnd>
<g:center><g:Label>Center</g:Label></g:center>
</g:DockLayoutPanel>
Note that as of version 2.6, autocompletion doesn't show lineStart or lineEnd when you start typing <g:. Only g:west, g:east, g:north and g:south are displayed. However, this doesn't mean other tags may be used. Refer to this GWT issue for more information.

How do you use in GWT UiBinder XML? Can you escape it?

In my mark-up I want to add a space ( ) between elements without always having to use CSS to do so. If I put in my markup, GWT throws errors. Is there a way around it?
For example:
<g:Label>One </g:Label><g:Label>Two</g:Label>
Should show:
One Two
And not:
OneTwo
As documented here, you just have to add this to the top of your XML file and it will work!
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
Note that the GWT compiler won't actually visit this URL to fetch the file, because a copy of it is baked into the compiler. However, your IDE may fetch it.
Rather than use a Label, which to me shouldn't allow character entities at all, I use an HTML widget. In order to set the content, though, I find I have to do it as the HTML attribute, not the body content (note that the uppercase HTML is important here, since the set method is setHTML, not setHtml)
<g:HTML HTML="One&nbsp;" />

Naming sections with docco/markdown?

Using CoffeeScript and Docco, sections are created in the generated HTML which can then be used as links eg.
geometry.html#section-82
Does anyone know if there is a way to name these sections so it could instead be (for example):
geometry.html#vector
EDIT: It would seem this can be achieved by simply adding in the HTML manually:
**MARKDOWN**
# ## <section id='vector'>Vector:</section>
but is there any other, perhaps more elegant ways?
Currently the best way I can find to do this is as follows:
# ## <section id='vector'>Vector:</section>
It seems to work pretty well, wish I could add it to Markdown though.

Setting styles on different faces of a GWT CustomButton using UiBinder

I'm trying to set style names on different faces of ToggleButton (i.e. upFace, downFace, ...). It looks like setting styleName on a face doesn't work. For example the following won't work:
<g:ToggleButton>
<g:upFace styleName='{style.myToggleButton-up}' />
</g:ToggleButton>
But I noticed when setting the style name on ToggleButton itself...
<g:ToggleButton styleName='{style.myToggleButton}' />
... the generated HTML will look something like this:
<div class="GPAKHSCBGG GPAKHSCBGG-up" role="button" aria-pressed="false">...</div>
However, even if I have {style.myToggleButton-up} defined, it is not populated to GPAKHSCBGG-up. So I'm wondering how can I do this without having to mock the global .gwt-ToggleButton-up stylesheet. Please help.
http://examples.roughian.com/index.htm#Widgets~ToggleButton
All GWT components have predefined CSS Class definitions, what you tried didn't override the definitions.
Solution:
Add #external myToggleButton, myToggleButton-up; to ui:binder file.

Richfaces drag and drop object not defined?

Mozilla is spitting out
DnD is not defined
errors on all of my rich:dragSupport and rich:dropSupport tags. When I check out the generated javascript the DnD object is where it should be and things look ok. Any ideas on why my DnD object is not defined? Has anyone come accross gotchas with using richfaces dnd?
We are using Richfaces 3.2.1 (drag and drop started in 3.0.0 acording to docs)
An example of how we are using this:
<a4j:outputPanel><rich:panel>
<rich:dropSupport dropListener="#{myBean.dropAction}>
<a4j:actionParam value="#{someData}" name="paramData" />
</rich:dropSupport>
<a4j:repeat value="#{myBean.list}" var="item">
<a4j:outputPanel>
<rich:panel>
<rich:dragSupport dragValue="#{someOtherData}">
<a4j:actionparam value="#{someOtherOtherData}" name="secondParam" />
<h:outputText value="#{item.name}"></h:outputText>
</rich:dragSupport>
</rich:panel>
</a4j:outputPanel>
</a4j:repeat>
</rich:panel></a4j:outputPanel>
My Problem: typo in naming of JBoss portlet deployment xml files
Other things to check (from week of research):
Are you deploying the necessary richfaces jar files?
Do you have other js scripts that are causing namespace issues like jQuery or prototype?
It's an old thread, but my answer is: Inside tag < rich:dragSupport/>, must be included < rich:dndParam>.
See http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf?tab=usage&cid=289435 for more information.
PD: Sorry for my rustic English, I'm from Argentina...