dataflex web application symposiumd3mvk1t0iovct7.cloudfront.net/synergy2013... · dataflex web...
TRANSCRIPT
DataFlex Web Application Symposium – Part 4
Understanding the Web Framework
Harm Wibier
Development Team www.dataaccess.com
1993 MOSAIC 0.1
- HTTP
- Hyperlinks
- HTML
- Images
1996 Netscape 2.0
- Forms
- Cookies
- JavaScript
1999 Internet Explorer 5
- CSS
- AJAX (XmlHttpRequest)
2013 Chrome
FireFox
Internet Explorer 10
- HTML5
- CSS3
WEB APPLICATIONS
How the web works…
Static pages
• Request is sent to load a page HTML is returned
• HTTP GET Request
Images are loaded • HTTP GET Request
• HTML is rendered Includes clickable links to other pages
Browser IIS AppHtml
GET http://www.mywebsite.com/Page.html
<html> <head> <title>My Page</title> … </html>
Page.html
Classic Web Applications
• Pages become dynamic Server-side scripts Generate HTML Parameters are passed in URL’s
• HTTP GET Request customer.asp?customerid=13
Data is passed using form posts • HTTP POST Request
<form action="demo_form.asp" method="POST">
Web Application Server
• ASP <-> DataFlex Implement Web Business Processes
Call published functions from ASP <%=oCustomer.call("Get_CustomerDetails", Request("customerid") %>
GenerateHTML
Browser IIS AppHtml
WAS
WebApp.exe
WebApp.exe
ASP Customer.asp
GET http://localhost/Customer.asp?customer=12
<%=oCustomer.call("Get_CustomerDetails", Request("customerid") %>
<table> <tr> <td>Customer Name:</td> <td>Data Access Europe</td> ..
AJAX
• JavaScript makes pages interactive
Calls load extra data from server
• HTTP POST / GET
Displayed page is manipulated
• Document Object Model
AJAX Library
• JavaScript widgets added to HTML Calls DataFlex Web Service
• HTTP POST
Find / Save / Delete Records
Emulated DDO’s on the client
Still uses page reloads
Still uses server-side scripts
Browser IIS AppHtml
WAS
WebApp.exe
WebApp.exe
ASP Customer.asp
POST http://localhost/WebService.wso
<soap> <action>Find Next</action> .. <soap> <field>customer.name</field> <value>Data Access Europe</value> ..
Web 2.0
• More and more client processing
Application in a page
• No more page reload
Complete Widget Libraries
Client-side storage
AJAX, JSON, HTML5, CSS3, …
Web Application Framework
• Application written in Visual DataFlex JavaScript Engine
• Widget implementation
Calls DataFlex Web Service • HTTP POST
• JSON
Logic in DataFlex
No more ASP
Browser IIS AppHtml
WAS
WebApp.exe
WebApp.exe
Index.html
GET http://localhost/WebOrder_17_1/Index.html
<html> <head> <script src="DfEngine/df-include.js"></script> … </html>
POST http://localhost/WebService.wso/CallAction/JSON
{ "sTarget": "oFindToolbar.oFindNext", "sAction": "OnClick", ... }
{ "aSyncProps":[{ "sO" : "oCustomer.oCustomerName" "aProps": [{ "sP": "sValue", "sV": "Data Access Europe" ... }
HTTP
• Stateless No connection!
• Calls from the client to the Server GET
• HTML / CSS / Images
POST • JSON / XML • Web Service calls
WEB FRAMEWORK CONCEPTS
Main concepts of the web framework…
JavaScript Engine
• Set of classes Classes match DataFlex classes
• Objects are created for web objects Object created for each view, form, menu
item, button
• Web properties are implemented
• HTML is generated to render
Initialization
Page load JavaScript included
Load call Objects are serialized
Object creation Web properties are set
Rendering HTML Generation
Object serialization
• Object definitions are sent to the client Object name Web properties Class name to be used Nested objects
• Recursive structure
• Implemented in cWebObject
{ "sName": "oCustomerName", "sType": "df.WebForm", "aProps": [{ "sN": "pbEnabled", "sV": "1" }, { "sN": "psLabel", "sV": "Name:" }], "aObjs": [] }
Persistency
• No persistency on the server
Process pooling
• Calls should be self-explanatory
Applications State
• Maintained on the client
Web property values
• List of changed properties
DDO Snapshot
• List of current rowid’s per view
• Sent with each call
Events
• Sent to the server Current application state
• List of changed web properties • List of rowid’s
Server action(s)
• Processed on the server • Returns
Changes on application state Client actions
• User interface event
• Send AJAX Call
JavaScript Engine
• Synchronize state
• Event procedure
• Generate response
WebApp • Update web properties
• Display errors
• Perform client actions
JavaScript Engine
Server call
THE DATAFLEX PERSPECTIVE
John Tuohy will continue from a server-side perspective…