1. Delphi for PHP Web 2.0 / AJAX Quinjo
Copyright © 2008, Tim Hayes

2. Tim Hayes : Software Product Designer and Developer
Working in IT since 1974
Started with Delphi I in 1996
dbPAL database toolkit for developers published in 2001
2007 worked with Delphi for PHP for commercial website
Partnering with Roland Potter to build a full Client-Server Javascript IDE called “Quinjo”
Copyright © 2008, Tim Hayes

3. Delphi for PHP
Copyright © 2008, Tim Hayes

4. Delphi for PHP 1st release February 2007 Mixed heritage Claims
Version 2.0 “Aurora” due shortly
“Crocodile” slated for early 2009
Mixed heritage
Borland / CodeGear IDE
Open Source VCL from Quadram Software
Open Source QooxDoo Javascript Component Library
Claims
Visual data aware development environment for PHP
AJAX enabled
Copyright © 2008, Tim Hayes

5. First Impressions *****
Look and feel of Delphi 2006
Familiar IDE
Familiar Component Library
Easy to build a simple web page that populates data controls
Integrated Apache Webserver for easy debugging
Integrated PHP debugger is very powerful
Copyright © 2008, Tim Hayes

6. Second Impressions Product was released a year early
Far too many IDE crashes
Many component properties and events not implemented
Very poor documentation
Mixture of Client and Server side processing
Difficult to understand if writing event-driven code
DB components not accessible client-side
Integration with formal website difficult
Graphics
Navigation
Copyright © 2008, Tim Hayes

7. Behind the scenes
Copyright © 2008, Tim Hayes

8. Division of “duties” CLIENT SERVER Extensive HTML for visual interface
Native FORM-based with manual inclusion of AJAX calls
Embedded Javascript visual controls with limited data “awareness”
Inability to access server-side data controls for validation
Stateless environment
SERVER
Creates PHP Objects for all data & visual controls, serializing them on send, de-serializing on receive
Accesses database
Needs to maintain state control of client
Creates / sends HTML page
Can respond to AJAX Calls
Copyright © 2008, Tim Hayes

9. Code Generation -> Less Precision
Generated
HTML,
CSS /
Embedded
JavaScript
Objects
Class
Libraries
PHP
Classes
&
Generated
Scripts
Less Precision ->
Greater code Complexity and Production Costs
and /or Lower Functionality
Copyright © 2008, Tim Hayes

10. The PLUS points of Delphi for PHP
Great for PHP script development, testing and debugging
Integrated Apache useful for raw JavaScript and HTML code development
Good for simple, one-off data-driven web pages with limited HTML Graphics
Copyright © 2008, Tim Hayes

11. AJAX DOM Rich Client with JavaScript
Web 2.0 Development
AJAX
DOM
Rich Client with JavaScript
Copyright © 2008, Tim Hayes

12. What is Web 2.0 development?
building applications and services around the unique features of the Internet, as opposed to building applications and expecting the Internet to suit as a platform (effectively "fighting the Internet"). - Eric Schmit
"...an idea in people's heads rather than a reality. It’s actually an idea that the reciprocity between the user and the provider is what's emphasised. In other words, genuine interactivity, if you like, simply because people can upload as well as download". – Stephen Fry
Copyright © 2008, Tim Hayes

13. What is Web 2.0 technology? Web 2.0
rich Internet application techniques, often Ajax-based
semantically valid XHTML and HTML markup
microformats extending pages with additional semantics
folksonomies (in the form of tags or tagclouds, for example)
Cascading Style Sheets to aid in the separation of presentation and content
REST and/or XML- and/or JSON-based APIs
syndication, aggregation and notification of data in RSS or Atom feeds
mashups, merging content from different sources, client- and server-side
weblog-publishing tools
wiki or forum software, etc., to support user-generated content
Copyright © 2008, Tim Hayes

14. ASYNCHRONOUS JAVASCRIPT AND XML – available since 2000
Web
2.0
What is AJAX?
ASYNCHRONOUS JAVASCRIPT AND XML – available since 2000
DIRECT CALL TO SERVER AVOIDS BROWSER PAGE REFRESH
Copyright © 2008, Tim Hayes

15. AJAX is NOT advanced technology!
Web
2.0
AJAX is NOT advanced technology!
function createXMLHttpRequest() {
var msg = "";
if(window.ActiveXObject) { try { return new ActiveXObject("MSXML2.XMLHttp"); } catch (e) { }
try { return new ActiveXObject("Microsoft.XMLHttp"); } catch (e2) { msg = e2.message; } }
if (typeof XMLHttpRequest != 'undefined') { try { return new XMLHttpRequest(); } catch (e3) { msg = e3.message; }
} else { if (msg == "") msg = "No xmlhttp object available"; }
alert("XMLHttpRequest not supported:\r\n"+ msg);
return null; }
function AjaxCall(url,values,callback,errorHandler) {
var useasync = false;
var xhr = com.quinjo.sysutils.createXMLHttpRequest();
if (useasync) { xhr.onreadystatechange = function() {
if (xhr.readyState==4) {
if (xhr.status==200) { callback(xhr.responseText); }
else {alert("Message returned but with error : " + xhr.statusText) }
} } }
var stage = "open";
try {xhr.open("POST", url, useasync); stage = "setheader";
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
stage = "send";
xhr.send(AjaxEncode(values)); } catch (e) { alert("Exception in XMLHttp call at stage: " + stage "\r\nurl: " + url + "\r\nexception: " + e.message); return false; }
if (!useasync) { try { callback(xhr.responseText); } catch (e2) {
if (confirm(e2.message + "\r\nError occurred after XMLHttp Call.\r\nShow Response?")) alert(url + "\r\n" + xhr.responseText ); return false;
} }
return true;}
BUT IT DOES EXTEND THE USE OF CLIENT-SIDE SCRIPTING
Copyright © 2008, Tim Hayes

16. The Document Object Model (DOM)
Web
2.0
The Document Object Model (DOM)
Copyright © 2008, Tim Hayes

17. Manipulating the DOM Web 2.0 HTML Scripting (JavaScript, VBScript)
Created by HTML in order of presentation
CSS can be used to apply uniform styles
Scripting (JavaScript, VBScript)
Create, append, detach nodes
Update all style properties
Attach and respond to event handlers
Attach OBJECTS created by scripts
Copyright © 2008, Tim Hayes

18. Thin Client -> Thick Client
Web
2.0
Thin Client -> Thick Client
Web
2.0
Web
1.0
RICH JAVASCRIPT, AJAX AND WEB SERVICES
HTML, STATIC PAGES
Copyright © 2008, Tim Hayes

19. Justification for Thick Client
Web
2.0
Justification for Thick Client
Internet connection speeds approaching 10mbps early network speeds
PC’s, even mobile devices have sufficient processing power and memory – which continues to increase
Reduces server load
Application control transferred to the client (client – server again)
Reduces server-side programming
Enriched end-user experience
Copyright © 2008, Tim Hayes

20. Concerns over Thick Client
Web
2.0
Concerns over Thick Client
Security
Access to server is published
Client-side scripts are published
Performance
Complex JavaScript Libraries can be 1mb upward
More data / scripts can be loaded than are needed (requires same considerations as client-server architecture)
Quality Control
JavaScript is “loosely typed” and errors can go undetected until run-time
Copyright © 2008, Tim Hayes

21. Quintessential JavaScript Objects IDE
Quinjo
Quintessential JavaScript Objects IDE
Copyright © 2008, Tim Hayes

22. Quinjo Project Objectives
An IDE for developing browser-based client-server database applications
100% pure JavaScript client-side environment emulating traditional Windows features
Object Class hierarchy based on jPersistent, JComponent and jControl
Data Access controls based on jDatabase, jTable, jQuery and jDatasource
Data Aware VCL similar to Delphi
Integrated Apache and MySQL servers
Copyright © 2008, Tim Hayes

23. Quinjo interaction with DOM
Quinjo manages DOM
Quinjo visual controls attach to DOM nodes and manage their properties and behaviours
DOM events (mouse, keyboard) handed back to Quinjo controls and passed on to traditional event handlers
Windows visual effects managed by Quinjo object parenting and control alignment (Windows style)
No HTML (other than lead page) required
No CSS required
Copyright © 2008, Tim Hayes

24. Quinjo Client-side data
Data controls reside on visual datamodule
Quinjo has client-side datasets
Table or query
Calculated fields
Master-detail relationships
Temporary tables
Record insert / delete / update
Send by Ajax to server “on post”
Datasource connects data aware components
Developer responsible for restricting sizes
Copyright © 2008, Tim Hayes

25. Quinjo Visual Forms
Multiple “units” in project represent either “forms” or overlay panels
Forms
Modal or non-modal display
Can address datamodule and other forms
Panels
Simple panel overlay
Visual Component Library
Basic controls include panels, buttons, edits, labels, grids etc. – including DB versions
Fuller library under continuous development
Copyright © 2008, Tim Hayes

26. Beta Community Welcome
Invitations are going out for developers to join a Beta test group starting April 08. Please see me or Roland Potter after meeting, or contact me at FREE lifetime subscription to Quinjo is offered for continuing Beta Testers.
Anyone wishing to start and moderate a Quinjo FORUM (domain name and hosting service provided) please contact Tim Hayes as above.
Copyright © 2008, Tim Hayes

27. Thank you for your time Please send any comments
suggestions or requests to me at
Copyright © 2008, Tim Hayes