Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "ATF/Help"

< ATF
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
=AJAX Toolkit Framework Overview=
+
==Ajax Tools Framework Help Contents==
  
−
==Background==
+
* [[ATF/Help/Overview|Overview]]
 +
* Tools
 +
** [[ATF/Help/Tools/MozBrowser|Mozilla Browser]]
 +
** [[ATF/Help/Tools/DomInspect|DOM Inspector]]
 +
** [[ATF/Help/Tools/BrowserConsole|Browser Console]]
 +
** [[ATF/Help/Tools/XHRMon|Request Monitor]]
 +
** [[ATF/Help/Tools/JSEval|JavaScript view]]
 +
** [[ATF/Help/Tools/DOMSource|DOM Source]]
 +
** [[ATF/Help/Tools/CSSView|CSS]]
 +
** [[ATF/Help/Tools/DOMWatcher|DOM Watcher]]
 +
** [[ATF/Help/Tools/DOMCompare|DOM Compare]]
 +
** [[ATF/Help/Tools/JSDebug|JavaScript Debugger]]
 +
* Tasks
 +
** [[ATF/Help/Tasks/Launch/Launch|Launching an AJAX Application]]
 +
** [[ATF/Help/Tools/JSDebug|Debugging an AJAX Application]]
  
−
'''A'''synchronous '''J'''avaScript '''A'''nd '''X'''ML, or AJAX, is a web development technique for creating interactive web applications using a combination of:
+
== Selected Features ==
−
 
+
−
* XHTML (or HTML) and CSS for mark up and styling information (XML is commonly used , although any format will work, including preformatted HTML, plain text, JSON and even EBML).
+
−
* The Document Object Model (DOM) manipulated through JavaScript to dynamically display and interact with the information presented.
+
−
* The XMLHttpRequest object to exchange data asynchronously with the web server.
+
−
 
+
−
Like DHTML, LAMP, or SPA, AJAX is not a technology in itself, but a term that refers to the use of a group of technologies together.
+
−
 
+
−
==Overview==
+
−
 
+
−
The AJAX Toolkit Framework (ATF) provides extensible frameworks and exemplary tools for building IDEs for the many different AJAX runtime offerings in the market. These frameworks will contain features for developing, deploying, debugging and testing AJAX applications. Tools built upon these frameworks will initially include: enhanced JavaScript editing features such as edit-time syntax checking; an embedded Mozilla web browser; an embedded DOM browser; and an embedded JavaScript debugger. Because it is a framework, ATF will provide for the development and incorporation of additional AJAX development tooling. ATF will use existing Eclipse extensions for web application deployment so that the environment will be server agnostic, that is, a developer may easily extend the framework to deploy their AJAX application to an arbitrary new class of server. Initial adapters will include a J2EE / JSP adapter and an Apache adapter.
+
−
 
+
−
===ATF Development Tools===
+
−
 
+
−
These are generic tools that will help the developer in creating any AJAX/DHTML type web application.
+
−
 
+
−
* '''DOM Inspector, DOM Source, CSS view, XHR Monitor, Browser Console'''
+
−
** Mozilla tools integration for web developers as Eclipse Views.
+
−
* '''JavaScript Debugger'''
+
−
** Tight integration with Eclipse debug UI to provide flow control in browser runtime and the ability to examine JavaScript code and variables
+
−
* '''Embedded Browser'''
+
−
** Access to browser DOM, e.g., Mozilla XPCOM
+
−
 
+
−
 
+
−
 
+
−
==Features==
+
  
 
{|
 
{|
−
| |
 
−
[[Image:jsValidation.jpg]]
 
−
 
−
ATF will validate your JavaScript code as you type and as a project wide build step. It supports different notification levels. [[ATF/Help/Tools/JSEditor|more...]]
 
−
| |
 
−
[[Image:jsValidationProblemsView.jpg]]
 
−
 
−
JavaScript validation entries are reported in Eclipse’s Problems View. Select an entry to open the source file in and editor. [[ATF/Help/Tools/JSEditor|more...]]
 
 
| |
 
| |
 
[[Image:runInMoz.jpg]]
 
[[Image:runInMoz.jpg]]
  
 
Run your web application in the Embedded Mozilla browser. [[ATF/Help/Tasks/Launch/Launch|more...]]
 
Run your web application in the Embedded Mozilla browser. [[ATF/Help/Tasks/Launch/Launch|more...]]
−
|-
 
 
| |
 
| |
 
[[Image:debugInMoz.jpg]]
 
[[Image:debugInMoz.jpg]]
Line 52: Line 32:
  
 
The Embedded Mozilla is a fully functional browser with tighter integration with Eclipse. [[ATF/Help/Tools/MozBrowser|more...]]
 
The Embedded Mozilla is a fully functional browser with tighter integration with Eclipse. [[ATF/Help/Tools/MozBrowser|more...]]
 +
|-
 
| |
 
| |
 
[[Image:openBrowser.jpg]]
 
[[Image:openBrowser.jpg]]
  
 
Open the Embedded Mozilla by using the toolbar action available in the Mozilla Perspective. [[ATF/Help/Tools/MozBrowser|more...]]
 
Open the Embedded Mozilla by using the toolbar action available in the Mozilla Perspective. [[ATF/Help/Tools/MozBrowser|more...]]
−
|-
 
 
| |
 
| |
 
[[Image:domInspectorTree.jpg]]
 
[[Image:domInspectorTree.jpg]]
Line 65: Line 45:
  
 
Discovered where a DOM element in the DOM tree is rendered in the browser. [[ATF/Help/Tools/DomInspect|more...]]
 
Discovered where a DOM element in the DOM tree is rendered in the browser. [[ATF/Help/Tools/DomInspect|more...]]
 +
|-
 
| |
 
| |
 
[[Image:domInspectorAttributes.jpg]]
 
[[Image:domInspectorAttributes.jpg]]
  
 
Modify the attributes of the selected DOM element and immediately see the effects in the browser. [[ATF/Help/Tools/DomInspect|more...]]
 
Modify the attributes of the selected DOM element and immediately see the effects in the browser. [[ATF/Help/Tools/DomInspect|more...]]
−
|-
 
 
| |
 
| |
 
[[Image:browserSelection.jpg]]
 
[[Image:browserSelection.jpg]]
Line 78: Line 58:
  
 
Use the Browser Console view to see error and warning messages logged by the browser. Click on a console entry to open the affected file in an Eclipse editor. [[ATF/Help/Tools/BrowserConsole|more...]]
 
Use the Browser Console view to see error and warning messages logged by the browser. Click on a console entry to open the affected file in an Eclipse editor. [[ATF/Help/Tools/BrowserConsole|more...]]
 +
|-
 
| |
 
| |
 
[[Image:jsEval.jpg]]
 
[[Image:jsEval.jpg]]
  
 
Evaluate JavaScript expressions on the page and interactively inspect the results. [[ATF/Help/Tools/JSEval|more...]]
 
Evaluate JavaScript expressions on the page and interactively inspect the results. [[ATF/Help/Tools/JSEval|more...]]
−
|-
 
 
| |
 
| |
 
[[Image:xhrMonList.jpg]]
 
[[Image:xhrMonList.jpg]]
Line 91: Line 71:
  
 
Look at the response and request details for each AJAX call.[[ATF/Help/Tools/XHRMon|more...]])
 
Look at the response and request details for each AJAX call.[[ATF/Help/Tools/XHRMon|more...]])
 +
|-
 
| |
 
| |
 
[[Image:cssViewRules.jpg]]
 
[[Image:cssViewRules.jpg]]
  
 
Inspect all the CSS rules and style properties that are applied to the selected DOM element in the CSS view. [[ATF/Help/Tools/CSSView|more...]]
 
Inspect all the CSS rules and style properties that are applied to the selected DOM element in the CSS view. [[ATF/Help/Tools/CSSView|more...]]
−
|-
 
 
| |
 
| |
 
[[Image:cssViewEdit.jpg]]
 
[[Image:cssViewEdit.jpg]]
Line 104: Line 84:
  
 
Track all the CSS changes made to later apply them to your application. [[ATF/Help/Tools/CSSView|more...]])
 
Track all the CSS changes made to later apply them to your application. [[ATF/Help/Tools/CSSView|more...]])
 +
|-
 
| |
 
| |
 
[[Image:domSource.jpg]]
 
[[Image:domSource.jpg]]
  
 
See source text of the selected DOM element and its descendants and use it to navigate the document. [[ATF/Help/Tools/DOMSource|more...]]
 
See source text of the selected DOM element and its descendants and use it to navigate the document. [[ATF/Help/Tools/DOMSource|more...]]
−
|-
 
 
| |
 
| |
 
[[Image:domSourceEdit.jpg]]
 
[[Image:domSourceEdit.jpg]]
Line 117: Line 97:
  
 
Set breakpoint markers on files located in projects as well as remotely located files for debugging JavaScript. [[ATF/Help/Tools/JSDebug|more...]]
 
Set breakpoint markers on files located in projects as well as remotely located files for debugging JavaScript. [[ATF/Help/Tools/JSDebug|more...]]
 +
|-
 
| |
 
| |
 
[[Image:debuggerTriggerBreakpoint.jpg]]
 
[[Image:debuggerTriggerBreakpoint.jpg]]
  
 
When the JavaScript Debugger is running, interact with the application in the Embedded Mozilla to trigger a breakpoint. [[ATF/Help/Tools/JSDebug|more...]]
 
When the JavaScript Debugger is running, interact with the application in the Embedded Mozilla to trigger a breakpoint. [[ATF/Help/Tools/JSDebug|more...]]
−
|-
+
 
 
| |
 
| |
 
[[Image:debuggerCallStack.jpg]]
 
[[Image:debuggerCallStack.jpg]]
Line 130: Line 111:
  
 
Inspect the variables in scope at each level of the call stack in the Variables view. [[ATF/Help/Tools/JSDebug|more...]]
 
Inspect the variables in scope at each level of the call stack in the Variables view. [[ATF/Help/Tools/JSDebug|more...]]
 +
|-
 
| |
 
| |
 
[[Image:debuggerBreakpoints.jpg]]
 
[[Image:debuggerBreakpoints.jpg]]
  
 
See all the breakpoints that the JavaScript Debugger is observing in the Breakpoints view. [[ATF/Help/Tools/JSDebug|more...]]
 
See all the breakpoints that the JavaScript Debugger is observing in the Breakpoints view. [[ATF/Help/Tools/JSDebug|more...]]
−
|-
+
 
 
| |
 
| |
 
[[Image:scriptView.jpg]]
 
[[Image:scriptView.jpg]]
  
 
Use the Script View to list all the files that contain JavaScript in the application and add or remove breakpoints. [[ATF/Help/Tools/JSDebug|more...]]
 
Use the Script View to list all the files that contain JavaScript in the application and add or remove breakpoints. [[ATF/Help/Tools/JSDebug|more...]]
−
| |
 
−
| |
 
 
|}
 
|}
 +
 +
[[Category:Draft Documentation]]

Latest revision as of 04:56, 9 November 2009

Ajax Tools Framework Help Contents

Selected Features

RunInMoz.jpg

Run your web application in the Embedded Mozilla browser. more...

DebugInMoz.jpg

Debug your web application in the Embedded Mozilla browser. more...

Browser.jpg

The Embedded Mozilla is a fully functional browser with tighter integration with Eclipse. more...

OpenBrowser.jpg

Open the Embedded Mozilla by using the toolbar action available in the Mozilla Perspective. more...

DomInspectorTree.jpg

Use the DOM Inspector view to get a live snapshot of the document rendered in the browser. more...

DomInspectorSelection.jpg

Discovered where a DOM element in the DOM tree is rendered in the browser. more...

DomInspectorAttributes.jpg

Modify the attributes of the selected DOM element and immediately see the effects in the browser. more...

BrowserSelection.jpg

Select elements to inspect by making a selection directly on the browser. more...

JsConsole.jpg

Use the Browser Console view to see error and warning messages logged by the browser. Click on a console entry to open the affected file in an Eclipse editor. more...

JsEval.jpg

Evaluate JavaScript expressions on the page and interactively inspect the results. more...

XhrMonList.jpg

See all the AJAX calls made by your application in the XHR (XML HTTP Request) Monitor view. more...

XhrMonDetails.jpg

Look at the response and request details for each AJAX call.more...)

CssViewRules.jpg

Inspect all the CSS rules and style properties that are applied to the selected DOM element in the CSS view. more...

CssViewEdit.jpg

Make changes to the values of style properties and previewed or permanently applied them to the browser. more...

CssViewDiff.jpg

Track all the CSS changes made to later apply them to your application. more...)

DomSource.jpg

See source text of the selected DOM element and its descendants and use it to navigate the document. more...

DomSourceEdit.jpg

Make text modifications in the DOM Source view and change the content displayed in the browser. more...

DebuggerSetBreakpoint.jpg

Set breakpoint markers on files located in projects as well as remotely located files for debugging JavaScript. more...

DebuggerTriggerBreakpoint.jpg

When the JavaScript Debugger is running, interact with the application in the Embedded Mozilla to trigger a breakpoint. more...

DebuggerCallStack.jpg

When the JavaScript Debugger encounters a breakpoint, interact with the current call stack using the Debug view. more...

DebuggerVariables.jpg

Inspect the variables in scope at each level of the call stack in the Variables view. more...

DebuggerBreakpoints.jpg

See all the breakpoints that the JavaScript Debugger is observing in the Breakpoints view. more...

ScriptView.jpg

Use the Script View to list all the files that contain JavaScript in the application and add or remove breakpoints. more...

Retrieved from "https://wiki.eclipse.org/index.php?title=ATF/Help&oldid=178118"

This page was last modified 04:56, 9 November 2009 by Jacek Pospychala. Based on work by Dave Carver.

Back to the top