Library Articles
StreamBase Integration with Adobe Flex
Author: Jason Garbis, StreamBase Systems
Date: 01-October-2007
Applicable To: StreamBase 5.0
Introduction
The integration of StreamBase 5 with Adobe® Flex™ 2 provides StreamBase customers with a first-class human-oriented interactive runtime interface. This capability is particularly attractive to StreamBase users, since StreamBase applications typically handle large volumes of data, and data visualization tools such as Flex are designed to distill large volumes of data into a form understandable by humans.
The StreamBase adapter to Adobe Flex is made up of two components - One is the embedded StreamBase Flex adapter that runs within a StreamBase application, and the other is a Flex ActionScript client library, which is compiled into the Adobe Flex client application.
Adobe Flex provides numerous GUI controls with which to visualize data, and StreamBase 5 includes a sample application illustrating some of these in action. The sample app displays simulated IP network traffic, using various graphs and GUI controls within the Flex Client. The sample also illustrates the two-way nature of this adapter, letting you control application behavior from the Flex GUI.
Adobe Flex Builder is available both as a set of command-line tools, and as an Eclipse plug-in. If you’re using the latter, you can take advantage of the fact that StreamBase Studio is also built as a set of Eclipse plug-ins, letting you design and run both parts of the application in one, integrated environment. The Flex application communicates with the StreamBase Server over a network connection, facilitating distributed deployment of these components.
This remainder of this article walks you through a very simple example using StreamBase and the Flex adapter.
The Adobe Flex Adapter
The Flex adapter is a standard embedded Output adapter, which is dragged and dropped onto the palette and then configured. This adapter has four main settings:
-
the set of application streams to be made available to the Flex application
-
the port on which it listens for connections from the Flex client
-
optionally, a crossdomain policy file (name of an optional cross-domain policy file used to enforce Flash Player security rules))
Each Stream Name configured above controls which internal StreamBase streams are exposed by the adapter to Flex clients. As names are added to this table, additional input ports appear on the adapter icon within StreamBase Studio, in the order in which they are listed. Flex clients subscribe to streams using the names entered in the value column inthis table. In the example shown above, the adapter only forwards tuples from one input stream to the Flex client.
The Listen Port controls the port on which the adapter listens for connections from remote Flex clients. The StreamBase ActionScript library, which gets compiled into the Flex clients, opens a connection to the remote StreamBase server to receive output data and send control data back into the application.
You can optionally specify a cross-domain policy file, which is used by Flex to manage access from clients to domains other than that from which it loaded the Flex application (.swf) file. For further details on this file, reference the Adobe documentation.
The adapter also offers debug mode, which, when selected, displays diagnostic information about connections and messages received by the adapter.
Note that the StreamBase Flex Adapter is both an output adapter to the Flex client and an input adapter from the Flex client, receiving control messages back into the StreamBase application. For this reason, the Flex Adapter icon has a connections for both its input and output ports. The output port delivers tuples created by the Flex client application back into the StreamBase application for further processing.
A Simple Application – Displaying StreamBase Output
Below is a very simple StreamBase application, illustrating the use of the Flex adapter.
Processing in this application is initiated by a simple metronome, which outputs a tick every second. This tick feeds into a Map, which generates a random integer in a given range (initially, 0 to 9). This random integer is the sole field sent to the adapter, which in turn sends this to the Flex client. The output schema for this Map operator is simply a single field, randomNumber, of type integer.
The FlexOutputAdapter is configured as shown below:
The adapter can have any number of streams feeding into it - each of which is distinguished by its name (in the Value field) in the Flex client. The adapter's Listen Port must match the port number to which the Flex client tries to connect (see below), and the Flash security policy may require an crossdomain.xml file (which permits clients to connect to hosts other than those from which they downloaded the flash file).
Ignoring the FlexClientSubmittedData stream for the moment, if we run this application, and run the associated simpleflex.swf client, we should see new numbers output every second, and see our counter incrementing:
Note: If you’re having problems running the .swf file, check the Adobe Website; you may need to install a newer version of the Flash Player.
Analyzing the Flash Client
The Flash client is made up of two files, simpleflex.mxml and simpleflex.as. The .mxml file controls the layout of the gui controls, and the .as file is the ActionScript code that provides the actual functionality. While this article is not an introduction to Flex development, we will explain the StreamBase-specific components. Both files are linked below (in related topics). The .mxml layout file uses plain vanilla Flex controls; there is nothing StreamBase-specific about this file.
The ActionScript file contains a few StreamBase-specific elements. First, the client must instantiate a StreamBase StreamReader object, specifying the host on which the StreamBase application is running, the port on which the Flex adapter is configured to listen, the name of the Stream for this StreamReader instance to obtain tuples from, and three callback functions.
private var simpleReader:StreamReader =
new StreamReader("localhost",// host where SB server is running
20000, // port on which the Flex adapter is listening
"OneSecRandomOutput", // Stream name for this Reader
simpleTupleReceived, // Callback fn when a tuple is received
simpleConnectionOpened, // Callback fn when connection is opened
simpleConnectionClosed); // Callback fn when connection is closed
For this application we can ignore the simpleConnectionOpened and simpleConnectionClosed functions; in a more complex app they might perform some kind of initialization. Of importance to us is the simpleTupleReceived function, which gets called each time a tuple is received from the StreamBase server:
private function simpleTupleReceived(tuple:Object):void {
OUTPUT_COUNT = OUTPUT_COUNT + 1;
TUPLE_LASTVAL = tuple.randomNumber;
}
Our implementation of this function simply updates two variables – it increments the counter of tuples we’ve received, and stores the most recent tuple value. Note that fields in the tuple are simply accessed by name. These field names are driven by the schema for the streams fed into the Flex Output Adapter - the matching randomNumber field that we output from our Map operator, above.
Handling Client Input in StreamBase
The Flex application shown above contains a slider control, which is used to adjust the range of random numbers generated by the Map operator. This is included to illustrate how Flex clients can send data back into StreamBase applications. First, we’ll examine how this works in the StreamBase application, then look at it in the Flex client.
Each Flex Output adapter instance includes an output port, which must be configured with the following control schema:
The fields in this schema may be used in any way required by the application, but applications must use this fixed schema. Flex clients send in tuples based on this schema, to which the application can respond.
In our sample application, we’ll simply use the value of contents of field p1 to set the new upper bound on the range of random numbers being generated. We make use of the StreamBase Dynamic Variable feature, which is why we connect the inbound control tuples to an Output stream, FlexClientSubmittedData (recall that dynamic variables are updated from Streams). Here’s a snapshot of the GenerateRandomNumber Map operator’s Dynamic Variable setting:
Sending Client Input from Flex
On the Flex side, the ActionScript to send the new random number range is quite simple:
private function rangeSliderChanged(event:Event):void {
var value:Number = rangeSlider.value;
simpleReader.writeControlCommand({object: "range", action: "set", p1: value});
}
This is the callback function that we registered for the slider; when the slider is moved to a new location, the function is called. We simply call the StreamBase writeControlCommand function, passing in parameters in a field-name:value format. As shown below, changing the slider alters the range of random numbers received.
Summary
The sample application we explored here is simple, yet illustrates the fundamental concepts of bi-directional communication with an Adobe Flex client. While we output a single stream to the Flex client, a StreamBase application can easily output any number of streams to the client. Within the ActionScript, each stream of data is differentiated by its name. We also explored, in a very simple manner, how to send control messages back into the StreamBase applications. Our application only made use of a single integer field, but the input schema contains sufficient richness (with object, action, and parameter fields) to construct a complex client-server interaction model. In addition, our application simply used this control stream to update a dynamic variable; more complex applications could use the incoming tuple to drive other application logic.
Note that each remote Flex client opens its own connection to the StreamBase server; if your application is intended to handle a large number of clients, you may need to consider structuring it so that there aren’t hundreds or thousands of clients connected directly to the StreamBase server.
Related Topics
Application Files for this Sample: simpleflex.zip