2009 11 25 ajax training

Visual DataFlex AJAX Library 2.0

Eddy Kleinjan, Data Access Europe

Eddy Kleinjan, Technical Director, Data Access Europe, November 25th, Wyboston Lakes, UK

• Meet the AJAX Library• Hands-on part 1• Into the AJAX Library• Hands-on part 2

Overview


The AJAX Library


• A set of tools to build sophisticated rich web applications for database usage.

• An extension of the Visual DataFlex web application framework.

• Library available at no cost for owners of a Visual DataFlex license.

What is the Visual DataFlex AJAX Library?


• HTML and JavaScript• No runtime installation• Rich desktop-like controls• Client side validations• Declarative page definition• Supports popular browsers• Ready to use CSS design• Easily switch designs• Get started using the wizards• Complete documentation• Sample applications• Direct custom server calls• 3rd party tool friendly

Features• Data controls

• Input box• Textarea• Select• Checkbox• Radio• Password• Grid• Lookup• Calendar

• Controls• Menu• Modal dialog• Tabcontainer


• Redesigned JavaScript Client Engine• Dynamically loading JavaScript modules• Form scoped context• Less data• Asynchronous communication• Better debugging with Visual DataFlex 15.0• New graphical designs• Improved mask support (date & numeric masks)• Improved error handling• No need for error place holder

Changes for 2.0


• AJAX Order Entry• AJAX Contact Management• AJAX Wines

Sample Applications


What is AJAX?

Without the Visual DataFlex AJAX Library….


• HTML & CSS– Presentation of the data

• JavaScript– Client-side engine

• DOM Manipulation– The technique to update the displayed page

• XmlHttpRequest– Synchronous & Asynchronous data loading

Involved techniques


• Hyper Text Markup Language• Standardized by W3C

• More info:– http://www.w3schools.com/html/default.asp

• Standard:– http://www.w3.org/TR/REC-html40/

HTML


HTML Example


• Defines the style of HTML elements• Standardized by W3C

• More Info:– http://www.w3schools.com/css/default.asp

• Standard:– http://www.w3.org/Style/CSS/

Cascading Style Sheets (CSS)


CSS Example


• Selectors are:– Tagname– Id– Class (<div class=“box”..)– Any property

• Usually in include:

More CSS


• Script language (ECMAScript)• Not Java!• Runs in the browser on the client

• More info:– http://www.w3schools.com/js/default.asp

JavaScript


JavaScript Example


• Very flexible language• Prototypal instead of classical• Can be hard to debug• Case sensitive

• Usually included

More JavaScript


• Object that is available within the browser and can be used to send HTTP requests.

• Able to handle POST and GET requests.• Designed to load XML but can also handle

plain text.• Also known as the ActiveX component

Msxml2.XMLHTTP.

XmlHttpRequest


Example XmlHttpRequest


• Can’t be send cross domain!• Since Internet Explorer 5.5– Before 7 the objects was created using new

ActiveXObject("Msxml2.XMLHTTP");– In IE 7+ and all other browsers:

new XMLHttpRequest();

• The AJAX Library does this for you!

More XmlHttpRequest


• Document Object Model• Object representation of a HTML page inside a browser• Can be manipulated using JavaScript• Tree structure with properties, collections and events

• More information:– http://www.w3schools.com/htmldom/default.asp

• Standard:– http://www.w3.org/DOM/

DOM


DOM Example


• Exposing functionality to the web using a predefined API• SOAP defines the standard in which XML is used as the data

format

• More information:– Visual DataFlex Help– Vincents training yesterday ;)

• Standard:– http://www.w3.org/TR/soap11/

Web Services


• Script language• Runs on the server in IIS• VBScript syntax• Can communicate with VDF WebApps using

published Web Objects• Usually used to generate HTML pages

ASP


AJAX & VDF

The whole picture


Visual DataFlex Applications


Visual DataFlex Web Applications


Visual DataFlex AJAX Applications


Into the AJAX Library


• VDF workspace with only packages• Attached to the application workspace

What is a Library?


• AppHtml– JavaScript– CSS– Images

• AppSrc– Several classes & packages

AJAX Library Workspace


• MetaData…– Set of functions used to load meta data of the webapp application

• Request– The main function used to execute find, save, delete and clear actions

• ValidateField– Called to do the asynchronous server side field validation

• RemoteMethodInvocation– Used to make custom server calls to published WO functions

Web service interface


AJAX VDF WebApp


• Within the HTML controls are declared using additional HTML attributes

• The browser loads the HTML page and after it has finished the DOM the AJAX Library engine scans the DOM for the additional HTML attributes

• For each components it includes the JavaScript module (if required)

• After the JavaScript module is loaded it creates an JavaScript object for the component

• The JavaScript component attaches event handlers and starts manipulating the DOM

Declarative HTML API


HTML Declarations – JavaScript Objects

<form vdfControlType="form" vdfControlName="order_form">

<input type="text" name="orderhea__order_number" />

<input type="text" name="orderhea__order_date" />

<input type="button" vdfControlType="popupcalendar" />

<select name="orderhea__ship_via"></select>

<table vdfControlType="grid" vdfControlName="order_detail"> <tr vdfRowType="header"> <th vdfDataBinding="invt__item_id">Item ID</th> </tr> <tr vdfRowType="display"> <td vdfDataBinding="invt__item_id"></td> </tr> <tr vdfRowType="edit"> <td><input type="text" name="invt__item_id" /></td> </tr> </table></form>

<form vdfControlType="form" vdfControlName="order_form">

<input type="text" name="orderhea__order_number" />

<input type="text" name="orderhea__order_date" />

<input type="button" vdfControlType="popupcalendar" />

<select name="orderhea__ship_via"></select>

<table vdfControlType="grid" vdfControlName="order_detail"> <tr vdfRowType="header"> <th vdfDataBinding="invt__item_id">Item ID</th> </tr> <tr vdfRowType="display"> <td vdfDataBinding="invt__item_id"></td> </tr> <tr vdfRowType="edit"> <td><input type="text" name="invt__item_id" /></td> </tr> </table></form>

vdf.core.Form

vdf.deo.Text

vdf.deo.Text

vdf.gui.PopupCalendar

vdf.deo.Grid

vdf.deo.DOM

vdf.deo.DOM

vdf.deo.Text

vdf.deo.Select


• Deployment– Minified single JavaScript file– 290KB

• Debug– Single JavaScript file without multi line comments– 463KB

• Full– Separate JavaScript files– 800KB

AJAX Library versions


• ASP Include

Including the AJAX Library


• The session system (before <html> tag)

• The toolbar (inside the <body> tag)

Optional server side includes


Hands on

Create your first AJAX 2.0 application using the Quick Start


Components


• The main component of data entry views• Comparable to the dbView in VDF• Maintains references to all controls inside• Rebuilds the DD structure on the client

vdf.core.Form


• Single line text field• Comparable to the dbForm in VDF• Inherits the DEO interface• Data bindable using its name or the vdfDataBinding

attribute

vdf.core.Text


• Displays a lookup dialog• Only needs a list of the fields to show• Can be used with and without relations

vdf.core.LookupDialog


• Displays a grid with multiple records• Comparable to the dbGrid in VDF

vdf.deo.Grid


• Displays a tab container• Comparable to dbTabDialog in VDF

vdf.gui.TabContainer


Events

Client-side events


• Multiple listeners per event• Can be canceled• Receive an object with information

About events


• ClientDataDictionary– onBeforeFind– onAfterFind– onBeforeSave– onAfterSave– onValidate

• Field– onChange– onValidate

• Grid / Lookup– onNewRow

Available events


Custom calls

Calling published VDF functions on the server


function LoadOrderStatus(iCustomerId){ var oCall = new vdf.ajax.VdfCall("oCustomer",

"GET_CalculateOrders", [ iCustomerId ]); oCall.onFinished.addListener(displayOrderStatus); oCall.send(true);}

function displayOrderStatus(oEvent){ var eElement = document.getElementById("customer_status"); eElement.innerHTML = "Customer status: " +

oEvent.oSource.getReturnValue();}

Sending a custom call


Hands on

Finish your first AJAX Application using the Quick Start Extended


• File name: Finished Ajax Library 2.0 Quick Start.zip• The password is: completed

Encrypted zip


Questions?


Thanks!


2009 11 25 ajax training

Documents