VFP & AJAXVFP & AJAX

Mike FeltmanMike Feltman

F1 TechnologiesF1 Technologies

AgendaAgenda

• What is AJAXWhat is AJAX• AJAX TechnologiesAJAX Technologies• Putting it Putting it

AltogetherAltogether• AJAX vs. Classic AJAX vs. Classic

Web AppsWeb Apps

• AJAX in 5 MinutesAJAX in 5 Minutes• Talking AJAX to VFPTalking AJAX to VFP• AJAX ResourcesAJAX Resources

What is AJAXWhat is AJAX

• AJAX is not a technology, it’s an acronym for AJAX is not a technology, it’s an acronym for a collection of technologies. a collection of technologies.

• AJAX is a development technique that allows AJAX is a development technique that allows web apps to provide a desktop app like user web apps to provide a desktop app like user experienceexperience

• AJAX = Asynchronous JavaScript + XMLAJAX = Asynchronous JavaScript + XML• Also Referred to as Web 2.0 and RIA (Rich Also Referred to as Web 2.0 and RIA (Rich

Internet Applications)Internet Applications)

AJAX TechnologiesAJAX Technologies

• HTML & XHTMLHTML & XHTML• CSSCSS• DOMDOM• XML & XSLTXML & XSLT• XMLHTTPXMLHTTP• JavaScriptJavaScript

HTMLHTML

• lingua franca of the weblingua franca of the web• HyperText Markup LanguageHyperText Markup Language• The “Content Layer” of a well The “Content Layer” of a well

designed website designed website

XHTMLXHTML

• eXtensible HyperText Markup eXtensible HyperText Markup LanguageLanguage

• HTML coded as well-formed XMLHTML coded as well-formed XML• Emerging, modernized HTML Emerging, modernized HTML

standard supported by most standard supported by most browsersbrowsers

CSSCSS

• Cascading Style SheetsCascading Style Sheets• Mechanism for adding style (fonts, Mechanism for adding style (fonts,

colors, formatting, etc.) to web colors, formatting, etc.) to web documents.documents.

DOMDOM

• Document Object Document Object ModelModel

• Object model for Object model for documents, not documents, not specific to HTML, specific to HTML, but rarely used but rarely used outside of that outside of that contextcontext

• Supported by Supported by modern browsersmodern browsers

XMLXML

• eXtensible Markup LanguageeXtensible Markup Language• ““Standard” data transport format for Standard” data transport format for

the webthe web

XSLTXSLT

• Extensible Stylesheet Language Extensible Stylesheet Language TransformationsTransformations

• Stylesheet Language for XMLStylesheet Language for XML• Formatting Language for XML Formatting Language for XML

data/documentsdata/documents

XMLHTTPXMLHTTP

• Object that allows (asynchronous) Object that allows (asynchronous) communication with the servercommunication with the server

• Native Object in Mozzila BrowsersNative Object in Mozzila Browsers• COM Object in Internet ExploderCOM Object in Internet Exploder

JavaScriptJavaScript

• Client Side Scripting LanguageClient Side Scripting Language• Supported by modern browsersSupported by modern browsers• Dynamically TypedDynamically Typed• Case SensitiveCase Sensitive

Putting it altogetherPutting it altogether

• HTML/XHTML – ContentHTML/XHTML – Content• CSS – FormattingCSS – Formatting• DOM & JavaScript – Client Side CodeDOM & JavaScript – Client Side Code• XML – DataXML – Data

The Missing LinksThe Missing Links

• Server Programming Server Programming Language (SPL)Language (SPL)– AFP, WebConnection, AFP, WebConnection,

etc.etc.– PHPPHP– XULXUL– RUBYRUBY– JavaJava– Classic ASPClassic ASP– ASP.NETASP.NET

• XML Enabled DBMSXML Enabled DBMS– VFPVFP– SQL ServerSQL Server– MySQLMySQL– OracleOracle– DB2DB2

AJAX Technologies ReduxAJAX Technologies Redux

• HTML & XHTMLHTML & XHTML• CSSCSS• DOMDOM• XML & XSTLXML & XSTL• XMLHTTPXMLHTTP• JavaScriptJavaScript

• Server Server Programming Programming LanguageLanguage

• DBMSDBMS

Classic Web Application Classic Web Application ModelModel

Synchronous Web Application Synchronous Web Application ModelModel

AJAX Web Application ModelAJAX Web Application Model

Asynchronous Web Application Asynchronous Web Application ModelModel

Talking AJAX to VFPTalking AJAX to VFP

• AFP (Active FoxPro Pages), Web AFP (Active FoxPro Pages), Web Connection or any other VFP server-Connection or any other VFP server-side scripting technology will sufficeside scripting technology will suffice

• Can use classic ASP or ASP.NET but Can use classic ASP or ASP.NET but both go through COM with no benefitboth go through COM with no benefit

VFP is the Ideal AJAX Server VFP is the Ideal AJAX Server LanguageLanguage

• FastFast• Great Text HandlingGreat Text Handling• Native DBMSNative DBMS• Great ConnectivityGreat Connectivity• Royalty Free DeploymentRoyalty Free Deployment

AJAX in 5 MinutesAJAX in 5 Minutes

1.1. Attach a JavaScript function call to Attach a JavaScript function call to an event on an HTML objectan event on an HTML object

2.2. Get XMLHttp Request ObjectGet XMLHttp Request Object

3.3. Start an AJAX requestStart an AJAX request

4.4. Respond to the request on Respond to the request on completioncompletion

5.5. Update the web pageUpdate the web page

Talking AJAX to VFPTalking AJAX to VFP

1.1. Retrieving Data & Updating the Retrieving Data & Updating the pagepage

a.a. From a command buttonFrom a command button

b.b. From a textboxFrom a textbox

c.c. Using XMLUsing XML

2.2. Putting it all together with VFP Putting it all together with VFP business objectsbusiness objects

Real World AjaxReal World Ajax

• Glfc.netGlfc.net• Airset.comAirset.com• http://script.aculo.us/• http://openrico.org/• http://dojotoolkit.org/• http://prototype.conio.net/

ConclusionConclusion

• AJAX can be used to provide desktop AJAX can be used to provide desktop like user experienceslike user experiences

• AJAX is actually old technology, but AJAX is actually old technology, but its uses and usability are evolving its uses and usability are evolving rapidly rapidly

• VFP is well-suited for use in AJAX VFP is well-suited for use in AJAX developmentdevelopment

ResourcesResources

• Blogs/WebsitesBlogs/Websites– adaptivepath.com– blogs.pathf.com/

agileajax– ajax.phpmagazine.net– ajaxpatterns.com

• BooksBooks– The JavaScript The JavaScript

AnthologyAnthology– Pragmatic AJAXPragmatic AJAX

• Frameworks & Frameworks & ToolkitsToolkits– maxkiesler.commaxkiesler.com– dojotoolkit.orgdojotoolkit.org– prototype.conio.netprototype.conio.net– script.aculo.usscript.aculo.us– zk1.sourceforge.netzk1.sourceforge.net– rubyonrails.orgrubyonrails.org

Thank YouThank You

• Please remember to fill out your Please remember to fill out your evalsevals