Flex Builder 2: trouble with httpservice after adding ViewStack

Heres what is happening. When you add a viewstack, or accordion control, any of the sections that are not visible are also not accessable(ie. null). I think this is a bug on adobe's end.

What I did to get around the issue was add an event handle to the creationComplete of the specific viewstack you are trying to access.

So when the HttpService returns the results, store them in a local variable, then, in the creationComplete handler load the results into the control you are trying to populate from the local variable rather then the HttpService.

Another thing you might want to try is only call HttpService.send() from the creationComplete.


Example:

<mx:HTTPService id="service" url="mypage.jsp" />
<mx:ViewStack id="viewstack1">
  <mx:Canvas id="canvas1" name="Canvas 1">
  </mx:Canvas>
  <mx:Canvas id="canvas2" name="Canvas 2" creationComplete="serivce.send()">
      <mx:ComboBox id="cbx1" dataProvider="{service.lastResult}" />
  </mx:Canvas>
</mx:ViewStack>

Let me know how that works for you!

Matt

is the what you meant...  (probably not since Flex immediately flagged it as bad)

<mx:ViewStack id="myViewStack" width="100%" height="100%" creationComplete="resultHandler(event)">

** the initApp function is what invokes the HTTPService and sets variable arrays that works in the plain app w/o ViewStack.

here's the whole thing for reference...

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
    paddingTop="3"
    creationComplete="initApp()"
    pageTitle="Dashboard"
    xmlns:local="*" xmlns:view="view.*">

    <mx:Style source="main.css"/>

      <mx:Script>

        <![CDATA[
        import mx.controls.sliderClasses.SliderThumb;
        import mx.core.UIComponent;
        import mx.collections.ArrayCollection;
        import mx.rpc.events.*;

            [Bindable]
        public var slicedMonthData:ArrayCollection;

            [Bindable]
        public var slicedRegionData:ArrayCollection;

            [Bindable]
        private var monthData:Array;
       
        [Bindable]
        private var regionData:Array;
       
        [Bindable]
        private var periodToolTip:String = "";
         
        [Bindable]
        private var dashboardToolTip:String = "";
               

        private function initApp():void
        {
            srv.send();

            slicedMonthData = new ArrayCollection();
            slicedRegionData = new ArrayCollection();      
        }

        private function resultHandler(event:ResultEvent):void
        {
            monthData = event.result.list.month.source as Array;
            regionData = new Array(monthData.length);
           
            slicedMonthData.source = monthData;
            regionBreakdown.month = monthData[0];

                  dateRange.monthData = this.monthData;
                  dateRange.regionData = this.regionData;
                  dateRange.slicedMonthData = this.slicedMonthData;
                  dateRange.slicedRegionData = this.slicedRegionData;
                              
            if(Accessibility.active)
            {
                  dateRange.comboComp();
            }
            else
            {
                  dateRange.sliderComp();
            }
           
            var monthTotal:Number;
            for (var i:Number = 0; i < monthData.length; i++)
            {
                regionData[i] = {name: monthData[i].name, average: 0, revenue: 0};
                var regions:Array = monthData[i].region.source as Array;
                monthTotal = 0;
                for (var j:Number = 0; j < regions.length; j++)
                {
                    monthTotal += regions[j].revenue;
                }
                regionData[i].average = monthTotal/monthData[i].region.length
            }
           
                  dateRange.valueUpdate();
            slicedRegionData.source = regionData.slice(dateRange.startValue, dateRange.endValue);
        }

        private function monthChange():void
        {
            regionBreakdown.month = allRegions.selectedMonth
        }
       
        private function regionChange():void
        {
                  regionDetail.region = regionBreakdown.selectedRegion.name;

            for (var i:Number = 0; i < monthData.length; i++)
            {
                var regions:Array = monthData[i].region.source;
                for (var j:Number = 0; j < regions.length; j++)
                {
                    if (regions[j].name == regionBreakdown.selectedRegion.name)
                    {
                        regionData[i].revenue = regions[j].revenue;
                        break;
                    }
                }
            }
            slicedRegionData.source = regionData.slice(dateRange.startValue, dateRange.endValue + 1);
             }
             
             private function labelsComp():void
             {
                   if(Accessibility.active)
                   {
                         dashboardLabel.accessibilityProperties.silent = true;
                         selectPeriodLabel.accessibilityProperties.silent = true;
                   }
             }
             
        ]]>

    </mx:Script>

    <mx:HTTPService id="srv" url="results.xml" useProxy="false" result="resultHandler(event)"/>
   
      <mx:ViewStack id="myViewStack" width="100%" height="100%" creationComplete="resultHandler(event)">
      
      <mx:VBox width="100%" height="100%" id="login" horizontalAlign="center" verticalAlign="middle">      
      
      <mx:Panel width="250" height="200" layout="absolute" title="Login" id="panel1" horizontalAlign="center" verticalAlign="middle">
            <mx:Label x="10" y="10" text="Username:" id="label1"/>
            <mx:TextInput x="10" y="36" id="username"/>
            <mx:Label x="10" y="66" text="Password:" id="label2"/>
            <mx:TextInput x="10" y="92" id="password" displayAsPassword="true"/>
            <mx:Button x="10" y="122" label="Submit" id="Submit" click="myViewStack.selectedChild=pDashboard;"/>
            
      </mx:Panel>      
      </mx:VBox>
      
      <mx:VBox id="pDashboard" width="100%" height="100%">

                
    <mx:Spacer height="1"/>

    <mx:ApplicationControlBar width="100%" tabChildren="true" id="appControlBar">
        <mx:Label text="Dashboard:" id="dashboardLabel"/>
        <mx:ComboBox width="150" id="revTimelineCombo" toolTip="Dashboard" tabIndex="0">
            <mx:dataProvider>
                <mx:Array>
                    <mx:String>Revenue Timeline</mx:String>
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
        <mx:Spacer width="10"/>
        <mx:Label text="Select Period:" id="selectPeriodLabel" creationComplete="labelsComp()"/>
        <AccessibleDateRange id="dateRange" tabIndex="5"/>
    </mx:ApplicationControlBar>

    <mx:HDividedBox width="100%" height="100%">

        <mx:VDividedBox width="50%" height="100%">
        <AllRegions id="allRegions" revenueData="{slicedMonthData.source}"
              monthChange="monthChange()"
              width="100%" height="312" tabIndex="30"/>
                <mx:HDividedBox width="100%" height="100%">
                    <mx:Panel width="172" height="100%" layout="absolute" title="GPS">
                    </mx:Panel>
                    <mx:Panel width="163" height="100%" layout="absolute" title="Tank Chart Module">
                    </mx:Panel>
                </mx:HDividedBox>
        </mx:VDividedBox>

        <mx:VDividedBox width="50%" height="100%">
            <RegionBreakdown id="regionBreakdown" regionChange="regionChange()" width="100%" height="259" tabIndex="100"/>

            <RegionDetail id="regionDetail" revenueData="{slicedRegionData.source}" width="100%" height="0%" tabIndex="200"/>

        </mx:VDividedBox>

    </mx:HDividedBox>
      
      </mx:VBox>
      
      </mx:ViewStack>
      
</mx:Application>

Sorry my mistake,

Your initApp is what calls srv.send(), that is fine, now what you need to do is in your result handler make sure any of the components you are trying to access are not null..

Example:

if ( dateRange != null )
{
   .....
}


Now change the first couple of lines of resultHandler to:

private function resultHandler(event:ResultEvent=null):void
{
     monthData = srv.lastResult.list.month.source as Array;
....


Now, in the creationComplete of the VBox's NOT the ViewStack put creationComplete="resultHandler()"


That "should" fixe the issue.

Matt

wow, bud, thank you so much for your help!   I'll give this a try...
(from my exporation I found out about "loosely connected components" and was going to try adding the listener on the VBox level)

looks like some serious Flex dev is on the horizon on my end.   are you available for direct consultation and/or dev?

** if possible could you explain things or could you recommend a book or tutorial that really clarifies the AS event structure?

I'm modifying this app.   is there any real need for the initApp() approach?

data getting thru to app but still have 1009 at start...
(I put condition around daterange settings)

-----------------------------------
TypeError: Error #1009: Cannot access a property or method of a null object reference.
      at dashboard/::resultHandler()
      at dashboard/__srv_result()
      at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at mx.rpc.http.mxml::HTTPService/http://www.adobe.com/2006/flex/mx/internal::dispatchRpcEvent()
      at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::resultHandler()
      at mx.rpc::Responder/result()
      at mx.rpc::AsyncRequest/acknowledge()
      at ::DirectHTTPMessageResponder/completeHandler()
      at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at flash.net::URLLoader/flash.net:URLLoader::onComplete()

-----------------------------------

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
    paddingTop="3"
    creationComplete="initApp()"
    pageTitle="Dashboard"
    xmlns:local="*" xmlns:view="view.*">

    <mx:Style source="main.css"/>

      <mx:Script>

        <![CDATA[
            import mx.controls.Alert;

        import mx.controls.sliderClasses.SliderThumb;
        import mx.core.UIComponent;
        import mx.collections.ArrayCollection;
        import mx.rpc.events.*;

            [Bindable]
        public var slicedMonthData:ArrayCollection;

            [Bindable]
        public var slicedRegionData:ArrayCollection;

            [Bindable]
        private var monthData:Array;
       
        [Bindable]
        private var regionData:Array;
       
        [Bindable]
        private var periodToolTip:String = "";
         
        [Bindable]
        private var dashboardToolTip:String = "";
               

        private function initApp():void
        {
            srv.send();

            slicedMonthData = new ArrayCollection();
            slicedRegionData = new ArrayCollection();      
        }

        private function resultHandler(event:ResultEvent=null):void
        {
            monthData = srv.lastResult.list.month.source as Array;
            regionData = new Array(monthData.length);
           
            slicedMonthData.source = monthData;
            regionBreakdown.month = monthData[0];
                  
                  if (dateRange != null )
                  {
                  dateRange.monthData = this.monthData;
                  dateRange.regionData = this.regionData;
                  dateRange.slicedMonthData = this.slicedMonthData;
                  dateRange.slicedRegionData = this.slicedRegionData;
                  }
                              
            if(Accessibility.active)
            {
                  dateRange.comboComp();
            }
            else
            {
                  dateRange.sliderComp();
            }
           
            var monthTotal:Number;
            for (var i:Number = 0; i < monthData.length; i++)
            {
                regionData[i] = {name: monthData[i].name, average: 0, revenue: 0};
                var regions:Array = monthData[i].region.source as Array;
                monthTotal = 0;
                for (var j:Number = 0; j < regions.length; j++)
                {
                    monthTotal += regions[j].revenue;
                }
                regionData[i].average = monthTotal/monthData[i].region.length
            }
           
                  dateRange.valueUpdate();
            slicedRegionData.source = regionData.slice(dateRange.startValue, dateRange.endValue);
        }

        private function monthChange():void
        {
            regionBreakdown.month = allRegions.selectedMonth
        }
       
        private function regionChange():void
        {
                  regionDetail.region = regionBreakdown.selectedRegion.name;

            for (var i:Number = 0; i < monthData.length; i++)
            {
                var regions:Array = monthData[i].region.source;
                for (var j:Number = 0; j < regions.length; j++)
                {
                    if (regions[j].name == regionBreakdown.selectedRegion.name)
                    {
                        regionData[i].revenue = regions[j].revenue;
                        break;
                    }
                }
            }
            slicedRegionData.source = regionData.slice(dateRange.startValue, dateRange.endValue + 1);
             }
             
             private function labelsComp():void
             {
                   if(Accessibility.active)
                   {
                         dashboardLabel.accessibilityProperties.silent = true;
                         selectPeriodLabel.accessibilityProperties.silent = true;
                   }
             }
             
        ]]>

    </mx:Script>

    <mx:HTTPService id="srv" url="results.xml" useProxy="false" result="resultHandler(event)"/>
   
      <mx:ViewStack id="myViewStack" width="100%" height="100%">
      
      <mx:VBox width="100%" height="100%" id="login" horizontalAlign="center" verticalAlign="middle">      
      
      <mx:Panel width="250" height="200" layout="absolute" title="Login" id="panel1" horizontalAlign="center" verticalAlign="middle">
            <mx:Label x="10" y="10" text="Username:" id="label1"/>
            <mx:TextInput x="10" y="36" id="username"/>
            <mx:Label x="10" y="66" text="Password:" id="label2"/>
            <mx:TextInput x="10" y="92" id="password" displayAsPassword="true"/>
            <mx:Button x="10" y="122" label="Submit" id="Submit" click="myViewStack.selectedChild=pDashboard;"/>
            
      </mx:Panel>      
      </mx:VBox>
      
      <mx:VBox id="pDashboard" width="100%" height="100%" creationComplete="resultHandler()">

                
    <mx:Spacer height="1"/>

    <mx:ApplicationControlBar width="100%" tabChildren="true" id="appControlBar">
        <mx:Label text="Dashboard:" id="dashboardLabel"/>
        <mx:ComboBox width="150" id="revTimelineCombo" toolTip="Dashboard" tabIndex="0">
            <mx:dataProvider>
                <mx:Array>
                    <mx:String>CEO View</mx:String>
                    <mx:String>Customers</mx:String>
                    <mx:String>Administration</mx:String>
                    <mx:String>Drivers</mx:String>
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
        <mx:Spacer width="10"/>
        <mx:Label text="Select Period:" id="selectPeriodLabel" creationComplete="labelsComp()"/>
        <AccessibleDateRange id="dateRange" tabIndex="5"/>
    </mx:ApplicationControlBar>

    <mx:HDividedBox width="100%" height="100%">

        <mx:VDividedBox width="60%" height="100%">
        <AllRegions id="allRegions" revenueData="{slicedMonthData.source}"
              monthChange="monthChange()"
              width="100%" height="100%" tabIndex="30"/>
                <mx:HDividedBox width="100%" height="129">
                    <mx:Panel width="153" height="100%" layout="absolute" title="GPS">
                        <mx:Image source="GPSmap.gif" scaleContent="true" width="100%" height="100%"/>
                    </mx:Panel>
                    <mx:Panel width="163" height="100%" layout="absolute" title="Tank Chart Module">
                    </mx:Panel>
                </mx:HDividedBox>
        </mx:VDividedBox>

        <mx:VDividedBox width="50%" height="100%">
            <RegionBreakdown id="regionBreakdown" regionChange="regionChange()" width="100%" height="259" tabIndex="100"/>

            <RegionDetail id="regionDetail" revenueData="{slicedRegionData.source}" width="100%" height="0%" tabIndex="200"/>

        </mx:VDividedBox>

    </mx:HDividedBox>
      
      </mx:VBox>
      
      </mx:ViewStack>
      
</mx:Application>

sorry if this is getting too involved.   let me know if you'd like to break it up and I can award more points!

it didn't help to add   creationComplete="resultHandler()"   to the first VBox because it just has a mocked up login screen at the moment.  I put it on the 2nd VBox and it's passing data in just fine but first there is still the 1009 error so I assume that there must be another place where it needs this.
I tried checking NOT null on the variables in resultHandler but it didn't help.

this app has a few components and I am wondering if any of them may need explicit passing of the resulthandler.

ie. this component that handles the Revenue Graph...

<RevenueTimeline xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
    title="Revenue Timeline (All Products)" creationComplete="init();">

    <mx:Script>

        <![CDATA[
              import mx.controls.Button;
       
        import mx.charts.HitData;
            import mx.events.FlexEvent;

            [Bindable]
        public var lcToolTip:String = "";

        private function formatDataTip(hitData:HitData):String
        {
            var name:String = hitData.item.name;
            var revenue:Number = hitData.item.revenue;
            return "<b>Month: "+name+"</b><br>Revenue: "+cf.format(revenue);
        }
       
        private function init():void
        {
              if(Accessibility.active)
              {
                        this.tabIndex=50;

                    toggle.tabIndex = 70;
                    //chart instead of grid is shown first when in accessibility mode
                    toggle.selectedIndex = 1;
                    
                        var chartButton:Button = Button(toggle.getChildAt(0));
                        var gridButton:Button = Button(toggle.getChildAt(1));

                        chartButton.tabIndex = 75;
                        gridButton.tabIndex = 80;
                        
                    gridButton.toolTip = "View revenue timeline in grid" ;
                    chartButton.toolTip = "View revenue timeline in chart";
                    
                    var index:int = toggle.selectedIndex;
                    
                    //sets toolTip for toogle bar depending on which view is selected
                        if(index == 0)
                        {
                              togToolTip = chartButton.toolTip +
                                    " is selected. To view in grid hit the right arrow and then space bar.";
                        }
                        else
                        {
                              togToolTip = gridButton.toolTip +
                                    " is selected. To view in chart hit the left arrow and then space bar.";
                        }
                    
                    gridToolTip = this.title + ". To sort grid by Month press 1, to sort by Total " +
                                "Revenue press 2, to sort by Average Across Regions press 3";

                        //Added for changing the value of the togglebutton toolTip when the views are changed
                        toggle.addEventListener(FlexEvent.VALUE_COMMIT, toggleUpdate);
              }
              
            }

            //Added for changing the value of the togglebutton toolTip when the views are changed
            private function toggleUpdate(e:Event):void
            {
                  var index:int = toggle.selectedIndex;
                  
                  var chartButton:Button = Button(toggle.getChildAt(0));
                  var gridButton:Button = Button(toggle.getChildAt(1));
                  
                  //sets toolTip for toogle bar depending on which view is selected
                  if(index == 0)
                  {
                        togToolTip = chartButton.toolTip +
                              " is selected. To view in grid " +
                              "hit the right arrow and then space bar.";
                  }
                  else
                  {
                        togToolTip = gridButton.toolTip +
                              " is selected. To view in chart hit the left arrow and then space bar.";
                  }
            }
            
            private function chartComp():void
            {
                  if(Accessibility.active)
              {
                    chart.tabIndex=40;
                    chart.accessibilityProperties.forceSimple = true;

                        //Trying to make chart accessible
                        var accessProps:AccessibilityProperties = new AccessibilityProperties();
                        accessProps.name = "Chart data is available in grid view";
                        accessProps.description = "Chart data is available in grid view";
                        accessProps.forceSimple = true;

                        chart.accessibilityProperties = accessProps;
                        Accessibility.updateProperties();

                        lcToolTip = "Chart data is available in grid view";
              }
            }

        ]]>

    </mx:Script>

    <!-- will go into the IDeferredInstance slot of the superclass -->
   <chart>
            <mx:LineChart id="chart" dataProvider="{revenueData}" name="Chart data is available in grid view" showDataTips="true" width="100%" height="100%" toolTip="{lcToolTip}" dataTipFunction="formatDataTip"
                  itemClick="monthChange(event.hitData.item)"
                  creationComplete="chartComp()">

                  <mx:horizontalAxis>
                        <mx:CategoryAxis dataProvider="{revenueData}" categoryField="name"/>
                  </mx:horizontalAxis>

                  <mx:verticalAxis>
                        <mx:LinearAxis labelFunction="currencyFormat"/>
                  </mx:verticalAxis>

                  <mx:series>
                        <mx:Array>
                              <mx:LineSeries yField="revenue" showDataEffect="{interpolate}">
                                    <mx:stroke>
                                          <mx:Stroke color="#708EA4" weight="1"/>
                        </mx:stroke>
                              </mx:LineSeries>
                        </mx:Array>
                  </mx:series>

                  <mx:backgroundElements>
                        <mx:Array>
                          <mx:GridLines direction="both">
                                    <mx:verticalStroke>
                                          <mx:Stroke weight="1" color="#CCCCCC"/>
                                    </mx:verticalStroke>
                              </mx:GridLines>
                        </mx:Array>
                  </mx:backgroundElements>

            </mx:LineChart>
      </chart>

</RevenueTimeline>

maybe try this:

        private function resultHandler(event:ResultEvent=null):void
        {
            monthData = srv.lastResult.list.month.source as Array;
            regionData = new Array(monthData.length);
           
            slicedMonthData.source = monthData;
            regionBreakdown.month = monthData[0];
                 
                  if (dateRange != null )
                  {
                  dateRange.monthData = this.monthData;
                  dateRange.regionData = this.regionData;
                  dateRange.slicedMonthData = this.slicedMonthData;
                  dateRange.slicedRegionData = this.slicedRegionData;
                 
                  //this was outside the if (dateRage != null ) block
                  if(Accessibility.active)
                  {
                        dateRange.comboComp();
                  }
                  else
                  {
                        dateRange.sliderComp();
                  }
                  }
           
            var monthTotal:Number;
            for (var i:Number = 0; i < monthData.length; i++)
            {
                regionData[i] = {name: monthData[i].name, average: 0, revenue: 0};
                var regions:Array = monthData[i].region.source as Array;
                monthTotal = 0;
                for (var j:Number = 0; j < regions.length; j++)
                {
                    monthTotal += regions[j].revenue;
                }
                regionData[i].average = monthTotal/monthData[i].region.length
            }
           
            //once again, check that dateRange is not null
            if ( dateRange != null ) { dateRange.valueUpdate(); }
            slicedRegionData.source = regionData.slice(dateRange.startValue, dateRange.endValue);
        }

oops, last bit should be...

            //once again, check that dateRange is not null
            if ( dateRange != null ) {
                 dateRange.valueUpdate();
                 slicedRegionData.source = regionData.slice(dateRange.startValue, dateRange.endValue);
            }
        }

Here is the explanation for the issue:

"When you instantiate a navigator container [ViewStack, Accordion etc], Flex creates all of the top-level children. For example, creating an Accordion container triggers the creation of each of its views, but not the controls within those views. The creationPolicy property determines the creation of the child controls inside each view."

So since it does not create the children of the views you cannot access them until they are created.

page:
http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/js/html/wwhelp.htm?href=00001430.html

- Matt

well, at least I got the data thru but still have the error coming up.    keep an eye out for more Flex questions, bud.