1. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Build Great Web Application 'Fast and Easy' An Introduction to the Visual DataFlex AJAX Library Eddy Kleinjan, Data Access Europe, eddy.kleinjan@dataaccess.eu

2. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Agenda Great Web Application Visual DataFlex AJAX Library Building AJAX Library Web Applications Basic WebApp

3. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Great Web Applications Good Graphical User Interface Design Extended User Interface Controls Fast Responding Event Driven No Full Page Refresh

4. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Great Web Application Samples Google Suggest http://www.google.com/webhp?complete=1&hl=en http://www.google.com/webhp?complete=1&hl=en Backpack http://educ.backpackit.com/ http://educ.backpackit.com/ Google Maps http://maps.google.com/?ie=UTF8&t=k&om=1&ll=25.823 965,-80.121118&spn=0.003385,0.007135&z=18 http://maps.google.com/?ie=UTF8&t=k&om=1&ll=25.823 965,-80.121118&spn=0.003385,0.007135&z=18 Yahoo news http://news.yahoo.com/ http://news.yahoo.com/

5. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Great Web Applications use AJAX to create User Friendly, Responsive, Interactive Web Sites

6. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide What is AJAX?

7. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Defining AJAX Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Jesse James Garrett

8. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Defining AJAX Asynchronous JavaScript And XML First named by Jesse James Garrett as a project name to help management understand what they were working on. http://adaptivepath.com/publications/essays/archives/ 000385.php

9. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Technologies Involved HTML JavaScript Document Object Model (DOM) XML ASP (VBScript) Visual DataFlex Web Services CSS

10. Source: http://adaptivepath.com/publications/essays/archives/000385.php

11. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Source: http://www.javarss.com/ajax/j2ee-ajax.html Asynchronous AJAX Call Yahoo News Sample

12. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Visual DataFlex AJAX Library

13. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Goals Create Framework for Web Based Database Applications Allow Applications to be build ‘Fast-and-Easy’ Windows like Controls Browser Independent Highly Intuitive Data Dictionary Based Validations Client Side And Server Side Validations Standards Based

14. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Automated Input Controls Input controls are automatically attached to Data Dictionary items Characteristics like data type, length, etc. are loaded from Data Dictionary upon page load Client side data validation while navigating forward and before sending data Behavior can be influenced by setting attributes on the input element.

15. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide No Page Reload Only changed parts of the page are updated Data is send and received in the background Use of Modal Popup Object without opening a new browser window

16. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Lookup Lists and Grids Lists provide a virtual view on a set of data Implemented as normal HTML tables

17. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Other Controls Tabbed Dialogs Modal Popup Dialogs Pull Down Menu's

18. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Data Dictionary All Meta Data is available at the Client When possible, validations will be done at the Client Server Validations will always be executed

19. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Samples

20. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide AJAX Library Components

21. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide AJAX Library Components Visual DataFlex Data Dictionaries Web Browser Object Web Services Internet Information Server HTML (ASP Pages optional) JavaScript Cascading Style Sheets (CSS)

22. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Client / Server Client / Server Technology Server Implemented as Web Services Client JavaScript CSS XMLHttpRequest Object

23. ClientServer WebService Web Business Object SessionManager Optional ASP Calls.asp page or HTML page 1 2 Build page using ASP Page is shown 3 Meta data is requested 4 Meta Data is delivered AJAX Request AJAX Response 5 7 Build Data Structure 6 8 Request page

24. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Server Implemented as Web Service Extends the Standard Web Business Objects Only One Web Service Object in an Application Web Service Passes Calls on to Web Business Objects All calls can be overruled by Developer Events Are Generated for Developer to Augment

25. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Client Implemented as set of JavaScript Classes Goal: Developer should not have to use JavaScript Don’t need Active Server Pages (.asp) Control VDF Specific Settings through HTML Attributes

26. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Page Load Process ClientServer

27. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Processing a Client Request ClientServer

28. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide How to build

29. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Create a ‘Workspace’ Create a new workspace Add the “Visual DataFlex Ajax Library”

30. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Create SessionManager Handles security and creation of Session Id’s New  Web Object  Ajax Library Session Manager Call it “oSessionManager”

31. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Create Web Service Interface Accepts Incoming Calls New  Web Object  Ajax Library Web Service Interface Call it “WebService”

32. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Create Web Browser Object Functional unit New  Web Object  Ajax Library Web Business Object Add Data Dictionary Objects Test it

33. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Create Form Handles ‘one-record-at-a-time’ forms New  Web Markup  Ajax Library Form Call it “MyTable.asp” Replace “MyTable” with your details

34. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide How to get? Download at www.dataaccess.eu/ajax Downloads  Visual DataFlex Ajax Library Support: news.dataaccess.nl  Libraries  AJAX

35. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Basic WebApp

36. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Basic WebApp Definition Starting Point for Building Web Applications No AJAX Required

37. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Basis Web AppComponents SessionManager Extended Data Dictionary Alternative Auto Increment Function Register Created/Modified Data (when fields supplied) Translation (Multi Lingual Sites) User Rights Table

38. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Basic WebApp Availability Will be made Available to all Conference Attendees

39. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Questions?

40. May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Thank you!