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 New Techniques for Building Web Applications

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

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

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

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)

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)

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

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

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

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:

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

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 Link or Post Form, Target = IFrame 2. IFrame Requests Server Document 3. Server Document Calls WebApp 4. Results are sent back to IFrame IFrame calls Client (Parent Window) 6. Client Processes Results Current dataNew data 7. New data is shown

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 Current data New data

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 Current data New data

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 Current data New data

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 Current data New data

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

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

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 Call function to create new script 2. Creates new script element 3. Calls Server for new Script 4. Server Produces new Script New Script is loaded 6. New Script is executed Current data New data 7. New data is shown New 5 7 Script.asp 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 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 Current data New data New 5 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 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 Current data New data New 5 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 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 Current data New data New 5 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 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 Current data New data New 5 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 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 Current data New data New 5 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 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 Current data New data New 5 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 Exchanging XML Data

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 Call function 2. Collect Client data in XML Doc 3. Send XML Doc to Server 4. Process XML Doc at Server Return Result XML Doc to Client 6. Process Result XML Doc at Client Current dataNew data 7. New data is shown 5 7 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 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 Current dataNew data 5 7 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 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 Current dataNew data 5 7 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 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

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

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

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

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

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

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

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

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?

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!