© 2006 by ibm how to use eclipse to build rich internet
DESCRIPTION
TRANSCRIPT
1
© 2006 by IBM
How to use Eclipse to Build Rich Internet Applications With PHP and
AJAX
Phil [email protected] Software Group
Emerging Technologies
2
© 2006 by IBM
Agenda
• Introduction
• PHP
• AJAX
• PHP IDE
• AJAX Toolkit Frameworks
• Demonstrations through-out
3
© 2006 by IBM
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
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
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
© 2006 by IBM
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
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
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
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
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
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
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
14
© 2006 by IBM
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
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
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
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
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
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
21
© 2006 by IBM
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.