Revision: 6130
Author: [email protected]
Date: Fri Sep 11 16:34:19 2009
Log: Replacing namespace hacks with {field.references}. Also deleted the
unimplemented CheckBox example, which is unlikely to work that way.
http://code.google.com/p/google-web-toolkit/source/detail?r=6130
Modified:
/wiki/UiBinder.wiki
=======================================
--- /wiki/UiBinder.wiki Fri Sep 11 16:17:04 2009
+++ /wiki/UiBinder.wiki Fri Sep 11 16:34:19 2009
@@ -92,9 +92,8 @@
{{{
<!-- HelloWidgetWorld.ui.xml -->
-<ui:UiBinder
- xmlns:ui='urn:ui:com.google.gwt.uibinder'
- xmlns:g='urn:import:com.google.gwt.user.client.ui'>
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+ xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel>
Hello, <g:ListBox ui:field='listBox'/>.
</g:HTMLPanel>
@@ -122,85 +121,24 @@
new HelloWidgetWorld("able", "baker", "charlie");
}}}
-=Putting a label on a checkbox (referring to generated ids within a
template)=
-
-_Not yet implemented._ You want to make your personal variant on the
single most common widget, a checkbox with a nice, accessible HTML label
element tied to it:
+
+=Using an external resource with a UiBinder=
{{{
-<!-- LabeledCheckBox.ui.xml -->
-
-<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
- <span>
- <input type='checkbox' ui:field='myCheckBox'>
- <label ui:for='myCheckBox' ui:field='myLabel'/>
- </span>
-</ui>
-}}}
-
-{{{
-public class LabeledCheckBox extends Widget {
- interface MyUiBinder extends UiBinder<Widget, LabeledCheckbox> {}
- private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
-
- @UiField InputElement myCheckBox;
- @UiField LabelElement myLabel;
-
- public LabeledCheckBox() { setElement(uiBinder.createAndBindUi(this)); }
-
- public void setValue(boolean b) { myCheckBox.setChecked(b); }
-
- public boolean getValue() { return myCheckBox.isChecked(); }
-
- public void setName(String name) { myLabel.setInnerText(name); }
-
- public String getName() { return myLabel.getInnerText(); }
-}
-}}}
-
-The proposal here is that a ui: prefix on any attribute other than id
fills it with the id generated for a corresponding ui:field.
-
-There are type matching issues here. The ui:field of a DOM element is a
string id, while that for a UIObject is typed. So, this should fail with a
type mismatch:
-
-{{{
-<some:WidgetOfSomeKind ui:field='theWidget'> <label g:for='theWidget' />
-}}}
-
-<blockquote>
- The use of attribute prefixing for this would be a mistake, a bad
- use of XML. In particular, it fights the use of XML tools to enforce
- things like, "all labels must have a 'for' attribute."
-
- Instead, we should bite the bullet and adopt a mini-expression
- language, something like:
-
-{{{
-<ui:UiBinder
- xmlns:ui='urn:ui:com.google.gwt.uibinder'>
- <span>
- <input type='checkbox' ui:field='myCheckBox'>
- <label for='{myCheckBox}' ui:field='myLabel'/>
- </span>
-</ui:UiBinder>
-}}}
-
-</blockquote>
-
-=Using an ImmutableResourceBundle (e.g. CssResource) with a UiBinder=
-
-{{{
-<!-- LogoNamePanel.ui.xml -->
-<ui:UiBinder
- xmlns:ui='urn:ui:com.google.gwt.uibinder'
- xmlns:g='urn:import:com.google.gwt.user.client.ui'
- xmlns:res='urn:with:com.my.app.widgets.logoname.Resources'>
+<!-- LogoNamePanel.ui.xml -->
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+ xmlns:g='urn:import:com.google.gwt.user.client.ui'>
+
+ <ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>
+
<g:HTMLPanel>
- <img res:apply='logoImage'>
-
- <div res:class='style.mainBlock'>
- <div res:apply='style.userPictureSprite'>
+ <img ui:apply='{res.logoImage}'>
+
+ <div class='{res.style.mainBlock}'>
+ <div ui:apply='{res.style.userPictureSprite}'>
Well hello there
- <span res:class='style.nameSpan' ui:field='userNameField'/>
+ <span class='{res.style.nameSpan}' ui:field='userNameField'/>
</div>
</div>
</g:HTMLPanel>
@@ -238,39 +176,17 @@
}
}}}
-The with: uri type marks an object whose methods can be called to fill
+The with element declares a field holding an object whose methods can be
called to fill
in attribute values. If no public api is provided to set the "with"
argument (as in this example), it must be instantiable by
GWT.create().
An element can be passed as an argument to a method on such resource
-class via an apply attribute, as illustrated above with the Sprite and
-ImageResource uses.
+class via the ui:apply attribute, as illustrated above with the Sprite and
+ImageResource uses. [*not yet implemented*]
Note that there is no requirement that a with: class implement the
-ClientBundle interface.
-
-<blockquote>
- As above, this is an abuse of attribute prefixing, and a bad idea.
- Here again we should use our little expression language:
-
-{{{
-<ui:UiBinder
- xmlns:ui='urn:ui:com.google.gwt.uibinder'
- xmlns:g='urn:importcom.google.gwt.user.client.ui'
- xmlns:res='urn:with:com.my.app.widgets.logoname.Resources'>
-
- <g:HTMLPanel>
-
- <div class='{res.style.mainBlock}'>
- Well hello there
- <span class='{res.style.nameSpan}' ui:field='userNameField'/>
- </div>
- </g:HTMLPanel>
-</ui:UiBinder>
-}}}
-
-</blockquote>
+ClientBundle interface, this is just an example.
=Share ImmutableResourceBundle instances=
--~--~---------~--~----~------------~-------~--~----~
http://groups.google.com/group/Google-Web-Toolkit-Contributors
-~----------~----~----~----~------~----~------~--~---
