Your SlideShare is downloading. ×
AJAX and the GWT
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

AJAX and the GWT

361

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
361
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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. CC292 Simon M. Lucas
  • 2. Ajax
    • A synchronous J avaScript A nd X ML
    • Technology behind interactive web sites
      • MySpace, Personalised Google Page, GMail etc
    • Provide smoother experience than conventional web pages
    • No need to refresh the entire page
    • Snippets of information are updated as necessary
  • 3. Non-Ajax: Amazon
  • 4. Example: Personalised Google
  • 5. Ajax v. non-Ajax: which is which?
  • 6. Single Page Web Apps
    • Many Ajax apps are single page
    • A conventional web app consists of many different pages
    • An Ajax app typically reloads and rearranges only the parts of a page that need to change
    • Hence: smoother, more interactive experience
    • Better use of network bandwidth: no need to resend entire page each time
  • 7. Ajax disadvantages
    • Web app state is not reflected in address bar by default – compare with non-Ajax:
      • E.g. in the cut-down shop (ass 2), the basket page is simply basket.jsp
      • The web app state is reflected in the URL
      • And stored in the browser’s history
    • Though some Ajax apps DO support this
      • And GWT platform does
    • Browsers support Ajax methods in different ways: hard to get apps that work the same across all main browsers
    • But: good Ajax tools support this
      • E.g. GWT
  • 8. Next…
    • We now look at two things:
      • The fundamental programming concepts behind Ajax
      • Some simple GWT examples
  • 9. Ajax Programming
    • The only sure thing about the acronym is JavaScript
    • Ajax calls are not necessarily Asynchronous, though they often are
      • (asynch calls happen in background)
    • They don’t necessarily use XML:
      • The calls can retrieve text, HTML fragments, images, JSON coded data, or XML
  • 10. Ajax Client and Server
    • JavaScript runs in the browser
      • And makes calls to the server for fresh content
      • This is often done using XMLHttpRequest() .
      • But may also be done by updating the ‘ src ’ attribute of an iframe , for example.
    • Different browsers support these operations slightly differently
    • The server side is more browser-independent
      • It’s job is to serve up dynamic data on demand
  • 11. XMLHttpRequest()
      • Several parts to this (from Flanagan, chapter 20; some parts are browser-dependent)
      • Creating the XMLHttpRequest object
        • var request = new XMLHttpRequest()
      • Specifying the details of the HTTP request
        • request.open(“GET”, url, false)
      • Submitting it to the server
        • request.send(null)
      • Receiving the response
        • var doc = request.responseXML
  • 12. XMLHttpRequest contd.
    • The previous example was simplified
      • The use of ‘false’ ensured synchronous operation (.send blocks until response object is ready)
      • The use of responseXML assumed that the document retrieved was XML format
      • Use of send(null) is correct for a GET request (which never has a body)
      • A POST request would set up the request body appropriately
    • The details can get a bit complex
      • Hence the need for a utility library
      • Or better still, platforms such as GWT
  • 13. GWT: Google Web Toolkit
    • Ajax programming is hard without the right support
    • So many things to worry about:
      • HTML
      • JavaScript
      • Java (or other server-side language)
      • JSP?
      • CSS
    • GWT: develop entire web applications in pure Java
      • With a simple HTML container page to indicate basic layout
  • 14. Hello World Example
    • Modified from GWT example
    • Two user written files:
      • Hello.html
      • Hello.java
    • Hello.html
      • Includes a call to gwt.js – the JavaScript toolkit
      • And an element with a defined id
      • This can be selected to add content to
        • Just like previous JavaScript examples
  • 15. Hello GWT .html file
    • <html>
    • <head>
    • <meta name='gwt:module' content='com.google.gwt.sample.hello.Hello'>
    • <title>Hello</title>
    • </head>
    • <body bgcolor=&quot;white&quot;>
    • <script language=&quot;javascript&quot; src=&quot;gwt.js&quot;></ script>
    • <p>Button should be below this.</p>
    • <div id=&quot;hi&quot; >
    • <p>
    • Hello there!
    • </p>
    • </div>
    • <p>But above this.</p>
    • </body>
    • </html>
  • 16. Hello GWT .java file
    • This gets a document fragment by id
    • Adds some content to it (a button)
    • And defines what should happen when the button is clicked
      • Pop up a window alert
    • The Hello example implements EntryPoint
    • Hence defines onModuleLoad method
      • Note: the example is missing the import statements
  • 17. Hello.java
    • public class Hello implements EntryPoint {
    • public void onModuleLoad() {
    • // define a Button to add
    • Button b = new Button( &quot;Click me&quot;, new ClickListener() {
    • public void onClick(Widget sender) {
    • Window.alert(&quot;Hello, AJAX&quot;);
    • }
    • }); // add the Button // get is a static method of class RootPanel
    • RootPanel.get(&quot;hi&quot;).add(b);
    • }
    • }
  • 18. Exploring the GWT
    • Runs well with Intellij or Eclipse
    • Can also run examples just by downloading and running the .cmd files
    • KitchenSink and DynaTable are worth a look
    • Use of HTML / JS controls
      • All from within Java programs
  • 19. Kitchen Sink
  • 20. Summary
    • Ajax
      • Making web apps behave more like desktop apps in terms of their user-interface
      • Update only the parts of the page that need changing
    • Could be a headache to program (browser compatibility minefield)
    • Toolkits such as GWT offer great help
    • See also:
      • GWT (Google for it  )
      • WikiPedia entry on Ajax
      • Chapter 20 of Flanagan (JavaScript: the Definitive Guide)

×