using uibinder with ext gwt 3.0

Wednesday, November 2, 11

Darrell Meyer, SenchaUIBINDER

[email protected] @darrellmeyer


mailto:[email protected]

mailto:[email protected]

OverviewWhat is UiBinder?

UiBinder Support in GXT 3ExamplesQuestion


What is UiBinder?


What is UiBinder?Declarative markup via XmlSupports HTML, Widgets, or bothSeparates user interface code from Java codeSeparation of duties between developers and designersCompile time checking between Java and Xml


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>


Html Example Pt. 2public 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); }

}


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>


Widget Example Pt. 2public 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!"); }

}


CSS with UiBinderAdd CSS within XmlReference external CSSWorks with CssResourceCSS class names obfuscated


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>


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'/>...


GXT 3.0 UiBinderSupport


3.0 UiBinder Support2.0Can use GXT Components with UiBinderCan’t use GXT ContainersCan’t use GXT LayoutContainer’s with Layouts

3.0Can use GXT ContainersCan use GXT LayoutData with 2 options1. Construct layout data instances in Java2. Construct and configure layout data instances in Xml


Working with ui:withAllows object to be created in Xml or referenced by XmlObjects created in Xml can’t be configured, only constructedWith an optional Jar, GXT allows object to be configuredOptional Jar will not be needed with GWT 2.5


ui:withCreating 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> ...


ui:withCreating 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>


Using Optional JarWithout MavenAdd uibinder-bridge.jar to classpath

BothAdd following entry after GWT / GXT User module

<inherits name="com.sencha.gwt.uibinder.UiBinder" />

MavenAdd following entry to pom.xml

<dependency> <groupId>com.sencha.gxt</groupId> <artifactId>uibinder-bridge</artifactId> <version>${gwt.version}-SNAPSHOT</version> <scope>provided</scope> </dependency>


Examples


Button Aligning


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>


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>


CardLayout Example


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>


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)); }


ToolBar Example


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 /> ...


Questions?


using uibinder with ext gwt 3.0

Technology

cardlayout

creating objects

optional jar

gxt containers

add

xml

uibinder

widget