Your SlideShare is downloading. ×
0
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
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

L2 Web App Development Guest Lecture At University of Surrey 20/11/09

1,455

Published on

A guest lecture I presented to Level 2 Web Application Development students within the Department of Computing at the University of Surrey

A guest lecture I presented to Level 2 Web Application Development students within the Department of Computing at the University of Surrey

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,455
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
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. L2: Web Application Development Direct Web Remoting (DWR): Ajax made easy… Daniel Bryant Department of Computing, FEPS (d.bryant@surrey.ac.uk) Tai-Dev Ltd, (daniel.bryant@tai-dev.co.uk)
  • 2. Today’s roadmap... • My life story (in under 3 minutes)… • Quick review - so, what is Ajax? (Old school vs new school) • DWR Introduction Looking deeper into DWR (client-side/server-side) Implementation Demo (and debugging) • Quick case study – TriOpsis Ltd • DWR is awesome!! But are there any disadvantages? • Review
  • 3. My life story (abridged)… • Studying at Surrey for 8 years BSc Computing and IT - Placement at DTI (now called BERR, DBIS etc. etc...) MSc Internet Computing • PhD Student within the Department of Computing Argumentation “how humans reason” Software Agents “mobile and/or intelligent code” • JEE, Web 2.0, J2ME & RDBMS Consultant Working freelance for the past 5 years Started Tai-Dev Ltd 1 year ago (http://tai-dev.blog.co.uk/) J2EE, JEE 5, JSE, J2ME Spring, Hibernate, MySQL, GlassFish v2 HTML, CSS, Javascript Prototype, Script.aculo.us, JQuery Direct Web Remoting (DWR)…
  • 4. So, just what is Ajax? • “Asynchronous JavaScript and XML” “…group of interrelated web development techniques used for creating interactive web applications or rich Internet applications.” (Wikipedia, 2008) • Building block for “Web 2.0” applications Facebook, Google Mail and many more (auto-complete forms) • Applications can retrieve data from the server asynchronously in the background without interfering with the display and behaviour of the existing page No browser plugins (a’la Flash, Flex, SilverLight) • The use of JavaScript, XML, or its asynchronous use is not required…
  • 5. Ajax - the old school way… Client Server http://java.sun.com/developer/technicalArticles/J2EE/AJAX
  • 6. Old school, not so cool… • Client-side Browser incompatibilities (Microsoft, and then the rest of the world...) Long-winded Error prone Responsible for parsing return data, often XML-based Responsible for handling application errors (response codes?) Large amount of repeated “boiler plate” code • Server-side Create Servlets (no abstraction, and limited chance to allow design patterns) Construct XML document of data Responsible for “flattening” Objects and Collections Set content-type of return data manually Manual error handing (convert Exceptions into response codes?)
  • 7. Introducing the alternatives… • JavaScript Libraries/Frameworks dojo, JQuery, Prototype Greatly simplify client-side code Not so helpful on server-side… • JSP Taglibs/JSF Components jMaki, Ajax4jsf Very easy to utilise Limited server-side configuration (majority of focus on existing widgets and services) • Proxy-based Frameworks Direct Web Remoting (DWR), Rajax Best of both worlds Language specific on backend (Java) • Tip: Always new stuff coming out – check blogs and news sites...
  • 8. Direct Web Remoting (DWR) Overview • DWR allows easy implementation of Ajax functionality Homepage @ http://directwebremoting.org/ Open source JavaScript “client-side” Java “server-side” • Proxy-based framework Client-side code can call Java server-side methods as if they were local JavaScript functions. Converts or “marshalls” parameters and return variable to/from Java/JavaScript • DWR generates the intermediate code (“piping” or boilerplate code) • Also provides Utility classes
  • 9. DWR in pictures Image from http://directwebremoting.org/dwr/overview/dwr
  • 10. Client-side • Core components DWR JavaScript engine JavaScript “interface” definitions of remote methods JavaScript Object Notation (JSON) used instead of XML • Call Java methods as if local JavaScript functions Albeit with callbacks… • Hides browser incompatibilities (via “engine.js”) XMLHttpRequest Object Maps function calls to URLs • Converts or “marshalls” data Java ArrayLists into JavaScript arrays Java Objects into JavaScript object • Simplifies error-handling Maps Java Exceptions to JavaScript errors
  • 11. Server-side • Core components DWR JAR Library Proxy generator DWRServlets • Easy framework configuration XML or Annotations (Java 5+) Care needed… • Not tied to writing Servlets Promotes good OO coding and design patterns • Simply expose (existing) Application Services Specify order and types of parameter Can return any type of Collection or Object Can utilise Spring, Struts, JSF…
  • 12. Implementation in 5 (easy) steps… 1. Copy DWR Library files into project 2. Configure your existing framework to handle DWR requests 3. Create your Data Model (Business Objects) and Application Services 4. Inform DWR of these classes and their required exposure client-side 1. dwr.xml configuration file 2. Annotations (Java 5+) 5. Create your client-side functions
  • 13. Handling http requests (web.xml)…. … <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>classes</param-name> <param-value> uk.ac.surrey.wappdev.appservices.FeedbackService, uk.ac.surrey.wappdev.model.FeedbackBean </param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> …
  • 14. Create the Model (Business Objects) package uk.ac.surrey.wappdev.model; import org.directwebremoting.annotations.DataTransferObject; import org.directwebremoting.annotations.RemoteProperty; @DataTransferObject public class FeedbackBean { @RemoteProperty private int id; @RemoteProperty private String feedbackValue; public FeedbackBean() { } public FeedbackBean(int id, String feedbackValue) { this.id = id; this.feedbackValue = feedbackValue; } //getter and setter defined here... …
  • 15. Create your Application Services… package uk.ac.surrey.wappdev.appservices; import ... @RemoteProxy public class FeedbackService { @RemoteMethod public List<FeedbackBean> getFeedbackAvailable() { List<FeedbackBean> results = new ArrayList<FeedbackBean>(); for (int i = 0; i < 5; i++) { FeedbackBean fbBean = new FeedbackBean(i, "Feedback Value " + i); results.add(fbBean); } return results; } ... }
  • 16. Create your client-side functions… package uk.ac.surrey.wappdev.appservices; <script src='dwr/interface/LocService.js'></script> import ... <script src='dwr/engine.js'></script> @RemoteProxy public class FeedbackService { <script> function updateFeedback() { @RemoteMethod //alert("updateFeedback()"); public List<FeedbackBean> getFeedbackAvailable() { List<FeedbackBean> results = FeedbackService.getFeedbackAvailable({ new ArrayList<FeedbackBean>(); callback:function(dataFromServer) { cbUpdateFeedback(dataFromServer); for (int i = 0; i < 5; i++) { }, FeedbackBean fbBean = new FeedbackBean(i, "Feedback errorHandler:function(errorString, exception) { Value " + i); alert("Error: " + errorString); results.add(fbBean); } } }); return results; } } ... } function cbUpdateFeedback(feedbackBeanList) { //alert("cbUpdateFeedback()"); for (var i = 0, l = feedbackBeanList.length; i < l; i++) { var option = document.createElement("option"); option.setAttribute("value",feedbackBeanList[i].id); var optText = document.createTextNode(feedbackBeanList[i].feedbackValue); option.appendChild(optText); document.getElementById("feedbackEl").appendChild(option); } } </script>
  • 17. Lights, camera, action... (oh yes, and debugging) • Quick demo of slide material • Quick look at debugging Client-side – Firefox’s Firebug Server-side – Netbeans’ debugger • Tip: If you want to be a professional software developer debugging efficiently should become as natural as breathing… Not emphasized enough in teaching (but this is just my opinion) Probably a worthwhile skill for those final year projects as well…
  • 18. Real world case study... TriOpsis Ltd • Highly innovative start-up company based at the Research Park (STC) • Check out www.triopsis.co.uk for more information • Experts in the emerging field of Visual Business Information • Specialising on ‘in the field’ data capture via mobile devices • Images and associated metadata reporting relevant to target customer
  • 19. Real world case study... TriOpsis Ltd Screenshot of TriOpsis Flagship product – the ‘Asset Manager’ (implemented by yours truly!)
  • 20. And finally… There are some disadvantages with DWR… • As with any framework that generates (blackbox) “piping” Sometimes difficult to know what is happening “in the pipe” • Potentially difficult to debug Spans across client and server domain Can use Netbeans debugger and FireFox’s Firebug • Maintaining http session information Hybrid of POSTed forms and Ajax • Can cause unexpectedly large amounts of http traffic Passing of complete object graphs (typically developer error ☺ ) • Potential security implications Exposing incorrect methods etc. Easy to pass sensitive data in plaintext (passwords etc.) without knowing
  • 21. Conclusions • We know what Ajax is… • We examined old school/new school approaches to implementation • We learned that DWR is a “proxy-based” framework Providing (JavaScript) client and (Java) server-side Ajax support Allows exposure of Java model (BOs) and services DWR “handles the details”.. • We’ve seen how to implement DWR • We’ve had a look at an often undervalued skill – debugging • Seen real case study using this technology, TriOpsis, which is actively used within Industry • And we are always aware of potential disadvantages Beware of “black box” implementations… Security, session and http traffic
  • 22. Thanks for your attention… • I’m happy to answer questions now or later... • If you want to know more about DWR or debugging ask for a lab session Sorry, but I can’t answer individual emails... • Feedback, comments, constructive criticism...

×