topic Re: Flashbuilder 4 Widgets Transparent in ArcGIS API for Flex Questions

Flashbuilder 4 Widgets Transparent

GeorgeSimpson — Thu, 13 May 2010 18:59:05 GMT

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?

Re: Flashbuilder 4 Widgets Transparent

RobertScheitlin__GISP — Thu, 13 May 2010 19:19:21 GMT

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.

Re: Flashbuilder 4 Widgets Transparent

GeorgeSimpson — Mon, 17 May 2010 16:22:42 GMT

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?

Re: Flashbuilder 4 Widgets Transparent

BjornSvensson — Mon, 17 May 2010 16:28:35 GMT

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).

Re: Flashbuilder 4 Widgets Transparent

HaroldBostic — Thu, 03 Jun 2010 12:14:11 GMT

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.