6 Replies Latest reply on Apr 1, 2010 7:15 AM by stickamw

    Canvas not instantiating at runtime?

    stickamw

            I would sincerely appreciate ANY help in solving this as we are at the  end of our iteration and this has to be fixed....and my head is sore  from banging it repeatedly against my desk....

       

      THANKS  IN ADVANCE!!!

      Adrian

       

      ToAW_LicGraphs.png

       

           This is built with nested  viewstacks and canvases. Clicking the charts on the left toggle the  viewstack to switch canvases on the right that have copies of the charts  built (Yes, I know this isn't a great way to build this...inherited the  code and haven't had the time to refactor).  The canvas on the right  has a viewstack in it so that the user can toggle back and forth between  viewing the chart and a datagrid of the data for the chart in the same  view space.

       

           When the user selects a different  chart on the left, I have a simple toggle that indicates which icon  needs to be displayed (hard to see in the image but in upper right hand  corner...one icon to switch to datagrid, the other to swtich to chart).   It is this toggle that's throwing the error...saying that the nested  canvas == null. What's odd is that I can access child components of that  canvas just fine, (i.e. on initialize, I'm building the combo box on  the upper right that is a child of the canvas that is coming in as null)  but when I try to access the canvas itself, it's null.

       

            Additionally, if you toggle the first time, get the null error, then  try immediately to toggle again and it works.

       

            Here is the code...First a portion of the mini charts on the left:

       

               <mx:VBox  height="100%" width="25%" borderStyle="solid"  backgroundColor="#E2E2E2" backgroundAlpha="1.0"  borderColor="#FFFFFF">

                  <mx:Panel  id="callPanel" title="blah" width="100%" height="20%"  click='togglePanel("callPanel")' backgroundColor="#E2E2E2"  backgroundAlpha="1.0" borderColor="#E2E2E2" borderStyle="solid"  borderThickness="5" >
                       <mx:ColumnChart type="overlaid" showDataTips="true"  dataProvider="{csvrMaxAvgArray}" id="CSVRIssued" width="100%"  height="100%"  >
                           <mx:seriesFilters>
                               <mx:Array/>
                           </mx:seriesFilters>
                           <mx:horizontalAxisRenderer>
                               <mx:AxisRenderer showLabels="false" />
                           </mx:horizontalAxisRenderer>
                            <mx:series>
                               <mx:LineSeries yField="maxPeakLicenses"  displayName="License In Use" form="curve" lineStroke="{new  Stroke(0x405f72,1)}" />
                               <mx:LineSeries yField="maxIssuedLicenses"  name="Licenses Issued" form="curve" lineStroke="{new  Stroke(0xf38f1d,1)}"/>
                           </mx:series>
                       </mx:ColumnChart>
                   </mx:Panel>

       

           Here is the code for  the nested stack:

       

              <mx:HBox id="chartViewer"  width="100%" height="100%">
                   <eloy:eLoyGraphTablePanel id="Trending" title="CVP  Licensing" width="100%" height="100%" fontFamily="Arial" fontSize="12"  verticalAlign="middle" titleBtnClick="{changeView(event)}" >
                       <mx:ViewStack id="trendviewstack" width="100%"   height="100%">

                          <mx:Canvas  id="csvrCanvas" label="Recognition Results - Details" fontFamily="Arial"  fontSize="12" width="100%"  height="100%">
                               <mx:ViewStack id='vs_csvr' width="100%"   height="100%">
                                   <mx:Canvas id='csvrCanvas_graph'  width="100%"  height="100%">
                                       <mx:HBox width="100%" height="95%"  >
                                           <mx:LineChart showDataTips="true"  dataProvider="{csvrMaxAvgArray}" id="CSVRIssuedCV" width="100%"  height="95%" top="0" horizontalCenter="0">
                                               <mx:seriesFilters>
                                                   <mx:Array/>
                                               </mx:seriesFilters>
                                           </mx:LineChart>

       

                                          <mx:VBox  id="CSVRIssuedFilter" borderColor="#5D87A1" verticalAlign="top"  borderStyle="solid" borderThickness="1" paddingTop='10'  paddingBottom='10' paddingLeft='10' paddingRight='10'  horizontalAlign="center"  >
                                               <mx:ComboBox  id="csvrHostCombo" dataProvider="{csvrComboArray}"  labelField="fieldValue" change="loadServers('CSVR',  csvrHostCombo.selectedLabel, csvrVBox)"/>
                                               <mx:VBox id="csvrVBox"  width="100%" height='{this.height - 175}' borderColor="#5D87A1"  borderStyle="solid" borderThickness="1" horizontalAlign="left"  paddingBottom='5' paddingLeft='5' />                                    
                                               <mx:Button label="Update  Graph" id="csvrUpdateButton" click="updateGraph('CSVR')"/>
                                           </mx:VBox>
                                       </mx:HBox>
                                      
                                       <mx:Legend id="cserverLegend"  direction="horizontal" bottom="0" horizontalCenter="0">
                                           <mx:LegendItem label="Licenses  Issued" fill="#f38f1d"/>
                                           <mx:LegendItem label="Licenses  Consumed" fill="#405f72"/>
                                       </mx:Legend>
                                   </mx:Canvas>
                                  
                                   <mx:Canvas id='csvrCanvas_table'  width="100%"  height="100%">
                                       <mx:DataGrid id="csvr_table"  width="100%" height="100%" dataProvider="{csvrdata}" rowHeight="30"  verticalScrollPolicy="off">
                                           <mx:columns>
                                               <mx:DataGridColumn  headerText="Date" dataField="senttime" />
                                               <mx:DataGridColumn  headerText="Licenses Consumed" dataField="inuse" />
                                               <mx:DataGridColumn  headerText="Licenses Issued" dataField="issued" />
                                           </mx:columns>
                                       </mx:DataGrid>                            
                                   </mx:Canvas>                       
                               </mx:ViewStack>                                                
                           </mx:Canvas>

       

           And  finally, my toggle logic (abbreviated):

       

              private  function togglePanel(panelID:String):void
               {
                   setPanelBorders();
                  
                   switch (panelID)
                   {

                      case "callPanel":
                           hostTypeInUse = "CSVR";
                           trendviewstack.selectedChild=csvrCanvas;
                           Trending.title = "some title - Details";
                           callPanel.setStyle("borderColor", "0x5D87A1");   
                                          
                           if ( vs_csvr.selectedChild==csvrCanvas_graph) <--------------------------THIS IS WHERE IT ERRORS!  csvrCanvas_graph == null
                           {
                               Trending.changeIcon("table");
                           }
                           else
                           {
                               Trending.changeIcon("graph");
                           }
                          
                           buildLineGraphs();                   
                           break;

       

      Thanks!!!!!

      Adrian