DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web...
Transcript of DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web...
![Page 1: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/1.jpg)
![Page 2: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/2.jpg)
DataFlex Web Application Symposium – Part 4
Understanding the Web Framework
Harm Wibier
Development Team www.dataaccess.com
![Page 3: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/3.jpg)
1993 MOSAIC 0.1
- HTTP
- Hyperlinks
- HTML
- Images
![Page 4: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/4.jpg)
1996 Netscape 2.0
- Forms
- Cookies
- JavaScript
![Page 5: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/5.jpg)
1999 Internet Explorer 5
- CSS
- AJAX (XmlHttpRequest)
![Page 6: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/6.jpg)
2013 Chrome
FireFox
Internet Explorer 10
- HTML5
- CSS3
![Page 7: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/7.jpg)
WEB APPLICATIONS
How the web works…
![Page 8: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/8.jpg)
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
![Page 9: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/9.jpg)
Browser IIS AppHtml
GET http://www.mywebsite.com/Page.html
<html> <head> <title>My Page</title> … </html>
Page.html
![Page 10: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/10.jpg)
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">
![Page 11: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/11.jpg)
Web Application Server
• ASP <-> DataFlex Implement Web Business Processes
Call published functions from ASP <%=oCustomer.call("Get_CustomerDetails", Request("customerid") %>
GenerateHTML
![Page 12: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/12.jpg)
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> ..
![Page 13: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/13.jpg)
AJAX
• JavaScript makes pages interactive
Calls load extra data from server
• HTTP POST / GET
Displayed page is manipulated
• Document Object Model
![Page 14: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/14.jpg)
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
![Page 15: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/15.jpg)
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> ..
![Page 16: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/16.jpg)
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, …
![Page 17: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/17.jpg)
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
![Page 18: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/18.jpg)
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" ... }
![Page 19: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/19.jpg)
HTTP
• Stateless No connection!
• Calls from the client to the Server GET
• HTML / CSS / Images
POST • JSON / XML • Web Service calls
![Page 20: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/20.jpg)
WEB FRAMEWORK CONCEPTS
Main concepts of the web framework…
![Page 21: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/21.jpg)
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
![Page 22: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/22.jpg)
Initialization
Page load JavaScript included
Load call Objects are serialized
Object creation Web properties are set
Rendering HTML Generation
![Page 23: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/23.jpg)
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
![Page 24: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/24.jpg)
{ "sName": "oCustomerName", "sType": "df.WebForm", "aProps": [{ "sN": "pbEnabled", "sV": "1" }, { "sN": "psLabel", "sV": "Name:" }], "aObjs": [] }
![Page 25: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/25.jpg)
Persistency
• No persistency on the server
Process pooling
• Calls should be self-explanatory
![Page 26: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/26.jpg)
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
![Page 27: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/27.jpg)
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
![Page 28: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/28.jpg)
• 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
![Page 29: DataFlex Web Application Symposiumd3mvk1t0iovct7.cloudfront.net/Synergy2013... · DataFlex Web Application Symposium – Part 4 Understanding the Web Framework Harm Wibier Development](https://reader035.fdocuments.us/reader035/viewer/2022062317/5fc285e25e57bf7f6f2b60c3/html5/thumbnails/29.jpg)
THE DATAFLEX PERSPECTIVE
John Tuohy will continue from a server-side perspective…