Welcome!

Java IoT Authors: Pat Romanski, Elizabeth White, Zakia Bouachraoui, William Schmarzo, Yeshim Deniz

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
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understa...
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...
Apptio fuels digital business transformation. Technology leaders use Apptio's machine learning to analyze and plan their technology spend so they can invest in products that increase the speed of business and deliver innovation. With Apptio, they translate raw costs, utilization, and billing data into business-centric views that help their organization optimize spending, plan strategically, and drive digital strategy that funds growth of the business. Technology leaders can gather instant recomm...
OpsRamp is an enterprise IT operation platform provided by US-based OpsRamp, Inc. It provides SaaS services through support for increasingly complex cloud and hybrid computing environments from system operation to service management. The OpsRamp platform is a SaaS-based, multi-tenant solution that enables enterprise IT organizations and cloud service providers like JBS the flexibility and control they need to manage and monitor today's hybrid, multi-cloud infrastructure, applications, and wor...
The Master of Science in Artificial Intelligence (MSAI) provides a comprehensive framework of theory and practice in the emerging field of AI. The program delivers the foundational knowledge needed to explore both key contextual areas and complex technical applications of AI systems. Curriculum incorporates elements of data science, robotics, and machine learning-enabling you to pursue a holistic and interdisciplinary course of study while preparing for a position in AI research, operations, ...
After years of investments and acquisitions, CloudBlue was created with the goal of building the world's only hyperscale digital platform with an increasingly infinite ecosystem and proven go-to-market services. The result? An unmatched platform that helps customers streamline cloud operations, save time and money, and revolutionize their businesses overnight. Today, the platform operates in more than 45 countries and powers more than 200 of the world's largest cloud marketplaces, managing mo...
Trend Micro Incorporated, a global leader in cybersecurity solutions, helps to make the world safe for exchanging digital information. Our innovative solutions for consumers, businesses, and governments provide layered security for data centers, cloud workloads, networks, and endpoints. All our products work together to seamlessly share threat intelligence and provide a connected threat defense with centralized visibility and investigation, enabling better, faster protection. With more than 6,00...
Tapping into blockchain revolution early enough translates into a substantial business competitiveness advantage. Codete comprehensively develops custom, blockchain-based business solutions, founded on the most advanced cryptographic innovations, and striking a balance point between complexity of the technologies used in quickly-changing stack building, business impact, and cost-effectiveness. Codete researches and provides business consultancy in the field of single most thrilling innovative te...
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...
In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and simple way to introduce Machine Leaning to anyone and everyone. He solved a machine learning problem and demonstrated an easy way to be able to do machine learning without even coding. Raju Shreewastava is the founder of Big Data Trunk (www.BigDataTrunk.com), a Big Data Training and consulting firm with offices in the United States. He previously led the data warehouse/business intelligence and Bi...