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.
Related
In Chrome DevTools, the element tab shows the constructed DOM and I can click on elements in the DOM which also highlights the element on the page. Image of both versions shown in DevTools
If the DOM shows:
<input class="gLFyf">
Then the page highlight will show:
input.gLFyF
I realise these are two ways of writing the same thing, I also realise the former is HTML style and the latter follows CSS conventions. However, I lack the vocabulary to properly refer to either.
What do I call each format?
Eg. would it make sense to refer to <input class="gLFyf"> as HTML syntax and input.gLFyF as CSS syntax? Is there a more widely accepted way to differentiate and name them?
gLFyf is the name of the class which is an attribute that can be referred to in the stylesheet to match styles with elements of that class on the page.
A class leads with a period (.) - whereas an ID would lead with a hash (#).
So .gLFyf is a class.
And #gLFyf would be an ID.
It is a class, whether viewing HTML markup or the DOM inspector. They both refer to the same thing as you already state.
This may be of some use/reference.
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 " />
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.
Is there any way to highlight the CDATA component in a .mxml file?
I have Eclipse and Flash Builder 3.5 and the flex components are highlighted, but the CDATA isn't. It contains action script.
Sorry, I meant syntax highlighting. For example:
<mx:Canvas ... >
<mx:Script>
<![CDATA[
private function foo():void {}
]]>
</mx:Script>
I don't think so, but your Outline View should allow you to click on any script tags to highlight them. Unfortunately you can't give them different ID's, so splitting your code among different blocks doesn't help much.
i'm a novice at GXT. Even i am not good at English..
I have a problem with GXT:BorderLayoutContainer
(I use GXT 3.0.0 Beta.2)
I wanna fill up BodrderLayoutConatainer in Browser, but I don't know How to do it.
In GXT 2.4, I can use Fitable, but, 3.0 there are not Fitable.
How can I do this in UiBinder?(in Xml)
Thanks in advance.
//my source
<container:SimpleContainer borders="true" styleName="style.test">
<container:BorderLayoutContainer borders="true" resize="false">
<container:north>
<gxt:ContentPanel resize="false" >
<button:TextButton text="north/contents/Button"></button:TextButton>
</gxt:ContentPanel>
</container:north>
<container:center>
<container:SimpleContainer resize="false" borders="true" >
<button:TextButton text="center/simple/Button" ></button:TextButton>
</container:SimpleContainer>
</container:center>
<container:south>
<button:TextButton text="ABC" borders="true"></button:TextButton>
</container:south>
</container:BorderLayoutContainer>
</container:SimpleContainer>
Dong ju
The SimpleContainer is unnecessary in this case. Additionally, when you are using the css classes in the ui:style, make sure you wrap them in {} brackets, so you have styleName="{style.test}" instead of styleName="style.test".
But on the topic at hand, add the BorderLayoutContainer to a Viewport, and add that to the page, and it will be sized to the page. This can probably be done in UiBinder, though I haven't tried.
Viewport's job is to size itself (and its children) to the available window space. SimpleContainer sizes its children to itself - it isn't often used when building a UI, but is extended to make other containers (FieldLabel is one example of this).