New Techniques for Building Web Applications

1. New Techniques for Building Web Applications Data Access Europe BV Eddy Kleinjan eddy.kleinjan@dataaccess.nl

2. Agenda • Introduction • Base Web Techniques • Remote Scripting • Advanced User Interfaces • Framework Integration

3. Introduction

4. Introduction • User Interfaces need to be more attractive • Web Applications need to be more Interactive • Current Broadband Connections Make it work

5. Base Web Techniques • HTML • Server Side Scripting (ASP) • Client Side Scripting (JavaScript) • Document Object Model (DOM)

6. HTML • Default language for Web Pages • Mixes Data with Format • Limited Communication with Web Servers (Form)

7. Server Side Scripting (ASP) • Executes at Server • Only Results are sent back • Build HTML pages Dynamically • Communicate with VDF Web App Server Directly

8. Client Side Scripting (JavaScript) • Executes at the Client • Ability to Manipulate Content using the DOM • Function can respond to Generated Events

9. Document Object Model (DOM) • Provides an Object Hierarchy to a Browser • Complete Hierarchy can be Accessed • Element can be Dynamically Modified

10. 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

11. 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

12. Remote Scripting using IFrame Client.htm 1. Link or Post Form, Target = IFrame 6 2. IFrame Requests Server Document 5 3. Server Document Calls WebApp Current data New data 4. Results are sent back to IFrame IFrame 5. IFrame calls Client (Parent Window) Server.asp Server.asp 6. Client Processes Results 2 7. New data is shown 3 1 4

13. Client.htm 6 5 New data Current data IFrame Server.asp Server.asp 2 3 1 4 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"> </iframe>

14. Client.htm 6 5 New data Current data IFrame Server.asp Server.asp 2 3 1 4 Remote Scripting using IFrame • Load new data into this IFrame by setting ‘target’ <!-- Using Link --> <ahref="RemoteIFrameServer.asp" target="RSIFrame">Make RPC call</a> <!-- Using Form --> <formaction="RemoteIFrameServer.asp" target="RSIFrame"> <inputtype="text" name="File.Field" value="default"> </form>

15. Client.htm 6 5 New data Current data IFrame Server.asp Server.asp 2 3 1 4 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); }

16. Client.htm 6 5 New data Current data IFrame Server.asp Server.asp 2 3 1 4 Remote Scripting using IFrame • Loaded Document in IFrame calls Parent <% sTime = oRemoteScripting.Call("GET_CurrentTime") %> <scripttype="text/javascript"> window.parent.handleResponse("<%="Time is " & sTime %>") </script>

17. 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

18. Generating JavaScript at the Server

19. Generating JavaScript at the Server Client.htm 1. Call function to create new script 1 Current data New data 2. Creates new script element 3. Calls Server for new Script Load <script> 2 4. Server Produces new Script 5. New Script is loaded Script.asp 6. New Script is executed 3 7 Script.asp 7. New data is shown 4 6 5 New <script>

20. Client.htm 1 Current data New data Load <script> 2 Script.asp 3 7 script.asp 4 6 5 New <script> Generating JavaScript at the Server // Function in client page function loadContent(file){varscriptTag = document.getElementById('loadScript'); varhead = 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); }

21. Client.htm 1 Current data New data Load <script> 2 Script.asp 3 7 script.asp 4 6 5 New <script> Generating JavaScript at the Server • Dynamically create a <script> element using DOM function loadContent(file){varscriptTag = document.getElementById('loadScript'); varhead = document.getElementsByTagName('head').item(0) if(scriptTag) head.removeChild(scriptTag); var script = document.createElement('script'); … }

22. Client.htm 1 Current data New data Load <script> 2 Script.asp 3 7 script.asp 4 6 5 New <script> 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'; … }

23. Client.htm 1 Current data New data Load <script> 2 Script.asp 3 7 script.asp 4 6 5 New <script> Generating JavaScript at the Server • Put the Script element in your DocumentThis will load the script from the server and start executing it. function loadContent(file){ … head.appendChild(script); }

24. Client.htm 1 Current data New data Load <script> 2 Script.asp 3 7 script.asp 4 6 5 New <script> Generating JavaScript at the Server • Using the loadContent Function <a href=“#” onclick="loadContent('JavascriptServer.asp'); return false"> Click me to do something dynamic </a>

25. Client.htm 1 Current data New data Load <script> 2 Script.asp 3 7 script.asp 4 6 5 New <script> Using loadContent Function • Pros • Fast • Easy to use/implement • Cons • Is basically a script generator • High dependency between server and client software • Executes Asynchronously

26. Exchanging XML Data

27. Exchanging XML Data Client.htm 1. Call function 1 Current data New data 2. Collect Client data in XML Doc 3. Send XML Doc to Server <script> 3 4. Process XML Doc at Server 2 5. Return Result XML Doc to Client 6. Process Result XML Doc at Client 4 7 7. New data is shown 6 5

28. Client.htm 1 Current data New data <script> 3 2 4 7 6 5 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

29. Client.htm 1 Current data New data <script> 3 2 4 7 6 5 Exchanging XML Data • Client-Side component HTTP Communications • Supported Browsers • Microsoft Internet Explorer using “Msxml2.XMLHTTP” • Gecko based browsers using “XMLHttpRequest” • Mozilla Firefox • Netscape

30. 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

31. Advanced User Interfaces

32. 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

33. Framework Integration

34. Framework Integration • Use Data Dictionary Information at the client • Sizes, types, etc • Client Side Validation and Automated Actions • Capslock, Autofind, Required • Validations

35. Order Entry Sample • Using XML Data Exchange • Header / Detail • Dynamic Generation of Table • Full Grid UI

36. Browser Compatibility

37. 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

38. Questions?

39. Thank you!