Welcome!

Weblogic Authors: Yeshim Deniz, Elizabeth White, Michael Meiner, Michael Bushong, Avi Rosenthal

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
AI and machine learning disruption for Enterprises started happening in the areas such as IT operations management (ITOPs) and Cloud management and SaaS apps. In 2019 CIOs will see disruptive solutions for Cloud & Devops, AI/ML driven IT Ops and Cloud Ops. Customers want AI-driven multi-cloud operations for monitoring, detection, prevention of disruptions. Disruptions cause revenue loss, unhappy users, impacts brand reputation etc.
Atmosera delivers modern cloud services that maximize the advantages of cloud-based infrastructures. Offering private, hybrid, and public cloud solutions, Atmosera works closely with customers to engineer, deploy, and operate cloud architectures with advanced services that deliver strategic business outcomes. Atmosera's expertise simplifies the process of cloud transformation and our 20+ years of experience managing complex IT environments provides our customers with the confidence and trust tha...
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...
As you know, enterprise IT conversation over the past year have often centered upon the open-source Kubernetes container orchestration system. In fact, Kubernetes has emerged as the key technology -- and even primary platform -- of cloud migrations for a wide variety of organizations. Kubernetes is critical to forward-looking enterprises that continue to push their IT infrastructures toward maximum functionality, scalability, and flexibility. As they do so, IT professionals are also embr...
The Japan External Trade Organization (JETRO) is a non-profit organization that provides business support services to companies expanding to Japan. With the support of JETRO's dedicated staff, clients can incorporate their business; receive visa, immigration, and HR support; find dedicated office space; identify local government subsidies; get tailored market studies; and more.
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...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, discussed how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team at D...
As you know, enterprise IT conversation over the past year have often centered upon the open-source Kubernetes container orchestration system. In fact, Kubernetes has emerged as the key technology -- and even primary platform -- of cloud migrations for a wide variety of organizations. Kubernetes is critical to forward-looking enterprises that continue to push their IT infrastructures toward maximum functionality, scalability, and flexibility.
Today's workforce is trading their cubicles and corporate desktops in favor of an any-location, any-device work style. And as digital natives make up more and more of the modern workforce, the appetite for user-friendly, cloud-based services grows. The center of work is shifting to the user and to the cloud. But managing a proliferation of SaaS, web, and mobile apps running on any number of clouds and devices is unwieldy and increases security risks. Steve Wilson, Citrix Vice President of Cloud,...
When Enterprises started adopting Hadoop-based Big Data environments over the last ten years, they were mainly on-premise deployments. Organizations would spin up and manage large Hadoop clusters, where they would funnel exabytes or petabytes of unstructured data.However, over the last few years the economics of maintaining this enormous infrastructure compared with the elastic scalability of viable cloud options has changed this equation. The growth of cloud storage, cloud-managed big data e...