- 1. Delphi for PHP Web 2.0 / AJAX Quinjo
2. Tim Hayes :
- Software Product Designer and Developer
- 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 IDEcalled Quinjo
3. Delphi for PHP 4. Delphi for PHP
- 1 strelease February 2007
-
- Version 2.0 Aurora due shortly
-
- Crocodile slated for early 2009
-
- Open Source VCL from Quadram Software
-
- Open Source QooxDoo Javascript Component Library
-
- Visual data aware development environment for PHP
5. First Impressions *****
- Look and feel of Delphi 2006
-
- 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
6. Second Impressions
- Product was released a year early
-
- Many component properties and events not implemented
- 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
7. Behind the scenes 8. Division of duties
-
- 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
-
- Creates PHP Objects for all data & visual controls,
serializing them on send, de-serializing on receive
-
- Needs to maintain state control of client
-
- Creates / sends HTML page
-
- Can respond to AJAX Calls
9. Code Generation -> Less Precision PHP Classes &
Generated Scripts Generated HTML, CSS / Embedded JavaScript Objects
/ JavaScript Class Libraries Less Precision -> Greater code
Complexity and Production Costs and /or Lower Functionality 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
11. Web 2.0 Development AJAX DOM Rich Client with JavaScript 12.
What is Web 2.0 development?
- building applications andservicesaround the unique features of
theInternet , 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. Its
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
Web 2.0 13. What is Web 2.0 technology?
- rich Internet applicationtechniques, oftenAjax -based
- semantically validXHTMLandHTML markup
- microformatsextending pages with additionalsemantics
- folksonomies(in the form oftagsortagclouds , for example)
- Cascading Style Sheetsto aid in the separation of presentation
and content
- RESTand/orXML - and/orJSON -basedAPIs
- syndication, aggregation and notification of data
inRSSorAtomfeeds
- mashups , merging content from different sources, client- and
server-side
- wikiorforumsoftware, etc., to supportuser-generated
content
Web 2.0 14. What is AJAX? Web 2.0 DIRECT CALL TO SERVER AVOIDS
BROWSER PAGE REFRESH A SYNCHRONOUSJ AVASCRIPTA NDX ML available
since 2000 15. AJAX is NOT advanced technology! Web 2.0 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:"+ 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+ "url: " + url
+ "exception: " + e.message);return false;} if (!useasync) {try
{callback(xhr.responseText);} catch (e2) { if (confirm(e2.message +
"Error occurred after XMLHttp Call.Show Response?"))alert(url + ""
+ xhr.responseText );return false; } } return true;} BUT IT DOES
EXTEND THE USE OF CLIENT-SIDE SCRIPTING 16. The Document Object
Model (DOM) Web 2.0 17. Manipulating the DOM
-
- 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
Web 2.0 18. Thin Client -> Thick Client Web 2.0 Web 1.0 Web
2.0 HTML, STATIC PAGES RICH JAVASCRIPT, AJAX AND WEB SERVICES 19.
Justification for Thick Client
- Internet connection speeds approaching 10mbps early network
speeds
- PCs, even mobile devices have sufficient processing power and
memory which continues to increase
- Application control transferred to the client (client server
again)
- Reduces server-side programming
- Enriched end-user experience
Web 2.0 20. Concerns over Thick Client
-
- Access to server is published
-
- Client-side scripts are published
-
- Complex JavaScript Libraries can be 1mb upward
-
- More data / scripts can be loaded than are needed (requires
same considerations as client-server architecture)
-
- JavaScript is loosely typed and errors can go undetected until
run-time
Web 2.0 21. Quinjo Quintessential JavaScript Objects IDE 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
23. Quinjo interaction with 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
24. Quinjo Client-side data
- Data controls reside on visual datamodule
- Quinjo has client-side datasets
-
- Master-detail relationships
- Record insert / delete / update
-
- Send by Ajax to server on post
- Datasource connects data aware components
- Developer responsible for restricting sizes
25. Quinjo Visual Forms
- Multiple units in project represent either forms or overlay
panels
-
- Modal or non-modal display
-
- Can address datamodule and other forms
-
- Basic controls include panels, buttons, edits, labels, grids
etc. including DB versions
-
- Fuller library under continuous development
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[email_address] . 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.
27. Thank you for your time Please send any comments suggestions
or requests to me at [email protected]