Your SlideShare is downloading. ×
0
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

DWR, Hibernate and Dojo.E - A Tutorial

7,751

Published on

This tutorial will walk you through the steps of creating a simple database-driven AJAX application using Direct Web Remoting (DWR) 2.0, Hibernate 3.0 and a new open source project from Nexaweb …

This tutorial will walk you through the steps of creating a simple database-driven AJAX application using Direct Web Remoting (DWR) 2.0, Hibernate 3.0 and a new open source project from Nexaweb Technologies, dojo.E. dojo.E is an extensible markup processing engine that out-of-the-box will translate XML into dojo components.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,751
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
386
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Direct Web Remoting, Hibernate and Dojo.E “ Easy Ajax for Java” Joel Barciauskas October 3, 2008
  • 2. What is DWR? <ul><li>“ Easy Ajax for Java” implies two parts </li></ul><ul><ul><li>Server – Java servlet </li></ul></ul><ul><ul><li>Client – JavaScript auto-generated by the Java servlet </li></ul></ul><ul><li>Enables JSON to JavaBean serialization </li></ul><ul><li>Exposes selected methods and JavaBean properties on the server as client-side JavaScript methods and objects </li></ul><ul><li>Reverse Ajax – IMB-like functionality </li></ul>
  • 3. Why use DWR? Why not? <ul><li>Pros </li></ul><ul><ul><li>Avoid replication of effort defining model objects on both server and client </li></ul></ul><ul><ul><li>No XHR boilerplate required </li></ul></ul><ul><ul><li>No serialization boilerplate </li></ul></ul><ul><ul><li>JSON is fastest format to serialize/deserialize in the browser </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Less control over network requests </li></ul></ul><ul><ul><ul><li>E.g., harder to bundle requests </li></ul></ul></ul><ul><ul><li>Not RESTful, all requests processed through POST data rather than URLs </li></ul></ul><ul><ul><ul><li>Best for single-page applications </li></ul></ul></ul>
  • 4. Let’s see it <ul><li>Application: Simple database create and read </li></ul><ul><li>Using: JavaScript, DWR 2.0, Hibernate 3.0, Derby </li></ul><ul><li>Shell: http://source.nexaweb.com/svn/repos/trunk/tutorials/ajax/DWRExample/ </li></ul>
  • 5. Create your domain class (JavaBean) <ul><li>src/events/Event.java </li></ul><ul><li>package events; </li></ul><ul><li>import java.util.Date; </li></ul><ul><li>public class Event { </li></ul><ul><li>private Long id; </li></ul><ul><li>private String title; </li></ul><ul><li>private Date date; </li></ul><ul><li>public Event() {} </li></ul><ul><li>public Long getId() { return id; } </li></ul><ul><li>private void setId(Long id) { this.id = id; } </li></ul><ul><li>public Date getDate() { return date; } </li></ul><ul><li>public void setDate(Date date) { this.date = date; } </li></ul><ul><li>public String getTitle() { return title; } </li></ul><ul><li>public void setTitle(String title) { this.title = title; } </li></ul><ul><li>} </li></ul>
  • 6. Create Hibernate XML Mapping <ul><li>src/events/Event.hbm.xml </li></ul><ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE hibernate-mapping PUBLIC &quot;-//Hibernate/Hibernate Mapping DTD 3.0//EN&quot; &quot;http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd&quot;> </li></ul><ul><li><hibernate-mapping> </li></ul><ul><li><class name=&quot;events.Event&quot; table=&quot;EVENTS&quot;> </class> </li></ul><ul><li></hibernate-mapping> </li></ul>
  • 7. Add Property Mappings <ul><li>src/events/Event.hbm.xml </li></ul><ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE hibernate-mapping PUBLIC &quot;-//Hibernate/Hibernate Mapping DTD 3.0//EN&quot; &quot;http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd&quot;> </li></ul><ul><li><hibernate-mapping> </li></ul><ul><li><class name=&quot;events.Event&quot; table=&quot;EVENTS&quot;> </li></ul><ul><li><id name=&quot;id&quot; column=&quot;EVENT_ID&quot;> </li></ul><ul><li><generator class=&quot;native&quot;/> </li></ul><ul><li></id> </li></ul><ul><li><property name=&quot;date&quot; type=&quot;timestamp&quot; column=&quot;EVENT_DATE&quot;/> </li></ul><ul><li><property name=&quot;title&quot;/> </li></ul><ul><li></class> </li></ul><ul><li></hibernate-mapping> </li></ul>
  • 8. Create Hibernate Configuration <ul><li>src/hibernate.cfg.xml </li></ul><ul><li><?xml version='1.0' encoding='utf-8'?> </li></ul><ul><li><!DOCTYPE hibernate-configuration PUBLIC &quot;-//Hibernate/Hibernate Configuration DTD 3.0//EN&quot; &quot;http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd&quot;> </li></ul><ul><li><hibernate-configuration> </li></ul><ul><ul><li><session-factory> </li></ul></ul><ul><ul><li><!-- Database connection settings --> </li></ul></ul><ul><ul><li><property name=&quot;connection.driver_class&quot;>org.apache.derby.jdbc.EmbeddedDriver</property> </li></ul></ul><ul><ul><li><property name=&quot;connection.url“>jdbc:derby:eventDB;create=true</property> </li></ul></ul><ul><ul><li><!-- JDBC connection pool (use the built-in) --> </li></ul></ul><ul><ul><li><property name=&quot;connection.pool_size&quot;>1</property> </li></ul></ul><ul><ul><li><!-- SQL dialect --> </li></ul></ul><ul><ul><li><property name=&quot;dialect&quot;>org.hibernate.dialect.DerbyDialect</property> </li></ul></ul><ul><ul><li><!-- Enable Hibernate's automatic session context management --> </li></ul></ul><ul><ul><li><property name=&quot;current_session_context_class&quot;>thread</property> </li></ul></ul><ul><ul><li> <!-- Disable the second-level cache --> </li></ul></ul><ul><ul><li><property name=&quot;cache.provider_class&quot;>org.hibernate.cache.NoCacheProvider</property> </li></ul></ul><ul><ul><li><!-- Echo all executed SQL to stdout --> <property name=&quot;show_sql&quot;>true</property> </li></ul></ul><ul><ul><li><!-- Drop and re-create the database schema on startup --> </li></ul></ul><ul><ul><li><property name=&quot;hbm2ddl.auto&quot;>create</property> </li></ul></ul><ul><ul><li><mapping resource=&quot;events/Event.hbm.xml&quot;/> </li></ul></ul><ul><ul><li></session-factory> </li></ul></ul><ul><li></hibernate-configuration> </li></ul>
  • 9. Create SessionFactory instance <ul><li>src/util/HibernateUtil.java </li></ul><ul><li>package util; </li></ul><ul><li>import org.hibernate.*; </li></ul><ul><li>import org.hibernate.cfg.*; </li></ul><ul><li>public class HibernateUtil { </li></ul><ul><li>private static final SessionFactory sessionFactory; </li></ul><ul><li>static { </li></ul><ul><li>try { // Create the SessionFactory from hibernate.cfg.xml </li></ul><ul><li>sessionFactory = new Configuration().configure().buildSessionFactory(); </li></ul><ul><li>} catch (Throwable ex) { </li></ul><ul><li>// Make sure you log the exception, as it might be swallowed </li></ul><ul><li>System.err.println(&quot;Initial SessionFactory creation failed.&quot; + ex); </li></ul><ul><li>throw new ExceptionInInitializerError(ex); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>public static SessionFactory getSessionFactory() { return sessionFactory; } </li></ul><ul><li>} </li></ul><ul><li>Note: This can also be achieved through the Spring integration – “use the Spring OpenSessionInViewFilter which will ensure that a Hibernate Session is open” ( http:// directwebremoting.org/dwr/server/hibernate ) </li></ul>
  • 10. Create an Event Manager <ul><li>src/events/EventManager.java </li></ul><ul><li>package events; </li></ul><ul><li>import org.hibernate.Session; </li></ul><ul><li>import java.util.Date; </li></ul><ul><li>import java.util.List; </li></ul><ul><li>import util.HibernateUtil; </li></ul><ul><li>public class EventManager { </li></ul><ul><li>public void createAndStoreEvent(String title, Date theDate) { </li></ul><ul><li>Session session = HibernateUtil. getSessionFactory ().getCurrentSession(); </li></ul><ul><li>session.beginTransaction(); </li></ul><ul><li>Event theEvent = new Event(); </li></ul><ul><li>theEvent.setTitle(title); </li></ul><ul><li>theEvent.setDate(theDate); </li></ul><ul><li>session.save(theEvent); </li></ul><ul><li>session.getTransaction().commit(); </li></ul><ul><li>} </li></ul><ul><li>public List listEvents() { </li></ul><ul><li>Session session = HibernateUtil. getSessionFactory ().getCurrentSession(); </li></ul><ul><li>session.beginTransaction(); </li></ul><ul><li>List result = session.createQuery(&quot;from Event&quot;).list(); </li></ul><ul><li>session.getTransaction().commit(); </li></ul><ul><li>return result; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 11. Add the DWR servlet to web.xml <ul><li>WebContent/WEB-INF/web.xml </li></ul><ul><li><servlet> </li></ul><ul><li><servlet-name>dwr-invoker</servlet-name> </li></ul><ul><li><display-name>DWR Servlet</display-name> </li></ul><ul><li><servlet-class> </li></ul><ul><li>org.directwebremoting.servlet.DwrServlet </li></ul><ul><li></servlet-class> </li></ul><ul><li><init-param> </li></ul><ul><li><param-name>debug</param-name> </li></ul><ul><li><param-value>true</param-value> </li></ul><ul><li></init-param> </li></ul><ul><li></servlet> </li></ul><ul><li><servlet-mapping> </li></ul><ul><li><servlet-name>dwr-invoker</servlet-name> </li></ul><ul><li><url-pattern>/dwr/*</url-pattern> </li></ul><ul><li></servlet-mapping> </li></ul>
  • 12. Create a Remote Proxy and Expose Remote Methods <ul><li>Src/events/EventManager.java </li></ul><ul><li>package events; </li></ul><ul><li>import org.directwebremoting.annotations.RemoteMethod; </li></ul><ul><li>import org.directwebremoting.annotations.RemoteProxy; </li></ul><ul><li>import org.hibernate.Session; </li></ul><ul><li>import java.util.Date; </li></ul><ul><li>import java.util.List; </li></ul><ul><li>import util.HibernateUtil; </li></ul><ul><li>@RemoteProxy </li></ul><ul><li>public class EventManager { </li></ul><ul><li>@RemoteMethod </li></ul><ul><li>public void createAndStoreEvent(String title, String theDate) { </li></ul><ul><li>Session session = HibernateUtil. getSessionFactory ().getCurrentSession(); </li></ul><ul><li>session.beginTransaction(); </li></ul><ul><li>Event theEvent = new Event(); </li></ul><ul><li>theEvent.setTitle(title); </li></ul><ul><li>theEvent.setDateString(theDate); </li></ul><ul><li>session.save(theEvent); </li></ul><ul><li>session.getTransaction().commit(); </li></ul><ul><li>} </li></ul><ul><li>@RemoteMethod </li></ul><ul><li>public List listEvents() { </li></ul><ul><li>Session session = HibernateUtil. getSessionFactory ().getCurrentSession(); </li></ul><ul><li>session.beginTransaction(); </li></ul><ul><li>List result = session.createQuery(&quot;from Event&quot;).list(); </li></ul><ul><li>session.getTransaction().commit(); </li></ul><ul><li>return result; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 13. Annotate Event as a Data Transfer Object <ul><li>src/events/Event.java </li></ul><ul><li>package events; </li></ul><ul><li>import java.text.ParseException; </li></ul><ul><li>import java.text.SimpleDateFormat; </li></ul><ul><li>import java.util.Date; </li></ul><ul><li>import org.directwebremoting.annotations.DataTransferObject; </li></ul><ul><li>import org.directwebremoting.annotations.RemoteProperty; </li></ul><ul><li>@DataTransferObject </li></ul><ul><li>public class Event { </li></ul><ul><li>@RemoteProperty </li></ul><ul><li>private Long id; </li></ul><ul><li>@RemoteProperty </li></ul><ul><li>private String title; </li></ul><ul><li>private Date date; </li></ul><ul><li>public Event() {} </li></ul><ul><li>public Long getId() { </li></ul><ul><li>return id; </li></ul><ul><li>} </li></ul><ul><li>private void setId(Long id) { </li></ul><ul><li>this.id = id; </li></ul><ul><li>} </li></ul><ul><li>@RemoteProperty </li></ul><ul><li>public String getDateString() { </li></ul><ul><li>SimpleDateFormat sdf = new SimpleDateFormat(&quot;MM/dd/yyyy&quot;); </li></ul><ul><li>return sdf.format(this.date); </li></ul><ul><li>} </li></ul><ul><li>[continued on next slide] </li></ul>
  • 14. Annotate Event as a Data Transfer Object (con’t) <ul><li>src/events/Event.java [continued] </li></ul><ul><li>@RemoteProperty </li></ul><ul><li>public void setDateString(String dateStr) { </li></ul><ul><li>SimpleDateFormat sdf = new SimpleDateFormat(&quot;MM/dd/yyyy&quot;); </li></ul><ul><li>try { </li></ul><ul><li>this.date = sdf.parse(dateStr); </li></ul><ul><li>} catch (ParseException e) { </li></ul><ul><li>// TODO Auto-generated catch block </li></ul><ul><li>e.printStackTrace(); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>public String getTitle() { </li></ul><ul><li>return title; </li></ul><ul><li>} </li></ul><ul><li>public void setTitle(String title) { </li></ul><ul><li>this.title = title; </li></ul><ul><li>} </li></ul><ul><li>public Date getDate() { </li></ul><ul><li>return date; </li></ul><ul><li>} </li></ul><ul><li>public void setDate(Date date) { </li></ul><ul><li>this.date = date; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>Note: We added getDateString and setDateString here, because there is no implicit conversion available between JavaScript dates and Java dates – mostly arrays, strings, BigNumber, and primitives. See http://directwebremoting.org/dwr/server/dwrxml/converters for more information. </li></ul>
  • 15. Update web.xml <ul><li>WebContent/WEB-INF/web.xml </li></ul><ul><li><servlet> </li></ul><ul><li><servlet-name>dwr-invoker</servlet-name> </li></ul><ul><li><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> </li></ul><ul><li><init-param> </li></ul><ul><li><param-name>classes</param-name> </li></ul><ul><li><param-value> </li></ul><ul><li>events.Event, </li></ul><ul><li>events.EventManager </li></ul><ul><li></param-value> </li></ul><ul><li></init-param> </li></ul><ul><li><init-param> </li></ul><ul><li><param-name>debug</param-name> </li></ul><ul><li><param-value>true</param-value> </li></ul><ul><li></init-param> </li></ul><ul><li></servlet> </li></ul>
  • 16. Using DWR Debug Mode <ul><li>Go to http://localhost:8080/DWRExample/dwr/ </li></ul><ul><ul><li>Click “EventManager” </li></ul></ul><ul><ul><li>Enter “Event 1” in the first parameter of createAndStoreEvent </li></ul></ul><ul><ul><li>Enter “10/01/2008” in the second parameter </li></ul></ul><ul><li>Click the Execute button </li></ul>
  • 17.  
  • 18. <ul><li>Click the Execute button next to listEvents() </li></ul>
  • 19. Let’s add DWR on the client side <ul><li>File->New->Web->HTML-> WebContent/index.html </li></ul><ul><li>Open and edit title “DWR Example” </li></ul><ul><li>Go back to http://localhost:8080/DWRExample/dwr/test/EventManager and copy and paste the script tags </li></ul>
  • 20. More Dojo boilerplate <ul><li>Paste the following too: </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;js/dojo/dojo/dojo.js&quot; </li></ul><ul><li>djConfig=&quot;isDebug: true, parseOnLoad: true&quot;></script> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;js/dojo/dojo/resources/dojo.css&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;js/dojo/dijit/themes/tundra/tundra.css&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;js/dojo/dojox/grid/_grid/Grid.css&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;js/dojo/dojox/grid/_grid/tundraGrid.css&quot; /> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>dojo.require(&quot;dijit.form.Button&quot;); </li></ul><ul><li>dojo.require(&quot;dijit.form.TextBox&quot;); </li></ul><ul><li>dojo.require(&quot;dijit.form.DateTextBox&quot;); </li></ul><ul><li>dojo.require(&quot;dojox.grid.Grid&quot;); </li></ul><ul><li>dojo.require(&quot;dojo.data.ItemFileReadStore&quot;); </li></ul><ul><li>dojo.require(&quot;dojoe.dojoe&quot;); </li></ul><ul><li></script> </li></ul>
  • 21. Add Dojo.E <ul><li>Add tundra class to body tag: </li></ul><ul><li><body class=&quot;tundra&quot;> </li></ul><ul><li>Create XML file WebContent/dwrDojoE.xml </li></ul><ul><li>And add tag </li></ul><ul><li><script type=&quot;text/xml&quot; dojoType=&quot;dojoe.XmlScript&quot; src=&quot;dwrDojoE.xml&quot;></script> </li></ul>
  • 22. Edit Dojo.E <ul><li>WebContent/dwrDojoE.xml </li></ul><ul><li><ui xmlns=&quot;html&quot; xmlns:dijit=&quot;dijit&quot; xmlns:dojox=&quot;dojox&quot;> </li></ul><ul><li><dijit:form.Button> </li></ul><ul><li>Refresh </li></ul><ul><li></dijit:form.Button> </li></ul><ul><li><dojox:grid.Grid id=&quot;gridNode&quot; jsId=&quot;grid&quot; elasticView=&quot;0&quot; style=&quot;height:300px; width:500px&quot;/> </li></ul><ul><li></ui> </li></ul>
  • 23. Where’s the Grid?!?
  • 24. Create a grid layout <ul><li>WebContent/index.html </li></ul><ul><li><body class=&quot;tundra&quot;>' </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var layout = [{ </li></ul><ul><li>cells: [[ </li></ul><ul><li>{ </li></ul><ul><li>name: 'Event ID', </li></ul><ul><li>field: 'id', </li></ul><ul><li>width: 'auto' </li></ul><ul><li>}, </li></ul><ul><li>{ </li></ul><ul><li>name: 'Date', </li></ul><ul><li>field: 'dateString', </li></ul><ul><li>width: 'auto' </li></ul><ul><li>}, { </li></ul><ul><li>name: 'Event', </li></ul><ul><li>field: 'title', </li></ul><ul><li> width: 'auto' </li></ul><ul><li>}]] </li></ul><ul><li>}]; </li></ul><ul><li></script> </li></ul><ul><li>Note the correlation between the field values above and the RemoteProperty defintions of Event.java </li></ul>
  • 25. Add the layout to the Grid <ul><li>WebContent/dwrDojoE.xml </li></ul><ul><li><ui > </li></ul><ul><li><dijit:form.Button> </li></ul><ul><li>Refresh </li></ul><ul><li></dijit:form.Button> </li></ul><ul><li><dojox:grid.Grid id=&quot;gridNode&quot; </li></ul><ul><li>structure=“layout” </li></ul><ul><li>jsId=&quot;grid&quot; elasticView=&quot;0&quot; style=&quot;height:300px; width:500px&quot;/> </li></ul><ul><li></ui> </li></ul>
  • 26. Now let’s get some data <ul><li>WebContent/index.html </li></ul><ul><li>var putEvents = function(list){ </li></ul><ul><li>var dataStore = new Array; </li></ul><ul><li>dataStore[&quot;items&quot;] = list; </li></ul><ul><li>dataStore[&quot;label&quot;] = &quot;title&quot;; </li></ul><ul><li>var model = new dojox.grid.data.DojoData(null, null, { </li></ul><ul><li>jsId: 'model', </li></ul><ul><li>store: new dojo.data.ItemFileReadStore({ </li></ul><ul><li>data: dataStore </li></ul><ul><li>}), </li></ul><ul><li>query: { </li></ul><ul><li>title: '*' </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>grid.setModel(model); </li></ul><ul><li>grid.refresh(); </li></ul><ul><li>grid.render(); </li></ul><ul><li>}; </li></ul>
  • 27. Update Dojo.E <ul><li>WebContent/dwrDojoE.xml </li></ul><ul><li><ui> </li></ul><ul><li><dijit:form.Button onClick=&quot;EventManager.listEvents(putEvents)&quot; > </li></ul><ul><li>Refresh </li></ul><ul><li></dijit:form.Button> </li></ul><ul><li><dojox:grid.Grid id=&quot;gridNode&quot; jsId=&quot;grid&quot; elasticView=&quot;0&quot; style=&quot;height:300px; width:500px&quot;/> </li></ul><ul><li></ui> </li></ul>
  • 28. Click Refresh
  • 29. Create a method to create an event <ul><li>WebContent/index.html </li></ul><ul><li>var createEvent = function(titleId, dateId){ </li></ul><ul><li>var title = dojo.byId(titleId).value; </li></ul><ul><li>var date = dojo.byId(dateId).value; </li></ul><ul><li>EventManager.createAndStoreEvent(title, date); </li></ul><ul><li>EventManager.listEvents(putEvents); </li></ul><ul><li>}; </li></ul>
  • 30. Let’s Add Input Controls <ul><li>WebContent/dwrDojoE.xml </li></ul><ul><li><ui > </li></ul><ul><li><dijit:form.Button onClick=&quot;EventManager.listEvents(putEvents)&quot;> </li></ul><ul><li>Refresh </li></ul><ul><li></dijit:form.Button> </li></ul><ul><li><dojox:grid.Grid id=&quot;gridNode&quot; jsId=&quot;grid&quot; structure=&quot;layout&quot; elasticView=&quot;0“ </li></ul><ul><li>style=&quot;height:300px; width:500px&quot;/> </li></ul><ul><li><label for=&quot;eventTitle&quot; style=&quot;float: left;&quot;>Event Title:</label> </li></ul><ul><li><dijit:form.TextBox style=&quot;float: left;&quot; id=&quot;eventTitle&quot; value=&quot;&quot;/> </li></ul><ul><li><label for=&quot;eventDate&quot; style=&quot;float: left;&quot;>Event Date:</label> </li></ul><ul><li><dijit:form.DateTextBox id=&quot;eventDate&quot; value=&quot;&quot; style=&quot;float: left;&quot;/> </li></ul><ul><li><dijit:form.Button style=&quot;float: left;“ </li></ul><ul><li>onclick=&quot;createEvent('eventTitle', 'eventDate')&quot; label=&quot;Add Event&quot;> </li></ul><ul><li></dijit:form.Button> </li></ul><ul><li></ui> </li></ul>
  • 31. Reload the page
  • 32. Enter a title and date
  • 33. Load data at startup <ul><li>WebContent/index.html </li></ul><ul><li>dojo.addOnLoad(function() { </li></ul><ul><li>EventManager.listEvents(putEvents); </li></ul><ul><li>}); </li></ul>
  • 34. Final note <ul><li>If using more complex object models with Hibernate, use the HibernateBeanConverter3 – See http:// directwebremoting.org/dwr/server/hibernate </li></ul>

×