Download 2006 by IBM

How to use Eclipse to Build Rich
Internet Applications With PHP and
AJAX
Phil Berkland
[email protected]
IBM Software Group
Emerging Technologies
© 2006 by IBM
1
Agenda
•
•
•
•
•
•
Introduction
PHP
AJAX
PHP IDE
AJAX Toolkit Frameworks
Demonstrations through-out
© 2006 by IBM
2
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
© 2006 by IBM
3
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
© 2006 by IBM
4
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
© 2006 by IBM
5
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)
© 2006 by IBM
6
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)
© 2006 by IBM
7
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
© 2006 by IBM
8
PHP IDE - Editor
•
•
•
•
•
•
Seamless integration with WTP Editor
Syntax Coloring
Code Assist
Code Folding
Templates
Annotations (i.e. search, bookmarks,
tasks, breakpoints)
© 2006 by IBM
9
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
© 2006 by IBM
10
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
© 2006 by IBM
11
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
© 2006 by IBM
12
ATF System Diagram
© 2006 by IBM
13
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
© 2006 by IBM
14
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
© 2006 by IBM
15
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
© 2006 by IBM
16
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
© 2006 by IBM
17
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
© 2006 by IBM
18
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
© 2006 by IBM
19
• Any Questions?
© 2006 by IBM
20
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.
© 2006 by IBM
21