Flashbuilder 4 Widgets Transparent

[GeorgeSimpson]

I just upgraded SFV 1.3 to use Flashbuilder 4 and the 2.0 API.  All of my widgets are now transparent.  The banner and controller menus are fine, after modifying the css files to include the namespace tags.  What am I missing?

[RobertScheitlin__GISP]

gsimpson4,

   The combination of "SFV 1.3 to use Flashbuilder 4 and the 2.0 API" is not supported. if you are using SFV1.3 you can use Flashbuilder 4 but must use 1.3 API and Flex SDK 3.5 and not SDK 4.0.

[GeorgeSimpson]

yeah, i was afraid of that, but still wanted to get ahead with moving to the newer platform.  From my preliminary testing, everything else seems to work - with some minor changes throughout.  I was hoping to get some ideas as to why the CSS behavior wasn't functioning correctly to see if i could possibly get it working.

any ideas if/when ESRI will release a new version of the SFV that is supported?

[BjornSvensson]

any ideas if/when ESRI will release a new version of the SFV that is supported?

We're planning a beta of the "ArcGIS Viewer for Flex" next month (June).

[HaroldBostic]

Disclaimer *****I just started using Flex 4.0 SDK yesterday**** My setup is FB3,SDK 4 (latest stable version), ESRI FLEX API 2.0.  My inital test tell me that most everything is programmatically working correctly.  With that said, I modified the WidgetTemplate.mxml file to include the following code.

<mx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "http://www.adobe.com/2006/mxml";
       
        .WidgetTitleClass
  {
   fontFamily: Arial;
   fontSize: 12;
   fontWeight: bold;
   color: #000000;
  }
        .WidgetCanvasClass
  {
     borderStyle: solid;
     borderColor: #FFFFFF;
     borderThickness: 1;
     cornerRadius: 5;
     backgroundAlpha: 0.7;
     backgroundColor: #C8C8C8;
     dropShadowEnabled: true;
     shadowDirection: right;
     shadowDistance: 5;
     horizontalScrollPolicy: off;
     verticalScrollPolicy: off;
  }
 
  .WidgetContentClass
  {
   backgroundAlpha: 0.7;
      backgroundColor: #A0A0A0;
      paddingLeft: 5;
      paddingRight: 5;
      paddingTop: 5;
      paddingBottom: 5;
  }
 
 
 
  .WidgetRuleClass
  {
   strokeColor: #000000;
   shadowColor: #FFFFFF;
  }
 
  .WidgetTextClass
  {
   fontFamily: Arial;
   fontSize: 11;
   fontWeight: bold;
   color: #000000;
  }
</mx:Style>

I added the word "Class" to the end of the class selectors so that they were different in name from the names in the style.css file.  After doing so, I assigned the local selectors to the dynamic contrlols like:

wCanvas = new Canvas();
    wCanvas.x = 40;
    wCanvas.y = 0;
    wCanvas.width = width - 40;
    wCanvas.height = height;
    wCanvas.horizontalScrollPolicy = "off";
    wCanvas.verticalScrollPolicy = "off";
    wCanvas.styleName = "WidgetCanvasClass";
    mainCanvas.addChild(wCanvas);

The widgets now render correctly.  I'm new so I have not figured out how to port this back into the CSS, but at least it's a start.