1 / 26

AJAX Toolkit Framework

AJAX Toolkit Framework. Robert Goodman ( goodmanr@us.ibm.com ) Leugim (Gino) Bustelo ( lbustelo@us.ibm.com ) IBM Software Group. Agenda. Overview AJAX Toolkit Framework Components Component Details Where to get AJAX Toolkit Framework Demonstrations through-out ATF Based Products .

lotus
Download Presentation

AJAX Toolkit Framework

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX Toolkit Framework Robert Goodman (goodmanr@us.ibm.com) Leugim (Gino)Bustelo (lbustelo@us.ibm.com ) IBM Software Group

  2. Agenda • Overview • AJAX Toolkit Framework Components • Component Details • Where to get AJAX Toolkit Framework • Demonstrations through-out • ATF Based Products

  3. Overview • The AJAX Toolkit Framework (ATF) is an Integrated Development Environment (IDE) for AJAX developers and an extensible framework for adding AJAX runtimes in to the IDE. • ATF is an open-source project in incubation phase on Eclipse. • Provides • Tools to develop any DHTML/AJAX application • Tooling to facilitate use of various AJAX toolkits • Tight integration with the existing Eclipse user interface and development paradigm • Targets AJAX Application Developers and Toolkit Developers • Aims to provide an ever-expanding set of high-function tools for AJAX developers

  4. E C L I P S E AJAX Toolkit Framework Eclipse WebTools Mozilla XULRunner & JavaXPCOM AJAX Toolkit Framework are Eclipse Plugins

  5. AJAX Toolkit Framework Components • Creating AJAX applications • Drag and Drop Application Snippets • Browser Tooling • DOM Source view, DOM Inspector, Browser Console, XHRequest Monitor, and CSS Tools • JavaScriptTM Editor • Integrated JavaScript editor with batch and as-you-type syntax validation • JavaScript Debugger • Stack Frame, Variables and Script view • Embedded Mozilla Browser • Run/Debug an Ajax application in the Embedded Mozilla Browser • Application Deployment • Deployment of an AJAX Application to a server. • Personality Builder • Ability to create tooling for AJAX toolkits

  6. Eclipse Plugins Java Script Debugger DOM Inspector And JavaScript Console JavaScript Syntax Validator Personalities Personalities Personality Builder AJAX “X” Personality Dojo Personality Zimbra Personality Rico Personality Embedded Mozilla Browser Dojo Zimbra Ajax-x Rico Personality Common Libraries Mozilla XULRunner & JavaXPCOM Eclipse WebTools AJAX Toolkit Framework Components

  7. Ajax Application Creation • Support for three AJAX runtimes today • Dojo, Rico, and Zimbra • Personality Builder supports adding other AJAX runtimes. • Application Creation Wizard • Template to create initial Ajax Application • Drag and Drop snippets to Application Source File • Eclipse Projects • Static Web Project, Dynamic Web Project, and PHP Projects • Able to add in AJAX to existing project.

  8. JavaScript Editor • Enhanced Editor with Validation • Integrated JavaScript editor • Batch and as-you-type syntax validation • Syntax checker based on the Mozilla Rhino engine • Validator based on JSLint • Detects undesirable or ambiguous constructs considered to be bad practice • JSLint errors are consider warnings. • Drag and Drop snippets to Application Source File

  9. Application Deployment • Multiple Server Types • HTTP Web Server • J2EE Servers • HTTP Web Server • Support defining a HTTP Web Server in Eclipse • Ability to specify publish directory • Defining the HTTP server port • Support for Home Page URLs (~username) • J2EE Servers • Multiple J2EE Servers (Tomcat, JBOSS. etc.) • Testing done using Tomcat • Publishing Options • Automatically publish to server • Never publish to server

  10. Embedded Mozilla Browser • Integrated the Mozilla Browser • Using XULRunner • Provides the engine for AJAX Tooling • Debugger • JavaScript Engine • Browser Views • Mozilla perspective

  11. JavaScript Debugger • Breakpoints • Ability to set breakpoints in JavaScript • Any file type with JavaScript content (html, js, php). • Breakpoints can be enable/disabled • Debug Views for JavaScript • Call Stack • Variables • Breakpoints • Scripts View • Expression Support • Debug Preference options

  12. URL Debugging/Running • Able to launch and debug an AJAX application using a URL. • Application doesn’t have to reside in Eclipse. • All tooling supports handling files by URL. • Editor • Debugger • Browser tooling • Breakpoint Management • User has to manually delete breakpoints

  13. Browser Tooling • DOM Inspector • Shows the DOM tree rendered by the Browser • Dynamically updated to reflect changes within the browser • Attributes of a node can be edited, added to, and removed • A breadcrumb trail of hyperlinks is created for the node's path • DOM Source view • Displays the HTML source of the selected DOM node • Source can edited, validated, and updated back to the browser • Notification of a DOM element's source being out of sync with the browser

  14. Browser Tooling • Browser Console • Shows all browser (i.e JavaScript, CSS) errors, warnings, and logging messages • Double clicking on an error opens to the relevant line of code • XMLHTTPRequest Monitor • Observe XMLHTTPRequest request/response information • Formatting of the response body based on content-types

  15. Browser Tooling • CSS View • Style Rules • Shows the rules and their defined properties • Able to edit and add a property • Open CSS file for the rule and property • Highlights the DOM elements using a selected style rule or property • Computed Styles • Shows every style rule computed by the browser • Box Model • Shows the dimensions, x-y coordinates, padding, border, and margin information • Diffs • Shows the changes made to CSS rules and properties

  16. Personality Builder • A set of Wizards which accept: • Artifact data (AJAX toolkit libraries) • Build requirements data • New application templates • Code patterns • Deployment data • Wizards output a ‘basic’ Personality Plugin • The builder will provide necessary basic development features targeted for AJAX toolkits • Enables customization and addition of functionality

  17. Future Enhancements • Robust JavaScript Tooling • Real JavaScript Model, Enhanced code completion, Enhanced Outline view , Code formatting, etc • Debugger enhancements • Improve Install • better support for run time dependencies • Personality Builder improvements • Multiple Browser Support (IE, Opera, etc)

  18. Where to get AJAX Toolkit Framework • Open Source Project on Eclipse • www.eclipse.org/atf • Listserv and Newsgroup • atf-dev@eclipse.org • news://eclipse.webtools.atf/ • Source Code in Eclipse CVS • Milestones and Weekly builds • www.eclipse.org/atf/downloads/index.php • Flash Demo Movies • www.eclipse.org/atf/flash/index.php

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

  20. Screen Shots of products using ATF provided by different vendors.

  21. Helmi Technologies RIA IDE

  22. Genuitec MyEclipse 2.0

  23. Visual Drag Drop Editing

  24. DOM Inspection

  25. Event Wizard

More Related