Revision: 6134
Author: [email protected]
Date: Fri Sep 11 16:58:20 2009
Log: Explaining <ui:style>
http://code.google.com/p/google-web-toolkit/source/detail?r=6134
Modified:
/wiki/UiBinder.wiki
=======================================
--- /wiki/UiBinder.wiki Fri Sep 11 16:45:48 2009
+++ /wiki/UiBinder.wiki Fri Sep 11 16:58:20 2009
@@ -120,6 +120,61 @@
HelloWidgetWorld helloWorld =
new HelloWidgetWorld("able", "baker", "charlie");
}}}
+
+= Hello Stylish World =
+
+With the <ui:style> element, you can define the CSS for your UI right
+where you need it.
+
+{{{
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
+ <ui:style>
+ .pretty { background-color: Skyblue; }
+ </ui:style>
+
+ <div class='{style.pretty}'>
+ Hello, <span ui:field='nameSpan'/>.
+ </div>
+</ui:UiBinder>
+}}}
+
+A CssResource interface is generated for you, along with a ClientBundle.
This means that the compiler
+will warn you if you misspell the class name when you try to use it (e.g.
{style.prettty}).
+
+Also, your css class name will be obfuscated, and so protected from
collision with similar classnames
+in other css blocks. In fact, you can take advantage of this within a
single template:
+
+
+{{{
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
+ <ui:style>
+ .pretty { background-color: Skyblue; }
+ </ui:style>
+ <ui:style field='otherStyle'>
+ .pretty { background-color: Orange; }
+ </ui:style>
+
+ <div class='{style.pretty}'>
+ Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
+ </div>
+</ui:UiBinder>
+}}}
+
+Finally, you don't have to have your CSS inside your ui.xml file to take
advantage of this.
+Most real world projects will probably keep their CSS in a separate file:
+
+{{{
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
+ <ui:style source="MyUi.css" />
+ <ui:style field='otherStyle' source="MyUiOtherStyle.css">
+
+ <div class='{style.pretty}'>
+ Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
+ </div>
+</ui:UiBinder>
+}}}
+
+
=Using an external resource with a UiBinder=
--~--~---------~--~----~------------~-------~--~----~
http://groups.google.com/group/Google-Web-Toolkit-Contributors
-~----------~----~----~----~------~----~------~--~---
