Tools - Ajax Patterns

Tools

From Ajax Patterns

(Difference between revisions)
Revision as of 21:14, 5 May 2011
97.122.162.87 (Talk | contribs)
WebORB
← Previous diff
Revision as of 21:19, 5 May 2011
97.122.162.87 (Talk | contribs)
WebORB
Next diff →
Line 23: Line 23:
* [http://ajax.dynatrace.com/pages/community/default.aspx dynaTrace Commuity Pages] * [http://ajax.dynatrace.com/pages/community/default.aspx dynaTrace Commuity Pages]
-== WebORB ==+== WebORB Integration Server ==
-[http://www.themidnightcoders.com/products.html WebORB] is a multi-purpose cross-plarform development and runtime solution used to integrate .NET, Java and PHP server-side resources with not only AJAZ/JavaScript clients, but also a host of other clients including, Adobe Flex/Flash/AIR, Silverlight, Android (native Java and AIR), Windows Phone 7, BlackBerry Playbook and iOS clients too. Just drill down to the product page of interest. There is documentation for AJAX client integration (.NET & Java). WebORB enables remoting, messaging and media streaming and includes many productivity tools, such as service browser, code generators, invocation test drive and developer-friendly APIs.+[http://www.themidnightcoders.com/products.html WebORB] is a multi-purpose cross-platform development and runtime solution used to integrate .NET, Java and PHP server-side resources with not only AJAX/JavaScript clients, but also a host of other clients including, Adobe Flex/Flash/AIR, Silverlight, Android (native Java and AIR), Windows Phone 7, BlackBerry Playbook and iOS clients too. Just drill down to the product page of interest. There is documentation for AJAX client integration (.NET & Java). WebORB enables remoting, messaging and media streaming and includes many productivity tools, such as service browser, code generators, invocation test drive and developer-friendly APIs.
= IDEs and IDE Plugins = = IDEs and IDE Plugins =

Revision as of 21:19, 5 May 2011

Contents

Testing

This is for testing

Multipurpose Tools

FireBug

FireBug is a Mozilla Firefox add-on by Joe Hewitt and Rob Campbell providing a Javascript logging and debugging console with useful features such as a traffic sniffer with AJAX requests logging, a Javascript interpreter, a DOM inspector with HTML and CSS editing capabilities, ... It's also a platform for further add-ons integrated into Firebug itself, so it doesn't end there.

  • By default Firebug is hidden at the bottom of the page and can be opened by pressing F12 or by clicking on the icon located at the bottom left of the navigator window.
  • A demonstration of FireBug by Joe Hewitt at Yahoo!.
  • Open-source (Mozilla Public License)

dynaTrace AJAX Edition

dynaTrace AJAX Edition is a free tool that runs as an Add-On in Internet Explorer 6, 7 & 8. It traces Network Downloads, JavaScript Execution, DOM Access and Rendering Activity. The data is collected while browsing through the tested application. A separate client application is used to analyze problematic downloads, long running JavaScript methods or AJAX/XHR calls. Following resources will help to get started:

WebORB Integration Server

WebORB is a multi-purpose cross-platform development and runtime solution used to integrate .NET, Java and PHP server-side resources with not only AJAX/JavaScript clients, but also a host of other clients including, Adobe Flex/Flash/AIR, Silverlight, Android (native Java and AIR), Windows Phone 7, BlackBerry Playbook and iOS clients too. Just drill down to the product page of interest. There is documentation for AJAX client integration (.NET & Java). WebORB enables remoting, messaging and media streaming and includes many productivity tools, such as service browser, code generators, invocation test drive and developer-friendly APIs.

IDEs and IDE Plugins

Note: The following products have both an IDE component and a framework/library component. For that reason, they appear on the Javascript Multipurpose Frameworks page.

GWT Designer

GWT Designer is a set of Eclipse based development tools that enables Java developers to quickly create Ajax web applications using the Google Web Toolkit (GWT) framework.

GWT Designer has support for:

  • GWT Project Creation
  • Rich Editing Experience
  • AbsolutePanel Graphical Feedback
  • Grid & FlexTable Graphical Feedback
  • TabPanel Graphical Feedback
  • GWT Wizards
  • Custom GWT Composites
  • GWT Remote Services
  • GWT Application Launching
  • Intelligent Refactoring
  • Internationalization (i18n)
  • Easy Build & Deployment

14-day free trial, with a low yearly subscription price of $39 for full support and all updates.

Visual AJAX IDE - AJAX WebShop

JoyiStar WebShop is guided by the concept of IDE and visualization. Based on standard component library it allows Ajax IDE in the pattern of rapid application development (RAD), which maximizes development efficiency.What you see is what you achieve.

1. Rapid and easy development Integrated development and management tools are available. Easy-to-use visual Unified Modeling Language and visual IDE; complete component and object-oriented development pattern.

2.Leading technology It is in line with next-generation Web technology and future trend.

3.Rich Web component library It can be used to develop powerful Web interface in object-oriented mode, which includes interface controls, plain Web report form printing.

4.Superior code editing environment Troubleshooting IntelliSense support, code editing support, project release and deployment support.

5.Great openness and extensibility It keeps to the standards and employs open structure. Extension and interfaces in all hierarchies are provided so as to make it integrated seamlessly with the popular development tools.

6.Java, PHP, C#, VB support

7.Visual drag-and-pull

8.Compatible with popular browsers such as IE, Firefox


XI-Community and XI-Factory

XI-Community/XI-Factory is the world's most advanced web tool designed to help IT and Business People with AJAX/.NET application modeling, prototyping, documentation, validation and code generation.

XI-Factory™ is the heart of the XI-Community. It is a free web tool that allows your organization to achieve a new capacity for distributed analysis that optimizes cooperation between your IT experts and business unit personnel.

It generates fully working AJAX/.NET applications using a stable and robust framework that has been used for over 6 years.

XI-Factory’s workflow lets you:

  • Import.NET Application Models from the XI-Community
  • Design and customize your chosen Application Model to match your specific needs
  • Generate online AJAX application prototype
  • Validate the Application Model and prototype with your business users
  • Generate and buy the .NET Solution matching your Application Model


  • Free registration, Free online use for modeling/prototyping/ajax code generation

Ajax Toolkit Framework for Eclipse

Ajax Toolkit Framework is a plugin for general-purpose (but Java-focused), open-source, Eclipse IDE. Current version designed to run on Eclipse 3.3 and the Eclipse Web Tools Project (WTP) 2.0.1

  • Created by IBM, now an open-source Eclipse project.

IntelliJ Idea

IntelliJ Idea] is a Java IDE, and has been building extensive Javascript/Ajax support since version 5.0 (mid-2005).

  • Code completion, Error & syntax highlighting, Refactoring Code, Formatting, Find usag, Highlight usages, Surround with..., Goto symbol, Goto declaration, Code folding, Support for labels, Structure view
  • Screencast
  • Commercial from JetBrains.

Morfik

Morfik WebOS AppsBuilder is a specialized IDE for building 100% Ajax applications using a high-level language such as Java, C#, Basic or Object Pascal. It brings together a visual designer,a database and a web server, and tightly integrates them into a single entity that is both powerful and easy to use. Morfik Labs showcases many of applications that have been written with the AppsBuilder and Morfik Wiki provides access to in-depth documentation. Morfik's business model is based on:

  • Free full and complete working version for non-commercial use.
  • Startup Incubator Program: Startups can use now and pay later.
  • Per developer cost for commercial use
  • Royalty-free deployment: One server: zero dollars. Ten-thousand servers: zero dollars.

JSEclipse

JSEclipse is an Eclipse plugin dedicated to JavaScript editing. The code completion engine parses class definitions idioms used by prototype.js, script.aculo.us, Yahoo UI, dojo and qooxdoo.

  • Free for non commercial use from InterAKT Online

Aptana

Aptana is an Eclipse plugin that provides context assistance and code completion for Javascript and DOM. It features error highlighting in your code and a built-in Javascript language reference. Can be downloaded as a preconfigured Eclipse installation.

  • Free from Xamlon.

jMaki plugin for NetBeans

jMaki is an Ajax framework that provides a lightweight model for creating JavaScript centric Ajax-enabled web applications using Java, Ruby, PHP, and Phobos.

jMaki plugin for Eclipse

jMaki is an Ajax framework that provides a lightweight model for creating JavaScript centric Ajax-enabled web applications using Java, Ruby, PHP, and Phobos.

MX AJAX Toolbox for Dreamweaver

(no longer available, following the acquisiton of Interakt by Adobe on Sep 5, 2006)

MX AJAX Toolbox empowers web developers and designers to build AJAX sites in Dreamweaver. You can now build complete AJAX sites from scratch or integrate AJAX controls and widgets into your existing projects.

Spice up your websites with photo galleries, drag and drop, accordions, tabsets, ratings, AJAX dynamic tables and many more. Start a new project with the AJAX Site Wizard and see how easy it is to add top of the line technologies to your portfolio.

MX AJAX Toolbox features a free 30 day trial to test out and build your own AJAX sites in Dreamweaver. Download AJAX here

Build complex AJAX sites with the new site wizard or upgrade legacy websites with a suite of AJAX controls and widgets for increased interactivity and responsiveness. You can choose from:

  • AJAX Dynamic Table
  • AJAX Photo Gallery
  • Drag and drop
  • Accordion
  • Tabset
  • Collapsible region
  • Suggest text field
  • Dialog box
  • Rating widget
  • Edit in place

MyEclipse

MyEclipse is a full-featured IDE that was the first to bring AJAX Tools into the Eclipse environment. Now includes instant-on JavaScript debugging feature.

FEATURES:

Editor

 *Web 2.0 Browser with source code view 
 *Syntax highlighting 
 *Integrated outline and property views 
 *Validation and syntax checking 
 *Code assist for common JavaScript elements, functions, and variables 
 *Code assist documentation for functions 
 *Source formatting 
 *Toggle comments 

Debugger

 *Instant-on JavaScript Debugger
 *Debug any web page containing JavaScript source or included JavaScript files, or standalone JavaScript files 
 *Operations: Pause, Resume, Step Into, Step Over, Step to Return, Terminate 
 *Views: 
     *Web Browser View 
     *Call Stack View 
     *Variables View 
     *Console View 
 *Set JavaScript breakpoints in: 
 *JavaScript files 
 *HTML with embedded JavaScript and linked JavaScript files 
 *JSP files 
 *Integrates with Eclipse Launch Manager 
     *Quick launch from context-menu using 'Debug As' 
     *Launch from Eclipse Debug toolbar action 
     *Use Launch Profile to modify launch configuration 
     *Launch JavaScript resource from project location or deployed MyEclipse web-application 

30-day free trial, with a low yearly subscription price of $49.95 for full support and all updates.

Zero Kode

Zero Kode is a Web-based visual development tool for authoring ZK Ajax pages with drag-and-drop. ZeroKode was originally developed by Chris Spiliotopoulos, Greece.

ZK-Bench

ZK-Bench is an eclipse-plugin for work with the AJAX-Framework 'ZK'. But its more than a plugin - its a IDE with features which make the plugin a Next-Generation IDE. Database-based Web-Development becomes now easy like a breeze.

DOM Inspectors

As described in DOM Inspection pattern, these tools let you inspect the web page structure (DOM) in real-time.

Firefox DOM Inspector

Firefox ships with a DOM Inspector tool, accessible from the tools menu.

  • Note: In Windows, you need to ensure "Web Developer Tools" is selected during installation.
  • The inspector is a popup window, showing the DOM hierarchy on one side, facing a summary of the selected node. The summary shows node attributes such as registered event handles, as well as CSS style information.
  • Open-source from Mozilla.

Firefox Web Developer Extension

Web Developer is an invaluable Firefox toolbar for web development. Among its vast feature set are several commands especially relevant to DOM Inspection:

  • Display commands augment the page with DOM information, which makes a great alternative to exploring the DOM in a completely separate view. For example, Display Topographic Information alters the page to reveal the layout of DOM elements and Display ID and Class Details augments each element with its id and class attributes.
  • Outline commands draw outlines around elements of a particular type. For example, Outline Block Level Elements or Outline Table Cells. In fact, you can define custom outlines to outline any element you want.
  • Form commands help expose form structure. Display Form Details augments the form with information about each control, while View Form Information opens up a summary page.
  • Open-source from Chris Pederick.

View Rendered Source

View Rendered Source is a Firefox extension that shows the entire DOM as an HTML document.

  • The rendered source is shown in a pretty-formatted style, using colours and spacing to help convey the DOM structure.
  • Free from Jennifer Madden (enhanced version available for a small fee)

IE Developer Toolbar

Microsoft's IE Developer Toolbar, for IE6+, has a number of DOM Inspection capabilities and is similar to the Firefox Web Developer Extension.

  • Free from Microsoft.

IEDocMon

IEDocMon is a tool that extends IE to include an interactive view of the DOM.

  • Open-source by Tim Tabor.

Mouseover DOM Inspector

Mouseover DOM Inspector is a convenient bookmarklet that lets you explore the DOM by mousing over page elements.

  • All major browsers except Safari.
  • Open-source by Steven Chipman.

IE WebDeveloper

IE Webdeveloper IE WebDeveloper (former IE DOM Inspector) is an add-on for Microsoft Internet Explorer. The rich web debugging toolset allows you to inspect and edit the live HTML DOM, evaluate expressions and display error messages, explore source code of webpage and monitor DHTML Event and HTTP Traffic.

  • Commercial by IEInspector.

Web Development Helper

Web Development Helper is an Internet Explorer plugin that provides a set of useful tools to both Ajax/JavaScript developers as well as ASP.NET page and control developers.

For client-side script-based development, Web Development Helper provides HTTP tracing capabilities, as well as much improved script diagnostics, and tracing facilities, as well as an immediate window.

For ASP.NET developers, when developing against your site on your local development machine, this tool provides the ability to view ViewState, ASP.NET trace messages, contents of your cache etc.

Debuggers

RIA AppPuncher Debugger

RIA AppPuncher Debugger is a software testing and debugging solution that was designed from the ground up to facilitate testing of Rich Internet Applications. The product runs next to a browser-based client and registers itself as a proxy. Supported clients include AJAX/JavaScript, Adobe Flash/Flex and Silverlight. Supported protocols include HTTP/HTTPS, SOAP, REST/XML, AMF and RTMP.

Venkman for Firefox

Venkman is a Firefox extension with fairly sophisticated debugging support.

  • When you open the debugger, it shows a list of Javascript files, which you can then open up to set breakpoints.
  • Open-source from Mozilla. (Note: Not included in standard Firefox download.)

Microsoft Script Debugger

Microsoft Script Debugger offers basic debugging functions, e.g. breakpoints, a basic call stack, step in/out/over, error triggers.

  • While not as feature-rich as Venkman, it's still quite useful for investigating IE-specific bugs.
  • Note: The IE Blog lists several options for IE debugging.
  • Free from Microsoft.

Javascript HTML Debugger

  • Javascript HTML Debugger is a standalone Windows application with similar functionality to Venkman, but a greater emphasis on ease-of-learning.
  • Commercial from SplineTech.

Traffic Sniffers

As described in Traffic Sniffing, these tools let you monitor web remoting (XMLHttpRequest etc.) traffic. Note there are many general-purpose web proxies that will perform logging, which may be good enough for your needs.

XMLHttpRequest Tracing and XMLHttpRequest Debugging

These Greasemonkey extensions allow monitoring XMLHttpRequest traffic.

  • XMLHttpRequest Tracing unobtrusively logs traffic to the Javascript console.
  • XMLHttpRequest Debugging is a much more powerful, interactive, Popup tool that not only shows the messages, but lets you set filters and configure the display.
  • Both are Greasemonkey scripts, so you'll need to install the Greasemonkey extension first.
  • Open-source from Julien Couvrer.

Live HTTP Headers

Live HTTP Headers is a Mozilla Firefox extension which has the goal of revealing information about the HTTP headers in three ways:

  • First by adding a 'Headers' tab in 'View Page Info' of a web page.
  • Second by adding a tool in the 'Tools->Web Development' menu to be able to display http headers in real time (while pages are being downloaded from the Internet.
  • Third by letting you edit request headers and replay an URL (beta). Look for the Replay button in the live window!

HttpFox

HttpFox is an HTTP analyzer addon for Firefox. It monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. It aims to bring the functionality known from tools like HttpWatch or IEInspector to the Firefox browser.

Information available per request includes:

  • Request and response headers
  • Sent and received cookies
  • Querystring parameters
  • POST parameters
  • Response body

Fiddler

Fiddler is a Windows proxy specifically designed for analysing and "fiddling" with browser-server traffic.

  • Free from Eric Lawrence and Microsoft.

HTTP Analyzer

HTTP Analyzer is a sniffer that allows you to monitor and inspect HTTP/HTTPS traffic in real-time.It can trace and display wide range of information, including Header, Content, Cookies, Query Strings, Post data, Request and Response Stream, redirection URLs and more.A useful developer tool for performance analysis, debugging and diagnostics.

  • Commercial by IEInspector.


Charles Web Proxy =

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Charles can act as a man-in-the-middle for HTTP/SSL communication, enabling you to debug the content of your HTTPS sessions.

RIA AppPuncher Debugger

RIA AppPuncher Debugger is a software testing and debugging solution that was designed from the ground up to facilitate testing of Rich Internet Applications. The product runs next to a browser-based client and registers itself as a proxy. Supported clients include AJAX/JavaScript, Adobe Flash/Flex and Silverlight. Supported protocols include HTTP/HTTPS, SOAP, REST/XML, AMF and RTMP.

Web Development Helper

Web Development Helper is an Internet Explorer plugin that provides a set of useful tools to both Ajax/JavaScript developers as well as ASP.NET page and control developers.

For client-side script-based development, Web Development Helper provides HTTP tracing capabilities, as well as much improved script diagnostics, and tracing facilities, as well as an immediate window.

For ASP.NET developers, when developing against your site on your local development machine, this tool provides the ability to view ViewState, ASP.NET trace messages, contents of your cache etc.

Javascript Unit-Testing And Automated Web Testing

As described in Browser-Side Test.

Scriptaculous Unit-Testing

The Scriptaculous Unit-Testing is based on the xUnit family and the earlier JSUnit frameworks.

  • Each test is an HTML page containing the test in a script, and the HTML page is passed as an argument to a test runner page.
  • Open-source from the team of Scriptaculous volunteers.

JsUnit (Hieatt)

JsUnit is a testing framework that supports standard xUnit-like functionality.

  • Demo page.
  • Each test is an HTML page containing the test in a script, and the HTML page is passed as an argument to a test runner page.
  • Open-source from Edward Hieatt.

JsUnit (Schaible)

JsUnit works similarly to Hieatt's JSUnit (both were apparently developed in parallel).

  • Open-source from Jorg Schaible.

Squish/Web (froglogic)

Squish is an automated, functional testing tool. It allows to record, edit and run web tests in different browsers (IE, Firefox, Safari, Konqueror, etc.) on different platforms without having to modify the test scripts. Supports different scripting languages for tests.

  • Commercial from froglogic