using uibinder with ext gwt 3.0
DESCRIPTION
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.TRANSCRIPT
Wednesday, November 2, 11
OverviewWhat is UiBinder?
UiBinder Support in GXT 3ExamplesQuestion
Wednesday, November 2, 11
What is UiBinder?
Wednesday, November 2, 11
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
Wednesday, November 2, 11
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
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); }
}
Wednesday, November 2, 11
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
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!"); }
}
Wednesday, November 2, 11
CSS with UiBinderAdd CSS within XmlReference external CSSWorks with CssResourceCSS class names obfuscated
Wednesday, November 2, 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
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
GXT 3.0 UiBinderSupport
Wednesday, November 2, 11
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
Wednesday, November 2, 11
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
Wednesday, November 2, 11
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> ...
Wednesday, November 2, 11
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>
Wednesday, November 2, 11
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>
Wednesday, November 2, 11
Examples
Wednesday, November 2, 11
Button Aligning
Wednesday, November 2, 11
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
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
CardLayout Example
Wednesday, November 2, 11
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
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
ToolBar Example
Wednesday, November 2, 11
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
Questions?
Wednesday, November 2, 11