8 vues

GWT UiBinder Intro

Transféré par Wobbles909

fghjfghj

Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

Signaler comme contenu inapproprié

Passer à la page

Vous êtes sur la page 1sur 28

Rechercher à l'intérieur du document

© 2013 Marty Hall & Yaakov Chaikin

The Google Web Toolkit (GWT):
Declarative Layout with UiBinder – Basics
(GWT 2.5 Version)
Originals of Slides and Source Code for Examples:
http://courses.coreservlets.com/Course-Materials/gwt.html
Customized Java EE Training: http://courses.coreservlets.com/
GWT, Java 7 and 8, JSF 2, PrimeFaces, HTML5, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, REST, Hadoop, Android.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

For live Ajax & GWT training, see training
courses at http://courses.coreservlets.com/.
Taught by the author of Core Servlets and JSP,
More Servlets and JSP, and this tutorial. Available at
public venues, or customized versions can be held
on-site at your organization.
• Courses developed and taught by Marty Hall
– JSF 2, PrimeFaces, servlets/JSP, Ajax, jQuery, Android development, Java 7 or 8 programming, custom mix of topics
– Courses
available in any state
or country.
Maryland/DC http://courses.coreservlets.com/
area companies can also choose afternoon/evening courses.
Customized
Java
EE Training:

• Courses
taught by coreservlets.com
experts
Marty)
GWT,
Java 7developed
and 8, JSF and
2, PrimeFaces,
HTML5, Servlets, JSP,
Ajax,(edited
jQuery,by
Spring,
Hibernate, REST, Hadoop, Android.
– Spring, Hibernate/JPA, GWT, Hadoop, HTML5, RESTful Web Services

Developed and taught by well-known
author
and developer. At public
venues or onsite at your location.
Contact
hall@coreservlets.com
for details

Topics in This Section
•
•
•
•
•
•
•

Problems with only Java-based layout
Main idea behind UiBinder approach
Advantages of UiBinder
Disadvantages of UiBinder
Steps for HTML-based UiBinder GUIs
Steps for Widget-based UiBinder GUIs
Simplified UI event handling with UiBinder

Overview
Customized Java EE Training: http://courses.coreservlets.com/
GWT, Java 7 and 8, JSF 2, PrimeFaces, HTML5, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, REST, Hadoop, Android.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

get("id-2").Layout Strategies • HTML-based layout – Write HTML by hand.add(w1). RootPanel. } 7 .get("id-1"). designate places for individual controls – HTML body contains a lot of content – Best when GWT is used for • A traditional Web app with some pieces of Ajax-enabled content • Complex page where HTML layout does not change • You need the HTML content indexed by a search engine • Java-based layout – Attaches main layout panel to HTML <body> element – Java uses Panels to build up overall layout • Similar to way LayoutManagers are used in desktop Java – Best when GWT is used to • Mimic a desktop application • Create an application where HTML layout changes on fly • Declarative layout with UiBinder (this tutorial) 6 HTML-Based Layout • HTML <body> Regular Regular Regular Regular </body> HTML <div id="id-1"></div> HTML <div id="id-2"></div> HTML <div id="id-3"></div> HTML • Java public void onModuleLoad() { SomeWidget w1 = …. RootPanel.add(w3).add(w2). SomeWidget w2 = ….get("id-3"). SomeWidget w3 = …. RootPanel.

Java-Based Layout • HTML <body> <!-. it is hard to maintain 9 .add(mainPanel). SomeOtherPanel subPanel = …. JSP – HTML-based layout is usually not dynamic enough • If it is.add(w1). … RootLayoutPanel. mainPanel.setVariousProperties().add(subPanel). use it! • Hard to visualize the layout – Not easy to see final result from looking at Java code • Hard to effectively involve a graphic UI Web designer – They usually don’t know Java – Even if you manage to get the design into Java.get(). … mainPanel. SomeWidget w1 = …. but few or no HTML elements --> </body> • Java public void onModuleLoad() { SomePanel mainPanel = ….Possibly history iframe. } 8 Problems with Only Java-Based Layout • Hard to format HTML in Java – Think servlets vs. subPanel.

use normal “add” method to insert it 10 Advantages of UiBinder • Can make complex page layouts using HTML – Or HTML-like XML • Analogous to adding JSP to pure-servlet apps • More maintainable • Graphic Web designers can be involved from initial design through maintenance – Easy to start with regular HTML and gradually “sprinkle in” GWT bindings • Separation of concerns – Aesthetics and functionality of UI no longer mashed together • Compile-time check of cross references between XML & Java and even within XML itself 11 .UiBinder: Main Idea • Use XML file to lay out chunk of content – Can represent HTML or a Widget • Make Java class that represents that chunk of content – There are some overly-details steps involved. but Eclipse has shortcuts that automate making most of them • Use that Java class in your main application – If class represents HTML. use the GWT DOM API to insert it – If class represents a Widget.

UiBinder is only declarative – No rendering mechanism: no loops. etc. – It’s just a declaration of your layout – Still need Java to loop through data and generate output • Complex page layouts are done with HTML – Wait! What? Didn’t I say that was an advantage? – Depends on your background and why you chose GWT in the first place 13 . NetBeans 12 Disadvantages of UiBinder • Causes proliferation of files – There are two files for every component • Unlike JSP. conditionals.Advantages of UiBinder (Continued) • Better browser performance – Browsers are very fast at stuffing long strings into innerHTML of an element • Not so much when it comes to executing JavaScript APIs – Lesson: use regular HTML whenever possible! – Goal of UiBinder: Make the easier choice the right choice • Tooling support – Eclipse.

HTML5. REST. 14 Developed and taught by well-known author and developer. Hadoop. Use new Java class in EntryPoint class – Use DOM API with getElement and appendChild • Note – Eclipse wizard will automate much of this process 15 . PrimeFaces. Hibernate.coreservlets. Java 7 and 8. JSF 2. Servlets. jQuery. Create Java class that represents the XML – Extend UiObject – Use UiBinder interface and GWT.© 2013 Marty Hall & Yaakov Chaikin HTML-Based UiBinder GUIs Customized Java EE Training: http://courses. Basic Steps 1. At public venues or onsite at your location.create to bind the Java class to the XML representation – Mark fields with @UiField (one for each ui:field in XML) – Call setElement – Insert content into those fields 3. Spring. Create XML file – Top-level element is an HTML tag like <div> – Put raw HTML inside – Use ui:field to mark places for later insertion 2. Ajax. Android.com/ GWT. JSP.

xml 16 Step 1: XML File – HelloHtmlWorld. cannot be private. so don’t need to have Internet access for this to work. i.&nbsp.ui.e. clicked Finish After creation.uibinder"> <div> This is considered the root element of the UiBinder declaration. <span>. i. even though the root Hello. element of the XML file is ui:UiBinder. There must be a corresponding member of the same name in HelloHtmlWorld. This is already baked into the GWT compiler... removed some generated content we’ll learn later about Creates 2 files: HelloHtmlWorld.gwt.ui.Example: HelloHtmlWorld UiBinder • Start with Eclipse wizard – – – – – Created coreservlets. (SpanElement or its superclass) 17 Regular XML does not define named HTML character entities like &nbsp. div element </div> </ui:UiBinder> This is a bound field. This is what the Java counterpart needs to <span ui:field="greetSpan"></span> treat this declaration as. GWT provides them through the DOCTYPE above. &nbsp. The type of the corresponding field must be a GWT DOM class that is equivalent to owning tag.client. It must have at least package private scope.. this is DTD and XML Schema declaration in the same file! This is completely legal! . Yes.java and HelloHtmlWorld.xml <!DOCTYPE ui:UiBinder SYSTEM "http://dl. i.java .ent"> <ui:UiBinder xmlns:ui="urn:ui:com..google.com/gwt/DTD/xhtml.ui package (for convenience of organization) Right-clicked on the ui package and chose NewOtherGWTUiBinder Chose Create UI based on HTML.e.google.&hearts.e. and &hearts.

class).client.user. it’s an HTML-based UiBinder. associating all the fields with @UiField with its declared counterpart.createAndBindUi(this)).setInnerText(greeting).*.e.client.gwt.google.google. import import import import com.class). this class.create to Bind Java to XML Declare marker interface that will tell GWT which two types to attempt binding.create(HelloHtmlWorldUiBinder.Step 2A: Extend UiObject – HelloHtmlWorld.setInnerText(greeting).google. public class HelloHtmlWorld extends UIObject { interface HelloHtmlWorldUiBinder extends UiBinder<DivElement.java .create(HelloHtmlWorldUiBinder. we will use Widget-based UiBinders.client. HelloHtmlWorld> {} private static HelloHtmlWorldUiBinder uiBinder = GWT. i. import com. Owner type whose @UiFields need to be bound.client. com. . i. In next section. public HelloHtmlWorld(String greeting) { setElement(uiBinder.. type of this class. Must be GWT type equivalent to the type of root UiBinder element.google.UIObject. the root UiBinder element is div. .ui.*. Only if your root UiBinder element is HTML.. public class HelloHtmlWorld extends UIObject { interface HelloHtmlWorldUiBinder extends UiBinder<DivElement.e.gwt.gwt.UIObject.e. i. greetSpan.ui. @UiField SpanElement greetSpan. (DivElement or Element type will work here). greetSpan.gwt.dom.. In this case.. so will extend Composite instead. com.. @UiField SpanElement greetSpan.. public HelloHtmlWorld(String greeting) { setElement(uiBinder.client.createAndBindUi(this)).uibinder.google.gwt.user.core.. HelloHtmlWorld> {} private static HelloHtmlWorldUiBinder uiBinder = GWT. com. } } 18 Step 2B: Use UiBinder & GWT.GWT. } } 19 GWT creates an instance of a factory that can generate the UI and glue it to the owning class.

google.google.client. i.google.client.setInnerText(greeting).. } 21 } . i.e.client. HelloHtmlWorld> { } private static HelloHtmlWorldUiBinder uiBinder = GWT.class).create(HelloHtmlWorldUiBinder.. public HelloHtmlWorld(String greeting) { setElement(uiBinder. com. Since this represents an HTML Element (SpanElement in this case). public class HelloHtmlWorld extends UIObject { interface HelloHtmlWorldUiBinder extends UiBinder<DivElement. Creates the root UiBinder type defined in the interface.gwt.create(HelloHtmlWorldUiBinder. DivElement.gwt.uibinder.setInnerText(greeting).java . greetSpan.gwt.*.*..client.e. setElement method must be called. Step 2C: Mark fields with @UiField (on for each ui:field in the XML). not a Widget. HelloHtmlWorld.createAndBindUi(this))..createAndBindUi(this)). com..GWT. we use the lower-level Element methods like setInnerText.core.google. @UiField SpanElement greetSpan.dom.. @UiField SpanElement greetSpan. HelloHtmlWorld> { } private static HelloHtmlWorldUiBinder uiBinder = GWT. } } Step 2D: call setElement. 20 Final Result: HelloHtmlWorld.UIObject. passing it an instance of an owner class. public HelloHtmlWorld(String greeting) { setElement(uiBinder.user.ui. Step 2E: insert content. Tells GWT what HTML element to treat this object as.gwt.xml file. import import import import com. com. greetSpan. Var name must match ui:field name in ui.class).Steps 2C – 2E . Before anything can be done with a UIObject instance. public class HelloHtmlWorld extends UIObject { interface HelloHtmlWorldUiBinder extends UiBinder<DivElement.

.. Element attachTo = RootPanel.getElement()).get("uibinder-html"). <fieldset> <legend>Simple UiBinder HTML Example</legend> <div id="uibinder-html"></div> </fieldset> <br/> .getElement()... attachTo..appendChild(helloHtmlWorld.. we need to use the lower-level DOM API to append it to the browser DOM. public class GwtUiBinder1 implements EntryPoint { public void onModuleLoad() { HelloHtmlWorld helloHtmlWorld = new HelloHtmlWorld("UiBinder HTML World!"). 23 .Step 3: Use New Java Class in EntryPoint Class .. } } Since the HelloHtmlWorld is a UIObject and not a Widget.. 22 Example: Result . .

. Ajax. Hibernate. Basic Steps (Main Changes from HTML-Based in Red) 1.coreservlets.g. RootPanel.add(yourWidget)) • Note – Eclipse wizard will automate much of this process 25 . Create XML file – Top-level element represents a Widget: <g:someGwtWidget> – Put mixture of raw HTML and <g:otherGwtWidgets> inside – Use ui:field to mark places for later insertion 2. jQuery. JSP. PrimeFaces. Spring. Java 7 and 8.create to bind the Java class to the XML representation – Mark fields with @UiField (one for each ui:field in XML) – Call initWidget – Set properties of those fields 3. At public venues or onsite at your location. JSF 2. Android. 24 Developed and taught by well-known author and developer. Use new Java class in EntryPoint class – Use normal Widget methods (e. Hadoop. Create Java class that represents the XML – Extend Composite – Use UiBinder interface and GWT. REST. HTML5.© 2013 Marty Hall & Yaakov Chaikin Widget-Based UiBinder GUIs Customized Java EE Training: http://courses.get(…).com/ GWT. Servlets.

ui"> <g:HTMLPanel> <span style="font-style: italic.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.user..ui. removed some generated content we’ll learn later about Creates 2 files: HelloWidgetWorld.gwt. This is considered the root widget of this UiBinder declaration.google. clicked Finish After creation.google.</span> <g:HTML ui:field="label" /> </g:HTMLPanel> Imports everything in the com.uibinder" xmlns:g="urn:import:com.e.com/gwt/DTD/xhtml.user. can not be private.ui </ui:UiBinder> package and gives it an XML namespace prefix ‘g’. It must have at least package private scope.java and HelloWidgetWorld. There must be a corresponding member of the same name in HelloWidgetWorld.xml 26 Step 1: XML File <!DOCTYPE ui:UiBinder SYSTEM "http://dl. any class in that package can be referenced here with the prefix ‘g’.ui package (for convenience of organization) Right-clicked on the ui package and chose New-UiBinder Chose Create UI based on GWT widgets. HTMLPanel 27 This is a bound field.e. . This is what the Java counterpart needs to treat this declaration as.client. i.client.gwt.Example: HelloWidgetWorld UiBinder • Start with Eclipse wizard – – – – – Created coreservlets.gwt.google.google. i. Now.">Hello. even though the root element of the XML file is ui:UiBinder.client.. The type of the corresponding field must be a GWT widget type that is either HTML or its superclass.java .

Step 2A: Extend Composite – HelloWidgetWorld.. Owner type whose @UiFields need to be bound.. @UiField HTML label.create(HelloWidgetWorldUiBinder.createAndBindUi(this)). Only if your root UiBinder element is a GWT Widget. HelloWidgetWorld> {} private static HelloWidgetWorldUiBinder uiBinder = GWT. (HTMLPanel or Widget type will work here). whose superclass is Widget.user.setText(greeting).GWT.gwt. this class. label..client. label. In this case. associating all the fields with @UiField with its declared counterpart.ui.e.*. the root UiBinder widget is HTMLPanel.class). type of this class.gwt.create(HelloWidgetWorldUiBinder.core. it’s a GWT Widget-based UiBinder. Declare marker interface that will tell GWT which two types to attempt binding. } } 29 GWT creates an instance of a factory that can generate the UI and glue it to the owning class.*.java .e. import com. Yes.google. but we could have used HTMLPanel here just the same.gwt.createAndBindUi(this)).create to Bind Java to XML .. public class HelloWidgetWorld extends Composite { interface HelloWidgetWorldUiBinder extends UiBinder<Widget.setText(greeting).google. . i.uibinder. i. import com. import com. Must be GWT type equivalent to the type of root UiBinder element.google.client. i. @UiField HTML label.. HelloWidgetWorld> {} private static HelloWidgetWorldUiBinder uiBinder = GWT. public HelloWidgetWorld(String greeting) { initWidget(uiBinder.class). this IS a custom widget! public class HelloWidgetWorld extends Composite { interface HelloWidgetWorldUiBinder extends UiBinder<Widget. public HelloWidgetWorld(String greeting) { initWidget(uiBinder..client. } } 28 Step 2B: Use UiBinder & GWT..e.

. public HelloWidgetWorld(String greeting) { initWidget(uiBinder.uibinder. initWidget method must be called. HelloWidgetWorld> {} private static HelloWidgetWorldUiBinder uiBinder = GWT.core. import com. import com.client.class). i..e. } } 31 . Creates the root UiBinder type defined in the interface.java . label. i. label.client. } } Step 2D: call initWidget.xml file.Steps 2C – 2E . public class HelloWidgetWorld extends Composite { interface HelloWidgetWorldUiBinder extends UiBinder<Widget. HelloWidgetWorld.e.gwt.gwt.class). public class HelloWidgetWorld extends Composite { interface HelloWidgetWorldUiBinder extends UiBinder<Widget.ui.create(HelloWidgetWorldUiBinder.createAndBindUi(this)). import com..google.user...setText(greeting). (We showed this before when creating custom widgets). Before anything can be done with a Composite instance. Tells GWT what GWT Widget to treat this object as. Widget.google.GWT. Step 2C: mark fields with @UiField. Final Result: HelloWidgetWorld.google..gwt. @UiField HTML label.client.*. public HelloWidgetWorld(String greeting) { initWidget(uiBinder.create(HelloWidgetWorldUiBinder. @UiField HTML label. passing it an instance of an owner class.createAndBindUi(this)).setText(greeting). Must match ui:field name in ui. 30 Step 2E: Set properties of fields.*. This is a normal Widget (of type HTML in this case). HelloWidgetWorld> {} private static HelloWidgetWorldUiBinder uiBinder = GWT.

appendChild(helloHtmlWorld. RootPanel..get("uibinder-html"). 33 . . attachTo... we can directly add it to RootPanel without resorting to GWT DOM API..getElement()).getElement(). HelloWidgetWorld helloWidgetWorld = new HelloWidgetWorld("UiBinder Widget World!").. <fieldset> <legend>Simple UiBinder Widget Example</legend> <div id="uibinder-widget"></div> </fieldset> <br/> .get("uibinder-widget"). Element attachTo = RootPanel.. } } Since the HelloWidgetWorld is a regular GWT widget.Step 3: Use New Java Class in EntryPoint Class public class GwtUiBinder1 implements EntryPoint { public void onModuleLoad() { HelloHtmlWorld helloHtmlWorld = new HelloHtmlWorld("UiBinder HTML World!").add(helloWidgetWorld). 32 Example: Result .

ClickEvent. jQuery. Servlets. PrimeFaces.. JSP. HTML5. – Method name can be anything you want (but can’t be private) • Disadvantages – GWT-created handlers are not sharable with other components • You can still refactor and share the functionality – Can only be used on widgets. inner. Summary • UI event handling has a lot of “boilerplate” code – Create a class that implements SomeHandler interface • Can be done as an anonymous. e. Hibernate. Android. At public venues or onsite at your location. JSF 2. or standalone • Implement the onBlah method in that interface – Call addSomeHandler to the widget • In UiBinder. Hadoop.© 2013 Marty Hall & Yaakov Chaikin Simplified UI Event Handling Customized Java EE Training: http://courses. Java 7 and 8. use shortcut: @UiHandler("fieldName") void method(BlahEvent e) {} – "fieldName" – name of declared member field in this class – BlahEvent is any event type. REST. not DOM elements 35 .com/ GWT. BlurEvent.g. Spring. Ajax. Developed and taught by well-known author and developer.coreservlets. etc.

RootPanel. RootPanel. 36 Random Number and Linked ListBox Example Review (Cont.get("randomNumberResult"). <fieldset> <legend>Client-Side Data</legend> <table border="1"> <tr><th>User Control</th> <th>Result</th></tr> <tr><td id="randomNumberButton"></td> <td id="randomNumberResult"></td></tr> <tr><td>State: <span id="stateListHolder"></span></td> <td>City: <span id="cityListHolder"></span></td> </tr> </table><br/> </fieldset> .Random Number and Linked ListBox Example Review .add(randomNumberButton).. } private void buttonSetup() { Button randomNumberButton = new Button("Show Random Number"). randomNumberButton. } 37 . listSetup().) public class GwtApp1 implements EntryPoint { public void onModuleLoad() { // Main entry point buttonSetup().get("randomNumberButton").addClickHandler (new RanNumHandler(randomNumberResult))......add(randomNumberResult). HTML randomNumberResult = new HTML("<i>Num will go here</i>"). } .

stateList.random()*10). } private void populateStateList(ListBox stateList) { stateList.resultRegion = resultRegion.Random Number and Linked ListBox Example Review (Cont. public RanNumHandler(HTML resultRegion) { this. cityList)). } public void onClick(ClickEvent event) { resultRegion. for(StateInfo state: nearbyStates) { stateList. StateInfo[] nearbyStates = StateInfo.setVisibleItemCount(1). cityList.setVisibleItemCount(1). } } 38 Random Number and Linked ListBox Example Review (cont) private void listSetup() { ListBox stateList = new ListBox(). RootPanel.) private class RanNumHandler implements ClickHandler { private HTML resultRegion. populateStateList(stateList). ListBox cityList = new ListBox().getStateName()).get("cityListHolder"). cityList. stateList. cityList.addChangeHandler(new StateHandler(stateList.get("stateListHolder").addItem("Select State"). } } 39 .setEnabled(false).add(cityList).addItem("Select City").getNearbyStates().add(stateList).setText("Number: " + Math.addItem(state. RootPanel.

Random Number and Linked ListBox Example Review (cont) private class StateHandler implements ChangeHandler { private ListBox stateList.clear(). } cityList. cityList. for(String city: cities) { cityList. StateInfo[] nearbyStates = StateInfo. } 40 } Random Number and Linked ListBox Example Review: Result 41 . cityList. ListBox cityList) { this.getItemText(index).findCities(nearbyStates.getSelectedIndex().cityList = cityList.setEnabled(true). String[] cities = StateInfo. } public void onChange(ChangeEvent event) { int index = stateList.addItem(city). this. public StateHandler(ListBox stateList.stateList = stateList. String state = stateList. state).getNearbyStates().

xml <!DOCTYPE ui:UiBinder SYSTEM "http://dl.client.google.gwt.google. ListBox cityList.user.com/gwt/DTD/xhtml.. HandleEvents1> { } @UiField @UiField @UiField @UiField Button numberButton.java . } 43 .gwt.google. listSetup().uibinder" xmlns:g="urn:import:com.ent"> <ui:UiBinder xmlns:ui="urn:ui:com. ListBox stateList. numberButton.Example: UI Event Handling Without UiBinder shortcut: HandleEvents1. interface HandleEvents1UiBinder extends UiBinder<Widget.createAndBindUi(this)).create(HandleEvents1UiBinder. public class HandleEvents1 extends Composite { private static HandleEvents1UiBinder uiBinder = GWT . public HandleEvents1() { initWidget(uiBinder.ui"> <g:HTMLPanel> <table border="1"> <tr><th>User Control</th><th>Result</th></tr> <tr> <td><g:Button ui:field="numberButton">Show Random Number </g:Button></td> <td><g:HTML ui:field="numberResult">Num will go here </g:HTML></td></tr> <tr><td>State: <g:ListBox ui:field="stateList"/></td> <td>City: <g:ListBox ui:field="cityList"/></td></tr> </table><br/> </g:HTMLPanel> </ui:UiBinder> 42 Example: UI Event Handling Without UiBinder shortcut: HandleEvents1..class).ui.addClickHandler(new RanNumHandler()). HTML numberResult.

cityList..clear()... } } } 45 ..setEnabled(true).addChangeHandler(new StateHandler()).getNearbyStates(). StateInfo[] nearbyStates = StateInfo.setText("Number: " + Math. StateInfo[] nearbyStates = StateInfo. private class RanNumHandler implements ClickHandler { public void onClick(ClickEvent event) { numberResult. } } . Example: UI Event Handling Without UiBinder shortcut: HandleEvents1.random() * 10). String state = stateList. } cityList.setEnabled(false).setVisibleItemCount(1). } } private void listSetup() { populateStateList(). cityList.addItem("Select City").findCities(nearbyStates.getItemText(index).java (continued) .. } 44 private void populateStateList() { stateList. for (StateInfo state : nearbyStates) { stateList.addItem(state. state).getStateName()).Example: UI Event Handling Without UiBinder shortcut: HandleEvents1.java (Continued) . private class StateHandler implements ChangeHandler { public void onChange(ChangeEvent event) { int index = stateList.. stateList. for (String city : cities) { cityList. cityList.addItem("Select State"). cityList.getNearbyStates().setVisibleItemCount(1).addItem(city). String[] cities = StateInfo. stateList.getSelectedIndex().

...html & EntryPoint Class ... HandleEvents1 events1 = new HandleEvents1(). public class GwtUiBinder1 implements EntryPoint { public void onModuleLoad() { . .get("uibinder-events-without").add(events1). RootPanel.. <fieldset> <legend>UI Event Handling without @UiHandler shortcut</legend> <div id="uibinder-events-without"></div> </fieldset> <p/> ..Example: UI Event Handling Without UiBinder shortcut: GwtUiBinder1.. } } 46 Example: UI Event Handling Without UiBinder shortcut: Result 47 .

google.xml <!DOCTYPE ui:UiBinder SYSTEM "http://dl.com/gwt/DTD/xhtml. Same as HandleEvents1.java .google.client. HandleEvents2> {} @UiField @UiField @UiField @UiField Button numberButton.createAndBindUi(this)). public HandleEvents2() { initWidget(uiBinder.gwt. ListBox stateList. ListBox cityList. listSetup(). 48 Example: UI Event Handling With UiBinder shortcut: HandleEvents2.class).ui"> <g:HTMLPanel> <table border="1"> <tr><th>User Control</th><th>Result</th></tr> <tr> <td><g:Button ui:field="numberButton">Show Random Number </g:Button></td> <td><g:HTML ui:field="numberResult">Num will go here </g:HTML></td></tr> <tr><td>State: <g:ListBox ui:field="stateList"/></td> <td>City: <g:ListBox ui:field="cityList"/></td></tr> </table><br/> </g:HTMLPanel> </ui:UiBinder> No Changes.ui.gwt.create(HandleEvents2UiBinder.uibinder" xmlns:g="urn:import:com.xml..ui.user.Example: UI Event Handling With UiBinder shortcut: HandleEvents2.google. } 49 . interface HandleEvents2UiBinder extends UiBinder<Widget.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.. HTML numberResult. public class HandleEvents2 extends Composite { private static HandleEvents2UiBinder uiBinder = GWT.

} 51 } .addItem(city). String[] cities = StateInfo.. it is void. GWT matches field name with the @UiField Button numberButton. String state = stateList. but any return type is valid. @UiHandler("numberButton") void displayRandomNumber(ClickEvent event) { numberResult. @UiField HTML numberResult.getItemText(index).setVisibleItemCount(1). @UiField ListBox cityList.java (continued) private void listSetup() { populateStateList(). The contents of the method are the same as before. } Must be either public or package private (i.getSelectedIndex(). Can’t be a private method. } cityList.Example: UI Event Handling With UiBinder shortcut: HandleEvents2. state). In this example.findCities(nearbyStates. but now no boilerplate code! } .. 50 Example: UI Event Handling With UiBinder shortcut: HandleEvents2. Based on the event type.setText("Number: " + Math.java (continued) .getNearbyStates(). default) scope. this handler will respond to an onclick event.setVisibleItemCount(1). for (String city : cities) { cityList. @UiField ListBox stateList. cityList.setEnabled(false).. StateInfo[] nearbyStates = StateInfo.random() * 10).clear(). @UiHandler("stateList") void handleStateChange(ChangeEvent event) { int index = stateList.addItem("Select City"). cityList. stateList..setEnabled(true).e. . cityList.... value of @UiHandler annotation. cityList.

. HandleEvents2 events2 = new HandleEvents2(). ...html & EntryPoint Class .. public class GwtUiBinder1 implements EntryPoint { public void onModuleLoad() { .add(events2).get("uibinder-events-with").Example: UI Event Handling Without UiBinder shortcut: GwtUiBinder1.... RootPanel. <fieldset> <legend>UI Event Handling with @UiHandler shortcut</legend> <div id="uibinder-events-with"></div> </fieldset> <p/> .. } } 52 Example: UI Event Handling With UiBinder shortcut: Result 53 .

Servlets. JSF 2. Summary: HTML-Based (Eclipse Wizard Builds #1 & #2) 1. JSP. Spring. Java 7 and 8. PrimeFaces. Developed and taught by well-known author and developer. Hibernate.coreservlets. At public venues or onsite at your location. Ajax.com/ GWT. Android.create to bind the Java class to the XML representation – Mark fields with @UiField (one for each ui:field in XML) – Call setElement – Insert content into those fields 3. Hadoop. jQuery. Use new Java class in EntryPoint class – Use DOM API with getElement and appendChild 55 .© 2013 Marty Hall & Yaakov Chaikin Wrap-Up Customized Java EE Training: http://courses. Create XML file – Top-level element is an HTML tag like <div> – Put raw HTML inside – Use ui:field to mark places for later insertion 2. HTML5. REST. Create Java class that represents the XML – Extend UiObject – Use UiBinder interface and GWT.

Android. HTML5. Android. Customized Java EE Training: http://courses. PrimeFaces. Spring. HTML5.g. Create Java class that represents the XML – Extend Composite – Use UiBinder interface and GWT. and other Java EE training. Spring. Servlets..Summary: Widget-Based (Eclipse Wizard Builds #1 & #2) 1. .coreservlets. JSF 2. GWT. Java 7 and 8. Hibernate. Create XML file – Top-level element represents a Widget: <g:someGwtWidget> – Put mixture of raw HTML and <g:otherGwtWidgets> inside – Use ui:field to mark places for later insertion 2. Java 7 or 8. JSP. jQuery. jQuery. Use new Java class in EntryPoint class – Use normal Widget methods • E. Ajax. Ajax.get(…). JSP.create to bind the Java class to the XML representation – Mark fields with @UiField (one for each ui:field in XML) – Call initWidget – Set properties of those fields 3.com/ GWT. Servlets. REST. PrimeFaces. RESTful Web Services.add(yourWidget) 56 © 2013 Marty Hall & Yaakov Chaikin Questions? JSF 2. Hibernate. Developed and taught by well-known author and developer. Hadoop. At public venues or onsite at your location. RootPanel. Hadoop.

GWT UiBinder Intro

Titres liés

© 2013 Marty Hall & Yaakov Chaikin

Centres d'intérêt liés

Documents similaires à GWT UiBinder Intro

Plus de Wobbles909

Populaire dans Architecture