Playing Around with AJAX Frameworks and Toolkits Sang Shin, Michèle Garoche, www.javapassion.com/ajaxcodecamp, class forum This hands-on lab takes you through the demo sites of the various AJAX frameworks and toolkits. The goal of this hands-on lab is to let you experience some of the capabilities of these frameworks and toolkits through their online demos. It is not expected you understand how things are done. Please feel free to explore and experiment the capabilities of these frameworks and toolkits on your own. Expected duration: 120 minutes Software Needed You only need a browser. Change Log • Nov. 14th, 2007: ExtJS link is added • Dec. 7th, 2007: Pictures are updated • Aug. 6th, 2009: The links and pictures are updated, jQuery and ZK framework are added • Oct. 9th, 2009: Links and screenshots have been updated/added, YUI 3 and Echo3 frameworks have been added. Lab Exercises You will need an internet connection for all exercises. • Exercise 1: Client side JavaScript toolkit libraries (30 minutes) • Exercise 2: AJAX-enabled JSF components (20 minutes) • Exercise 3: ZK framework (20 minutes) • Exercise 4: Google Web Toolkit (20 minutes) • Exercise 5: Direct Web Remoting (DWR) (20 minutes) • Exercise 6: AJAX-enabled Web application frameworks (Wicket, Echo2) (20 minutes) • Homework exercise (for people who are taking Sang Shin's "AJAX online course") - This is optional Exercise 1: Play around with Client side JavaScript toolkit libraries In this exercise, you are going to play around various client side Java Script library toolkits through their online demo site. 1. Dojo toolkit 2. Script.sculo.us 3. Rico 4. DHTML Goodies 5. Yahoo! User Interface Library 6. ExtJS 7. jQuery 8. Spry framework for Ajax 9. Zimbra Kabuki (1.1) Dojo toolkit 0. Watch 8 minutes QuickTime intro on Dojo toolkit from inforworld.com 1. Go to Dojo toolkit demo site. Figure-1.10: Dojo toolkit demo site return to top of the exercise (1.2) Script.sculo.us 1. Go to Script.sculo.us home site. return to top of the exercise (1.3) Rico 0. If you have internet connection, watch 8 minutes QuickTime intro on Rico from inforworld.com. 1. From your browser, go to Rico demo site. 2. Click the various demo links (in the live page not in the picture below) (Figure-1.30 below) Figure-1.30: Rico demo site 3. Try Javascript Updater under AJAX DEMOS section. (Figure-1.31a below) Figure-1.31a: JavaScript Updater of Rico • Click one of the names in the drop-down menu items on the left and then observe the name and address are changed in the actual form letter on the right. Figure-1.31b: Dynamic changes in JavaScript Updater of Rico 4. Try Custom Draggable under DRAG & DROP DEMOS section. (Figure-1.32 below) Note for Mac OS X users: this feature does not work with Safari nor Firefox, but it works with Camino. • Drag a name under the available name-list section on the left and drop it under dropped name-list section on the right. • Observe that the names are dropped and also observe that drop-n-drop message log section has startDrag and endDrag for drap and drop activity. Figure-1.32: Custom Draggable 5. Try Custom Drop Zone under DRAG & DROP DEMOS section. (Figure-1.33 below) Note for Mac OS X users: this feature does not work with Safari nor Firefox, but it works with Camino. • Drag and a name from the name-list section and drop it in one of the 3 drop sections. • Observer that you can drop a name only in one of the three sections that it belongs to. Figure-1.33: Custom Drip Zone 6. Try Accordion under BEHAVIOR DEMOS section. (Figure-1.34 below) • Observe that Accordion behavior. Figure-1.34: Accordion of Rico 7. Try Weather Widget under BEHAVIOR DEMOS section. (Figure-1.35 and Figure-1.36 below) • Enter a zip code and click Lookup. Figure-1.35: Try Weather Widget • Observe that the Accordion enabled Weather information is displayed. Figure-1.36: Observe the Weather information 8. Try LiveGrid - Data Table under BEHAVIOR DEMOS section. (Figure-1.37 below) • Type Star in the Title field and observe that the titles with Star are displayed. Figure-1.36: LiveGrid - Data Table return to top of the exercise (1.4) DHTML Goodies 1. From your browser, go to dhtmlgoodies.com home site. 2. Try Menu Script demos. • Click Menu Scripts on the left. (FIgure-1.40 below) Figure-1.40: Select Menu Scripts • Click demo link under DHTML Menu for applications. (Figure-1.41 below) Figure-1.41: Click DHTML Menu demo • Observe that several menu options are displayed. • Try Fourth menu which supports side pop-up style expansion. 3. Try Window Scripts. • Select one of the window and drag it around. • Resize one of the windows. 4. Try other features. return to top of the exercise (1.5) Yahoo! User Interface Library 0. If you have internet connection, watch 8 minutes QuickTime intro on Yahoo UI Library from inforworld.com. 1. From your browser, go to Yahoo! User Interface Library site. We are going to explore first YUI 2 library. 2. Click Get Started with YUI 2. (Figure-1.70a below) Figure-1.70a: The YUI Library site 3. Click Animation (or other links) link under YUI 2 Utilities. (Figure-1.70 below) Figure-1.70: Try YUI 2 Utilities 4. Click Examples link. (Figure-1.71 below) Figure-1.71: Examples 5. Click various animations. (Figure-1.72 below) Figure-1.72: Try various animations The YUI 3 Library has been released at the end of September 2009. 6. From your browser, go back to Yahoo! User Interface Library site. 7. Click Get Started with YUI 3. (Figure-1.72a below) Figure-1.72a: The YUI Library site 8. Click AsyncQueue (or other links) link under UTILITIES. (Figure-1.72b below) Figure-1.72b: Try YUI 3 UTILITIES 9. Click Building a UI with AsyncQueue link. (Figure-1.72c below) Figure-1.72c: YUI 3 AsyncQueue 10. Run the example. (Figure-1.72d below) Figure-1.72: AsyncQueue Example return to top of the exercise (1.6) ExtJS 1. From your browser, go to video tour of ExtJS. It gives an overview of the 1.x version of ExtJS. 2. Try Ext JS 3.0 Samples. (Figure-1.80 below) Figure-1.80: Try Ext JS 3.0 Samples 3. Click Trees, then Drag and Drop Reordering 4. Drag adapter on to widgets to see scrolling in action. return to top of the exercise (1.7) jQuery 1. From your browser, go to jQuery tutorials. return to top of the exercise (1.8) Spry framework for Ajax 1. From your browser, go to Spry framework for Ajax homesite. 2. Click various demos in the page. return to top of the exercise (1.9) Zimbra Kabuki 0. If you have internet connection, watch 9 minutes QuickTime intro on Zimbra Kabuki from inforworld.com. 1. From your browser, go to Zimbra Kabuki demo site. • Click Skip Registration, Go to Demo >> button. • Type in some characters in order and click on Login to see the demo. • Select an email and see the body of it. • Right click on Yahoo Local under Zimlet on the left and select Traffic. • Move your mouse onto one of the orange note. • Observe that the live Yahoo traffic information for this location is displayed. return to top of the exercise Summary In this exercise, you have explored capabilities of the various client side JavaScript based technologies. return to the top Exercise 2: AJAX-enabled JSF components • ICEFaces • RichFaces (2.1) ICEFaces 1. From your browser, go to ICEFaces demo site. (2.2) RichFaces 1. From your browser, go to RichFaces Online demo. Return to the top Exercise 3: ZK Framework (3.1) ZK Framework 1. From your browser, go to ZK Framework Live Demo. Exercise 4: Google Web Toolkit (4.1) Google Web Toolkit 0. Watch 8 minutes QuickTime intro on Google Web Toolkit from inforworld.com 1. From your browser, go to Google Web Toolkit Example Projects. return to the top Exercise 5: Direct Web Remoting (5.1) Direct Web Remoting (DWR) 1. From your browser, go to DWR examples return to the top Exercise 6: Web Application Frameworks with AJAX extension In this exercise, you are going to try demos from Web application frameworks with AJAX extensions. 1. Wicket 2. Echo2 3. Echo3 (6.1) Wicket 1. From your browser, go to Wicket examples 2. Click various example links. (Figure-6.10 below) Figure-6.10: AJAX and Wicket examples 3. Click Tree and TreeTable Figure-6.10: AJAX and Wicket Tree Table 4. Select Editable tree table, expand a node, click on a line, edit a row, and press Return key to confirm Figure-6.10: AJAX and Wicket Editable tree table (6.2) Echo2 1. From your browser, go to NextApp Echo2 demonstration Application 2. Use either the Next arrow or the AccordionPane to navigate through the features Figure-6.20: AJAX application using Echo2 3. Try, for example, the Echo2 Chart Figure-6.20: AJAX application using Echo2 (6.2) Echo3 1. From your browser, go to Echo3 Client=Side JavaScript Demonstration Application 2. Use either the Next arrow or the AccordionPane to navigate through the features Figure-6.20: AJAX application using Echo3 3. Try, for example, JavaScript Development under Technology Figure-6.20: Lazy JS Module Loading with Echo3 4. Notice you may use Tools->View Source Code. return to the top Homework Exercise (for people who are taking Sang Shin's "AJAX online course") - Optional This homework is optional, which means you don't have to submit it unless you want to.