1. © 2006 by IBM 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. © 2006 by IBM 2 Agenda Introduction PHP AJAX PHP IDE AJAX Toolkit Frameworks Demonstrations through-out

3. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 5 AJAX What is Ajax? –Asynchronous JavaScript TM 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. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 9 PHP IDE - Editor Seamless integration with WTP Editor Syntax Coloring Code Assist Code Folding Templates Annotations (i.e. search, bookmarks, tasks, breakpoints)

10. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 13 ATF System Diagram

14. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 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. © 2006 by IBM 20 Any Questions?

21. © 2006 by IBM 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.