may 16 – 18, 2007 copyright 2007, data access worldwide may 16 – 18, 2007 copyright 2007, data...

May 16 – 18, 2007 Copyright 2007, Data Access WorldwideMay 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, [email protected]

Copyright 2007, Data Access WorldwideMay 16 – 18, 2007

AgendaAgenda

Great Web ApplicationVisual DataFlex AJAX LibraryBuilding AJAX Library Web ApplicationsBasic WebApp


Great Web ApplicationsGreat Web Applications

Good Graphical User Interface DesignExtended User Interface ControlsFast RespondingEvent DrivenNo Full Page Refresh


Great Web Application SamplesGreat Web Application Samples

Google Suggest http://www.google.com/webhp?complete=1&hl=en

Backpack http://educ.backpackit.com/

Google Maps http://maps.google.com/?ie=UTF8&t=k&om=1&ll=25.823965,-80.121118&spn=0.003385,0.007135&z=18

Yahoo news http://news.yahoo.com/

http://www.google.com/webhp?complete=1&hl=en

http://educ.backpackit.com/

http://maps.google.com/?ie=UTF8&t=k&om=1&ll=25.823965,-80.121118&spn=0.003385,0.007135&z=18

http://maps.google.com/?ie=UTF8&t=k&om=1&ll=25.823965,-80.121118&spn=0.003385,0.007135&z=18

http://news.yahoo.com/


Great Web Applications use AJAX to create User Friendly, Responsive,

Interactive Web Sites


What is AJAX?


Defining AJAXDefining 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


Defining AJAXDefining AJAX

AsynchronousJavaScriptAndXMLFirst 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




Technologies InvolvedTechnologies Involved

HTMLJavaScriptDocument Object Model (DOM)XMLASP (VBScript)Visual DataFlexWeb ServicesCSS

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


Source: http://www.javarss.com/ajax/j2ee-ajax.html

Asynchronous AJAX Call Yahoo News SampleAsynchronous AJAX Call Yahoo News Sample


Visual DataFlex AJAX Library


GoalsGoals

Create Framework for Web Based Database ApplicationsAllow Applications to be build ‘Fast-and-Easy’Windows like ControlsBrowser IndependentHighly IntuitiveData Dictionary Based ValidationsClient Side And Server Side ValidationsStandards Based


Automated Input ControlsAutomated Input Controls

Input controls are automatically attached to Data Dictionary itemsCharacteristics like data type, length, etc. are loaded from Data Dictionary upon page loadClient side data validation while navigating forward and before sending dataBehavior can be influenced by setting attributes on the input element.


No Page ReloadNo Page Reload

Only changed parts of the page are updatedData is send and received in the backgroundUse of Modal Popup Object without opening a new browser window


Lookup Lists and GridsLookup Lists and Grids

Lists provide a virtual view on a set of dataImplemented as normal HTML tables


Other ControlsOther Controls

Tabbed Dialogs

Modal Popup Dialogs

Pull Down Menu's


Data DictionaryData Dictionary

All Meta Data is available at the ClientWhen possible, validations will be done at the ClientServer Validations will always be executed


Samples


AJAX Library Components


AJAX Library ComponentsAJAX Library Components

Visual DataFlexData DictionariesWeb Browser ObjectWeb Services

Internet Information ServerHTML (ASP Pages optional)JavaScriptCascading Style Sheets (CSS)


Client / ServerClient / Server

Client / Server Technology

ServerImplemented as Web Services

ClientJavaScriptCSSXMLHttpRequest Object

ClientServer

WebService

WebBusiness

Object

SessionManager

Optional ASP Calls

.asp page orHTML page

12Build page using ASP

Page is shown3

Meta data is requested4

Meta Data is delivered

AJAX Request

AJAX Response

5

7 Build Data

Structure

6

8

Request page


ServerServer

Implemented as Web ServiceExtends the Standard Web Business ObjectsOnly One Web Service Object in an ApplicationWeb Service Passes Calls on to Web Business ObjectsAll calls can be overruled by DeveloperEvents Are Generated for Developer to Augment


ClientClient

Implemented as set of JavaScript ClassesGoal: Developer should not have to use JavaScriptDon’t need Active Server Pages (.asp)Control VDF Specific Settings through HTML Attributes


Page Load ProcessPage Load Process

· Request page · Delivers page (ASP processing when necessary)

· Request Meta Data from Web Object

· Looks up Web Object; Sends back XML document containing Meta Data

· Stores XML Meta data· Processes All Forms· Attaches Attributes to Input Elements

based on Meta Data

Client Server


Processing a Client RequestProcessing a Client Request

· Performs Client Side Validation· Creates XML Document based on Form

data· Sends Data with Session Key to Server

· Validates Session· Looks up Web Object· Processes Request· Creates XML Document containing

requested data· Processes Request· Updates the Screen

Client Server


How to build


Create a ‘Workspace’Create a ‘Workspace’

Create a new workspaceAdd the “Visual DataFlex Ajax Library”


Create SessionManagerCreate SessionManager

Handles security and creation of Session Id’sNew Web Object Ajax Library Session ManagerCall it “oSessionManager”


Create Web Service InterfaceCreate Web Service Interface

Accepts Incoming CallsNew Web Object Ajax Library Web Service InterfaceCall it “WebService”


Create Web Browser ObjectCreate Web Browser Object

Functional unitNew Web Object Ajax Library Web Business ObjectAdd Data Dictionary ObjectsTest it


Create FormCreate Form

Handles ‘one-record-at-a-time’ formsNew Web Markup Ajax Library FormCall it “MyTable.asp”Replace “MyTable” with your details


How to get?How to get?

Download at www.dataaccess.eu/ajaxDownloads Visual DataFlex Ajax LibrarySupport: news.dataaccess.nl Libraries AJAX


Basic WebApp


Basic WebApp DefinitionBasic WebApp Definition

Starting Point for Building Web ApplicationsNo AJAX Required


Basis Web App ComponentsBasis Web App Components

SessionManagerExtended Data Dictionary

Alternative Auto Increment FunctionRegister Created/Modified Data (when fields supplied)

Translation (Multi Lingual Sites)User Rights Table


Basic WebApp AvailabilityBasic WebApp Availability

Will be made Available to all Conference Attendees


Questions?


Thank you!

may 16 – 18, 2007 copyright 2007, data access worldwide may 16 – 18, 2007 copyright 2007, data...

Documents