Welcome!

Machine Learning Authors: Elizabeth White, Progress Blog, Pat Romanski, Liz McMillan, Kevin Jackson

Related Topics: Machine Learning

Machine Learning : Article

A Simple Streaming AJAX App with OpenAjax Hub, TIBCO GI, and DWR 2.0

Pushing AJAX into High Gear

Follow along and implement the real-time streaming AJAX system in Figure 1 using two different AJAX toolkits and the OpenAjax Hub.

Requirements
The requirements for this solution are straightforward. For this application we need a ready-made data grid control that will display changes in prices to stocks when those changes occur. A nice-to-have would be visual indicators in the GUI that show when a cell value in the grid is increasing or decreasing...and, of course, we want to deploy this to just a standard Web browser, so we also must do this without any reliance on plug-ins, applets, or Active-X controls. (Thanks goodness this is an AJAX article!) Figure 1 shows the basic design that could be styled more at a later date. In addition we'll want to add more AJAX controls to this page that can tap the same streaming stock data for other calculations and visuals, such as charts or portfolio totals. For now, we'll keep it simple.

Architectural Design
We don't have to build the above system from scratch, and can instead leverage readily available, reusable AJAX parts to get the job done quickly; the architectural strategy is to use AJAX pieces and parts that can work together. At the core of the system in Figure 2 is the OpenAjax Hub (see the OpenAjax Hub for Interop sidebar). We'll use the OAA Hub as a central publish/subscribe bus to which we can publish the live stock data so that the data grid and the future visual controls and functions can listen for those events and messages.

Resources
Publish/Subscribe Core
For our publish/subscribe core we'll use the OpenAjax Hub, an open source project implementing the evolving OpenAjax Alliance Interoperability Working Group specifications. Start at HYPERLINK "http://www.openajax.org" http://www.openajax.org and follow the links to the sourceforge.net project from there.

Ready-Made GUI Controls
For the GUI controls we'll leverage those from TIBCO General Interface, an open source AJAX project that currently provides ready-made AJAX controls for GUI, data, and communications in addition to visual tools for rapid AJAX application development, unit and functional testing, and AJAX debugging.

Real-Time Communications
For our real-time data, we'll use DWR 2.0, the just-released next version of Direct Web Remoting (DWR), an open source project that enables you to remote Java objects through JavaScript in the browser and now vice versa through its "Reverse AJAX" capabilities for real-time remote control of JavaScript objects in the browser via Java objects on the server across a persistent HTTP connection (a.k.a "Comet").

Project Source Code
You can quickly grab a copy of this project and all its parts from the 2.x release of DWR at http://getahead.org/dwr. Once you've installed DWR, check out the General Interface demo. Those who want to extend the GUI and add more controls should also download TIBCO General Interface from http://developer.tibco.com/gi. Note that the OpenAjax.js file that ships with the project in the DWR download is an older, 46 kb version of the OpenAjax Hub. The latest version of the OpenAjax Hub, which now also implements a savvy topic-based event naming scheme over the basic pub/sub capability, is currently under 2 kb (yes two kilobytes - that's not a typo).

Implementation
The <dwr>/gi/index.html file loads up the OpenAjax.js file, the needed DWR libraries, and some application specific files in the head of the HTML page.

The body of the page includes a div that loads the TIBCO GI library.

<div style="width:100%; height:220px;">
    <script
       type="text/javascript"
       src="JSX/js/JSX30.js"
       jsxapppath="gidemo" jsxlt="true"> </script>
</div>

The jsxapppath="gidemo" loads the GI project in /gidemo and in turn renders the GUI component declaration: gidemo/components/appCanvas.xml. Once these are loaded, GI's project init function is called:

function giLoaded() {
    OpenAjax.subscribe("gidemo", "corporation", objectPublished);
    dwr.engine.setActiveReverseAjax(true);
}

This subscribes to the OpenAjax Hub listening for publications to the 'gidemo' + 'corporation' topic. When a publish happens, the objectPublished function is called. The last line turns DWR's Reverse AJAX on so that the data can flow from the server to the client without polling or waiting for the GI application running at the client to request an update from the server. The objectPublished function looks like this:

function objectPublished(prefix, name, handlerData, corporation) {
    var matrix = giApp.getJSXByName("matrix");
    var inserted = matrix.getRecordNode(corporation.jsxid);
    matrix.insertRecord(corporation, null, inserted == null);
    matrix.repaintData();
}

This simply takes the published data and inserts it into the GI matrix component. Each column of the matrix component is bound to a property of the corporation JavaScript object. The matrix control, its columns and bindings were configured using TIBCO GI's visual tools: TIBCO General Interface Builder.

There are a number of possible repaint strategies, including the simplest of them all: matrix.repaintData(); as shown above. However, to meet our requirements above, in the source below we've implemented a more sophisticated approach that enables both incremental painting of updated rows and cell highlighting.

Instead of matrix.repaintData(); we've used this:

...
// There are many ways to get a table to repaint.
// One easy way is to ask it to repaint:
// matrix.repaintData();

// But we are going for a fancy option that does highlighting
   for (var property in corporation) {
     if (property != "jsxid") {
       var ox = matrix.getContentElement(corporation.jsxid, property);
       if (ox) {
         var current = ox.innerHTML;
         if (current != "" + corporation[property]) {
           ox.style.backgroundColor = "#FDE4EB";
           var callback = function(ele) {
           return function() { ele.style.backgroundColor = "#FFFFFF"; };
         }(ox);
         setTimeout(callback, 1000);
         ox.innerHTML = corporation[property];
       }
     }
   }
}
...

More Stories By Kevin Hakman

Kevin Hakman is Director of Evangelism for Aptana, Inc., makers of the popular Aptana Studio web development suite. As early as 2001 Kevin was pioneering AJAX web applications via General Interface, a full AJAX development and GUI toolkit which he co-founded, and later sold to TIBCO Software in 2004. Kevin is a contributor to AJAXWorld Magazine, and has spoken at numerous AJAX industry events.

More Stories By Joe Walker

Joe Walker is the creator of DWR and president of GetAhead Ltd, UK. He has been working with Java Web applications for many years for a wide variety of clients. Before DWR he was a regular speaker, including introducing Java to the Motorola Software Symposium in 1996.

Comments (1) View Comments

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.


Most Recent Comments
AJAX News Desk 07/24/07 05:21:04 PM EDT

Follow along and implement the real-time streaming AJAX system in Figure 1 using two different AJAX toolkits and the OpenAjax Hub. We don't have to build the above system from scratch, and can instead leverage readily available, reusable AJAX parts to get the job done quickly; the architectural strategy is to use AJAX pieces and parts that can work together. At the core of the system in Figure 2 is the OpenAjax Hub (see the OpenAjax Hub for Interop sidebar). We'll use the OAA Hub as a central publish/subscribe bus to which we can publish the live stock data so that the data grid and the future visual controls and functions can listen for those events and messages.

@CloudExpo Stories
Many organizations adopt DevOps to reduce cycle times and deliver software faster; some take on DevOps to drive higher quality and better end-user experience; others look to DevOps for a clearer line-of-sight to customers to drive better business impacts. In truth, these three foundations go together. In this power panel at @DevOpsSummit 21st Cloud Expo, moderated by DevOps Conference Co-Chair Andi Mann, industry experts will discuss how leading organizations build application success from all...
SYS-CON Events announced today that SIGMA Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. uLaser flow inspection device from the Japanese top share to Global Standard! Then, make the best use of data to flip to next page. For more information, visit http://www.sigma-k.co.jp/en/.
SYS-CON Events announced today that Daiya Industry will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Daiya Industry specializes in orthotic support systems and assistive devices with pneumatic artificial muscles in order to contribute to an extended healthy life expectancy. For more information, please visit https://www.daiyak...
The last two years has seen discussions about cloud computing evolve from the public / private / hybrid split to the reality that most enterprises will be creating a complex, multi-cloud strategy. Companies are wary of committing all of their resources to a single cloud, and instead are choosing to spread the risk – and the benefits – of cloud computing across multiple providers and internal infrastructures, as they follow their business needs. Will this approach be successful? How large is the ...
Your clients expect transactions to never fail, cloud access to be fast and always on, and their data to be protected - no exceptions. Hear about how Secure Service Container (SSC), an IBM-exclusive open technology, enables secure building and hosting of next-generation applications, both cloud and on-premises. SSC protects the full stack from external and insider threats, allows automatic encryption of data in-flight and at-rest, and is tamper-resistant during installation and runtime – with no...
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
SYS-CON Events announced today that B2Cloud will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. B2Cloud specializes in IoT devices for preventive and predictive maintenance in any kind of equipment retrieving data like Energy consumption, working time, temperature, humidity, pressure, etc.
SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
SYS-CON Events announced today that NetApp has been named “Bronze Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. NetApp is the data authority for hybrid cloud. NetApp provides a full range of hybrid cloud data services that simplify management of applications and data across cloud and on-premises environments to accelerate digital transformation. Together with their partners, NetApp em...
SYS-CON Events announced today that Interface Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Interface Corporation is a company developing, manufacturing and marketing high quality and wide variety of industrial computers and interface modules such as PCIs and PCI express. For more information, visit http://www.i...
SYS-CON Events announced today that Mobile Create USA will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Mobile Create USA Inc. is an MVNO-based business model that uses portable communication devices and cellular-based infrastructure in the development, sales, operation and mobile communications systems incorporating GPS capabi...
SYS-CON Events announced today that Nihon Micron will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Nihon Micron Co., Ltd. strives for technological innovation to establish high-density, high-precision processing technology for providing printed circuit board and metal mount RFID tags used for communication devices. For more inf...
SYS-CON Events announced today that N3N will exhibit at SYS-CON's @ThingsExpo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. N3N’s solutions increase the effectiveness of operations and control centers, increase the value of IoT investments, and facilitate real-time operational decision making. N3N enables operations teams with a four dimensional digital “big board” that consolidates real-time live video feeds alongside IoT sensor data a...
While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, will discuss how data centers of the future will be managed, how th...
Enterprises are moving to the cloud faster than most of us in security expected. CIOs are going from 0 to 100 in cloud adoption and leaving security teams in the dust. Once cloud is part of an enterprise stack, it’s unclear who has responsibility for the protection of applications, services, and data. When cloud breaches occur, whether active compromise or a publicly accessible database, the blame must fall on both service providers and users. In his session at 21st Cloud Expo, Ben Johnson, C...
SYS-CON Events announced today that Suzuki Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Suzuki Inc. is a semiconductor-related business, including sales of consuming parts, parts repair, and maintenance for semiconductor manufacturing machines, etc. It is also a health care business providing experimental research for...
SYS-CON Events announced today that Ryobi Systems will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Ryobi Systems Co., Ltd., as an information service company, specialized in business support for local governments and medical industry. We are challenging to achive the precision farming with AI. For more information, visit http:...
21st International Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Me...
Today companies are looking to achieve cloud-first digital agility to reduce time-to-market, optimize utilization of resources, and rapidly deliver disruptive business solutions. However, leveraging the benefits of cloud deployments can be complicated for companies with extensive legacy computing environments. In his session at 21st Cloud Expo, Craig Sproule, founder and CEO of Metavine, will outline the challenges enterprises face in migrating legacy solutions to the cloud. He will also prese...
SYS-CON Events announced today that MIRAI Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MIRAI Inc. are IT consultants from the public sector whose mission is to solve social issues by technology and innovation and to create a meaningful future for people.