17 Replies Latest reply on Jun 17, 2009 9:04 AM by flairjax

    WTF? One step migration = false;

    flairjax Level 1

      Ok, so I have been building our app, over the past 3 months, that is to release in two days.  I come to work today to see my Flex Builder Gumbo Alpha has expired.

       

      So I try to change my namespaces, which sucked!!! And took forever. Now my app half works.

       

      I have a function that builds a component and places it as a child of the <application>, which worked before, but now when the function is called nothing shows up.  I have a feeling its something to do with the namespaces.  Anyone have any suggestions?  I think the issue could be with the com.adobe.wheelerstreet.fig.callout.CalloutBorder component from Adobe.

       

      CODE BELOW:

       

      CSS ++++++++++++++++++++++++++++++++

       

      /* CSS file */
      @namespace "library://ns.adobe.com/flex/halo";
      Application {
          /* background-image:         Embed("../images/retro.gif");
          background-repeat:         repeat;
          background-position:     center; */
         
          borderSkin:             ClassReference("com.degrafa.skins.CSSSkin");
      }

       

      ApplicationControlBar
      {
         borderStyle: solid;
         fillAlphas: 1, 1;
         fillColors: #f5f5f5, #f5f5f5;
         borderColor: #dfdfdf;
         backgroundColor: #f5f5f5;
         cornerRadius: 0;
         dropShadowEnabled: false;
         paddingBottom: 0;
         paddingLeft: 6;
         paddingRight: 0;
         paddingTop: 1;
      }

       

      DataGrid
      {
         color: #2F2F2F;
         alternatingItemColors: #ffffff, #efefef;
         headerColors: #B5C8DF, #B5C8DF;
         horizontalGridLines: false;
         verticalGridLineColor: #cccccc;
         rollOverColor: #aadeff;
         useRollOver: false;
         verticalGridLines: false;
         headerBackgroundSkin:ClassReference("assets.style.skins.DataGridHeaderSkin");
         headerStyleName: "mydataGridHeaderStyle";
      }

       

      .mydataGridHeaderStyle {
         fontWeight: bold;
         fontSize: 13;
         fontStyle: normal;
         textDecoration: none;
         color: #2F2F2F;
      }

       

      LinkButton
      {
          downSkin:ClassReference("assets.style.skins.LinkButtonSkin");
          overSkin:ClassReference("assets.style.skins.LinkButtonSkin");
          upSkin:ClassReference("assets.style.skins.LinkButtonSkin");
      }

       

      .betaButton
      {
          skinClass: ClassReference("assets.style.skins.BetaButtonSkin");   
      }

       

      Panel
      {
         borderColor: #DFDFDF;
         borderAlpha: 1;
         borderThicknessLeft: 2;
         borderThicknessTop: 0;
         borderThicknessBottom: 2;
         borderThicknessRight: 2;
         roundedBottomCorners: false;
         cornerRadius: 0;
         headerHeight: 15;
         backgroundAlpha: 1;
         dropShadowEnabled: false;
         titleStyleName: "mypanelTitle";
      }

       

      .mypanelTitle
      {
         fontSize: 10;
         color: #000000;
      }

       

      .myLineSeriesStyle
      {
          itemRollOverColor: #000000;
      }

       

       

       

      .tab
      {
          up-skin: ClassReference("assets.style.skins.TabSkin");
          down-skin: ClassReference("assets.style.skins.TabSkin");
          over-skin: ClassReference("assets.style.skins.TabSkin");

       

          selected-up-skin: ClassReference("assets.style.skins.SelectedTabSkin");
          selected-down-skin: ClassReference("assets.style.skins.SelectedTabSkin");
          selected-over-skin: ClassReference("assets.style.skins.SelectedTabSkin");

       

          background-color: #FFFFFF;
          background-alpha: 0;
          fontSize: 11;
          font-weight: normal;
          color: #000000;
          text-roll-over-color: #000000;

       

          cornerRadius: 5;
          height: 15;   
          border-style: none;
          border-thickness: 0;
          border-color: #000000;
      }

       

      .selectedTab
      {
          background-color: #FFFFFF;
          fontSize: 11;
          font-weight: bold;
          color: #000000;
          text-roll-over-color: #000000;

       

         
          cornerRadius: 5;
          height: 15;
          border-style: none;
          border-thickness: 0;
          border-color: #000000;
      }

       

      TabNavigator {
         tabHeight: 18;

       

         horizontalAlign: left;
         tabOffset: 5;
       
      }

       

       

       

      /*TabNavigator {
         tabHeight: 18;
         horizontalAlign: left;
         tabOffset: 8;
         backgroundAlpha: 1;
         borderStyle: solid;
         tabStyleName: "myTabs";
         firstTabStyleName: "myTabs";
         lastTabStyleName: "myTabs";
         selectedTabTextStyleName: "mySelectedTabs";
      } */

       

      /*.myTabs {
         cornerRadius: 6;
         fillAlphas: 0.75, 0.51;
          fillColors: #ffffff, #cccccc;
         backgroundAlpha: 1;
         borderColor: null;

       

      }
      */

       

      Label {
          color: #4F4F4F;
      }
      .settingLable {
          color: #000000;   
          fontSize: 12;
      }
      .titleLabel {
          color: #333333;
          fontWeight: bold;
      }
      .timedateLabel {
          color: #333333;
          fontWeight: bold;
          fontSize: 11;
      }
      .inLabel {
          color: #ff5200;
          fontWeight: bold;
          fontSize: 11;
      }
      .inAmount {
          color: #ff5200;
          fontSize: 11;
      }
      .outLabel {
          color: #4D88CF;
          fontWeight: bold;
          fontSize: 11;
      }
      .outAmount {
          color: #4D88CF;
          fontSize: 11;
      }
      .callOutHeader {
          fontWeight: bold;
          fontSize: 12;   
          color: #000000;
      }

       

      Grid {
          paddingBottom: 0;
          paddingLeft: 5;
          paddingRight: 5;
          paddingTop: 0;
      }

       

      TextArea
      {
         borderSkin: ClassReference(null);
         upSkin: ClassReference( null );
         overSkin: ClassReference( null );
         downSkin: ClassReference( null );
         disabledSkin: ClassReference( null );
         borderThickness: 0;
         borderColor: #ffffff;
         color: #4F4F4F;
         letterSpacing: 1;
      }

       

      /* FormItem {
                  labelStyleName: customTextAlignLabel;
      }

       

      .customTextAlignLabel {
          textAlign: left;
          fontWeight: bold;

       

      }
      */

       

      .windowShade {
          border-alpha:                 1;
          border-color:                 "#FE9100 #FE9100 #FE9100 #FE9100";
          border-width:                 "0px 2px 2px 2px";
          border-top-right-radius:     0px;
          border-bottom-left-radius:     12px;
          border-bottom-right-radius:     12px;
          border-top-left-radius:     0px;
         
          /*background-color:             "45deg #FFAB3F #E87400 #E16A00"; */
          background-color:             "40deg #ffffff #BFBFBF";
          /*background-image:             DESIGNER, "-90deg #BFBFBF 60px #FFFFFF 90% #DFDFDF";*/
          background-repeat:             repeat, stretch;
          background-position:         "top center", center;
          background-blend:             multiply, multiply;
          asset-class:                 ClassReference("assets.ExamplesAssets");
          borderSkin:                 ClassReference("com.degrafa.skins.CSSSkin");
      }

       

       

       

      CalloutContainer
      {
          backgroundGradientColors: #D5DDE7, #D5DDE7;
          backgroundAlpha: 1;
          borderStyle: "middleCallout";
          calloutPointerWidth: 50;
          calloutOffsetX: 0; /*7*/
          calloutOffsetY: 10; /*10*/
          borderSkin: ClassReference("com.adobe.wheelerstreet.fig.callout.CalloutBorder");       
          cornerRadius: 0;
          paddingBottom: 0;
          paddingLeft: 0;
          paddingRight: 0;
          paddingTop: 5;
          dropShadowEnabled: true;

       

      }

       

      .EdgeCalloutContainer
      {
              calloutOffsetY: 5;
              calloutPointerWidth: 20;
      }
             
              .CalloutCloseButton {       
                  disabledSkin: Embed(source="/assets/images/skins.swf",symbol="Callout_closeButtonDisabledSkin");
                  downSkin: Embed(source="/assets/images/skins.swf",symbol="Callout_closeButtonDownSkin");
                  overSkin: Embed(source="/assets/images/skins.swf",symbol="Callout_closeButtonOverSkin");
                  upSkin: Embed(source="/assets/images/skins.swf",symbol="Callout_closeButtonUpSkin");   
              }
             
              .CalloutExpandButton {       
                  disabledSkin: Embed(source="/assets/images/skins.swf",symbol="Callout_expandButtonDisabledSkin");
                  downSkin: Embed(source="/assets/images/skins.swf",symbol="Callout_expandButtonDownSkin");
                  overSkin: Embed(source="/assets/images/skins.swf",symbol="Callout_expandButtonOverSkin");
                  upSkin: Embed(source="/assets/images/skins.swf",symbol="Callout_expandButtonUpSkin");
              }

       

      /*TileList
      {
          backgroundColor: #FFFFFF;
          backgroundAlpha: .7;
      }
      */

       

      ToolTip
      {
          backgroundAlpha: 0.85;
             backgroundColor: #bfbfbf;
             color: #000000;
             font-family: myFontFamily;
          font-size: 11;
      }

       

      ComboBox
      {    
          fontFamily: Arial;
          font-family: Arial,Sans-Serif;
          fontThickness: 1;
          fontWeight: normal;
          fontStyle: normal;
          fontSize: 11;
          /*upSkin: ClassReference( 'assets.style.skins.ButtonSkin' );
          overSkin: ClassReference( 'assets.style.skins.ButtonSkin' );
          downSkin: ClassReference( 'assets.style.skins.ButtonSkin' );
          disabledSkin: ClassReference( 'assets.style.skins.ButtonSkin' ); */

       

      }
      .myComboBoxDropDowns
      {

       

         borderColor: #666666;
         color: #000000;
         backgroundColor: #ffffff;
         fontFamily: Arial;
         font-family: Arial,Sans-Serif;
         fontThickness: 1;
         fontWeight: normal;
         fontStyle: normal;
         fontSize: 11;
         dropShadowEnabled: true;
         shadowDirection: right;
         dropShadowColor: #333333;
      }

       

      .myAxisStyle {
                  tickLength: 0;
                  tickPlacement: none;
                  minorTickPlacement: none;
              }

       

      ZoomSlider
      {
          sliderStyle:    'thermoStyle';   
      }

       

      .thermoStyle
      {
          trackSkin:      ClassReference('assets.style.skins.Vol'); 
          thumbSkin:         ClassReference('assets.style.skins.volThumb'); 
          /* thumbSkin: Embed('assets/images/state/printer_all.swf');  */   
      }

       

      /* Resources */

       

      .imageResources
      {
          activedirectory: Embed('assets/images/active_directory_c.swf');
         
          cloud: Embed('assets/images/cloud_grey.swf');
      }

       

      GradientCanvas
      {
          fillColors: #ffffff, #B6B6B6;
          fillAlphas: .9, .3;
          cornerRadius: 4;
          borderColor: #7F7F7F;
         
      }

       

      .labelHolderGradientCanvas
      {
          fillColors: #ff5200, #ff5200;
          fillAlphas: 1, 1;
          cornerRadius: 5
      }

       

      IconComboBox
      {
         cornerRadius: 0;
         themeColor: #000000;
         color: #000000;
         borderColor: #000000;
         iconColor: #ff5200;
         highlightAlphas: 0, 0;
         fillAlphas: 0, 0, 0, 0;
         fillColors: #000000, #000000, #000000, #000000;
         arrowButtonWidth: 29;
         backgroundAlpha: 1;
         selectionColor: #ffffff;
         textSelectedColor: #0b333c;
         useRollOver: false;
         rollOverColor: #efefef;
         textRollOverColor: #333333;
         alternatingItemColors: #ffffff, #ffffff;
         closeDuration: 238;
         textAlign: left;
         fontFamily: Arial;
         font-family: Arial,Sans-Serif;
         fontThickness: 1;
         fontWeight: normal;
         fontStyle: normal;
         fontSize: 12;
         dropShadow: null;
         dropShadowEnabled: false;
         dropdownStyleName: "myComboBoxDropDowns";
      }

       

       

       

      ComboBox
      {
         cornerRadius: 0;
         themeColor: #000000;
         color: #000000;
         borderColor: #000000;
         iconColor: #ff5200;
         highlightAlphas: 0.5, 0;
         fillAlphas: 0, 1, 0, 1;
         fillColors: #cccccc, #000000, #cccccc, #000000;
         arrowButtonWidth: 22;
         backgroundAlpha: 1;
         selectionColor: #c8d6e5;
         textSelectedColor: #0b333c;
         useRollOver: false;
         rollOverColor: #ff5200;
         textRollOverColor: #333333;
         alternatingItemColors: #efefef, #efefef;
         closeDuration: 238;
         textAlign: left;
         fontFamily: Arial;
         font-family: Arial,Sans-Serif;
         fontThickness: 1;
         fontWeight: normal;
         fontStyle: normal;
         fontSize: 12;
         dropShadow: null;
         dropShadowEnabled: false;
         dropdownStyleName: "myComboBoxDropDowns";
         focusAlpha: 0;
      }

       

      ComboBoxTypeAhead
      {
         
         backgroundColor: #EAEAEA;
         arrowButtonWidth: 0;
      }

       

      .myComboBoxDropDowns
      {

       

         borderColor: #b7babc;
         color: #000000;
         backgroundColor: #ffffff;
         fontFamily: Arial;
         font-family: Arial,Sans-Serif;
         fontThickness: 1;
         fontWeight: normal;
         fontStyle: normal;
         fontSize: 11;
         dropShadowEnabled: true;
         shadowDirection: right;
         dropShadowColor: #333333;
      }

       

      .whiteText
      {
          color: #000000;
      }
      .selectionRectangleStyle
              {
                  backgroundAlpha: 0.3;
                  backgroundColor: #8BB5DF;
                  borderColor: #8BB5DF;
                  borderStyle: inset;
                  borderThickness: 0;
                  cornerRadius: 0;
              }

       

      END CSS +++++++++++++++++++++++++++

       

       

       

      ABSTRACT COMPONENT ++++++++++++++

       

      <?xml version="1.0" encoding="utf-8"?>
      <fig:CalloutContainer
          xmlns:fig="com.adobe.wheelerstreet.fig.callout.*"
          xmlns="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo"
          >
         
          <Script>
              <![CDATA[
                  import mx.messaging.AbstractConsumer;

       

                  import flare.vis.data.NodeSprite;
                  import flare.vis.data.DataSprite;
                 
                  import mx.events.FlexEvent;
                  import mx.effects.easing.Linear;
                  import mx.collections.ArrayCollection;
                 
                  import com.spiceworks.networkmap.model.vo.NodeCalloutVO;
                 
                  import com.flexcapacitor.controls.HTML;
                  import com.wrapper.base.application.*;
                 
                 
                  private var  _sparkEnabled:Boolean = true;
                 
                  private var  _error:String = '';
                 
                  /* AUTOCLOSE -- if set to true (default) clicking x will remove
                  this instance from its parent */
                  public var autoClose:Boolean = true;
                  public var device:String;
                  public var node:NodeSprite;

       

                  // PUBLIC CONST --------------------------------------------------------------------------
                  public static const SUPER_DETAILS_CLOSED:String         = "superDetailClosed";
                  public static const SUPER_DETAILS_OPENED:String         = "superDetailOpened";
                  public static const SUPER_DETAILS_MINIMIZED:String         = "superDetailMinimized";
                  public static const SUPER_DETAILS_MAXIMIZED:String         = "superDetailMaximized";
                  public static const SUPER_DETAILS_MOUSED_OVER:String    = "superDetailsMousedOver";
                 
                  public static const FIRSTLEVEL_DATA_REFRESHED:String    = "firstLevelDataRefreshed";
                  public static const SECONDLEVEL_DATA_REFRESHED:String    = "secondLevelDataRefreshed";
                 
                  [Bindable]
                  public function get sparkEnabled() : Boolean
                  {
                      return _sparkEnabled;
                  }
                  public function set sparkEnabled( tf:Boolean ) : void
                  {
                      this._sparkEnabled = tf;
                  }
                 
                  [Bindable]
                  public function get error() : String
                  {
                      return _error;
                  }
                  public function set error( val:String ) : void
                  {
                      this._error = val as String;
                  }
                 
                  // 2nd LEVEL DATA GETTERSSETTER
                  [Bindable( event = 'secondLevelDataRefreshed' )]
                  public function get secondLevelData() : *
                  {
                      return new Object();
                  }
                  public function set secondLevelData( data:*) : void
                  {   
                     
                  }
                 
                  public function get maxedState() : Boolean
                  {
                      return null;
                  }
                  public function get title() : String
                  {
                      var s:String = '';
                      return s;
                  }
                 
                  public function set title( str:String ) : void
                  {
                     
                  }
                 
                 
                  public function set showMinMaxButtons(b:Boolean) : void
                  {
                     
                  }
                 
                  public function set origWidth(n:Number) : void
                  {
                         
                  }
                 
                  public function set origHeight(n:Number) : void
                  {
                         
                  }
                 
                  public function set maxedWidth(n:Number) : void
                  {
                         
                  }
                 
                  public function set maxedHeight(n:Number) : void
                  {
                         
                  }
             
                  private function stopProp( event:MouseEvent ) : void
                  {
                     
                  }
                 
                 
                  private function superDetailsOpened(  ) : void
                  {
                     
                  }
                 
                  private function superDetailsMinimized( event:FlexEvent ) : void
                  {
                     
                  }
                 
                  private function superDetailsMaximized( event:FlexEvent ) : void
                  {
                     
                  }
                 
                  private function dispatchThenCloseNodeDetails( event:MouseEvent ) : void
                  {
                     
                     
                  }
                 
                  private function handleMouseRollOver(e:MouseEvent) : void
                  {
                  }
                 
                  private function createHTML():void {
                 
                     }
                    
                     /**
                   * Sets the 1st Level data local variable that holds VO.
                   *
                   * @return void
                   * @param data Value Object containing data payload
                   */
                     public function setNodeCalloutFirstLevelData( data:* ) : void
                  {
                     
                  }
                    
                     /**
                   * Sets the data local variable that holds VO calling the setter
                   * function, secondLevelData.
                   *
                   * @return void
                   * @param data Value Object containing data payload
                   */
                     public function setNodeCalloutSecondLevelData( data:* ) : void
                  {

       

                  }
                 
                    
              ]]>
          </Script>
         
         
         
         
         
      </fig:CalloutContainer>

       

      END ABSTRACT COMPONENT ++++++++++++++++++++++++++++++++++++++++

       

       

       

      CONCRETE COMPONENT ++++++++++++++++++++++++++++++++++++++++++++++++

       

      <?xml version="1.0" encoding="utf-8"?>
      <!--  SuperDetailCalloutLEAF  -->
      <components:SuperDetailCallout
          xmlns:fig="com.adobe.wheelerstreet.fig.callout.*"
          xmlns="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:gumbo="library:adobe/flex/gumbo"
          xmlns:mx="library://ns.adobe.com/flex/halo"
          xmlns:components="com.networkmap.view.components.*"
          mouseOver="handleMouseRollOver(event)"
          mouseDown="stopProp(event)"
          mouseMove="stopProp(event)"
          minHeight="230"
          minWidth="350"
          width="350" 
          height="263"
          autoClose="true"
          >
         
          <Script>
              <![CDATA[
                  import mx.messaging.AbstractConsumer;

       

                  import flare.vis.data.NodeSprite;
                  import flare.vis.data.DataSprite;
                 
                  import mx.events.FlexEvent;
                  import mx.effects.easing.Linear;
                  import mx.collections.ArrayCollection;
                 
                  import com.networkmap.view.components.Sparkline;
                  import com.networkmap.model.vo.NodeCalloutVO;
                 
                  import com.flexcapacitor.controls.HTML;
                  import com.wrapper.base.application.*;
                 
                  [Bindable]
                  private var _origWidth:Number = 350;
                  [Bindable]
                  private var _origHeight:Number = 230;
                  [Bindable]
                  private var _maxedWidth:Number = 600;
                  [Bindable]
                  private var _maxedHeight:Number = 450;
                  [Bindable]
                  private var _showMinMaxButtons:Boolean = true;
                  [Bindable]
                  private var _topFive:ArrayCollection = new ArrayCollection;
                  [Bindable( event = 'secondLevelDataRefreshed' )]
                  private var _secondLevelData:NodeCalloutVO;
                 
                 
                  private var _maxedState:Boolean = false;
                 
                 
                  // BINDABLE VARIABLES --------------------------------------------------------------------
                  [Bindable]
                  private var _title:String = "title";

       

                  // PUBLIC CONST --------------------------------------------------------------------------
                  public static const SUPER_DETAILS_CLOSED:String         = "superDetailClosed";
                  public static const SUPER_DETAILS_OPENED:String         = "superDetailOpened";
                  public static const SUPER_DETAILS_MINIMIZED:String         = "superDetailMinimized";
                  public static const SUPER_DETAILS_MAXIMIZED:String         = "superDetailMaximized";
                  public static const SUPER_DETAILS_MOUSED_OVER:String    = "superDetailsMousedOver";
                 
                  public static const FIRSTLEVEL_DATA_REFRESHED:String    = "firstLevelDataRefreshed";
                  public static const SECONDLEVEL_DATA_REFRESHED:String    = "secondLevelDataRefreshed";
                 
                 
                  // 2nd LEVEL DATA GETTERSSETTER
                  [Bindable( event = 'secondLevelDataRefreshed' )]
                  override public function get secondLevelData() : *
                  {
                      return _secondLevelData;
                  }
                  override public function set secondLevelData( data:*) : void
                  {   
                      _secondLevelData = null;
                      _secondLevelData = data;
                     
                      _topFive = data.topFiveBandwidthUsers;  // << this is where the error starts ip is something else
                      this.dispatchEvent( new Event( SECONDLEVEL_DATA_REFRESHED) );
                  }
                 
                  override public function get maxedState() : Boolean
                  {
                      return _maxedState;
                  }
                  override public function get title() : String
                  {
                      return _title;
                  }
                 
                  override public function set title( str:String ) : void
                  {
                      _title = str;
                  }
                 
                 
                  override public function set showMinMaxButtons(b:Boolean) : void
                  {
                      _showMinMaxButtons = b;
                  }
                 
                  override public function set origWidth(n:Number) : void
                  {
                          _origWidth = n;
                  }
                 
                  override public function set origHeight(n:Number) : void
                  {
                          _origHeight = n;
                  }
                 
                  override public function set maxedWidth(n:Number) : void
                  {
                          _maxedWidth = n;
                  }
                 
                  override public function set maxedHeight(n:Number) : void
                  {
                          _maxedHeight = n;
                  }
                 
                 
             
                  private function stopProp( event:MouseEvent ) : void
                  {
                      event.stopPropagation();
                  }
                 
                  private function initLinkButton() : void
                  {
                      var nl:LinkButton = nameLabel;
                      if( nl != null && _secondLevelData.device_id != null ){
                          nameLabel.addEventListener( MouseEvent.CLICK, handleLinkButtManClick );
                      }
                  }
                 
                  private function handleLinkButtManClick( e:MouseEvent ) : void
                  {
                      navigateToURL( new URLRequest( secondLevelData.device_id != null ? '/inventory/groups/devices/' +secondLevelData.device_id : '/inventory/groups/devices'  ), '_self' );
                  }
                 
                  private function superDetailsOpened(  ) : void
                  {
                      dispatchEvent( new Event( SUPER_DETAILS_OPENED, true, false ) );
                  }
                 
                  private function superDetailsMinimized( event:FlexEvent ) : void
                  {
                      event.stopPropagation();
                      _maxedState = false;
                      dispatchEvent( new Event( SUPER_DETAILS_MINIMIZED, true, false ) );
                  }
                 
                  private function superDetailsMaximized( event:FlexEvent ) : void
                  {
                      event.stopPropagation();
                      _maxedState = true;
                      dispatchEvent( new Event( SUPER_DETAILS_MAXIMIZED, true, false ) );
                  }
                 
                  private function dispatchThenCloseNodeDetails( event:MouseEvent ) : void
                  {
                      event.stopImmediatePropagation();
                      //removeSuperDetails();
                      dispatchEvent( new Event( SUPER_DETAILS_CLOSED, true, false ) );
                     
                  }
                 
                  private function handleMouseRollOver(e:MouseEvent) : void
                  {
                      this.dispatchEvent( new MouseEvent( SUPER_DETAILS_MOUSED_OVER, true, false ) );
                  }
                 
                  private function createHTML():void {
                 
                     }
                    
                     /**
                   * Sets the 1st Level data local variable that holds VO.
                   *
                   * @return void
                   * @param data Value Object containing data payload
                   */
                     override public function setNodeCalloutFirstLevelData( data:* ) : void
                  {
                      if( data != null ) {
                          secondLevelData = data;
                      }
                  }
                    
                     /**
                   * Sets the data local variable that holds VO calling the setter
                   * function, secondLevelData.
                   *
                   * @return void
                   * @param data Value Object containing data payload
                   */
                     override public function setNodeCalloutSecondLevelData( data:* ) : void
                  {
                      if( data != null && data.isValid ) {
                          secondLevelData = data;
                         
                      }
                  }
                 
                    
              ]]>
          </Script>
         
      <!--    <s:states>
              <s:State name="minState" exitState="superDetailsMaximized(event)" />
              <s:State name="maxState" basedOn="minState" exitState="superDetailsMinimized(event)" />
          </s:states>
           <s:transitions>
              <s:Transition fromState="*" toState="maxState">
                  <s:Sequence>
                      <s:Resize target="{ bigbox }" duration="300"/>
                  </s:Sequence>
              </s:Transition>
              <s:Transition fromState="maxState" toState="*">
                  <s:Sequence>
                      <s:Resize target="{ bigbox }" duration="175" />
                  </s:Sequence>
              </s:Transition>
          </s:transitions>-->

       

          <mx:Canvas id="main">
              <mx:LinkButton id="nameLabel"
                  styleName="callOutHeader"
                  maxWidth="270"
                  label="{ secondLevelData.name + '  ' + '(' +secondLevelData.ip + ')' }"
                  labelPlacement="left"
                  creationComplete="initLinkButton();"
                  left="5"
                  rollOver="{secondLevelData.device_id != null ? nameLabel.setStyle('textDecoration', 'underline') : nameLabel.setStyle('textDecoration', 'none')}"
                  rollOut="{nameLabel.setStyle('textDecoration', 'none')}"
                  />
              <mx:Button
                  id="closeButton"
                  styleName="CalloutCloseButton"
                  right="5"
                  width="14" height="14"
                  click="{dispatchThenCloseNodeDetails( event )}"
                  />
              <!--<Button
                  id="expandButton"
                  enabled="{_showMinMaxButtons}"
                  includeInLayout="{_showMinMaxButtons}"
                  visible="_showMinMaxButtons{}"
                  styleName="CalloutExpandButton" 
                  right="{closeButton.width + 8}"
                  width="14" height="14"
                  click.minState="currentState='maxState'" click.maxState="currentState='minState'"
                  />-->
             
              <mx:VBox id="titleBar" top="18" width="100%">
                  <mx:Canvas id="detailsHolder"
                      borderStyle="none"
                      cornerRadius="0"
                      backgroundColor="0xFFFFFF" >
                          <mx:Canvas id="bigbox"
                              width="{_origWidth}"
                              height="{_origHeight}"
                              >
                                  <components:LeafMinSuperDetailComp
                                      id="leafContent"
                                      width="100%" height="100%"
                                      sparklineEnabled="{sparkEnabled}"
                                      dataPayLoad="{secondLevelData}"
                                       />
                          </mx:Canvas>
                  </mx:Canvas>
              </mx:VBox>   
          </mx:Canvas>
         
      </components:SuperDetailCallout>

       

      END CONCRETE COMPONENT ++++++++++++++++++

       

      Anyone know why this component doesn't show up on stage?  It was fine before I had to switch to the Flash Builder Beta from Flex 4 Gumbo Alpha?

        • 1. Re: WTF? One step migration = false;
          Peter Farland Level 3

          On looking at your CSS, are you sure that types like CalloutContainer are in the "library://ns.adobe.com/flex/halo" namespace?

           

          From the MXML, the fully qualified class name for CalloutContainer seems to be "com.adobe.wheelerstreet.fig.callout.CalloutContainer"... so if that component hasn't been added to a library namespace, you could always add a package @namespace with a prefix to the top of your CSS :

           

           

          @namespace fig "com.adobe.wheelerstreet.fig.callout.*";

           

           

           

          ...and then prefix your CalloutContainer type selector with the fig prefix:

           

          fig|CalloutContainer

           

          (You may have other types in here).

           

          Alternatively, you could specify the compiler argument --qualified-type-selectors=false if you knew that you weren't going to have colliding types in different namespaces (i.e. you weren't going to try and style both a Spark "Button" and a Halo "Button" in the same application).

          1 person found this helpful
          • 2. Re: WTF? One step migration = false;
            flairjax Level 1

            Ok, thx that got the style of the component correct, but when calling the function that puts the component on the stage in <Application> the added child doesn't show.  My app is like google maps where you can zoom. My added child component is getting added to the screen, but the only way I can get it show up is if I click and drag on the stage, which happens to scale the map up.  It seems like the invalidateDisplayList isn't being called or something.  I see their is a "invalidateLayering" function which I haven't seen before.  Is there a trick now in Gumbo to add a child to the stage and get it to update?

             

            Do you have to force the stage to update with something like the following?

             

            stage.invalidateDisplayList();
            stage.invalidateLayering();

            • 3. Re: WTF? One step migration = false;
              Flex harUI Adobe Employee

              Sounds like you're having a bad day.  Before we try to make it better, let me make it a bit worse.  You should not be using Gumbo to deliver an application.  This is not an official release and is therefore unsupported other than through engineers volunteering time on this forum.

               

              That said, I would try a simple test app.  Take hello world, add a button to add another button to the app, see if it works, that sort of thing.

               

              I don't think we made significant changes to the lifecycle per-se, updateDisplayList still should get called after an object gets put on the display list, but you no longer use addChild to add children to Spark containers.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              1 person found this helpful
              • 4. Re: WTF? One step migration = false;
                flairjax Level 1

                Anyone resources on how to add child components to a Spark container?

                • 5. Re: WTF? One step migration = false;
                  flairjax Level 1

                  Do you have to use <s:Application> or can I use <mx:Application> still?

                  • 6. Re: WTF? One step migration = false;
                    Flex harUI Adobe Employee

                    Should be addItem, not addChild, but are you sure you're using Spark containers?  Maybe you were using mx.core.Appication before.  I believe there was a point in time were we had where one was Halo and the other spark.  If you use mx:Application again addChild will still work.

                     

                     

                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.

                    Blog: http://blogs.adobe.com/aharui

                    • 7. Re: WTF? One step migration = false;
                      Flex harUI Adobe Employee

                      You can still use mx:Application and addChild()

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui

                      • 9. Re: WTF? One step migration = false;
                        Flex harUI Adobe Employee

                        Oh, yeah, my bad.  I can't keep up with the Fx-ing name changes either

                         

                        Alex Harui

                        Flex SDK Developer

                        Adobe Systems Inc.

                        Blog: http://blogs.adobe.com/aharui

                        • 10. Re: WTF? One step migration = false;
                          flairjax Level 1

                          Ok, then nothing should have changed then, but adding even a button to the stage doesn't happen.

                           

                          var b:Button = new Button;

                          b.width = 200;

                          b.height=200;

                          b.label="realllylongstuffforabuttonlabel"

                          this.addChild(b);

                           

                          Nothing shows up on the stage.

                          • 11. Re: WTF? One step migration = false;
                            Peter deHaan Level 4

                            How/where are you trying to use this code?

                            The following seems to work for me in Flex 4.0.0.7890:

                             

                            <?xml version="1.0" encoding="utf-8"?> 
                            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                              initialize="init();"> 
                             <mx:Script>
                              <![CDATA[
                               import mx.controls.Button;
                               private function init():void {
                                var b:Button = new Button;
                                b.width = 200;
                                b.height=200;
                                b.label="realllylongstuffforabuttonlabel"
                                this.addChild(b);
                               }
                              ]]>
                             </mx:Script>
                            </mx:Application>
                            

                             

                            <?xml version="1.0" encoding="utf-8"?> 
                            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                              xmlns:s="library://ns.adobe.com/flex/spark"
                              xmlns:mx="library://ns.adobe.com/flex/halo"
                              initialize="init();"> 
                             <fx:Script>
                              <![CDATA[
                               import mx.controls.Button;
                               // import spark.components.Button;
                               private function init():void {
                                var b:Button = new Button;
                                b.width = 200;
                                b.height=200;
                                b.label="realllylongstuffforabuttonlabel"
                                this.addElement(b);
                               }
                              ]]>
                             </fx:Script>
                            </s:Application>
                            

                             

                            Peter

                            • 12. Re: WTF? One step migration = false;
                              flairjax Level 1

                              Peter, do you have an email address where I can send my <application> file as I would rather not post it. Here.

                              • 13. Re: WTF? One step migration = false;
                                Flex harUI Adobe Employee

                                Do Peter's simple examples work for you in your current setup?

                                 

                                Alex Harui

                                Flex SDK Developer

                                Adobe Systems Inc.

                                Blog: http://blogs.adobe.com/aharui

                                • 14. Re: WTF? One step migration = false;
                                  flairjax Level 1

                                  Yes, in a new Flex project they work.

                                  • 15. Re: WTF? One step migration = false;
                                    Flex harUI Adobe Employee

                                    Are you still using Gumbo builds?  There could be a bug there or in your code.  If you are using 3.x, I'd be much more likely to suspect something in your code.

                                     

                                    Good luck,

                                     

                                    Alex Harui

                                    Flex SDK Developer

                                    Adobe Systems Inc.

                                    Blog: http://blogs.adobe.com/aharui

                                    • 16. Re: WTF? One step migration = false;
                                      flairjax Level 1

                                      No, I uninstalled Gumbo Alpha and have installed Flash Builder 4.

                                       

                                      Here is the code in <mx:application>. These inject functions are passed a custom visual component that are based on the Adobe Fig Callout Component. They should be added to the stage then the bringControlsToFront method rearranges all the items on the main stage as a few have to be on top at all times.  All this code worked perfectly before, meaning the sdnc components are injected into the stage.  Now with Flash Builder the methods are called, no errors are thrown, but when added to the stage you don't see them until you Alt+Click the stage, which is a zoom/scale/pan feature accomplished through a Matrix ( I should note that the injected components don't zoom/scale/pan ever, they remain the same size its the other items that zoom/scale/pan).  See mouseup and mousedown functions.

                                       

                                      So I am thinking it has to be something with the Display list not updating?  Inside these injectNodeDetail functions if I put the button generation code discussed above, they don't show up either.

                                       

                                          public function injectNodeDetail(  sdnc:SuperDetailCallout ) : void
                                                  {
                                                      if(sdc){
                                                          sdc = null;
                                                          _sdc = null;
                                                      }
                                                      var childCnt:Number = this.numChildren;
                                                      this.addChild( sdnc );
                                                      bringControlsToFront();
                                                      sdc = sdnc;
                                                  }
                                                 
                                                 
                                                  public function injectEdgeDetail( sdec:SuperDetailEdgeCallout ) : void
                                                  {
                                                      var childCount:int = this.numChildren;
                                                     
                                                      this.addChild(sdec);
                                                      bringControlsToFront();
                                                  }

                                       

                                      private function bringControlsToFront() : void
                                                  {
                                                      this.setChildIndex( windowshade, this.numChildren -1 ); 
                                                      this.setChildIndex( leftsidenav, this.numChildren -1 );
                                                      this.setChildIndex( betaButton,  this.numChildren -1 );
                                                  }

                                       

                                      private function onMouseDown(e:MouseEvent) : void {
                                                      if( !e.altKey ){ return };
                                                      showCursor();
                                                      //e.stopPropagation();
                                                      altPlusClickHappened = true;
                                                      /* Instantiate the referece rectangle at the mouse-downed coordinates*/
                                                      r = new Rectangle(Number(e.stageX),Number(e.stageY),0,0);
                                                      
                                                      //Apply the x,y,width and height properties to the canvas
                                                      selectionRectangle.x = r.x;
                                                      selectionRectangle.y = r.y;
                                                      selectionRectangle.width = r.width;
                                                      selectionRectangle.height = r.height;
                                                      selectionRectangle.name = 'selectionRect';
                                                      
                                                      //Add to stage
                                                      this.addChild( selectionRectangle );
                                                  }
                                                  
                                                  private function onMouseUp(e:MouseEvent) : void {
                                                     
                                                      if( altPlusClickHappened == false ){ return };
                                                      altPlusClickHappened = false;
                                                      e.stopPropagation();
                                                      removeCursor();
                                                      //Get an array of items on stage
                                                      var children:Array = this.getChildren();
                                                      
                                                      selectedItems = new Array();
                                                      
                                                      /* Get the size of the drawn rect so we can compute the size the stage needs to zoom
                                                         and get the x and y so we we can tell the flarevis how far to move to, as we want
                                                         the top left corner of the rect to move to the top left corner of the screen then
                                                         zoom in so that the inside of the rect area becomes the entire screen. */
                                                      var sx:Number = selectionRectangle.x;
                                                      var sy:Number = selectionRectangle.y;
                                                      var sw:Number = selectionRectangle.width;
                                                      var sh:Number = selectionRectangle.height;
                                                     
                                                      // set sx & sy to the top left most edge, they might have clicked then dragged up and to the left.
                                                      sx = Math.min( sx, sx + sw );
                                                      sy = Math.min( sy, sy + sh );
                                                     
                                                      // need to get the absolute width and height
                                                      sw = Math.abs( sw );
                                                      sh = Math.abs( sh );
                                                     
                                                      //Find the center of the rectangle that was drawn set this point at sx & sy.
                                                      sx =  ( sx + (sw / 2) );
                                                      sy =  ( sy + (sh / 2) );
                                                      
                                                     
                                                      /* dividing the rect width & height here by stages width & heigh to get the offset %, we take the larger
                                                         of the two perctenages and pass to the mediators eventually reaching the spiceworkspanzoom to zoom. */
                                                      var percToZoom:Number = Math.min( stage.width / sw, stage.height / sh );
                                                     
                                                     
                                                      // Set sx & sy to the distance btwn the middle of stage and the middle of rectangle we drew; pass to dozoomby
                                                      sx = (stage.width / 2) - sx;
                                                      sy = (stage.height / 2) - sy;
                                                      this.dispatchEvent( new RectangleToolEvent( RectangleToolEvent.RECTANGLE_TOOL_DRAG_MAGNIFIED, true,
                                                                                                      false, sx, sy, percToZoom ) );
                                                     
                                                      //Remove the selection rectangle
                                                      if( this.getChildByName('selectionRect') ) {
                                                          this.removeChild( this.getChildByName('selectionRect') );
                                                      }
                                                  
                                                  }
                                                  
                                                  private function onMouseMove(e:MouseEvent):void {
                                                     
                                                      if( altPlusClickHappened == false ){ return };
                                                     
                                                      e.stopPropagation();
                                                      //Keep resizing the Rectangle object and the canvas
                                                      r.bottomRight = new Point(e.stageX, e.stageY);
                                                      
                                                      selectionRectangle.x = r.x;
                                                      selectionRectangle.y = r.y;
                                                      selectionRectangle.width = r.width;
                                                      selectionRectangle.height = r.height;
                                                  }

                                      • 17. Re: WTF? One step migration = false;
                                        flairjax Level 1

                                        Ok, I have seem to have found the issue. This function is being called when the app starts and at random times. What is odd is I only have one function "doECTFAR" that calls "bringEdgeCalloutToFrontAfterRollOver" when I set a break point at "doECTFAR" it is never called.

                                         

                                         

                                        public function bringEdgeCalloutToFrontAfterRollOver( ec:* ) : void
                                                    {
                                                        var pt:Point = new Point(mouseX, mouseY);
                                                        this.getObjectsUnderPoint(pt);
                                                        if(ec && ec != null){
                                                            if( this.getElementIndex(ec) == (this.numElements - 1) ){return};
                                                            this.setElementIndex( ec, this.numElements - 1);
                                                            bringControlsToFront();
                                                        }
                                                    }

                                         

                                         

                                        So when I look at the stack trace this is what I see (below), and not sure why a style declaration is calling bringEdgeCalloutToFrontAfterRollOver function nor do understand how its calling it as it isn't going through my doECTFAR function?  Any suggestions?

                                         

                                        Main Thread (Suspended)   
                                            <anonymous>   
                                            mx.styles::CSSStyleDeclaration/http://www.adobe.com/2006/flex/mx/internal::addStyleToProtoChain   
                                            mx.styles::StyleProtoChain$/initProtoChain   
                                            mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::initProtoChain   
                                            mx.core::UIComponent/regenerateStyleCache   
                                            mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::addingChild   
                                            mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::addingChild   
                                            mx.core::Container/addChildAt   
                                            mx.core::Container/addChild   
                                            mx.core::Container/createComponentFromDescriptor   
                                            mx.core::Container/createComponentsFromDescriptors   
                                            mx.core::Container/createChildren   
                                            mx.core::UIComponent/initialize   
                                            mx.core::Container/initialize   
                                            mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::Container/addChildAt   
                                            mx.core::Container/addChild   
                                            mx.core::Container/createComponentFromDescriptor   
                                            mx.core::Container/createComponentsFromDescriptors   
                                            mx.core::Container/createChildren   
                                            mx.core::UIComponent/initialize   
                                            mx.core::Container/initialize   
                                            mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::Container/addChildAt   
                                            mx.core::Container/addChild   
                                            mx.core::Container/createComponentFromDescriptor   
                                            mx.core::Container/createComponentsFromDescriptors   
                                            mx.containers::Panel/createComponentsFromDescriptors   
                                            mx.core::Container/createChildren   
                                            mx.containers::Panel/createChildren   
                                            mx.core::UIComponent/initialize   
                                            mx.core::Container/initialize   
                                            mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::Container/addChildAt   
                                            mx.core::Container/addChild   
                                            mx.core::Container/createComponentFromDescriptor   
                                            mx.core::Container/createComponentsFromDescriptors   
                                            mx.core::Container/createChildren   
                                            flexlib.containers::WindowShade/createChildren   
                                            mx.core::UIComponent/initialize   
                                            mx.core::Container/initialize   
                                            mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::Container/addChildAt   
                                            mx.core::Container/addChild   
                                            mx.core::Container/createComponentFromDescriptor   
                                            mx.core::Container/createComponentsFromDescriptors   
                                            mx.core::Container/createChildren   
                                            mx.core::UIComponent/initialize   
                                            mx.core::Container/initialize   
                                            com.view.components::WindowShadeControls/initialize   
                                            mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.core::UIComponent/addChildAt   
                                            spark.components::Group/addItemToDisplayList   
                                            spark.components::Group/http://www.adobe.com/2006/flex/mx/internal::elementAdded   
                                            spark.components::Group/setMXMLContent   
                                            spark.components::Group/set mxmlContent   
                                            spark.components::SkinnableContainer/set mxmlContent   
                                            spark.components::SkinnableContainer/createDeferredContent   
                                            spark.components::SkinnableContainer/createContentIfNeeded   
                                            spark.components::SkinnableContainer/createChildren   
                                            mx.core::UIComponent/initialize   
                                            spark.components::Application/initialize   
                                            Network_Map/initialize   
                                            mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded   
                                            mx.managers::SystemManager/initializeTopLevelWindow   
                                            mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler   
                                            mx.managers::SystemManager/docFrameListener