Question

So I’m using a custom auto suggest component that I found online at http://hillelcoren.com/flex-autocomplete/. The background color for the item is set within the following folder: com > hillelcoren > components > autoComplete > FlowBox.mxml. The bg color hard coded in there to be white:

<mx:Canvas
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="com.hillelcoren.components.autoComplete.classes.*"
    verticalScrollPolicy="off" horizontalScrollPolicy="off"
    borderStyle="inset" backgroundColor="#FFFFFF"
    initialize="init()" clipContent="true" 
    xmlns:components="com.hillelcoren.components.*">

I use this component from within a component I created called “position.mxml” that is located in a folder named “modules”. Is there any way that from the position module, I can change the background color of the autosuggest box?

Answer 1

Really it depends on the component architecture and I have no drilled into the architecture of Hillel’s AutoComplete component.

Styles are often inherited, so in theory setting the backgroundColor style on the position component or on the AutoComplete is one way to set the value., However, I would expect a “hard coded” style to override such inheritance unless you set it after the component initialized.

Another approach is to modify Hillel’s component to expose this value as a style. In theory this isn’t that hard; in practice a complicated architecture could make it difficult. More info on creating custom styles.

A third approach is to drill down into the component and set the style. Something like this:

positionInstance.autoCompleteInstance.flowBoxInstance.setStyle('backgroundColor',myNewStyle);

Of course, all the relevant component instances must be public to do so.

A fourth approach might be to use a different component. The Flextras AutoComplete component is a native Spark component and it would be easy to create a custom skin that changes the background color of any of the relevant skin parts.