Micaela 6 de marzo de 2009 a las 09.10
   Imprimir artículo
elWebmaster.com

Flex: Cambiando el color de la barra de carga con CSS y ActionSript


Si estás configurando o adaptando una aplicación web en Flex seguramente te toparás con las barras de progreso. Seguramente necesitarás configurar el color de la barra, para que se mantenga a tono con el diseño general.

En este mini tutorial te mostramos cómo variar el color de la barra de carga en progreso configurando el estilo de barColor directamente, desde un CSS externo o con ActionScript.
En el siguiente ejemplo te mostramos cómo configurar el color de la barra en el control de la ProgressBar de Flex, configurando directamente el estilo del atributo barColor:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/01/setting-the-bar-color-on-the-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_barColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="barColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="red" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            barColor="{colorPicker.selectedColor}"
            labelPlacement="center"
            height="100" />

</mx:Application>

También se puede configurar el estilo barColor en un archivo .CSS externo o en el bloque <Style> block, como se ve aquí:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/01/setting-the-bar-color-on-the-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_barColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ProgressBar {
            barColor: red;
        }
    </mx:Style>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            labelPlacement="center"
            height="100" />

</mx:Application>

Si estás configurando el estilo de barColor con CSS, también puedes hacer uso de la siguiente sintaxis:

<mx:Style>
    ProgressBar {
        barColor: #FF0000;
    }
</mx:Style>

O puedes configurar el estilo de barColor usando ActionScript, como se ve a continuación:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/01/setting-the-bar-color-on-the-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_barColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                progressBar.setStyle("barColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="barColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="red"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            labelPlacement="center"
            height="100" />

</mx:Application>

En este caso, también puedes hacer uso de las siguientes sintaxis:

<mx:Script>
    <![CDATA[
        private function change():void {
            progressBar.setStyle("barColor", 0xFF0000);
        }
    ]]>
</mx:Script>

<mx:Script>
    <![CDATA[
        private function change():void {
            progressBar.setStyle("barColor", "#FF0000");
        }
    ]]>
</mx:Script>

Fuente: Flex Examples


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder