Attribute table styling--where to do it? MXML attribute widget, xml, or CSS?

[DavidBoiano]

Hello,

I am trying to match the design of an application I created using the Flex API, not the Viewer. I have attached an image with each application side by side, with the one I am trying to mirror on the left.  Specifically, the changes I still need to make are:

In the header controller:
--How to change the color of the background of the geocoder only, not the entire header
--How to change the "Enter address..." text in the geocoder

In the attribute table:
--How to make the background color white and the text black (more basic looking)

[ATTACH=CONFIG]26705[/ATTACH]

I am pretty sure I can figure out how to make these changes--I just need some direction on where to look!


Thanks in advance for your help!

David

[RobertScheitlin__GISP]

David

1. You have to make change to the Flex API's skin for the Geocoder. GeoCoderSkin.mxml


2. The prompt is controlled by the searchprompt label tag in the HeaderControllerWidget.xml (not in the XML by default). http://resources.arcgis.com/en/help/flex-viewer/concepts/index.html#/Header_Controller_widget_tags/0...


3. You have to make change to the Flex API's skin for the AttributeTable. AttributeTableSkin.mxml

[DavidBoiano]

Hi Robert,

Thanks for your reply. I am having trouble locating the GeocoderSkin.mxml.  I am running Flex 3.3 and looking in the Skins package.  I found https://developers.arcgis.com/en/flex/api-reference/ in the API reference stating it was implemented in 3.2--but where?

Thanks!

David

PS This is what I see exactly in the package explorer:
[ATTACH=CONFIG]26709[/ATTACH]

[RobertScheitlin__GISP]

David,


   That is because you are looking at the viewer's skins and I said the API Skins (two different things). You need to download the Flex API and in that download you will find the API skins.

[DavidBoiano]

Robert,

My mistake. I have that downloaded, also. I have located the "bgfill" SolidColor tag within the GeocoderSkin.mxml.  It is default set to white, but my application is still showing up blue like the style set in the config file.  I am referencing the skin-class in the default.css file as

esri|Geocoder
{
 skin-class: ClassReference("com.esri.viewer.skins.MyGeocoderSkin");
}

Is this not where I should be referencing the skin?


Or is this not the correct part of the skin to make the background of the geocoder white?

 <s:Rect id="background"
   left="1" right="1" top="1" bottom="1">
  <s:fill>
   <s:SolidColor id="bgFill" color="0xFFFFFF"/>
  </s:fill>
 </s:Rect>

[RobertScheitlin__GISP]

David,

   It is this line of code that colors the background of the geocoder to the contentBackgroundColor:

            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = [ "bgFill" ];

Change it to:

static private const contentFill:Array = [];

[DavidBoiano]

Robert,

I have been requested to change the color of the search prompt that automatically displays in the Geocoder. Would this be done in the skin as well? Looking through the code I have located

 <s:RichEditableText id="textDisplay"

and the

 <s:Label id="promptDisplay"

and followed them through the actionscript code. I don't see anywhere in the mxml or AS where the color is set. Is this possible to change?  I was able to successfully change the prompt text that is displayed in the Header Controller widget in the xml file and the background was changed to white. However, the text is gray and now hard to read.

Thanks,

David

[RobertScheitlin__GISP · Accepted solution]

David,

  Add an alpha attribute to the  promptDisplay:

<s:Label id="promptDisplay" color="0x000000" alpha="1"              includeIn="normalWithPrompt,disabledWithPrompt"              includeInLayout="false"              maxDisplayedLines="1"              mouseChildren="false"              mouseEnabled="false"              verticalAlign="middle"/>

[DavidBoiano]

Awesome. THANK YOU!