tree expandItem problem

[vzwhaley]

In the following code, I cannot for the life of me get the Tree to expand at the root node upon loading. Any help would be appreciated.

XML EXAMPLE:

<tearsheets>
<pubDate aname="Wednesday, August 01, 2007">
<section aname="A">
<page aname="02" date="20070801" sectionID="A" image="tearsheets/2007/08/01/jpg/20070801_A_02.jpg" pdf="tearsheets/2007/08/01/pdf/20070801_A_02.pdf"/>
<page aname="03" date="20070801" sectionID="A" image="tearsheets/2007/08/01/jpg/20070801_A_03.jpg" pdf="tearsheets/2007/08/01/pdf/20070801_A_03.pdf"/>
</section>
</pubDate>
</tearsheets>



<?xml version="1.0" encoding="utf-8"?>
<!-- controls\date\DateChooserEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderStyle="none" borderThickness="2"
layout="absolute" horizontalAlign="left" verticalAlign="top" backgroundGradientColors="[#666666, #ffffff]">

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;
import mx.controls.Text;
import mx.controls.DataGrid;
import mx.events.CalendarLayoutChangeEvent;
import mx.collections.XMLListCollection;

[Bindable]

private var sectionList:XMLList;


private function buildListHandler(event:ResultEvent):void
{
sectionList = event.result..pubDate;
}

private function populateForm(event:Event):void

{

var node:XML=event.target.selectedItem;

if(node.@pdf != undefined)

{

sectionID.text = node.@sectionID;

pageNumber.text = node.@aname;

theForm.visible = true;

}

else

{

theForm.visible = false;

sectionID.text = "";

pageNumber.text = "";

}

}

public function useDate(eventObj:CalendarLayoutChangeEvent):void
{
// Make sure selectedDate is not null.
if (eventObj.currentTarget.selectedDate == null) {
return
} else {
userRequest.send();
}

//Access the Date object from the event object.
var day:Text;
var date:Text;
var month:Text;
var year:Text;
var wholeDate:Text;
day.text=eventObj.currentTarget.selectedDate.getDa y();
date.text=eventObj.currentTarget.selectedDate.getD ate();
month.text=eventObj.currentTarget.selectedDate.get Month();
year.text=eventObj.currentTarget.selectedDate.getF ullYear();
wholeDate.text=
eventObj.currentTarget.selectedDate.getFullYear() +
"/" +
(eventObj.currentTarget.selectedDate.getMonth()+1) +
"/" + eventObj.currentTarget.selectedDate.getDate();
}

private function onUserRequestResult(e:Event) :void
{
buildList.send();
}

private function initTree():void {
sectionsTree.expandItem(sl2.getItemAt(0), true);
}
]]>
</mx:Script>

<mx:DateFormatter id="df" formatString="YYYY_MM_DD"/>

<mx:DateFormatter id="df2" formatString="EEEE, MMMM DD, YYYY"/>

<mx:DateChooser id="dateChooser" change="useDate(event)" showToday="true" x="10" y="103" cornerRadius="14" yearNavigationEnabled="true"
disabledRanges="{[ {rangeEnd: new Date(2006, 4, 0)} ]}"/>

<mx:HTTPService id="userRequest" result="onUserRequestResult(event)" url="tearsheets/Sections_XML.php?Date={df.format(dateChooser.selec tedDate)}"
showBusyCursor="true" useProxy="false" method="POST"></mx:HTTPService>

<mx:HTTPService id="buildList" url="tearsheets/Tearsheets.xml" showBusyCursor="true" result="buildListHandler(event)" resultFormat="e4x"/>

<mx:XMLListCollection id="sl2" source="{sectionList}" />

<mx:Panel id="leftPanel" title="Tearsheets for {buildList.lastResult.pubDate.@aname}" width="390" height="228" layout="absolute" x="10" y="293">

<mx:Tree id="sectionsTree"

dataProvider="{sl2}"

labelField="@aname"

width="100%"

height="100%"

borderThickness="0"

change="populateForm(event)" x="0" y="0"

creationComplete="initTree()"/>

</mx:Panel>

<!-- Effects -->

<mx:Fade id="fadeIn" duration="3000" alphaFrom="0" alphaTo="1"/>
<mx:Fade id="fadeOut" duration="3000" alphaFrom="1" alphaTo="0"/>

<!-- User Interface -->
<mx:Panel title="Tearsheets Preview for {df2.format(dateChooser.selectedDate)}" width="550" height="100%" x="408" y="10">
<mx:Form id="theForm" visible="false">

<mx:FormItem label="Section">

<mx:TextInput id="sectionID"/>

</mx:FormItem>

<mx:FormItem label="Page">

<mx:TextInput id="pageNumber"/>

</mx:FormItem>

</mx:Form>
<mx:Tile width="100%" height="100%">
<mx:Repeater id="photos" dataProvider="{buildList.lastResult.pubDate.section.page}">
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
>
<mx:Image
id="myImage"
source="{photos.currentItem.@image}"
buttonMode = "true"
completeEffect="{fadeIn}"
click="navigateToURL(new URLRequest(event.currentTarget.getRepeaterItem().@ pdf), '_blank');"
/>

</mx:VBox>

</mx:Repeater>

</mx:Tile>

</mx:Panel>

</mx:Application>

[drkstr]

Tree component is tricky. Try this.

sectionsTree.expandItem( sectionsTree.dataProvider.getItemAt(0), true );

Regards,
...aaron

**edit**

you also might need to do some 'callLater's. Like wait for the data to update and is not null, then callLater a function that exapnds the tree.

[vzwhaley]

thanks, drkstr!

I tried that, but it still doesn't work for some reason. Would you happen to have any other suggestions? Thanks for your help!

[drkstr]

It does for me. Are you using callLater?


private function expandItems():void {
idTreeNav.expandItem( idTreeNav.dataProvider.getItemAt(0), true );
idTreeNav.selectedIndex = 1;
}

private function handleDocChange( event:Event ): void {
myNavData = myDocModel.getDocCollection();
callLater(expandItems);
}


Must call it after the tree has updated.

Regards,
...aaron

[vzwhaley]

Thanks again, drkstr! Unfortunately, I still can't get the tree to expand. I applied your previous suggestions, but it still does the same thing - nothing. So I'm not quite sure why this won't work. I am going to continue working with it.

[drkstr]

trace() the trees data provider right before you call the expand item. If you are using bound data, trace the bound data then the actual dataProvider property of the Tree component. Do these traces right before you expand the tree. Are they what you would expect?

Hope this helps,
...aaron

[vzwhaley]

OK, so I have temporarily fixed the problem by adding a button that can be clicked to expand the tree, but I would really like for the tree to be loaded as an expanded tree once the HTTPService has returned a result. I have tried to use callLater() and other methods to no avail.

In the following code, if you click the button to call myTree, the tree will correctly expand. But I just can't figure out how to get the tree to load after the HTTPService has returned a result.

Any help would be much appreciated:


<?xml version="1.0" encoding="utf-8"?>
<!-- controls\date\DateChooserEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderStyle="none" borderThickness="2"
layout="absolute" horizontalAlign="left" verticalAlign="top" backgroundGradientColors="[#666666, #ffffff]">

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;
import mx.controls.Text;
import mx.controls.DataGrid;
import mx.events.CalendarLayoutChangeEvent;
import mx.collections.XMLListCollection;

[Bindable]

private var sectionList:XMLList;


private function buildListHandler(event:ResultEvent):void
{
sectionList = event.result..pubDate;
}

public function useDate(eventObj:CalendarLayoutChangeEvent):void
{
// Make sure selectedDate is not null.
if (eventObj.currentTarget.selectedDate == null) {
return
} else {
userRequest.send();
}

//Access the Date object from the event object.
var day:Text;
var date:Text;
var month:Text;
var year:Text;
var wholeDate:Text;
day.text=eventObj.currentTarget.selectedDate.getDa y();
date.text=eventObj.currentTarget.selectedDate.getD ate();
month.text=eventObj.currentTarget.selectedDate.get Month();
year.text=eventObj.currentTarget.selectedDate.getF ullYear();
wholeDate.text=
eventObj.currentTarget.selectedDate.getFullYear() +
"/" +
(eventObj.currentTarget.selectedDate.getMonth()+1) +
"/" + eventObj.currentTarget.selectedDate.getDate();
}

private function onUserRequestResult(e:Event) :void
{
buildList.send();
}

private function myTree():void {
sTree.validateNow();
sTree.expandItem(sl2.getItemAt(0), true);
sTree.selectedIndex = 0;
}

]]>
</mx:Script>

<mx:DateFormatter id="df" formatString="YYYY_MM_DD"/>

<mx:DateFormatter id="df2" formatString="EEEE, MMMM DD, YYYY"/>

<mx:DateChooser id="dateChooser" change="useDate(event)" showToday="true" x="10" y="103" cornerRadius="14" yearNavigationEnabled="true"
disabledRanges="{[ {rangeEnd: new Date(2006, 4, 0)} ]}"/>

<mx:HTTPService id="userRequest" result="onUserRequestResult(event)" url="tearsheets/Sections_XML.php?Date={df.format(dateChooser.selec tedDate)}"
showBusyCursor="true" useProxy="false" method="POST"></mx:HTTPService>

<mx:HTTPService id="buildList" url="tearsheets/Tearsheets.xml" showBusyCursor="true" result="buildListHandler(event)" resultFormat="e4x"/>

<mx:Panel id="leftPanel" title="Tearsheets for {buildList.lastResult.pubDate.@aname}" width="390" height="100%" layout="absolute" x="259" y="10">

<mx:Tree id="sTree" labelField="@aname" width="100%" height="100%" borderThickness="0" x="0" y="0" showRoot="true">
<mx:XMLListCollection id="sl2" source="{sectionList}"/>
</mx:Tree>
<mx:Button x="264" y="10" label="Expand Tree" click="myTree()"/>

</mx:Panel>

</mx:Application>

[vzwhaley]

YAY, I finally fixed the problem.

All I had to do is call myTree() immediately following sectionList. It makes sense. After the lastResult is sent, call myTree to expand the tree from the result.

Thanks again for everyone's help!