Working with Flex Services and BlackBerry Tablet OS SDK for Adobe AIR

If you are an experienced developer, it’s easy to connect your Flex applications to almost everything. You can use REST Style services, remoting (Remote Procedure Call), and Web Services (WSDL/SOAP). Using a server library like BlazeDS you can use messaging (Producer/Consumer) as well.

What about using these methods with an AIR project for PlayBook created using the BlackBerry Tablet OS SDK for Adobe AIR and the QNX UI library? In this post I will show you how you can create a PlayBook application using QNX components for the UI and HTTPService/RemoteObject for reading data from a server.

Note: In theory, it should be possible to use HTTPService, RemoteObject, and WebService even in a Mobile ActionScript project. I will write another post on this matter. See this post on how to do it.

Prerequisites

If you want to try this tutorial you will need to have Flash Builder “Hero” installed and enabled for PlayBook development. See this post for more info on this topic.

Creating the application

The first step is to create a Flex Mobile Project. Choose File > New > Flex Mobile Project, enter a name for your project, and click the Next button. In the second page of the wizard make sure you select BlackBerry Tablet OS and Blank for “Application template”.

Once the project is created, you have to enable it for using QNX UI components. To do this, right-click on the project name and choose Properties. Then select the Flex Build Packaging > BlackBerry Tablet OS entry and check the “Include BlackBerry Tablet OS libraries in build path” option.

Now, you are ready to create the application UI using QNX UI components. Open the MXML file if it isn’t already opened (mine is called MobileRemoting.mxml).

Now, it is time to create the application UI. I want to have a radio button group to choose from Remoting/HTTPService, a label, and a list for displaying the results. The finished result will look like this:

I created a function named createUI() and I registered this function for the ApplicationComplete event. Inside this function I created the UI using the QNX building blocks, just as you would do in a Mobile ActionScript Project.

<?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"
    applicationComplete="createUI()" backgroundColor="0xffffff">

   <fx:Script>
      <![CDATA[
private function createUI():void {
    this.stage.align = StageAlign.TOP_LEFT;
    this.stage.scaleMode = StageScaleMode.NO_SCALE;

    base = new Container();
    base.flow = ContainerFlow.HORIZONTAL;

    var bottom:Container = new Container();
    bottom.size = 100;
    bottom.sizeUnit = SizeUnit.PERCENT;

    var header:Container = new Container();
    header.size = 60;
    header.sizeUnit = SizeUnit.PIXELS;
    header.containment = Containment.DOCK_TOP;
    header.flow = ContainerFlow.HORIZONTAL;
    header.opaqueBackground = 0x999999;

    var headerLeft:Container = new Container();
    headerLeft.align = ContainerAlign.NEAR;
    headerLeft.containment = Containment.BACKGROUND;

    var headerRight:Container = new Container();
    headerRight.flow = ContainerFlow.HORIZONTAL;
    headerRight.align = ContainerAlign.FAR;
    headerRight.containment = Containment.CONTAINED;

    var label:Label = new Label();
    label.format.bold = true;
    label.format.color = 0x0000ff;
    label.width = 170;
    label.text = " Read Data Using:";

    var spacer:Spacer = new Spacer();
    spacer.size = 50;
    spacer.sizeUnit = SizeUnit.PERCENT;

    var rb1:RadioButton = new RadioButton();
    rb1.size = 100;
    rb1.sizeUnit = SizeUnit.PERCENT;
    rb1.sizeMode = SizeMode.BOTH;
    rb1.groupname = "group1";
    rb1.label = METHOD_1;
    rb1.selected = true;
    rb1.addEventListener(MouseEvent.CLICK, onMethodSelection);

    var rb2:RadioButton = new RadioButton();
    rb2.size = 100;
    rb2.sizeUnit = SizeUnit.PERCENT;
    rb2.sizeMode = SizeMode.BOTH;
    rb2.groupname = "group1";
    rb2.label = METHOD_2;
    rb2.addEventListener(MouseEvent.CLICK, onMethodSelection);

    headerLeft.addChild(spacer);
    headerLeft.addChild(label);
    headerRight.addChild(new Spacer());
    headerRight.addChild(rb1);
    headerRight.addChild(rb2);
    header.addChild(headerLeft)
    header.addChild(headerRight)

    list = new List();
    list.setSkin(CellRenderer);
    list.containment = Containment.BACKGROUND;

    bottom.addChild(list);
    base.addChild(header);
    base.addChild(bottom);
    this.stage.addChild(base);

    base.setSize(stage.stageWidth,stage.stageHeight);
    //read the data using the current selected method
    getData();
}

 ]]>
 </fx:Script>

Once the createUI() function is executed, the application should have the entire UI in place. The last line of this function calls a method named getData(). This is where the HTTPService and RemoteObject classes will be used. When you use these classes in Flex, you usually use the mx.rpc.http.mxml.HTTPService and mx.rpc.remoting.mxml.RemoteObject. But these objects are meant to be used in MXML, so what you’ll need is the super classes of these (which can be used in ActionScript): mx.rpc.remoting.RemoteObject and mx.rpc.http.HTTPService.

Now, it is pretty straightforward to read data from the server (there is some code for handling the switch between RemoteObject/HTTPService which I haven’t include it in snippet below):

private function getData():void {
     //HTTP Service
     if (method == METHOD_1) {
        if (!http) {
           http = new HTTPService();
           http.method = "GET"; //this is the default method anyway
           http.url = BASE_URL + "rest/index.php";
           http.resultFormat = HTTPService.RESULT_FORMAT_OBJECT;
           http.addEventListener(FaultEvent.FAULT, onFault);
           http.addEventListener(ResultEvent.RESULT, onResult);
        }
        var param:Object = {what: "getAuthors"};
        http.send(param);
    //remoting
    } else {
        if (!remoting) {
           remoting = new RemoteObject("AuthorsService");
           remoting.source = "AuthorsService";
           remoting.endpoint = BASE_URL + "remoting/gateway.php";
        }
        var token:AsyncToken = remoting.getData();
        var responder:mx.rpc.Responder = new mx.rpc.Responder(onResult, onFault);
        token.addResponder(responder);
    }
 }

I used this project to play a little bit with QNX lists, more precisely with CellRenderer. The default renderer looks for a property “label” as the source for the text. My data structure is different, depending on the method used to read the data. I created a new renderer by extending AlternatingCellRenderer:

package org.corlan.renderers {
    import qnx.ui.listClasses.AlternatingCellRenderer;  

    public class CellRenderer extends qnx.ui.listClasses.AlternatingCellRenderer {
        public function CellRenderer() {    
            super();
        }

        override public function set data(value:Object):void {  
            super.data = value;
            var str:String = "";
            if (data["id_aut"])
                str = data.fname_aut + " " + data.lname_aut + " (" + data.id_aut + ")";
            else
                str = data.first + " " + data.last;
            setLabel(str);
        }
    }
}

And I set this custom renderer by calling the setSkin() method on the list. For the complete code, please have a look at the Download section.

Conclusions

With all these new devices that keep coming, it is a good idea to be able to reuse the code you wrote for other applications as much as possible from. If you’ve created Flex projects using Remoting/REST style services/Web Services and you need the same data in a mobile project for PlayBook then you now know one way to do it. I will write another post about how to use the same methods in a mobile ActionScript project.

Download

You can download the project archive file from here.

6 thoughts on “Working with Flex Services and BlackBerry Tablet OS SDK for Adobe AIR

  1. Pingback: Working with Flex RPC Services in ActionScript Mobile Projects : Mihai Corlan

  2. Pingback: Working with Flex RPC Services in ActionScript Mobile Projects (Adobe Flash Platform Blog)

  3. Pingback: Flex learner | Blog | Working with Flex Services and BlackBerry Tablet OS SDK for Adobe ...

  4. Pingback: Some Great BlackBerry PlayBook Blog Posts : Ryan Stewart – Mountaineer Coding

  5. I want to know if it is possible to use a web service to dynamically connect two playbooks together, some thing like a chat…or do you(Host) or anyone else know of any ideas of two playbooks connecting to each other, close range or wifi…thanks

Leave a Reply

Your email address will not be published. Required fields are marked *