2. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Data Access Europe BV Eddy Kleinjan eddy.kleinjan@dataaccess.nl New Techniques for Building Web Applications

3. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Agenda  Introduction  Base Web Techniques  Remote Scripting  Advanced User Interfaces  Framework Integration

4. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Introduction

5. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Introduction  User Interfaces need to be more attractive  Web Applications need to be more Interactive  Current Broadband Connections Make it work

6. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Base Web Techniques  HTML  Server Side Scripting (ASP)  Client Side Scripting (JavaScript)  Document Object Model (DOM)

7. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida HTML  Default language for Web Pages  Mixes Data with Format  Limited Communication with Web Servers (Form)

8. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Server Side Scripting (ASP)  Executes at Server  Only Results are sent back  Build HTML pages Dynamically  Communicate with VDF Web App Server Directly

9. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Client Side Scripting (JavaScript)  Executes at the Client  Ability to Manipulate Content using the DOM  Function can respond to Generated Events

10. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Document Object Model (DOM)  Provides an Object Hierarchy to a Browser  Complete Hierarchy can be Accessed  Element can be Dynamically Modified

11. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Remote Scripting Remote Scripting is the process by which a client-side application running in the browser and a server-side application can exchange data without reloading the page Source: http://developer.apple.com/internet/webcontent/iframe.html

12. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Remote Scripting  Execute Scripts at the Server Interactively  Comparable to an Remote Procedure Call  Client/Server Architecture  Loading Data into Invisible Frame or IFrame  Generating JavaScript at the Server  Exchange XML Data  Use Web Services

13. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Remote Scripting using IFrame Client.htm Server.asp IFrame Server.asp 1 2 4 5 1. Link or Post Form, Target = IFrame 2. IFrame Requests Server Document 3. Server Document Calls WebApp 4. Results are sent back to IFrame 3 6 5. IFrame calls Client (Parent Window) 6. Client Processes Results Current dataNew data 7. New data is shown

14. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Remote Scripting using IFrame  Create an Invisible IFrame on the page <iframe id="RSIFrame" name="RSIFrame" style="width:0px; height:0px; border: 0px" src="about:blank"> Client.htm Server.asp IFrame Server.asp 1 2 4 5 3 6 Current data New data

15. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Remote Scripting using IFrame  Load new data into this IFrame by setting ‘target’ Make RPC call Client.htm Server.asp IFrame Server.asp 1 2 4 5 3 6 Current data New data

16. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Remote Scripting using IFrame  Create a handler function in the Client // In Client Page function handleResponse(sMessage) { // Do whatever you want to do dynamically here UpdateTime(sMessage); alert(sMessage); } Client.htm Server.asp IFrame Server.asp 1 2 4 5 3 6 Current data New data

17. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Remote Scripting using IFrame  Loaded Document in IFrame calls Parent <% sTime = oRemoteScripting.Call("GET_CurrentTime") %> window.parent.handleResponse(" ") Client.htm Server.asp IFrame Server.asp 1 2 4 5 3 6 Current data New data

18. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Using hidden IFrame  Pros Fast Easy to use/implement High Browser Compatibility  Cons You’re writing a script generator High dependency between server and client software Executes Asynchronously

19. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Generating JavaScript at the Server

20. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Client.htm Generating JavaScript at the Server Load Script.asp 1 3 1. Call function to create new script 2. Creates new script element 3. Calls Server for new Script 4. Server Produces new Script 4 6 5. New Script is loaded 6. New Script is executed Current data New data 7. New data is shown New 5 7 Script.asp 2

21. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Generating JavaScript at the Server // Function in client page function loadContent(file) { var scriptTag = document.getElementById('loadScript'); var head = document.getElementsByTagName('head').item(0) if(scriptTag) head.removeChild(scriptTag); var script = document.createElement('script'); script.src = file; script.type = 'text/javascript'; script.id = 'loadScript'; head.appendChild(script); } Client.htm script.asp Load Script.asp 1 2 3 4 6 Current data New data New 5 7

22. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Generating JavaScript at the Server  Dynamically create a element using DOM function loadContent(file) { var scriptTag = document.getElementById('loadScript'); var head = document.getElementsByTagName('head').item(0) if(scriptTag) head.removeChild(scriptTag); var script = document.createElement('script'); … } Client.htm script.asp Load Script.asp 1 2 3 4 6 Current data New data New 5 7

23. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Generating JavaScript at the Server  Set the src Attribute to point to your server function loadContent(file) { … script.src = file; // For example: Server.asp script.type = 'text/javascript'; script.id = 'loadScript'; … } Client.htm script.asp Load Script.asp 1 2 3 4 6 Current data New data New 5 7

24. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Generating JavaScript at the Server  Put the Script element in your Document This will load the script from the server and start executing it. function loadContent(file) { … head.appendChild(script); } Client.htm script.asp Load Script.asp 1 2 3 4 6 Current data New data New 5 7

25. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Generating JavaScript at the Server  Using the loadContent Function <a href=“#” onclick="loadContent('JavascriptServer.asp'); return false"> Click me to do something dynamic Client.htm script.asp Load Script.asp 1 2 3 4 6 Current data New data New 5 7

26. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Using loadContent Function  Pros Fast Easy to use/implement  Cons Is basically a script generator High dependency between server and client software Executes Asynchronously Client.htm script.asp Load Script.asp 1 2 3 4 6 Current data New data New 5 7

27. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Exchanging XML Data

28. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Client.htm Exchanging XML Data 1 3 1. Call function 2. Collect Client data in XML Doc 3. Send XML Doc to Server 4. Process XML Doc at Server 4 2 5. Return Result XML Doc to Client 6. Process Result XML Doc at Client Current dataNew data 7. New data is shown 5 7 6

29. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Exchanging XML Data  Client Composes XML Doc for Request  Client Send Request using HTTP Protocol  Server reads XML Request creates XML Response  Server Sends XML Response  Client (Browser) Parses XML Response and Handles the Data  Synchronous and Asynchronous Calls Supported Client.htm 1 3 4 2 Current dataNew data 5 7 6

30. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Exchanging XML Data  Client-Side component HTTP Communications  Supported Browsers Microsoft Internet Explorer using “Msxml2.XMLHTTP” Gecko based browsers using “XMLHttpRequest”  Mozilla Firefox  Netscape Client.htm 1 3 4 2 Current dataNew data 5 7 6

31. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Using Exchanging XML Data  Pros Transfers Data instead of Code Flexible solutions Synchronous and Asynchronous Calls Supported  Cons Requires extra (standard) HTTP Control Harder to implement at first

32. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Advanced User Interfaces

33. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Advanced User Interfaces  Users Expect Windows-like User Interface  Browser Controls Have Limited Capabilities  Input Controls Max Length, Data Type, Capslock, Range Checking, etc.  List Controls Only Have One Column  Popup lists

34. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Framework Integration

35. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Framework Integration  Use Data Dictionary Information at the client Sizes, types, etc  Client Side Validation and Automated Actions Capslock, Autofind, Required Validations

36. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Order Entry Sample  Using XML Data Exchange  Header / Detail  Dynamic Generation of Table  Full Grid UI

37. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Browser Compatibility

38. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Browser Compatibility  Mozilla Firefox is being used more and more  IE and Firefox support DOM  Differences at detailed level  Populair amongs the more technical oriented  Average user sticks to available browser

39. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Questions?

40. Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key Biscayne, Florida Thank you!