[ 
https://issues.apache.org/jira/browse/FLEX-35211?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
 ]

Santanu Karar updated FLEX-35211:
---------------------------------
    Description: 
(This issue once discussed in Apache mailing-list at: 
http://apache-flex-users.2333346.n4.nabble.com/Updating-className-td12217i20.html)

*Requirement*
Updating UI components' styles at runtime. If possible, updating their 
_className_ property at runtime and see it's effect without refreshing browser.

*What we have*
Updating _className_ property to any component do not works.

*Workaround*
Using _BindableCSSStyle_ to update any given style at runtime and see it's 
effect.

*Result*
_BindableCSSStyle_ API not able to update all it's properties at runtime. 
Furthermore, it only shown partially working in SWF, HTML version completely 
broken.

*Expected*
Class able to change all it's public properties at runtime in both HTML and SWF 
run.


h3. Observation 
As suggested in mailing-list (link given above), _BindableCSSStyle_ used in 
*FlexJSStore* example project that supplied within SDK bundle, in 
{{/flexjs/FlexJSStore/productsView/ProductCatalogThumbnail.mxml}} page. I 
tested, it does updates "border" property to a component at runtime. 

It does not updates all other properties at rumtime though (in SWF, HTML 
version do not works at all), i.e. backgroundColor.

I tested with a simple example, by modifying the "ProductCatalogThumbnail.mxml 
file only:

{code}
<js:beads>
        <js:ContainerDataBinding />
        <js:LayoutChangeNotifier watchedProperty="{borderStyles.borderColor}" 
initialValue="#FFFFFF" />
        <js:LayoutChangeNotifier 
watchedProperty="{borderStyles.backgroundColor}" initialValue="#FFFFFF" />
    </js:beads>
<js:style>
       <js:BindableCSSStyles id="borderStyles" borderStyle="solid" 
borderWidth="1" borderColor="#FFFFFF" backgroundColor="#FFFFFF"/>
</js:style>
...
private function rollOverHandler(event:MouseEvent):void
{
        borderStyles.borderColor = "#0000ff";
        borderStyles.backgroundColor = "#00ffff";
        //style["dropShadowEnabled"] = true;
        buttons.visible = true;
} 
{code}

Setting up _backgroundColor_ property in _rollOverHandler()_ never worked, as 
an example. 

  was:
(This issue once discussed in Apache mailing-list at: 
http://apache-flex-users.2333346.n4.nabble.com/Updating-className-td12217i20.html)

*Requirement*
Updating UI components' styles at runtime. If possible, updating their 
_className_ property at runtime and see it's effect without refreshing browser.

*What we have*
Updating _className_ property to any component do not works.

*Workaround*
Using _BindableCSSStyle_ to update any given style at runtime and see it's 
effect.

*Result*
_BindableCSSStyle_ API not able to update all it's properties at runtime. 
Furthermore, it only shown partially working in SWF, HTML version completely 
broken.

*Expected*
Class able to change all it's public properties at runtime in both HTML and SWF 
run.


h3. Observation 
As suggested in mailing-list (link given above), _BindableCSSStyle_ used in 
*FlexJSStore* example project that supplied within SDK bundle, in 
{{/flexjs/FlexJSStore/productsView/ProductCatalogThumbnail.mxml}} page. I 
tested, it does updates "border" property to a component at runtime. 

It does not updates all other properties at rumtime though (in SWF, HTML 
version do not works at all), i.e. backgroundColor.

I tested with a simple example, by modifying the "ProductCatalogThumbnail.mxml 
file only:

{code}
<js:style>
       <js:BindableCSSStyles id="borderStyles" borderStyle="solid" 
borderWidth="1" borderColor="#FFFFFF" backgroundColor="#FFFFFF"/>
</js:style>
...
private function rollOverHandler(event:MouseEvent):void
{
        borderStyles.borderColor = "#0000ff";
        borderStyles.backgroundColor = "#00ffff";
        //style["dropShadowEnabled"] = true;
        buttons.visible = true;
} 
{code}

Setting up _backgroundColor_ property in _rollOverHandler()_ never worked, as 
an example. 


> [FlexJS] BindableCSSStyle do not works or partially works between HTML and SWF
> ------------------------------------------------------------------------------
>
>                 Key: FLEX-35211
>                 URL: https://issues.apache.org/jira/browse/FLEX-35211
>             Project: Apache Flex
>          Issue Type: Bug
>    Affects Versions: Apache FlexJS 0.8.0
>            Reporter: Santanu Karar
>
> (This issue once discussed in Apache mailing-list at: 
> http://apache-flex-users.2333346.n4.nabble.com/Updating-className-td12217i20.html)
> *Requirement*
> Updating UI components' styles at runtime. If possible, updating their 
> _className_ property at runtime and see it's effect without refreshing 
> browser.
> *What we have*
> Updating _className_ property to any component do not works.
> *Workaround*
> Using _BindableCSSStyle_ to update any given style at runtime and see it's 
> effect.
> *Result*
> _BindableCSSStyle_ API not able to update all it's properties at runtime. 
> Furthermore, it only shown partially working in SWF, HTML version completely 
> broken.
> *Expected*
> Class able to change all it's public properties at runtime in both HTML and 
> SWF run.
> h3. Observation 
> As suggested in mailing-list (link given above), _BindableCSSStyle_ used in 
> *FlexJSStore* example project that supplied within SDK bundle, in 
> {{/flexjs/FlexJSStore/productsView/ProductCatalogThumbnail.mxml}} page. I 
> tested, it does updates "border" property to a component at runtime. 
> It does not updates all other properties at rumtime though (in SWF, HTML 
> version do not works at all), i.e. backgroundColor.
> I tested with a simple example, by modifying the 
> "ProductCatalogThumbnail.mxml file only:
> {code}
> <js:beads>
>         <js:ContainerDataBinding />
>         <js:LayoutChangeNotifier watchedProperty="{borderStyles.borderColor}" 
> initialValue="#FFFFFF" />
>       <js:LayoutChangeNotifier 
> watchedProperty="{borderStyles.backgroundColor}" initialValue="#FFFFFF" />
>     </js:beads>
> <js:style>
>        <js:BindableCSSStyles id="borderStyles" borderStyle="solid" 
> borderWidth="1" borderColor="#FFFFFF" backgroundColor="#FFFFFF"/>
> </js:style>
> ...
> private function rollOverHandler(event:MouseEvent):void
> {
>         borderStyles.borderColor = "#0000ff";
>         borderStyles.backgroundColor = "#00ffff";
>         //style["dropShadowEnabled"] = true;
>         buttons.visible = true;
> } 
> {code}
> Setting up _backgroundColor_ property in _rollOverHandler()_ never worked, as 
> an example. 



--
This message was sent by Atlassian JIRA
(v6.3.4#6332)

Reply via email to