Using REST To Access CRX Content in Flex

When building a Flex application that reads content from a CRX Repository, RESTful HTTP requests are an ideal pattern for reading both meta data that describes your content as well as the raw content bytes.

In this example we look at:

  1. Writing Flex application can browse and display many different types of content (images, documents etc) read from CRX using REST.
  2. After reading the actual content, how to display it in your Flex application using one of many new “UX Components” provided in the SDK for the Adobe Digital Enterprise Platform.

Consider a typical “master / detail” tree view application where the user browses and displays content:

(click to enlarge)

Let’s look at how such an application is built.

First the init() method used when the app starts up:


private function init():void 
{ 
    //Read CRX first time and load nodes 
     NodeService.execute(hostRoot, classificationsLoaded, loadFailed);
    classTree.dataDescriptor=new NodeDataDescriptor(); 
}

The “NodeService” Class above is used to make an HTTP Request to CRX to get back a list of content nodes


public class NodeService 
{
    public static function execute(
        path:String, resultHandler:Function, faultHandler:Function):void 
    { 
        var httpService:HTTPService = new HTTPService(); 
        httpService.url = path + ".2.json"; 
        httpService.method = HTTPRequestMessage.GET_METHOD;
        httpService.resultFormat = "text"; 
        httpService.addEventListener( ResultEvent.RESULT, resultHandler ); 
        httpService.addEventListener( FaultEvent.FAULT, faultHandler ); httpService.send(); 
    } 
} 

Next the JSON response is decoded into an array collection used for the nodes to be displayed in the tree. Each node will contain the properties (name, content type etc) of the node as well as a URL pointer to its content stream.


private function classificationsLoaded(e:ResultEvent):void 
{
    var resultStr:String = new String(e.message.body); 
    var jsondecoder:JSONDecoder = new JSONDecoder();
     var data:ObjectProxy = jsondecoder.decode(resultStr); 
    var tmpArr:Array = []; 
    var patternExclude:RegExp = /(sling:|jcr:|cq:)/i; 
    var patternInclude:RegExp = /(sling:Folder)/i; 
    for (var p:String in data) { 
        if(p.search(patternInclude)>0 || p.search(patternExclude)<0) { 
            var tmpObj:CustomNode = new CustomNode(); 
            tmpObj.name = p; mpObj.path = hostRoot + "/" + p; tmpObj.parent = null; 
            if(data[p] is ObjectProxy) tmpObj.hasChildren = containsChildren(data[p]); else
                tmpObj.hasChildren = false; tmpArr.push(tmpObj); 
         } 
    } 
    ac = new ArrayCollection(tmpArr); 

Finally a click handler for each node in the tree uses the node properties to supply data to a “UX Component” which can render the content within a boundary area in the Flex application. In this case either display the content or just display more tree nodes if the selected node is not a leaf node.

<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"
    xmlns:xoawv="com.adobe.ep.ux.webdocumentviewer.domain.*"
    ...

private function onItemClick(e:ListEvent): void {
    var tmpObj:CustomNode = classTree.selectedItem as CustomNode;
    if(!tmpObj.hasChildren){
        viewer.unload();
        viewer.url = tmpObj.path;
        viewer.contentType = "text/plain";
        viewer.loadDocument();
        }else {
            if (tmpObj) {
                if (!tmpObj.childrenLoaded) {
                    tmpObj.loadChildren();
                    tmpObj.addEventListener(
                      CustomNode.CHILDREN_LOADED, onItemChildrenLoaded);
                }
            }
        }
     } } ... <mx:HBox width="100%" height="100%" backgroundColor="#FFFFFF">
    <s:Panel width="20%" height="100%" title="CRX Structure">
        <mx:Tree id="classTree" dataProvider="{ac}" width="100%" height="100%"
            itemOpen="onItemOpen(event)" itemClick="onItemClick(event)" />
    </s:Panel>
        <mx:VBox  width="80%" height="100%" >
        <s:Panel width="100%" height="100%" title="Document Viewer">
        <xoawv:WebDocumentViewer id="viewer" width="100%" height="100%" />
    </s:Panel>
<mx:HBox width="100%">