1. Delphi for PHP Web 2.0 / AJAX Quinjo

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 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

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

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

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

7. Behind the scenes 8. Division of duties

CLIENT

• 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

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

weblog -publishing tools

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

HTML

• 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

Reduces server load

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

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

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 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

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

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

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 tim.hayes@it-map.com