How to use Eclipse to Build Rich Internet Applications With PHP and AJAX

1. How to use Eclipse to Build Rich Internet Applications With PHP and AJAX Phil Berkland berkland@us.ibm.com IBM Software Group Emerging Technologies

2. Agenda • Introduction • PHP • AJAX • PHP IDE • AJAX Toolkit Frameworks • Demonstrations through-out

3. Introduction • PHP is a popular and simple way to create Web applications • AJAX can be used to dramatically enhance Web applications • The combination of PHP and AJAX provides Rich Internet Applications • The combination of the Eclipse PHP IDE and AJAX toolkit frameworks provides a single tool for creating these rich applications

4. PHP • Why PHP? • Simple, intuitive, easy to use yet Powerful • PHP is the perfect Web Integration Platform • Perfect front-end glue language • Support for Web Services, XML & legacy systems • PHP is backed by a very strong community • ~ 500 committers on the PHP code base • ~ 2.5M developers worldwide • Thousands of open source projects

5. AJAX • What is Ajax? • Asynchronous JavaScriptTM And XML • XHTML + CSS + JavaScript + DOM + XMLHttpRequest • Formalization of technologies that have been around for years • Allows interaction with Server without getting new page • Functionality is normally obtained via an AJAX toolkit

6. AJAX toolkits • Toolkits do much of the heavy lifting • Hide browser differences • Provide UI widgets • Popular open source toolkits • Dojo • Open Rico and Prototype • Zimbra (Kabuki) • Yahoo Ajax Library • Open Ajax Alliance (openajaxalliance.org)

7. AJAX asynchronous • Main component of AJAX is the XMLHttpRequest function • Allows calls to server without reloading the page • Data can be: • XML • HTML fragment • JSON (JavaScript Object Notation)

8. PHP IDE overview • PHP development environment on top of Eclipse Web Tools • Provides for full create/edit/debug development cycle • Jointly developed by Zend and IBM • See www.eclipse.org/php

9. PHP IDE - Editor • Seamless integration with WTP Editor • Syntax Coloring • Code Assist • Code Folding • Templates • Annotations (i.e. search, bookmarks, tasks, breakpoints)

10. PHP IDE - Views • Outline View • Project Outline View • PHP Explorer • PHP Language • PHP Manual • Navigation Views • Open Resource • Open PHP Element • Other Eclipse built-in Views • Problems • Search

11. PHP IDE - Debugging • Typical Debugging functionality • Breakpoints • Stepping • View call stack • View variables • PHP Debug Perspective • Custom debug Perspective for PHP • Browser View + Browser Output View (HTML result) • Debug Extendibility

12. ATF overview • AJAX development environment on top of Web Tools • Originally developed by IBM • Enhanced JavaScript Editing Features • JavaScript Debugger • DOM Inspector / CSS Inspector/ JavaScript Console • Integrated Deployment • ATF is as server agnostic as possible. Using Eclipse APIs, ATF supports J2EE / JSP and Apache / PHP. • Personality Builder Framework • The Personality Builder Framework is primarily accessed via the Personality Builder Wizard, which generates the basic Eclipse assets for a new personality. They include: • See www.eclipse.org/atf

13. ATF System Diagram

14. ATF - JavaScript Editing • Available in any editor which recognizes JavaScript • Standalone JS file • HTML • PHP • JSP • Displays JavaScript syntax errors and warnings • Code completion • Insert code snippet based on AJAX toolkits used by project

15. ATF - Debugging AJAX • XMLHttpRequest Monitor is used for debugging asynchronous requests • Displays HTTP requests and responses • supports sorting based on: • Status • URL • method • timing information • Can show the details (headers and body) of the request/response

16. ATF - Debugging JavaScript • Breakpoints • Stepping • Call stack • Variable display • JavaScript Console • shows all JavaScript errors, warnings, and logging messages that occur at runtime • Double-clicking on message displays originating source file

17. ATF - Inspecting DOM • Displays list of currently active DOM elements • Highlights selected element in browser • Displays attributes of currently selected element • Allows editing of DOM attributes • Allows adding of attributes

18. ATF - Inspecting CSS • Displays CSS rules for selected DOM element • Shows properties and values for rule • Shows source (stylesheet) of rule • Allows editing of properties and addition of properties • Shows computed styles

19. ATF personalities/facets • A Personality is a collection of IDE features that are specifically targeted to a certain AJAX Runtime Library. • This is a core concept of ATF: providing an extensible framework to support AJAX development in arbitrary AJAX runtimes. • The Personality Builder assists a knowledgeable developer in building a Personality for an arbitrary AJAX runtime. • Initial offering supports • Dojo • OpenRico • Zimbra

20. Any Questions?

21. Legal Notices • Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. • Other company, product, or service names may be trademarks or service marks of others.