A presentation on Dynamic UI concepts experienced at 99X Technology. Presented at SL Bar Camp 2012.

1. Extending GWT

2. Google web toolkit
• Free and open source
• Great to create complex javascript front-end
apps
• Write javascripts in java :)
• Debug AJAX apps in your favorite IDE

3. So, what’s cool there
• OOP designs
• Dynamic and reusable UI components
• Simple RPC mechanism
• GWT handles some cross-browser issues
• Support for localization
• Mix native JavaScript in the Java code

4. GWT Dynamic UI?
• GWT provides UiBinder
• Use HTML-like markup language to bind
components
• Binding happens at compile time :O
<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' visibleItemCount='1'/>.
</g:HTMLPanel>
</ui:UiBinder>

5. Our way
• UI bindings at run time B)
• Bindings defined in XML at serverside
• Components definitions via XSDs
• Factory classes can be dynamically generated

6. Some internal stuff
<xsd:complexType name="LayoutContainer"><xsd:complexContent>
<xsd:extension base="Component">
<xsd:attribute name="DefaultWidth" type="xsd:int" default="200"/>
</xsd:complexContent></xsd:complexType>
A Sample UI Component Definition
<Component xsi:type="LayoutContainer" Id="FormId1"
Layout="form">
<Component xsi:type="LabelField"
Id="FreeTextSearchFieldLabel“ />
<Component xsi:type="Button" Id="ClearSearchOn"
Text=“clear“ />
</Component>
A Sample UI Binding

7. Want to see a small demo?

8. Thank you :)
www.99XTechnology.com
Say hello to us: info@99x.lk