Joe Lennon

I’m currently working on a Web application project that is primarily coded in JavaScript. As part of the project however, I needed to use a Flex component for part of the application. I would also need a series of components (search boxes, trees and grids) to interact with this component. At first, it seemed to make sense to do all of this in Flex. However, when it comes to client-side development, we’re primarily a JavaScript shop, and would prefer to keep the amount of Flex we write to a minimum. Also, from a styling perspective, our existing JavaScript components would fit in better with our overall application, so it made much more sense for us to use them rather than Flex’s trees, grids and so on. Of course, this raised a problem – how do we communicate between JavaScript and Flex?

Fortunately, this is actually very straightforward. To prove the concept, I decided to write up a basic application that would allow you to pass messages between Flex and JavaScript components and output them on the screen. Here is a screenshot of this application in action (click for a larger image):

Sample Project in action

So on the left hand side of the application, there is a standard HTML input field, button element and a read-only textarea element. The input field will allow the user to write a message to be passed to the Flex application, which gets sent when the user clicks the “Send to Flex” button. The textarea field will be updated with any messages that are sent to JavaScript by Flex. On the right-hand-side, you have the same thing, but this time it will allow you to enter a message to send to JavaScript from Flex, and has an area where messages sent by JavaScript to Flex will be shown.

Let’s walk through how I did this. It’s worth pointing out at this point that I used Flash Builder 4 and the Flex 4 SDK to create this application. If you have a different setup, you may need to change your code to suit your version.

In Flash Builder, create a new Flex Project, and call it TestJSFlex. Let’s start off with the Flex application interface. You can use the Design view if you wish, but for a simple application like this, it’s fairly straightforward to create everything in code. Just before the closing </s:Application> tag in your source code, add the following three lines of code:

<s:TextInput x="2" y="2" width="310" id="flexInput"/>
<s:Button x="320" y="3" width="100" label="Send to JS" />
<s:TextArea x="2" y="32" width="416" height="200" id="flexMessages" editable="false"/>

While you’re at it, add the following attributes to your opening <s:Application> element:

width="440" height="255"

That’s our Flex application user interface done. Pretty simple, huh? Next, let’s change the HTML template that Flash Builder produces to add some basic HTML elements for the JavaScript side of our application to use. In “Package Explorer” (usually at the top left hand side of Flash Builder), your project folder should contain a few subfolders: src, Flex 4.0, bin-debug, html-template and libs. Expand the html-template folder and you should see a file named index.template.html. Right-click this file, and from the context menu select “Open With -> Text Editor”. The file should now open in a new editor tab in the main part of the IDE. In this file, locate the following section of HTML code:

<div id="flashContent">
    <p>
        To view this page ensure that Adobe Flash Player version
        ${version_major}.${version_minor}.${version_revision} or greater is installed.
    </p>
    <script type="text/javascript">
        var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
        document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
              + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
    </script>
</div>

This is basically the element where the Flex application will appear on the HTML page. We’re going to wrap it in a <div> container and add a section before it with a HTML form:

<div id="container">
    <h1>Flex and JavaScript</h1>
    <div class="section">
        <h2>JavaScript:</h2>
        <input type="text" id="js_value" />
        <input type="button" id="js_button" value="Send to Flex" />
        <br />
        <textarea id="js_messages" readonly></textarea>
    </div>
    <div class="section clearfix">
        <h2>Flex:</h2>
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
                ${version_major}.${version_minor}.${version_revision} or greater is installed.
            </p>
            <script type="text/javascript">
                var pageHost = ((document.location.protocol == "https:") ? "https://" :    "http://");
                document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                     + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
           </script>
       </div>
    </div>
</div>

In the code above, we have added a few HTML form elements: a text field with the ID js_value, a button with the ID js_button and a read-only textarea with the ID js_messages. To make the whole thing look right, we’re going to add some CSS properties which will define the layout and size of the elements. In index.template.html, locate the CSS section of the code near the top of the file, which by default should contain:

<style type="text/css" media="screen">
    html, body { height:100%; }
    body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
    #container { width: 900px; margin: 0px auto; text-align: left; }
    #flashContent { display:none; }
</style>

Modify this so that it contains:

<style type="text/css" media="screen">
    html, body { height:100%; }
    body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
    #container { width: 900px; margin: 0px auto; text-align: left; }
    #flashContent { display:none; }
    h1, h2 { font-family: Helvetica, Arial, sans-serif; }
    h2 { margin-top: 0px; }
    .section { width: 450px; float: left; }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    #js_value { width: 310px; }
    #js_button { width: 100px; }
    #js_messages { width: 416px; height: 195px; margin-top: 8px; }
</style>

The CSS properties should be fairly self-explanatory. Basically, we have a container div 900 pixels wide, with two 450px sections inside it that appear side by side (using the float property), with a clearfix put in place so everything looks right in older browsers (just a note – I haven’t checked if this looks OK in anything other than Firefox 3.6, so don’t flame me if it doesn’t). Finally, we add some widths and heights to the form fields so they match up nicely with the Flex components.

That’s the UI section of the application taken care of. Next, let’s actually make Flex and JavaScript talk to each other. First, let’s get Flex talking to JavaScript. In the TestJSFlex.mxml file, just above where you entered the <s:TextInput> and other components a while back, add the following code:

<fx:Script>
    <![CDATA[
        public function sendToJS():void {
            ExternalInterface.call("receiveFromFlex", flexInput.text);
        }
    ]]>
</fx:Script>

This script block simply defines a single function named sendToJS. This function uses the ExternalInterface.call function to call a JavaScript function. The first parameter here is the name of the JavaScript function you want to call, in our case receiveFromFlex, and this is followed by any parameters you want to pass to JavaScript. Here, we have simply passed the current value of the text property of our text box with the id flexInput. Next, find the following line of code near the bottom of TestJSFlex.mxml:

<s:Button x="320" y="3" width="100" label="Send to JS" />

Let’s add a click event handler to this button, which will call the sendToJS function any time a user presses the button:

<s:Button x="320" y="3" width="100" label="Send to JS" click="sendToJS()" />

That’s everything that we need to do on the Flex side to call a JavaScript function. Of course, this is pretty much useless unless we actually declare the JavaScript function it is trying to call, so let’s hop over to index.template.html and create that now. Just before the closing </head> tag in this file, add the following code:

<script type="text/javascript">
    function receiveFromFlex(str) {
        var msgs = document.getElementById("js_messages");
        msgs.value += 'Flex says: '+str+'\n';
    }
</script>

This function simply accepts a string value as a parameter, and appends it (followed by a new line) to the element with the ID js_messages (the textarea element). Save all your files and run the application by pressing the green Play/Run button in the Flash Builder toolbar. At this point, you should be able to enter a message in the input box on the right hand side (the Flex side) and hit “Send to JS”. This message should then appear on the left hand side. That was pretty easy, huh? Ok, now all that’s left for us to do is implement the reverse scenario – sending messages from JavaScript to Flex.

In the previous section, you created a <script> block in the index.template.html file. Inside this block, just below the receiveFromFlex function, add the following code:

function sendToFlex() {
    var flexApp = document.getElementById("${application}");
    flexApp.sendToFlex(document.getElementById("js_value").value);
}

window.onload = function() {
    var btn = document.getElementById("js_button");
    btn.onclick = sendToFlex;
}

The first function, sendToFlex, gets a handle to the Flex application object using document.getElementById. You’ll notice that the ${application} template variable is used. This is recommended so that if you change the name of your Flex application, you won’t need to change the value in your template file. The function then calls the sendToFlex function in the Flex application object. Finally, we attach this function as an event handler to the HTML button element with the ID js_button. That’s it on the JavaScript side of things. Save index.template.html and jump back to TestJSFlex.mxml. Now, let’s add the code necessary to handle this on the Flex side of things. Inside the <fx:Script> block, below the sendToJS function, add the following two functions:

public function initApp():void {
    ExternalInterface.addCallback("sendToFlex", receiveFromJS);
}

public function receiveFromJS(str:String):void {
    flexMessages.text += 'JS says: '+str+'\n';
}

The first function, initApp, uses the ExternalInterface.addCallback function to map a JavaScript function to a Flex function. Here, we tell the sendToFlex JavaScript function callback to execute the Flex function named receiveFromJS. This function accepts a String parameter and appends it to the <s:TextArea> element followed by a newline. The final piece of the puzzle is to wire up the initApp function to be called when the Flex application has finished loading. In your <s:Application> element, add the attribute

creationComplete="initApp()"

and you’re done! You can now run the application and enter messages in the HTML input field, which will appear in the Flex message box when you hit “Send to Flex”. Easy as pie! For reference purposes, here are the full listings for the two source files we’ve worked with in this post.

TestJSFlex.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="440" height="255"
           creationComplete="initApp()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            public function sendToJS():void {
                ExternalInterface.call("receiveFromFlex", flexInput.text);
            }

            public function initApp():void {
                ExternalInterface.addCallback("sendToFlex", receiveFromJS);
            }

            public function receiveFromJS(str:String):void {
                flexMessages.text += 'JS says: '+str+'\n';
            }
        ]]>
    </fx:Script>
    <s:TextInput x="2" y="2" width="310" id="flexInput"/>
    <s:Button x="320" y="3" width="100" label="Send to JS" click="sendToJS()" />
    <s:TextArea x="2" y="32" width="416" height="200" id="flexMessages" editable="false"/>
</s:Application>

index.template.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <!--
    Smart developers always View Source.

    This application was built using Adobe Flex, an open source framework
    for building rich Internet applications that get delivered via the
    Flash Player or to desktops via Adobe AIR.

    Learn more about Flex at http://flex.org
    // -->
    <head>
        <title>${title}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
             the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
             the percentage of the height of its parent container, which has to be set explicitly.  Initially,
             don't display flashContent div so it won't show if JavaScript disabled.
        -->
        <style type="text/css" media="screen">
            html, body { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
            #container { width: 900px; margin: 0px auto; text-align: left; }
            #flashContent { display:none; }
            h1, h2 { font-family: Helvetica, Arial, sans-serif; }
            h2 { margin-top: 0px; }
            .section { width: 450px; float: left; }
            .clearfix:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            #js_value { width: 310px; }
            #js_button { width: 100px; }
            #js_messages { width: 416px; height: 195px; margin-top: 8px; }
        </style>

        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section ${useBrowserHistory}>
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <!${useBrowserHistory} END Browser History required section -->

        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
            var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "${expressInstallSwf}";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "${bgcolor}";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "${application}";
            attributes.name = "${application}";
            attributes.align = "middle";
            swfobject.embedSWF(
                "${swf}.swf", "flashContent",
                "${width}", "${height}",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
            <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>

        <script type="text/javascript">
            function receiveFromFlex(str) {
                var msgs = document.getElementById("js_messages");
                msgs.value += 'Flex says: '+str+'\n';
            }

            function sendToFlex() {
                var flexApp = document.getElementById("${application}");
                flexApp.sendToFlex(document.getElementById("js_value").value);
            }

            window.onload = function() {
                var btn = document.getElementById("js_button");
                btn.onclick = sendToFlex;
            }
        </script>
    </head>
    <body>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
              JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
              when JavaScript is disabled.
        -->
        <div id="container">
            <h1>Flex and JavaScript</h1>
            <div class="section">
                <h2>JavaScript:</h2>
                <input type="text" id="js_value" />
                <input type="button" id="js_button" value="Send to Flex" />
                <br />
                <textarea id="js_messages" readonly></textarea>
            </div>
            <div class="section clearfix">
                <h2>Flex:</h2>
                <div id="flashContent">
                    <p>
                        To view this page ensure that Adobe Flash Player version
                        ${version_major}.${version_minor}.${version_revision} or greater is installed.
                    </p>
                    <script type="text/javascript">
                        var pageHost = ((document.location.protocol == "https:") ? "https://" :    "http://");
                        document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
                    </script>
                </div>
            </div>
        </div>

        <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
                <param name="movie" value="${swf}.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="${bgcolor}" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="${bgcolor}" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p>
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        ${version_major}.${version_minor}.${version_revision} or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>
    </body>
</html>

If you’d prefer to just take the sample Flex project, you can download a zip file of it below:

TestJSFlex.zip (2,286 KB)

I was recently asked by someone to give them some help with connecting to a MySQL database from Adobe Flex 4. In Flex Builder 3, there was a feature which allowed you to create a Flex application based on the tables in a MySQL database, taking care of the PHP code in the middle for you. In Adobe FlashBuilder 4 Beta 2 (which is basically the new version of Flex Builder), this feature does not exist, so you’re kind of left on your own.

Thankfully, on the Adobe Labs website there are a set of good tutorials on getting up and running with Flex connecting to a MySQL database via PHP using Zend AMF (Action Message Format) remoting. The following is a PDF document including all of those tutorials:

• Learn to Use Flash Builder 4 and Flex 4

Working with data stored in a database management system such as MySQL is very easy if you develop applications in PHP, ColdFusion or Java. But, what if you use a more obscure language such as PL/SQL? You’re not completely out of luck, as Flex can also consume any HTTP service that responds with XML or JSON data. In this post, you will create a PL/SQL web procedure that outputs JSON data, and then you will create a Flex application that displays this data in a DataGrid component.

In order to follow this guide, you will need the following:

• An Oracle database, Oracle Database 10g Express Edition (XE) will do fine.
• A suitable PL/SQL web deployment environment, with a DAD (Document Access Descriptor) configured. This can be either an Oracle HTTP Server which uses mod_plsql, the Apache HTTP Server with the open source mod_plsql variant mod_owa, or even Oracle XE’s APEX web server, with a DAD set up using the DBMS_EPG package. Basically you need to be able to access a PL/SQL package via a URL. If none of this makes sense to you, you probably don’t need this guide!
• Adobe FlashBuilder 4 Beta 2

The first thing you need to do is create the PL/SQL stored procedure that will be used to return the JSON data that we will use later to fill the Flex DataGrid component. This procedure uses a cursor to get a list of the different object types present in the Oracle database, and how many objects of each type is currently stored. The procedure then loops through this cursor and produces JSON output.

create or replace procedure json_object_types as
    cursor get_data is
        select initcap(lower(object_type)) object_type, count(*) as object_count
        from all_objects
        group by object_type;

    i       number := 0;
begin
    htp.init;
    owa_util.mime_header('application/json', false);
    owa_util.http_header_close;
    htp.p('[');
    for obj_type in get_data loop
        i := i + 1;
        if i = 1 then
            htp.p('{');
        else
            htp.p(', {');
        end if;
        htp.p('"object_type": "'||obj_type.object_type||'",');
        htp.p('"object_count": '||obj_type.object_count);
        htp.p('}');
    end loop;
    htp.p(']');
end json_object_types;

This code should produce an output like the following. Note that I have formatted the JSON code to make it somewhat easier to read, and also the counts shown here will most likely differ from the values returned for your own database.

[
    { "object_type": "Consumer Group", "object_count": 2 },
    { "object_type": "Sequence", "object_count": 7 },
    { "object_type": "Schedule", "object_count": 1 },
    { "object_type": "Procedure", "object_count": 24 },
    { "object_type": "Operator", "object_count": 45 },
    { "object_type": "Window", "object_count": 2 },
    { "object_type": "Package", "object_count": 247 },
    { "object_type": "Library", "object_count": 15 },
    { "object_type": "Package Body", "object_count": 1 },
    { "object_type": "Xml Schema", "object_count": 13 },
    { "object_type": "Job Class", "object_count": 1 },
    { "object_type": "Table", "object_count": 70 },
    { "object_type": "Synonym", "object_count": 2765 },
    { "object_type": "View", "object_count": 1166 },
    { "object_type": "Function", "object_count": 159 },
    { "object_type": "Window Group", "object_count": 1 },
    { "object_type": "Indextype", "object_count": 8 },
    { "object_type": "Type", "object_count": 767 },
    { "object_type": "Evaluation Context", "object_count": 1 }
]

Be sure to note the URL you use to access this procedure – in my case it was http://localhost:8080/embosa/json_object_types – where embosa is the DAD name I have configured on my web server.

With the PL/SQL procedure created, we can now create a Flex project in Adobe FlashBuilder that will consume the JSON data that the procedure produces. Fire up FlashBuilder and create a new Flex project (File -> New Flex Project). In the dialog box for “New Flex Project”, enter “PlSqlService” as the Project name, make sure that “Web” is selected under Application type and that “None/Other” is selected for Application server type. Press the Finish button to create the project.

The next thing you need to do is connect to the PL/SQL procedure you created earlier. To do this, open Data -> Connect to Data/Service. This will open a dialog which gives you a number of service type options – BlazeDS, ColdFusion, HTTP, LCDS, PHP and Web Service. Select the HTTP option and press Next.

You will now be required to configure the HTTP service. To do this, you need to define the operation for the service and give the service a name. Under Operations, change the Operation name to “getObjectTypes”, keep “GET” selected as the Method, and enter the URL for your PL/SQL procedure that you earlier noted in the URL field. Then, under Service details, give the Service a name “PlSqlService”. The Service package will be created automatically based on your service name. Press “Finish” to create the connection.

In the Data/Services window you should now see an entry named PlSqlService with the function getObjectTypes() listed. Right-click on the getObjectTypes() item in this window, and select “Configure Return Type”. In the dialog box, make sure that “Auto-detect the return type from sample data” is selected and press the Next button. On the next screen, just accept the default option (“Enter parameter values and call the operation”) and press the Next button again. You should now see that the Return Type was detected successfully. Under Data type, choose to enter a name to create a new data type and enter the value “ObjType” in the textbox. You’ll notice that the object_type and object_count properties have been automatically detected and their correct types (String and int, respectively) have been picked up by FlashBuilder. You don’t need to change anything else here, so just press the Finish button to return to the main FlashBuilder window.

The file PlSqlService.mxml is open – but probably in “Source” view. Switch to “Design” mode, and from the Components window, drag a DataGrid from the controls list to the empty canvas area. By default it should have three columns named Column 1, Column 2 and Column 3. Right-click on the DataGrid and select the option “Bind to Data” from the context menu. This will open a dialog box for binding the DataGrid control to a data service. The option “New service call” should be selected by default, and you’ll notice that the “PlSqlService” and “getObjectTypes()” service and operation have been automatically selected. Accept these defaults and press the OK button to bind the control to this data.

You’ll notice that the DataGrid has changed to only show two columns: object_type and object_count. Let’s change the Column headings so they look a bit better. With the DataGrid selected, click the “Configure Columns” button in the Properties window. In here you can select each column, and change the “Header text” property to modify the text that displays in each column’s header. Change the text for the object_type column to “Type” and for the object_count column to “Count”. Press the OK button when you are finished.

Save your work (File->Save or Ctrl+S) and then run the project by pressing the green Run button on the FlashBuilder toolbar, or by selecting Run->Run PlSqlService. Your default Web browser will launch and you will see a page with a DataGrid, populated with the data from the Oracle database. The end result looks like the screenshot below.

The Final Result

The DataGrid control is simple but powerful, and allows you to adjust the width of each columns and sort the data by clicking on the column headers.

So there you have it, a Flex DataGrid connecting to an Oracle database using a PL/SQL web procedure – if you have any questions about the techniques covered in this guide, feel free to leave a comment.

In Part 2 of my developerWorks article series on creating a microblogging service, I show you how to connect to the Web services created in Part 1 from a Flex application. This application allows you to post new updates to your microblog database and see a list of previous updates.

The pureXML® capabilities of IBM DB2® allow you to store XML natively in a database without modification, while Adobe® Flex® applications can read XML directly and populate Flex user interfaces. In this three-part article series, you will create a microblogging application that takes advantage of pureXML, Web services, and Adobe Flex; and even allows you to publish your microblogging updates on Twitter. In Part 1 of the series, you learned about Web Services and how they are enabled using DB2 pureXML as you created the microblog database and tested it. In this article, Part 2 of the series, you will tap into Adobe Flex and ActionScript® to create the user interface of the application.

Read the article at http://www.ibm.com/developerworks/xml/library/x-db2mblog2/

In the first part of this three-part series on IBM DB2 pureXML, I show you how to get started with pureXML on a DB2 Express-C 9.5 database. You learn how to create and insert XML data into a relational table, and how to query that data using SQL, SQL/XML and XQuery. Next, you learn how to expose this data to applications using Web Services in IBM Data Studio. You create a database procedure that will insert data into the database, and this is also exposed as a Web Service. In Parts 2 and 3 you will learn how to take all of this and harness it in your applications, first in an Adobe Flex application for posting status updates, and then publishing profile badges an RSS feeds using PHP. You will also learn how to push your updates to Twitter using the Twitter API.

The pureXML® capabilities of IBM DB2® allow you to store XML natively in a database without modification, while Adobe Flex applications can read XML directly and populate Flex user interfaces. In this three-part article series, you will create a microblogging application that takes advantage of pureXML, Web services, and Adobe Flex; and even allows you to publish your microblogging updates on Twitter.

Read the article at http://www.ibm.com/developerworks/xml/library/x-db2mblog1/index.html

In November 2008, a tutorial I wrote titled “Implement a Facebook photo album using the Flex SDK” was published on IBM’s developerWorks website. The tutorial begins by introducing the Facebook platform and explaining how a Facebook application is created. It then moves on to the open source Flex SDK and the MXML markup language and ActionScript scripting language that are used to develop Flex applications. At this point, a simple Flex application is created to introduce the reader to the development and deployment of Flex applications. After this, the tutorial shows the user how to create a feature-rich photo slideshow (with transitions and controls) that uses the reader’s Facebook photos and is deployed to their Facebook profile.

The following is the description of the tutorial on the IBM developerWorks website itself:

Adobe® has released the free, open source Flex SDK framework to enable developers to create Rich Internet Applications (RIAs). The Flex framework provides you with a method of creating cross-browser, cross-platform Web applications that is quick and simple. Flex applications run in the Flash player, which is installed on the majority of Internet-connected computers, but Flex also provides you with an object-oriented user interface framework similar to Javaâ„¢ Swing. In this tutorial, develop a Facebook application in Adobe Flex that displays a slideshow of a user’s Facebook photo albums. The Facebook application will contain a profile box listing all of the user’s photo albums, each a link to a Flex slideshow of that album. The Flex application will use the Facebook REST API to fetch the photos of the selected Facebook album and dynamically generate the slideshow.

Read the tutorial at http://www.ibm.com/developerworks/edu/wa-dw-wa-facebookflex.html