Changing views in Flex

Question

My application is built similar to the Tourde flex-->Data Visualization-->IBM ILog Elixir-->RealTime Dashboard(2) application which has a map on the top portion and 2 datagrids on the bottom. My application does not have a clock shown on the bottom portion. remaining all is almost similar. I have a requirement to switch these views every 6 mins. Every 3 mins the unprocessedatagrid and alldetails grid flip. The layout is attached in the code section below
The three panel sizes remain fixed, it is only what we display in the panel that needs to be changed. The top panel by default is mapPanel having mapCanvas with 60%(height)(width is 100%) of the screen. The remaining 40%(height) is shared by the leftGrid(35% of width) and unprocessedatagrid/alldetailsgrid(65% of width which flip every 3 mins)
After first 6 mins, I wanted to switch the mapCanvas with the leftgrid and leftgrid with mapCanvas.Every 3 mins the unprocessedatagrid and alldetails grid flip as usual. second 6 mins i have to switch unprocessedatagrid with mapPanel and mapPanel with unprocessedatagrid(there is no flip between unprocessedatagrid and alldetailsgrid in this 6 mins, all that is displayed in the mapPanel should be unprocessedatagrid). Next 6 mins change to the initial view(the 3 mins flip between the unprocessedatagrid and alldetails grid starts again) and the cycle goes on like this. I dont get the right grid populated correctly. Let me know how i can acheive this. I am fine to edit the layout if required. I am doing as below. Please let me know a solution for this. I tried using viewStack also, I am not sure if i did anything wrong anywhere.
<mx:states>
          <mx:State name="unprocessedState">
               <mx:RemoveChild target="{ alldetailsgrid}"/>
               <mx:AddChild relativeTo="{detailsPanel}" position="lastChild">
                    <sides:UnprocessedDataGrid id="UnprocessedDataGrid"                     Details="{uItems}"
                         styleName="{styleSel}"
                         width="100%"
                         height="100%"
                         change="currentState = ''"/>
               </mx:AddChild>
          </mx:State>
           <mx:State name="leftUpMapdownProcessed" >
           <mx:RemoveChild target="{ leftGrid }"/>
           <mx:RemoveChild target="{ mapCanvas }"/>                    
           <mx:AddChild  target = "{leftGrid}" relativeTo="{mapPanel}" />          
           <mx:AddChild  target = "{mapCanvas}" relativeTo="{leftPanel}" />          
             <mx:RemoveChild target="{ UnprocessedDataGrid }"/>
             <mx:RemoveChild target="{ alldetailsgrid}"/>
           <mx:AddChild  target = "{alldetailsgrid}" relativeTo="{detailsPanel}" />
          </mx:State>
           <mx:State name="leftUpMapdownUnprocessed" >
           <mx:RemoveChild target="{ leftGrid }"/>
           <mx:RemoveChild target="{ mapCanvas }"/>               
           <mx:AddChild  target = "{leftGrid}" relativeTo="{mapPanel}" />          
           <mx:AddChild  target = "{mapCanvas}" relativeTo="{leftPanel}" />
           <mx:RemoveChild target="{ alldetailsgrid}"/>
           <mx:RemoveChild target="{ UnprocessedDataGrid }"/>     
           <mx:AddChild  target = "{UnprocessedDataGrid}" relativeTo="{detailsPanel}" />
          </mx:State>
           <mx:State name="rightUpMapdownUnprocessed" >
           <mx:RemoveChild target="{ alldetailsgrid}"/>
           <mx:RemoveChild target="{ UnprocessedDataGrid }"/>
           <mx:RemoveChild target="{ mapCanvas }"/>
           <mx:AddChild  target = "{UnprocessedDataGrid}" relativeTo="{mapPanel}" />     
           <mx:AddChild  target = "{mapCanvas}" relativeTo="{detailsPanel}" />     
          </mx:State>
</mx:states>
<!--Main application area-->
  <mx:VBox width="100%"
           height="100%"
           paddingBottom="2"
           paddingLeft="2"
           paddingRight="2"
           paddingTop="2">
<mx:Panel id="mapPanel"   
      verticalGap="0"
      horizontalGap="0"
      borderAlpha="0"
      width="100%" height="100%"
   headerHeight="0" borderStyle="solid" shadowDistance="0"
   borderThicknessBottom="NaN"
   borderThicknessLeft="0"
   borderThicknessRight="0"
   borderThicknessTop="0"
cornerRadius="0"
>
      <mx:Canvas width="100%"
                 height="100%"
                 borderStyle="solid"
                 borderColor="0x555555"
                 id="mapCanvas">
-------------------------- CREATING MAP HERE---------------------------------------------------
     </mx:Canvas>
</mx:Panel>
<mx:HBox width="100%"
               height="212"
               backgroundColor="#4E597A"
               borderStyle="solid"
               borderColor="#4e597a"
               horizontalGap="0"
               verticalAlign="middle"
               id="bottomBox"
               verticalScrollPolicy="off"
               horizontalScrollPolicy="off"
               >
         <mx:Panel id="leftPanel"   
              verticalGap="0"
      horizontalGap="0"
      borderAlpha="0"
      width="100%" height="212"
      headerHeight="0"
      backgroundColor="#4E597A"
      borderStyle="solid"
      borderColor="#4e597a"
      verticalAlign="middle"
       shadowDistance="0"
   borderThicknessBottom="NaN"
   borderThicknessLeft="0"
   borderThicknessRight="0"
   borderThicknessTop="0"
cornerRadius="0" >      
            <sides:LeftDataGrid id="leftGrid" styleName="{styleSel}" width="100%" height="100%" />            
</mx:Panel>
<mx:Panel id="detailsPanel"    
         verticalGap="0"
      horizontalGap="0"
      borderAlpha="0"
      width="{bottomBox.width - bottomBox.width*.35}" height="212"
      headerHeight="0"
      backgroundColor="#4E597A"
      borderStyle="solid"
      borderColor="#4e597a"
       verticalAlign="middle"
      shadowDistance="0"
   borderThicknessBottom="NaN"
   borderThicknessLeft="0"
   borderThicknessRight="0"
   borderThicknessTop="0"
cornerRadius="0" >
        <sides:DetailsDataGrid id="alldetailsgrid" styleName="{styleSel}" width="100%"  height="100%" Details="{items}"  change="currentState = 'unprocessedState';"/>
</mx:Panel>
     </mx:HBox>
  </mx:VBox>
Actionscript code:
flipTimer = new Timer(3 *60000 ,6);
            flipTimer.addEventListener(TimerEvent.TIMER, onFlipTimer);
flipTimer.start();
private function onFlipTimer(event:TimerEvent):void{     
     flipTable();
     count = count+1;          
if(currentState == 'unprocessedState'){               
   if (count == 2){               
     currentState= 'leftUpMapdownUnprocessed';}
   else if (count == 3){          
     currentState= 'leftUpMapdownUnprocessed';}
  }else{
  if (count == 2){          
     currentState = 'leftUpMapdownProcessed';}
  else if (count == 3){          
     currentState = 'leftUpMapdownProcessed';}
if (count ==4 || count == 5){
currentState= 'rightUpMapdownUnprocessed';}
if (count == 6){
     currentState = '';               
        count = 0;
     resetFlip();                    
public function flipTable():void{
if(currentState == 'unprocessedState'){                 
UnprocessedDataGrid.dispatchEvent(new Event(Event.CHANGE));
}else{       
alldetailsgrid.dispatchEvent( new Event( Event.CHANGE ) );

Answer 1

Hi Ramesh,
Transaction variant :--
as per your requirement use t.code SHD0
and then enter the transaction code VA01
and enter the transaction variant BUS2032
and select the programme SAPMV45A
and go CHANGE WITH PROCESSING (F6)
then continue to press ENTER, and change what ever u want to make mandatory or suppress
Reward points if u helpful
Cheers,
Govind.