+ Start a Discussion
jeffdonthemicjeffdonthemic 

Tree Control?

I saw on the Winter ‘09 Developer Screencast a screenshot of a tree conrol. Does anyone know if that code will be released?

I started working on a lazy-loading Flex tree control but don't want to go too far down that road if a Visualforce/Apex version is going to be released.

Flex tree control: http://blog.jeffdouglas.com/2008/12/08/flex-salesforcecom-tree-control/

Jeff Douglas
Informa Plc
blog.jeffdouglas.com
Ron HessRon Hess
I dropped a tree control into the  amazon toolkit package, you can install that package and see how it's done.
this uses the tree control found in YUI
SuzanyuSuzanyu
Gooooood. insteresting
Dan BakerDan Baker

I'm trying to implement a version of the Flex tree control using various bits and pieces of code from the developer boards but I'm still having problems.  Being new to Flex and Apex and Force.com, I'm having a hard time putting it all together.  Can someone help me just get this basic tree working?  I feel if I can make this work then the next steps will be much easier. . . 

Here's what I'm using for the MXML to create my Flex Tree and then I've created a Static Resource called FlexTreeControl that uses the resultant SWF file:

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml
    backgroundGradientAlphas="[1.0, 1.0]" 
    backgroundGradientColors="[#F3F3EC, #F3F3EC]" 
    creationComplete="login()" 
    layout="horizontal"    
    height="500" width="300">  
 
    <mx:Script>  
    <![CDATA[  
        import com.salesforce.*;  
        import com.salesforce.objects.*;  
        import com.salesforce.results.*;  
        import mx.collections.ArrayCollection;  
        import mx.controls.Alert;  
        import mx.collections.XMLListCollection;  
        import mx.events.ListEvent;  
 
        [Bindable] private var categoriesXml:XML =  
          <list>  
              <root>  
                <level0 name="Assets" level="0"/>
              </root>                         
          </list>;                  
 
        [Bindable] public var sfdc:Connection = new Connection();  
        [Bindable] private var acClicked:ArrayCollection = new ArrayCollection();  
        [Bindable] private var categoriesXmlData:XMLListCollection = new XMLListCollection(categoriesXml.root);          
 
        private function login():void {  
 
            var lr:LoginRequest = new LoginRequest();  
            lr.server_url = this.parameters.server_url;   
            lr.session_id = this.parameters.session_id;      
            lr.callback = new AsyncResponder(loginSuccess, loginFault);  
            sfdc.login(lr);         
 
        }                  
 
        // gets all level 1  
        private function getLevel1():void 
        {  
 
            sfdc.query("Select c.Asset_Name__c, c.Id, c.Parent_Asset__c from Component__c c Order by c.Asset_Name__c",  
                 new AsyncResponder(  
                    function (qr:QueryResult):void {  
                        var parent:XMLList = categoriesXml.root.level0.(@name == 'Assets'); 
                        if (qr.size > 0) {  
                            for (var j:int=0;j<qr.size;j++) {  
                                var newNode:XML = <level1 level="1"/>;  
                               
newNode.@id = qr.records[j].c.Id;  
                               
newNode.@name = qr.records[j].c.Asset_Name__c;  
                                parent[1].appendChild(newNode);  
            //                  getLevel2(
newNode.@id);  
                            }  
                        }  
                    },sfdcFailure  
                )  
            );     
 
        }         
                  
        // queries sfdc when node is clicked  
        private function tree_itemClick(evt:ListEvent):void {  
 
            var item:Object = Tree(evt.currentTarget).selectedItem;  
            var node:XML = XML(item);  
            var nodeName:String =
node.@name;    
 
        }    
 
        private function loginSuccess(result:Object):void {  
            getLevel1();  
     Alert.show(result.Object);
        }                                  
 
        private function sfdcFailure(fault:Object):void {  
            Alert.show(fault.faultstring);  
        }     
 
        private function loginFault(fault:Object):void 
        {  
            Alert.show("Could not log into SFDC: "+fault.fault.faultString,"Login Error");  
        }             
 
    ]]>  
    </mx:Script>  
 
    <mx:Tree id="tree" 
        dataProvider="{categoriesXmlData}" 
        itemClick="tree_itemClick(event)" 
        labelField="@name" 
        showRoot="false" 
        width="100%" height="100%" left="0" top="0"/>  
 
</mx:Application>

And then I've created a Visualforce page called FlexTreePage that calls the FlexTreeControl with this code:

<apex:page id="myPage">


<script>
var flexApp;

function getMyApp(appName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[appName];
} else {
return document[appName];
}
}

function flexIsReady() {
flexApp = getMyApp("FlexTreeControl");
flexApp.initApp();
}
</script>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="FlexTree" width="300" height="500"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="{!$Resource.FlexTreeControl}" />
<param name="quality" value="high" />
<param name="bgcolor" value="blue" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="{!$Resource.FlexTreeControl}" quality="high" bgcolor="blue"
width="300" height="500" name="FlexTreeControl" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>

</apex:page>
I can run the Visualforce page from the URL https://c.na6.visual.force.com/apex/FlexTreePage but all I get in the display is the FlexTree control with the Level0 root name "Assets" - clicking on it doesn't do anything.  Any thoughts on what I'm doing wrong or just not doing?  Thanks.
jeffdonthemicjeffdonthemic
Dan,
 
It looks like in your Visualforce page that you are not passing the current session_id or server_url into the SWF. Also, you should use the apex:flash tag instead of the straight object tag.
 
I have an example on my blog which should explain everything. Let me know if you need anymore help.
 
 
Jeff Douglas
Informa Plc