| <!-- |
| Copyright 2008 Google Inc. |
| Licensed under the Apache License, Version 2.0 (the "License"); you |
| may not use this file except in compliance with the License. You may |
| may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or |
| implied. License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <!DOCTYPE ui:UiBinder |
| SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent" |
| [ |
| <!ENTITY % MyEntities SYSTEM "MyEntities.ent"> |
| %MyEntities; |
| ] |
| > |
| <!-- |
| This scary DOCTYPE section is not required. It's here to demonstrate two |
| things. |
| |
| First, this bit: |
| |
| SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent" |
| |
| allows you to use familiar HTML entities like and •, |
| which are not part of XML. (The file is also available as |
| https://dl-ssl.google.com/gwt/DTD/xhtml.ent.) |
| |
| Next, the bit in square brackets is even more optional. It shows how |
| to add your own entities, in this case pulling in additional |
| definitions for &point-left; and &point-right; from local file |
| MyEntities.ent. |
| |
| You don't have to be so verbose to include a local file! For |
| example, you might instead grab your own copy of xhtml.ent |
| and add your custom entity definitions to it, and use this |
| for your DOCTYPE: |
| |
| <!DOCTYPE ui:UiBinder SYSTEM "my-xhtml.ent"> |
| --> |
| |
| <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' |
| xmlns:gwt='urn:import:com.google.gwt.user.client.ui' |
| xmlns:gwt2='urn:import:com.google.gwt.user.client' |
| xmlns:gwt3='urn:import:com' |
| xmlns:demo='urn:import:com.google.gwt.uibinder.test.client' |
| |
| ui:baseMessagesInterface="com.google.gwt.uibinder.test.client.MyMessages" |
| ui:defaultLocale="en_US" |
| ui:generateKeys="com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator" |
| ui:generateFormat="com.google.gwt.i18n.rebind.format.PropertiesFormat" |
| ui:generateFilename="myapp_translate_source" |
| ui:generateLocales="en_US" |
| > |
| |
| <ui:with field='external' type='com.google.gwt.uibinder.test.client.WidgetBasedUiExternalResources'> |
| (This text is ignored, but it's a handy place to document a resource.) |
| |
| external is used to test receiving a resource from the owner via |
| @UiField(provided = true), particularly useful for dependency |
| injection via Gin and the like |
| </ui:with> |
| |
| <ui:with field='values' type='com.google.gwt.uibinder.test.client.FakeBundle'> |
| Tests the default creation of a resource via GWT.create(), and also the ability |
| for a resource to provide arbitrary objects to arbitrary attributes (look for FooLabel) |
| </ui:with> |
| |
| <ui:with field='doubleRenderer' type='com.google.gwt.text.shared.Renderer'> |
| Used to test ValueLabel's @UiConstructor |
| </ui:with> |
| |
| <ui:with field="constants" type="com.google.gwt.uibinder.test.client.Constants"> |
| Used to test SafeHtml return type in ui:text context. |
| </ui:with> |
| |
| <ui:import field='com.google.gwt.uibinder.test.client.Constants.CONST_FOO'> |
| Tests the static import of a single constant into the local namespace. |
| </ui:import> |
| |
| <ui:import field='com.google.gwt.uibinder.test.client.Constants.Inner.*'> |
| Tests the static import of multiple constants into the local namespace. |
| </ui:import> |
| |
| <ui:import field='com.google.gwt.uibinder.test.client.Constants.MyEnum.*'> |
| Tests the static import of an enum into the local namespace. |
| </ui:import> |
| |
| <ui:import field='com.google.gwt.uibinder.test.client.WidgetBasedUi.MY_DATE_FORMAT'> |
| Tests a DateTimeFormat using for the DateTimeLabel. |
| </ui:import> |
| |
| <ui:import field='com.google.gwt.i18n.client.DateTimeFormat.PredefinedFormat.ISO_8601'> |
| Tests a reference to a PredefinedFormat for the DateTimeLabel. |
| </ui:import> |
| |
| <ui:import field='com.google.gwt.uibinder.test.client.WidgetBasedUi.MY_NUMBER_FORMAT'> |
| Tests a NumberFormat using for the NumberLabel. |
| </ui:import> |
| |
| <!-- |
| Tests creating a CssResource from an external file. |
| --> |
| <ui:style field='myStyle' src='WidgetBasedUi.css com/google/gwt/uibinder/test/client/Menu.css' |
| type='com.google.gwt.uibinder.test.client.WidgetBasedUi.Style'> |
| .menuBar { |
| font-family: sans-serif; |
| } |
| </ui:style> |
| |
| <ui:style field='myOtherStyle' type='com.google.gwt.uibinder.test.client.WidgetBasedUi.Style'> |
| /* because we extend WidgetBasedUi.Style and it's tagged @Shared, we can refine the menubar |
| style defined in other files */ |
| |
| .menuBar.psychedelic { |
| background-color: Yellow; |
| } |
| |
| /* Visible only to this template */ |
| .privateColor { |
| color: Purple; |
| } |
| </ui:style> |
| |
| <ui:style field='myTotallyPrivateStyle'> |
| /* An inline style tied to no public type */ |
| |
| .super-private-color { |
| background-color: Gold; |
| } |
| </ui:style> |
| |
| <ui:style field='cursorifficStyle'> |
| @url cursor heartCursorResource; |
| .cursor { |
| cursor:cursor,pointer; |
| } |
| </ui:style> |
| <ui:data field='heartCursorResource' src='heart.cur'/> |
| |
| <ui:style field='mySpritelyStyle'> |
| @sprite .simpleSprite { |
| gwt-image: "prettyImage"; |
| } |
| |
| @sprite .tilingSprite { |
| gwt-image: "prettyTilingImage"; |
| } |
| |
| .garish { |
| color: Purple; |
| font-weight: bold; |
| font-family: sans-serif; |
| text-shadow: white 1px 1px 1px; |
| } |
| |
| .garish.tilingSprite { |
| font-size: 1.5em; |
| } |
| </ui:style> |
| <ui:image field='prettyImage' /> |
| <ui:image field='prettyTilingImage' src='prettyImage.png' flipRtl='true' repeatStyle='Both'/> |
| <ui:image field='right'/> |
| <ui:image field='down'/> |
| |
| <gwt:DockPanel ui:field="root" width="100%" verticalAlignment="ALIGN_TOP"> |
| <gwt:Dock direction='NORTH'> |
| <gwt:HTML ui:field='styleLess' styleName=''> |
| <div style='border: 4px solid gray; padding: 4px; margin: 4px;'> |
| <img src='http://www.google.com/images/logo_sm.gif' alt="logo" /> |
| <span ui:field="trimmedMessage"><ui:msg description='"title" of the doc' |
| meaning='would not normally do a "meaning" here' |
| key='and I would never use "key" at all'> |
| <!-- A test expects this *not* to be on one line --> |
| Title area, specified largely in HTML. |
| </ui:msg></span> |
| </div> |
| </gwt:HTML> |
| </gwt:Dock> |
| <gwt:Dock direction='WEST'> |
| <gwt:HTML ui:field='sideBarWidget' pixelSize="100, 150"> |
| <div ui:field="sideBar" |
| style='border: 4px solid gray; padding: 4px; margin: 4px;' |
| >This could<br/> |
| be a<br/> |
| side bar<br/> |
| or something<br/> |
| like that...</div> |
| </gwt:HTML> |
| </gwt:Dock> |
| <gwt:Dock direction='CENTER'> |
| <gwt:HTMLPanel> |
| <p ui:field='bracedParagraph' fnord='blah di blah {{foo: "bar"} di blah' |
| foo='{CONST_FOO}' bar='{CONST_BAR} {CONST_BAZ}' |
| enum='{ENUM_1.name} {ENUM_2.name}' ><ui:msg>This is a |
| demonstration and test bed of GWT's shiny UiBinder |
| package. At the moment it works mainly as described in |
| <a href="http://code.google.com/p/google-web-toolkit-incubator/wiki/DeclarativeUi" |
| ui:ph="oldBlogLink"> |
| this blog post</a>, but it is en route to the use cases desribed at |
| <a href="http://go/gwt-uibinder" ui:ph="newBlogLink">http://go/gwt-uibinder</a> and |
| <a href="http://go/gwt-uibinder-i18n" ui:ph="i18nBlogLink">http://go/gwt-uibinder-i18n</a>. Early |
| adopters should recognize themselves as such, and be prepared to have the |
| api rug yanked out from under them.</ui:msg></p> |
| <p ui:field="main"> |
| &point-right; <span ui:field="messageInMain"><ui:msg>This is the main area. |
| It's an <b>HTMLPanel</b>, which allows you to mix |
| &point-right; • XHTML • &point-left; and regular GWT widgets, more or less with |
| impunity. Take the following button for example.</ui:msg></span> &point-left; |
| </p> |
| <gwt:Button ui:field='myButton'> |
| Button with <b id='shouldSayHTML'>HTML</b> contents... |
| </gwt:Button> |
| <p> |
| It's specified using the Button widget, so that it's easy to work with from |
| Java code. Its markup has a ui:field value of 'myButton', which allows you to get it using the |
| <i ui:field="nonStandardElement">getMyButton()</i> method from MyTemplate.java. </p> |
| <p> |
| Here is a similarly clickable |
| <demo:ClickyLink text="hyperlink based on a custom widget" |
| ui:field="customLinkWidget" popupText="That tickles! "/>. And an |
| <gwt:Anchor ><i>Anchor to nowhere</i></gwt:Anchor>. |
| </p> |
| |
| <p>I bet you like babies in your Image widgets.</p> |
| <div class='{cursorifficStyle.cursor}'> |
| <gwt:Image ui:field='babyWidget' resource='{prettyImage}' |
| altText='expected alt text' styleName='expected style name' |
| /> |
| <demo:FooImage ui:field='fooImage' resource='{prettyImage}' |
| altText='expected alt text' styleName='expected style name' |
| /> |
| </div> |
| |
| <p ui:field='simpleSpriteParagraph' |
| class='{mySpritelyStyle.simpleSprite} {mySpritelyStyle.garish} |
| {cursorifficStyle.cursor}' > |
| And sprites too |
| </p> |
| |
| <p class='{mySpritelyStyle.tilingSprite} {mySpritelyStyle.garish} |
| {cursorifficStyle.cursor}'> |
| Well how do you like <br/> |
| tiled sprited images...of babies!! <br/> |
| Of course you do! Who wouldn't? |
| </p> |
| |
| <p> |
| <ui:msg description=""> |
| Of course, it could just as easily be a Tree under a MenuBar... |
| </ui:msg> |
| </p> |
| <div class="{myStyle.menuBar}"> |
| <gwt:MenuBar ui:field="topMenuBar" vertical="false"> |
| <gwt:MenuItem> |
| <div id="higgledy"> |
| <ui:msg description="Last 7 Day Period"> |
| Higgeldy |
| </ui:msg> |
| </div> |
| <gwt:MenuBar vertical="true" styleName="{myStyle.menuBar}"> |
| <gwt:MenuItem>able</gwt:MenuItem> |
| <gwt:MenuItem>baker</gwt:MenuItem> |
| <gwt:MenuItem>charlie</gwt:MenuItem> |
| </gwt:MenuBar> |
| </gwt:MenuItem> |
| <gwt:MenuItem> |
| <div id="piggledy"> |
| <ui:msg description="Last 7 Day Period"> |
| Piggledy |
| </ui:msg> |
| </div> |
| <gwt:MenuBar vertical="true" styleName="{myStyle.menuBar} {myOtherStyle.psychedelic}"> |
| <gwt:MenuItem>delta</gwt:MenuItem> |
| <gwt:MenuItem>echo</gwt:MenuItem> |
| <gwt:MenuItem>foxtrot</gwt:MenuItem> |
| </gwt:MenuBar> |
| </gwt:MenuItem> |
| <gwt:MenuItem> |
| <div id="pop-can-has-submenu"> |
| <ui:msg description="Last 7 Day Period">Pop</ui:msg> |
| </div> |
| <gwt:MenuBar vertical="true" ui:field="dropdownMenuBar" |
| styleName="{myStyle.menuBar}"> |
| <gwt:MenuItem ui:field='menuItemCustomDateRange'> |
| <ui:msg description="Custom date range"> |
| the Dog |
| </ui:msg> |
| </gwt:MenuItem> |
| <gwt:MenuItem> |
| <ui:msg>has eaten</ui:msg> |
| </gwt:MenuItem> |
| <gwt:MenuItem ui:field="menuItemMop" styleName="moppy"> |
| <ui:msg>the Mop</ui:msg> |
| </gwt:MenuItem> |
| <gwt:MenuItem ui:field='menuItemLegacy'> |
| <span style="white-space:nowrap">The pig's in a hurry</span> |
| </gwt:MenuItem> |
| </gwt:MenuBar> |
| </gwt:MenuItem> |
| </gwt:MenuBar> |
| </div> |
| <gwt:Tree ui:field="myTree" width="100px"> |
| <gwt:TreeItem ui:field="myTreeItemA"/> |
| <gwt:Button ui:field="myTreeWidgetB"/> |
| <gwt:TreeItem ui:field="myTreeItemC"> |
| <gwt:TreeItem ui:field="myTreeItemCA"/> |
| <gwt:Button ui:field="myTreeWidgetCB"/> |
| </gwt:TreeItem> |
| </gwt:Tree> |
| |
| <p>...TextBoxes...</p> |
| |
| <gwt:TextBox maxLength="21">21 chars only, please</gwt:TextBox> |
| |
| <p>...or perhaps a handful of RadioButtons:</p> |
| <gwt:RadioButton ui:field='myRadioAble' name="radios" text="Able" checked="true"> |
| <ui:attribute name="text" description="radio button name"/> |
| </gwt:RadioButton> |
| <gwt:RadioButton ui:field='myRadioBaker' name="radios" text="Baker"> |
| <ui:attribute name="text" description="radio button name"/> |
| </gwt:RadioButton> |
| <demo:PointlessRadioButtonSubclass ui:field='emptyRadio' name="radios" |
| text="Charlie (this one is a subclass of RadioButton)"> |
| <ui:attribute name="text" description="radio button name"/> |
| </demo:PointlessRadioButtonSubclass> |
| |
| <gwt:HorizontalPanel ui:field="myHorizontalPanel" |
| horizontalAlignment="ALIGN_LEFT" verticalAlignment="ALIGN_MIDDLE"> |
| <gwt:Cell><gwt:HTMLPanel> |
| <p> ... a StackPanel ... </p> |
| |
| <gwt:StackPanel stylePrimaryName="myStyle" width="280px" ui:field='myStackPanel'> |
| <gwt:Label text="Stack One Text" gwt:StackPanel-text="Stack One" |
| ui:field='myStackPanelItem'> |
| <ui:attribute name="text" description="Content for Stack One Text"/> |
| </gwt:Label> |
| <gwt:HTMLPanel gwt:StackPanel-text="Stack Two"> |
| <div> |
| <ui:msg description="Describe div content">Some other content</ui:msg> |
| </div> |
| </gwt:HTMLPanel> |
| <gwt:Label text="Stack Three Text" gwt:StackPanel-text="Stack Three" /> |
| </gwt:StackPanel> |
| </gwt:HTMLPanel></gwt:Cell> |
| |
| <gwt:cell><gwt:HTMLPanel> |
| <p> ... a TabPanel </p> |
| |
| <gwt:TabPanel> |
| <gwt:Tab text='Able'><gwt:Label>Able Widget</gwt:Label></gwt:Tab> |
| <gwt:Tab><gwt:TabHTML><b>B</b>aker</gwt:TabHTML> |
| <gwt:Label>Baker widget</gwt:Label> |
| </gwt:Tab> |
| </gwt:TabPanel> |
| </gwt:HTMLPanel></gwt:cell> |
| |
| </gwt:HorizontalPanel> |
| |
| |
| <p> ... a DisclosurePanel with a text header ... </p> |
| |
| <gwt:DisclosurePanel ui:field='myDisclosurePanel' animationEnabled='true'> |
| <gwt:header> |
| <ui:msg description="Label for Disclosure One">I just have a text header</ui:msg> |
| </gwt:header> |
| |
| |
| <gwt:Label ui:field='myDisclosurePanelItem'> |
| <ui:msg description="Content for Disclosure One Text">Disclosure Text</ui:msg> |
| </gwt:Label> |
| |
| </gwt:DisclosurePanel> |
| |
| <p> ... a DisclosurePanel with a widget header ... </p> |
| |
| <gwt:DisclosurePanel animationEnabled='true'> |
| <gwt:customHeader> |
| <gwt:Label> |
| <ui:msg description="Content for Disclosure Two Text">Disclosure Header - closed</ui:msg> |
| </gwt:Label> |
| </gwt:customHeader> |
| |
| |
| <gwt:Label> |
| <ui:msg description="Content for Disclosure Two">Disclosure Two - closed</ui:msg> |
| </gwt:Label> |
| |
| </gwt:DisclosurePanel> |
| |
| <p> ... an open DisclosurePanel with a widget header ... </p> |
| |
| <gwt:DisclosurePanel open='true' animationEnabled='true'> |
| <gwt:customHeader> |
| <gwt:Label> |
| <ui:msg description="Content for Disclosure Two Text">Disclosure Header - open</ui:msg> |
| </gwt:Label> |
| </gwt:customHeader> |
| |
| |
| <gwt:Label> |
| <ui:msg description="Content for Disclosure Two">Disclosure Two - open</ui:msg> |
| </gwt:Label> |
| |
| </gwt:DisclosurePanel> |
| |
| <p> ... a DisclosurePanel with no header ... </p> |
| |
| <gwt:DisclosurePanel open="true" animationEnabled='true'> |
| |
| <gwt:Label> |
| <ui:msg description="Content for Disclosure Three">Disclosure Three</ui:msg> |
| </gwt:Label> |
| |
| </gwt:DisclosurePanel> |
| |
| <p> ... an open DisclosurePanel with a text label and no animation</p> |
| |
| <gwt:DisclosurePanel open="true" > |
| <gwt:header><ui:msg>Disclosure Three - open</ui:msg></gwt:header> |
| |
| |
| <gwt:Label> |
| <ui:msg description="Content for Disclosure Three">Disclosure Three</ui:msg> |
| </gwt:Label> |
| |
| </gwt:DisclosurePanel> |
| |
| <p> ... a DisclosurePanel with no content ... </p> |
| |
| <gwt:DisclosurePanel> |
| <gwt:header><ui:msg>"I just have a text header"</ui:msg></gwt:header> |
| </gwt:DisclosurePanel> |
| |
| <p> ... a DisclosurePanel with custom images ... </p> |
| |
| <gwt:DisclosurePanel open='false' animationEnabled='true'> |
| <gwt:header openImage='{down}' closedImage='{right}'> |
| <ui:msg description="Content for Disclosure Two Text">Custom images header</ui:msg> |
| </gwt:header> |
| |
| <gwt:Label> |
| <ui:msg description="Content for Disclosure Two">Custom images body</ui:msg> |
| </gwt:Label> |
| |
| </gwt:DisclosurePanel> |
| |
| <p> ... a provided DisclosurePanel with a text header ... </p> |
| |
| <gwt:DisclosurePanel ui:field='myProvidedDisclosurePanel' animationEnabled='true'> |
| <gwt:header> |
| <ui:msg description="Label for Disclosure One">I just have a text header</ui:msg> |
| </gwt:header> |
| |
| |
| <gwt:Label ui:field='myProvidedDisclosurePanelItem'> |
| <ui:msg description="Content for Disclosure One Text">Disclosure Text</ui:msg> |
| </gwt:Label> |
| |
| </gwt:DisclosurePanel> |
| |
| <h2>Stylish</h2> |
| <p> |
| Templates work with ClientBundle. For example, |
| this label gets its text from somplace tricky and its style from a ClientBundle |
| defined outside of this UI:</p> |
| <gwt:Label ui:field='bundledLabel' text="{values.helloText}" styleName="{external.style.prettyText}"/> |
| <!-- Note use of id rather than ui:field, to test that ids work on dom elements --> |
| <p class="{external.style.prettyText}" id='prettyPara'> |
| This stylish paragraph also gets its good looks from the |
| external ClientBundle. |
| </p> |
| <p ui:field='privateStyleParagraph' class='{myStyle.privateColor}'> |
| This one is has a private style, defined out in WidgetBaseUi.css and used only by this ui.xml file. |
| </p> |
| <p ui:field='reallyPrivateStyleParagraph' class='{myOtherStyle.privateColor}'> |
| And this style is defined right here inside the ui.xml file. |
| <span ui:field='totallyPrivateStyleSpan' class='{myTotallyPrivateStyle.super-private-color}'> |
| (This one too, but even more so.) |
| </span> |
| </p> |
| <demo:CssImportScopeSample ui:field='cssImportScopeSample' wrappedText='Please use it.'> |
| And this one relies on CssResource's imported scopes feature |
| </demo:CssImportScopeSample> |
| <h2>Evolving</h2> |
| <p> |
| Things change. This label uses the new ui:field attribute to declare |
| its identity. Soon everything |
| will work that way: |
| </p> |
| <gwt:Label ui:field='gwtFieldLabel'>Tommy can you hear me? Can you field me near you?</gwt:Label> |
| <h2>Localization and character escaping</h2> |
| <p ui:field="funnyCharsParagraph">Templates can be marked up for <b>localization</b>, |
| which presents alls kinds of exciting opportunities for bugs related to |
| character escaping. Consider these funny characters \ " " ' ' & < > > { }, |
| and the various places they might make your life miserable, like this |
| untranslated paragraph.</p> |
| <p ui:field="funnyCharsMessageParagraph"><ui:msg>They might show up |
| in body text that has been <b>marked for translation</b>: funny characters \ " " ' ' & < > > { }</ui:msg></p> |
| <p><ui:msg>Or perhaps in a subelement with a ui:field: <span ui:field='funnyCharsMessageChildSpan'>funny characters \ " " ' ' & < > > { }</span></ui:msg></p> |
| <p ui:field="funnyCharsProtectedMessageParagraph"><ui:msg>Don't forget about protected untranslatable blocks: <ui:ph name='francine'>funny characters \ " " ' ' & < > > { }</ui:ph></ui:msg></p> |
| <p ui:field="funnyCharsMessageDomAttributeParagraph" title="funny characters \ " ' ' & < > > { }"> |
| <ui:attribute name="title"/> |
| Attributes of dom elements can be translated too, like the |
| tooltip of this paragraph, which features the challenging characters. |
| </p> |
| <p ui:field="funnyCharsDomAttributeParagraph" |
| title="funny characters \ " ' ' & < > > { }"> |
| They might also appear in an unstranslated attribute of a dom element, like |
| the tooltip for this paragraph. |
| </p> |
| <p>And all the cases above apply to widgets as well:</p> |
| <gwt:Label>I am an untranslatable HasText with funny characters \ " " ' ' & < > > { }</gwt:Label> |
| <gwt:HTML>I am an untranslatable HasHTML with funny characters \ " " ' ' & < > > { }</gwt:HTML> |
| <gwt:Label><ui:msg>I am a translatable <ui:ph name="widgetType" example="myWidget">HasText</ui:ph> with funny characters \ " " ' ' & < > > { }</ui:msg></gwt:Label> |
| <gwt:HTML><ui:msg>I am a translatable <ui:ph name="widgetType" example="myWidget">HasHTML</ui:ph> with funny characters \ " " ' ' & < > > { }</ui:msg></gwt:HTML> |
| <demo:ClickyLink ui:field="funnyCharsAttributeWidget" |
| popupText="funny characters \ " ' ' & < > > { }"> |
| Click to see my untranslatable text passed by attribute |
| </demo:ClickyLink> |
| <br/> |
| <demo:ClickyLink ui:field="funnyCharsMessageAttributeWidget" |
| popupText="funny characters \ " ' ' & < > > { }"> |
| <ui:attribute name="popupText"/> |
| Click to see my translatable text passed by attribute |
| </demo:ClickyLink> |
| |
| <h2>Placeholders in localizables</h2> |
| <p><ui:msg>When you mark up your text for translation, there will be bits |
| that you don't want the translators to mess with. You can protect |
| these with <span id="placeholdersSpan" style="font-weight:bold" class="{external.style.prettyText}" |
| ui:ph="boldSpan">placeholders</span><ui:ph name="tm"><sup ui:field="tmElement" |
| class="{external.style.tmText}">TM</sup></ui:ph>.</ui:msg></p> |
| |
| <p><ui:msg>You may also need to have <span ui:field="spanInMsg" |
| style="font-weight:bold" class="{external.style.prettyText}">named |
| portions</span> of <span class="{external.style.prettyText}">translatable text</span></ui:msg></p> |
| |
| <p><ui:msg>Of course you'll want to be able to do this kind of thing |
| with widgets <demo:MyDatePicker/> as well, whether they <gwt:Label>HasText<ui:ph name="tm">*TM*</ui:ph></gwt:Label> |
| or <gwt:HTML>HasHTML<ui:ph name="TM2"><sup ui:field="tmElementJr" |
| class="{external.style.tmText}">TM</sup></ui:ph></gwt:HTML></ui:msg></p> |
| |
| <p><ui:msg> |
| You can mix both widgets and named dom fields within a |
| <gwt:HTML ui:field='mixedMessageWidget'>single translatable message</gwt:HTML>, another source |
| <span ui:field='mixedMessageSpan'>exciting and subtle</span> |
| bugs. |
| </ui:msg></p> |
| |
| <h2>Any Widget You Like</h2> |
| <p><demo:AnnotatedStrictLabel text="This widget is not default instantiable." ui:field="strictLabel"/></p> |
| <p><demo:AnnotatedStrictLabel text="Another constructor based widget, translated this time." ui:field="translatedStrictLabel"> |
| <ui:attribute name="text" description="Arbitrary text"/> |
| </demo:AnnotatedStrictLabel></p> |
| <p><demo:StrictLabel text="More of the same." ui:field="veryStrictLabel"/></p> |
| <p><demo:StrictLabel text="Likewise, again translated this time." ui:field="translatedVeryStrictLabel"> |
| <ui:attribute name="text" description="Arbitrary text"/> |
| </demo:StrictLabel></p> |
| <p><demo:NeedlesslyAnnotatedLabel ui:field="needlessLabel" |
| text="Sometimes people do things they don't need to do. Don't punish them."/></p> |
| <demo:AnnotatedStrictLabel ui:field="providedAnnotatedStrictLabel">ditto</demo:AnnotatedStrictLabel> |
| <demo:StrictLabel ui:field="providedStrictLabel" text="from template" /> |
| |
| <demo:FooLabel ui:field='theFoo' pojo="{values.pojo}"/> |
| |
| <demo:FooLabel ui:field='primitiveIntoObject' objectInteger='{values.anInt}'/> |
| <demo:FooLabel ui:field='objectIntoPrimitive' rawInt='{values.anIntegerObject}' /> |
| <demo:FooLabel ui:field='allObject' objectInteger='{values.anIntegerObject}' /> |
| <demo:FooLabel ui:field='allPrimitive' rawInt='{values.anInt}' /> |
| |
| <demo:FooLabel ui:field='mismatchPrimitiveIntoObject' objectInteger='{values.aDouble}'/> |
| <demo:FooLabel ui:field='allMismatchPrimitive' rawInt='{values.aDouble}' /> |
| |
| <demo:FooLabel ui:field='primitiveBooleanIntoObject' objectBoolean='{values.aBoolean}'/> |
| <demo:FooLabel ui:field='objectBooleanIntoPrimitive' rawBoolean='{values.aBooleanObject}' /> |
| <demo:FooLabel ui:field='allObjectBoolean' objectBoolean='{values.aBooleanObject}' /> |
| <demo:FooLabel ui:field='allPrimitiveBoolean' rawBoolean='{values.aBoolean}' /> |
| |
| <demo:EnumeratedLabel ui:field='enumLabel' suffix='tail'>This label uses an enum for its</demo:EnumeratedLabel> |
| |
| <gwt:PushButton ui:field='pushButton' enabled='true'> |
| <gwt:upFace><b>click me</b></gwt:upFace> |
| <gwt:downFace image='{prettyImage}'/> |
| <gwt:upHoveringFace><b>Click ME!</b></gwt:upHoveringFace> |
| <gwt:downHoveringFace image='{prettyImage}'/> |
| <gwt:upDisabledFace image='{prettyImage}'/> |
| <gwt:downDisabledFace image='{prettyImage}'/> |
| </gwt:PushButton> |
| |
| <gwt:ToggleButton ui:field='toggle'>Hi mom</gwt:ToggleButton> |
| |
| <demo:FooDialog ui:field='fooDialog'> |
| <gwt:caption>Custom dialog am I</gwt:caption> |
| <gwt:Label>body</gwt:Label> |
| </demo:FooDialog> |
| |
| <gwt:FlowPanel> |
| <gwt:Label ui:field="lblDebugId" debugId="joe" |
| styleName="styleName" |
| addStyleNames="newStyle, anotherStyle {external.style.prettyText}" |
| addStyleDependentNames="dependentStyle anotherDependentStyle, {external.style.prettyText}"> |
| A label with a debug id |
| </gwt:Label> |
| <gwt:Button ui:field="btnGo" debugId="myButton" addStyleNames="buttonStyle">Go</gwt:Button> |
| </gwt:FlowPanel> |
| |
| <demo:HandlerDemo /> |
| <demo:I18nMessageTest /> |
| |
| <h2>People write the darndest markup</h2> |
| <table border="1" bcolor="yellow" cellpadding="3" ui:field="widgetCrazyTable"> |
| <demo:ExplicitElementPanel tag="thead"> |
| <demo:ExplicitElementWidget tag="td">They have been known</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="td">to write widgets</demo:ExplicitElementWidget> |
| </demo:ExplicitElementPanel> |
| <demo:ExplicitElementPanel tag="tr"> |
| <demo:ExplicitElementWidget tag="td">that masquerade</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="td">as table cells,</demo:ExplicitElementWidget> |
| </demo:ExplicitElementPanel> |
| <demo:ExplicitElementPanel tag="tfoot"> |
| <demo:ExplicitElementWidget tag="td">just like these.</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="td">Burma Shave</demo:ExplicitElementWidget> |
| </demo:ExplicitElementPanel> |
| </table> |
| <ul> |
| <demo:ExplicitElementWidget tag="li">You</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="li">can</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="li">imagine</demo:ExplicitElementWidget> |
| </ul> |
| <ol ui:field="widgetCrazyOrderedList"> |
| <demo:ExplicitElementWidget tag="li">similar</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="li">things</demo:ExplicitElementWidget> |
| </ol> |
| <dl ui:field="widgetCrazyDefinitionList"> |
| <demo:ExplicitElementWidget tag="dt">Being</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="dd">done</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="dd">with</demo:ExplicitElementWidget> |
| <demo:ExplicitElementWidget tag="dd">lists</demo:ExplicitElementWidget> |
| </dl> |
| <gwt:HTMLPanel tag="table" ui:field="customTagHtmlPanel"> |
| <tr><td>Even HTMLPanel gets in on the game</td></tr> |
| <tr><td>Lately, anyway.</td></tr> |
| </gwt:HTMLPanel> |
| |
| <gwt:DialogBox autoHide="true" modal="true"> |
| <gwt:caption>Hello, I <b>caption</b> you.</gwt:caption> |
| <gwt:HTMLPanel> |
| And your little dog, too! |
| <gwt:Button ui:field='cancel'>Cancel</gwt:Button> |
| <gwt:Button ui:field='ok'>Okay</gwt:Button> |
| </gwt:HTMLPanel> |
| </gwt:DialogBox> |
| |
| <gwt:ListBox ui:field='fooListBox'> |
| <gwt:item>bar</gwt:item> |
| <gwt:item value='bar2'>bar 2</gwt:item> |
| </gwt:ListBox> |
| |
| <gwt:Grid ui:field='fooGrid'> |
| <gwt:row> |
| <gwt:customCell><gwt:Label>foo</gwt:Label></gwt:customCell> |
| <gwt:customCell><gwt:Button>bar</gwt:Button></gwt:customCell> |
| </gwt:row> |
| </gwt:Grid> |
| |
| <gwt:AbsolutePanel ui:field='myAbsolutePanel'> |
| <gwt:at left='1' top='2'> |
| <gwt:Button ui:field='myAbsolutePanelItemA'/> |
| </gwt:at> |
| <gwt:Button ui:field='myAbsolutePanelItemB'/> |
| <gwt:at left='10' top='20'> |
| <gwt:Button ui:field='myAbsolutePanelItemC'/> |
| </gwt:at> |
| </gwt:AbsolutePanel> |
| |
| <gwt:NamedFrame ui:field='myNamedFrame' name='myName'/> |
| |
| <gwt:DateLabel ui:field='myDateLabel' predefinedFormat='DATE_FULL' /> |
| <gwt:DateLabel ui:field='myDateLabel2' format='{MY_DATE_FORMAT}' /> |
| <gwt:DateLabel ui:field='myDateLabel3' predefinedFormat='{ISO_8601}' /> |
| |
| <gwt:NumberLabel ui:field='myNumberLabel' predefinedFormat='SCIENTIFIC' /> |
| <gwt2:ui.NumberLabel ui:field='myNumberLabel2' format='{MY_NUMBER_FORMAT}' /> |
| |
| <gwt3:google.gwt.user.client.ui.ValueLabel ui:field='myValueLabel' renderer='{doubleRenderer}' /> |
| |
| <gwt:IntegerBox ui:field='myIntegerBox' /> |
| <gwt:DoubleBox ui:field='myDoubleBox' /> |
| <demo:ValueChangeWidget ui:field='myValueChangeWidget' /> |
| <demo:ValueChangeWidget ui:field='myValueChangeWidget_raw' /> |
| <demo:ExtendsValueChangeWidget ui:field='myValueChangeWidget_extends' /> |
| |
| <img src="{values.aUrl}" ui:field='myImage'/> |
| |
| <gwt:HTML ui:field='htmlWithComputedSafeHtml'><ui:safehtml from="{constants.getSafeHtml}" /></gwt:HTML> |
| <gwt:HTML ui:field='htmlWithComputedText'><ui:text from="{constants.getText}" /></gwt:HTML> |
| <gwt:Label ui:field='labelWithComputedText'><ui:text from="{constants.getText}"/></gwt:Label> |
| |
| </gwt:HTMLPanel> |
| </gwt:Dock> |
| </gwt:DockPanel> |
| </ui:UiBinder> |
