Welcome!

Java IoT Authors: Elizabeth White, Liz McMillan, Pat Romanski, Yeshim Deniz, Mehdi Daoudi

Related Topics: Java IoT, Industrial IoT, Microservices Expo, IBM Cloud, Weblogic, Linux Containers, Adobe Flex, Open Source Cloud, Eclipse, Machine Learning , Agile Computing

Java IoT: Article

The Development Power of Open Source AJAX Tooling

Bridging the gap between the development environment and the deployed browser environment

(SYS-CON Media) - Understanding the complexity of AJAX at the browser level is critical to refining and debugging rich AJAX applications that leverage Web technologies such as JavaScript, Cascading Style Sheets (CSS), and XMLHttpRequests. Adding a third-party AJAX runtime heightens the complexity and sufficient browser tooling becomes critical when attempting to build a rich Internet application around existing libraries. The Eclipse AJAX Toolkit Framework (ATF) provides both a multi-faceted set of browser tooling features as well as support for integrating and building on existing AJAX runtimes.

IBM has a long history of working with the open source community and supporting innovation and collaboration. The Eclipse ATF project is one of 150 that IBM is currently participating in and actively making technology contributions for various enhancements. IBM's goal around ATF is to accelerate the industry's acceptance of AJAX by offering it a complete open source AJAX IDE. The project including plug-ins to the Eclipse development platform is in ongoing development efforts to provide exemplary tools for creating and debugging AJAX applications.

How ATF Works
ATF provides views into the CSS, XMLHttpRequests, and the Document Object Models (DOM) of a Web application along with any error, warning, or information messages generated by the browser. These views are linked to the currently loaded document in the browser and responds to selections make of individual DOM nodes. Inspection is crucial for finding and locating problems in rich AJAX applications and doing this inspection in the same environment as development allows rapid application development and deployment. ATF provides a capability to select a DOM node and unravel it to expose any JavaScript functions referenced in the markup, the CSS rules and properties currently applied, and the HTML source. This allows quick discovery of the style sheets and JavaScript functions being used by third-party AJAX widgets, increasing their flexibility and maintainability. Sifting through directories and documentation to find out how widgets are defining their look-and-feel is no longer needed since simply selecting the widget in the embedded browser will reveal the file and line number of the CSS or JavaScript code used. Developers can now maintain API-level abstraction from the toolkits used during development but then have access via inspection into the components of the rich AJAX application at the browser level when debugging a deployed application.

The DOM Source view in ATF provides both an inspection tool and an editor for viewing and also making changes to a node's DOM source. ATF enables the browser to become a canvas that enables modifications to the DOM to be re-injected into the browser and any functional or visual changes will be realized. The source tooling around the embedded browser provides live rendering of changes made to any node in the DOM document. This feature has interesting and empowering applications such as the ability to inject link and script nodes into the page's DOM and then make use of the loaded scripts when editing other nodes on the page such as controls or user interface elements. This feature lets AJAX be enabled on any Web site that can be loaded via a URL and allow mashups of locally created and deployed scripts with remote pages. This editing capability provides developers with a sandbox for testing and exploring runtime toolkits as well as changing interactions dynamically within the browser. The DOM source tooling for the browser lets developers go so far as to develop rich AJAX applications completely inside the browser with no local project files on the system. The gap between written and rendered DHTML code is bridged as a side-by-side of runtime-specific source and browser source can be viewed and edited. AJAX application issues can now be resolved inside the browser, which shortens development iterations with changes only propagated back to application source files when the resulting application functionality is correct.

The use of Cascading Style Sheets is an integral part of rich Internet application development to achieve a consistent visual look-and-feel. Achieving the "desktop" application feel in a rich AJAX applica-tion means making use of CSS properties to create partial transparency when dragging an item into an online shopping cart. Style sheet management and refinement becomes tough for developers when mixing developed styles with existing styles in AJAX runtime toolkits. ATF provides a CSS view that's driven by selecting any DOM element and viewing all CSS rules currently applied to that element as well as any cascading that's occurring. This view allows any defined property for a rule to be changed and for properties to be added and deleted with any modifications affecting all nodes on the page using those style rules. The CSS tooling provides a feature to select a CSS rule and visually highlight all elements in the browser that currently have that property rule applied. This feature lets developers see what elements will be affected by changes to that property and exposes the differentiation of elements caused by cascading styles. The process of managing and refining style sheets becomes streamlined as developers can deploy applications and then tool the CSS live in the browser page until it's correct and then revert the changes made back to workspace project files using the diff computing of the CSS view that tracks all the CSS changes made since the page was loaded.

AJAX derives its power by using XMLHttpRequest (XHR) as a transport for asynchronous communication to other sites or Web servers. ATF provides a monitor of all XMLHttpRequests that occur for a page once it's loaded in the embedded browser. Developers can get the turnaround time for the request as well as the contents of the request and response and the target URL. The XHR monitor rounds out the necessary inspection tools for components used in rich AJAX applications.

Developers Can See the Benefits
Developers familiar with the Java debugging support inside Eclipse will see the same features in ATF for JavaScript debugging such as breakpoints, expression evaluation, and variable inspection. ATF brings the Eclipse Java debug experience to JavaScript-based applications with the same debugging behavior and functionality. ATF provides a debugging perspective that shows all the scripts currently loaded for a page launched in the embedded Mozilla browser. The script view can be used to inspect loaded scripts by opening them in an editor with support for breakpoint creation. Developers can easily discover and explore scripts used in the page by setting the necessary breakpoints and then interacting with the page to see what actions are handled by what scripts.

The debugger is unique in the sense in that its functionality is supported for both locally created and deployed applications and remote applications launched via URL. A Web application can be fully debugged with no local workspace files needed and JavaScript files can be opened remotely with support for adding remote breakpoints. Now testing a site simply requires ATF and a URL and from that breakpoints can be set for files, errors, exceptions, or on launch and the entire user interaction with an AJAX application can be stepped through. This lets developers explore runtime toolkits from the top down with a JavaScript stack frame that allows the correct level of inspection and evaluation to verify the correct use of widgets and AJAX support.

The complexity created by utilizing various Web technologies for building rich Internet applications requires tooling not just at the source level but at the browser level as well. The browser becomes a crucial development tool since inspection and tooling allow introspection and modification to take place for any page navigated to. This bi-directionality gives Web 2.0 developers and testers the necessary information and tooling needed to understand and resolve browser interactions. The AJAX Toolkit Framework seeks to bridge the gap between development environment and the deployed browser environment. ATF provides the necessary tooling around a Mozilla browser inside Eclipse and reveals, via inspection, all the necessary elements of the rich AJAX application for troubleshooting and debugging. ATF brings the Eclipse development experience to developers looking for a complete and sufficient tool for developing and debugging rich Internet applications. ATF is an open source project under the Eclipse Web Tools Platform. More information can be found at www.eclipse.org/atf.

More Stories By Kevin Sawicki

Kevin Sawicki is strategic software engineer, IBM Internet Emerging Technology.

Comments (2)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
DSR is a supplier of project management, consultancy services and IT solutions that increase effectiveness of a company's operations in the production sector. The company combines in-depth knowledge of international companies with expert knowledge utilising IT tools that support manufacturing and distribution processes. DSR ensures optimization and integration of internal processes which is necessary for companies to grow rapidly. The rapid growth is possible thanks, to specialized services an...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
Scala Hosting is trusted by 50 000 customers from 120 countries and hosting 700 000+ websites. The company has local presence in the United States and Europe and runs an internal R&D department which focuses on changing the status quo in the web hosting industry. Imagine every website owner running their online business on a fully managed cloud VPS platform at an affordable price that's very close to the price of shared hosting. The efforts of the R&D department in the last 3 years made that pos...