With Ext GWT 3.0 it is now possible to leverage declarative layouts with Ext GWT widgets and containers. In this session, you’ll learn how to use UIBinder within your Ext GWT application. Darrell Meyer leads the Ext GWT product team at Sencha. Before joining the company, Darrell was the creator of the popular open source MyGWT Widget Library for Google Web Toolkit (GWT). Darrell brings his expert Java and GWT knowledge to Sencha. With 10+ year’s experience building enterprise web applications, Darrell is equally well versed as both a software architect and user interface expert.

1. Wednesday, November 2, 11

2. UIBINDER
Darrell Meyer, Sencha
darrell@sencha.com @darrellmeyer
Wednesday, November 2, 11

3. Overview
What is UiBinder?
UiBinder Support in GXT 3
Examples
Question
Wednesday, November 2, 11

4. What is UiBinder?
Wednesday, November 2, 11

5. What is UiBinder?
Declarative markup via Xml
Supports HTML, Widgets, or both
Separates user interface code from Java code
Separation of duties between developers and designers
Compile time checking between Java and Xml
Wednesday, November 2, 11

6. Html Example Pt. 1
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
<ui:style>
.important {
font-weight: bold;
}
</ui:style>
<div>
Hello,
<span class="{style.important}" ui:field="nameSpan" />
</div>
</ui:UiBinder>
Wednesday, November 2, 11

7. Html Example Pt. 2
public class HelloWorld extends UIObject {
private static HelloWorldUiBinder uiBinder =
GWT.create(HelloWorldUiBinder.class);
interface HelloWorldUiBinder extends UiBinder<Element, HelloWorld> {
}
@UiField
SpanElement nameSpan;
public HelloWorld(String firstName) {
setElement(uiBinder.createAndBindUi(this));
nameSpan.setInnerText(firstName);
}
}
Wednesday, November 2, 11

8. Widget Example Pt. 1
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.important {
font-weight: bold;
}
</ui:style>
<g:HTMLPanel>
Hello,
<g:Button styleName="{style.important}" ui:field="button" />
</g:HTMLPanel>
</ui:UiBinder>
Wednesday, November 2, 11

9. Widget Example Pt. 2
public class HelloWorldPanel extends Composite implements HasText {
private static HelloWorldPanelUiBinder uiBinder =
GWT.create(HelloWorldPanelUiBinder.class);
interface HelloWorldPanelUiBinder extends UiBinder<Widget, HelloWorldPanel> {
}
public HelloWorldPanel() {
initWidget(uiBinder.createAndBindUi(this));
}
@UiField
Button button;
@UiHandler("button")
void onClick(ClickEvent e) {
Window.alert("Hello!");
}
}
Wednesday, November 2, 11

10. CSS with UiBinder
Add CSS within Xml
Reference external CSS
Works with CssResource
CSS class names obfuscated
Wednesday, November 2, 11

11. Inline CSS Example
<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>
Wednesday, November 2, 11

12. External CSS Example
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:style src="MyUi.css" />
<ui:style field='otherStyle' src="MyUiOtherStyle.css">
<div class='{style.pretty}'>
Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
</div>
</ui:UiBinder>
...
<ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>
<span class='{res.style.nameSpan}' ui:field='nameSpan'/>
...
Wednesday, November 2, 11

13. GXT 3.0 UiBinder
Support
Wednesday, November 2, 11

14. 3.0 UiBinder Support
2.0
Can use GXT Components with UiBinder
Can’t use GXT Containers
Can’t use GXT LayoutContainer’s with Layouts
3.0
Can use GXT Containers
Can use GXT LayoutData with 2 options
1. Construct layout data instances in Java
2. Construct and configure layout data instances in Xml
Wednesday, November 2, 11

15. Working with ui:with
Allows object to be created in Xml or referenced by Xml
Objects created in Xml can’t be configured, only constructed
With an optional Jar, GXT allows object to be configured
Optional Jar will not be needed with GWT 2.5
Wednesday, November 2, 11

16. ui:with
Creating objects in Java
@UiField(provided=true) MarginData outerData = new MarginData(20);
northData.setMargins(new Margins(0, 0, 5, 0));
<ui:with type="com.sencha.gxt.widget.core.client.container.MarginData"
field="outerData" />
...
<container:SimpleContainer>
<container:child layoutData="{outerData}">
<b:TextButton text="Button" />
</container:child>
</container:SimpleContainer>
...
Wednesday, November 2, 11

17. ui:with
Creating objects in Xml
<ui:with type="com.sencha.gxt.core.client.util.Margins" field="outerMargins">
<ui:attributes top="20" right="20" bottom="20" left="20" />
</ui:with>
Wednesday, November 2, 11

18. Using Optional Jar
Without Maven
Add uibinder-bridge.jar to classpath
Maven
Add following entry to pom.xml
<dependency>
<groupId>com.sencha.gxt</groupId>
<artifactId>uibinder-bridge</artifactId>
<version>${gwt.version}-SNAPSHOT</version>
<scope>provided</scope>
</dependency>
Both
Add following entry after GWT / GXT User module
<inherits name="com.sencha.gwt.uibinder.UiBinder" />
Wednesday, November 2, 11

19. Examples
Wednesday, November 2, 11

20. Button Aligning
Wednesday, November 2, 11

21. Button Aligning Code Pt. 1
<ui:with type="com.sencha.gxt.core.client.util.Margins" field="margins">
<ui:attributes top="5" right="5" bottom="5" left="5" />
</ui:with>
<ui:with type="com.sencha.gxt.widget.core.client.container.MarginData"
field="layoutData">
<ui:attributes margins="{margins}" />
</ui:with>
Wednesday, November 2, 11

22. Button Aligning Code Pt. 2
<container:FlowLayoutContainer>
<container:child layoutData="{layoutData}">
<gxt:FramedPanel headingText="Button Aligning Example: center"
buttonAlign="CENTER" pixelSize="500, 150" addStyleNames="white-bg">
<gxt:button>
<button:TextButton text="Button 1" ui:field="button1" />
</gxt:button>
<gxt:button>
<button:TextButton text="Button 2" ui:field="button2" />
</gxt:button>
<gxt:button>
<button:TextButton text="Button 3" ui:field="button3" />
</gxt:button>
</gxt:FramedPanel>
</container:child>
Wednesday, November 2, 11

23. CardLayout Example
Wednesday, November 2, 11

24. CardLayout Code Pt. 1
<g:VerticalPanel spacing="10">
<gxt:FramedPanel ui:field="panel" pixelSize="400, 100"
headingText="CardLayout Example">
<container:CardLayoutContainer ui:field="layout">
<g:Label text="This is the contents for card: 1"
styleName="{style.text}" />
<g:Label text="This is the contents for card: 2"
styleName="{style.text}" />
...
</container:CardLayoutContainer>
<gxt:button>
<b:TextButton ui:field="card1Button" text="Card 1" />
</gxt:button>
...
</gxt:FramedPanel>
</g:VerticalPanel>
Wednesday, November 2, 11

25. CardLayout Code Pt. 2
@UiField CardLayoutContainer layout;
@UiField FramedPanel panel;
public Widget asWidget() {
return uiBinder.createAndBindUi(this);
}
public void onModuleLoad() {
RootPanel.get().add(asWidget());
}
@UiHandler({"card1Button", "card2Button", "card3Button", "card4Button"})
public void onButton1Click(SelectEvent event) {
TextButton button = (TextButton) event.getSource();
int index = panel.getButtonBar().getWidgetIndex(button);
layout.setWidget(layout.getWidget(index));
}
Wednesday, November 2, 11

26. ToolBar Example
Wednesday, November 2, 11

27. ToolBar Code
<ui:with type="com.sencha.gxt.examples.resources.client.images.ExampleImages"
field="images" />
<toolbar:ToolBar>
<button:TextButton text="Button w/ Menu" icon="{images.menu_show}">
<button:menu>
<menu:Menu>
<menu:CheckMenuItem text="I Like Cats" checked="true" />
<menu:CheckMenuItem text="I Like Dogs" />
<menu:SeparatorMenuItem />
</menu:Menu>
</button:menu>
</button:TextButton>
<toolbar:SeparatorToolItem />
...
Wednesday, November 2, 11

28. Questions?
Wednesday, November 2, 11