Cómo hacer Sliders y pieles de zoom Marcos y estilos en Adobe Flex

Flex Builder es la solución de Adobe para las aplicaciones web y de escritorio basadas en datos. Utiliza XML y ActionScript para crear cuadros de mando animados que son capaces de mostrar información recuperada desde una ubicación remota. Los componentes integrados incluidos con Flex son totalmente personalizables. A través de "pelado" se puede alterar el diseño de elementos como "deslizadores". Además, puede cambiar la sensación general de la aplicación mediante el uso de CSS.

Instrucciones

Cómo hacer un control deslizante

1 Abra la vista de código de la aplicación principal de la flexión. Determinar si es necesario un control deslizante horizontal o un deslizador vertical. El control deslizante horizontal se denomina "HSlider" y el control deslizante vertical se llama el "VSlider."

2 Introducir el código para el control deslizante correspondiente. El HSlider utiliza la etiqueta de apertura "<s: HSlider>" y la etiqueta de cierre "</ s: HSlider>" y el VSlider utiliza la etiqueta de apertura "<s: VSlider>" y etiqueta de cierre "</ s: VSlider>. Para añadir un HSlider simplemente coloque el siguiente código en su aplicación:

<S: HSlider> </ s: HSLlider> o <s: HSlider />

3 Añadir propiedades deslizantes. Coloque las propiedades de deslizamiento entre las etiquetas de apertura y cierre. Algunas propiedades de ejemplo son "snapInterval", "id" y "información sobre herramientas".

<S: ". 30" VSlider id = "mySlider" snapInterval = tooltip = "Prueba Slider" />

El ejemplo anterior mostrará un control deslizante vertical con un ID de "mySlider" que se deslice en incrementos de "0,30". Cuando el usuario se desplaza sobre el deslizador se mostrará el mensaje "Prueba de Slider."

Piel componentes de Flex

4 Abra Adobe Fireworks CS5. En el menú de comandos seleccionar "Aplicación de aspectos de Flex" y luego "New Skin Flex." Puede optar por cambiar la carcasa de todos los componentes o componentes específicos. Alterar el diseño Flex como mejor le parezca.

5 Exportar la piel de los fuegos artificiales. En el menú de comandos, seleccione "Aplicación de aspectos de Flex" y luego "Piel Exportación Flex."

6 Abrir Flex y guardar el archivo de imagen de la piel en sus proyectos "activos" de la carpeta. Llamar al archivo de la piel para el componente en particular que desea la piel. Si ha diseñado una piel de un componente de botón, que podríamos llamar el archivo de imagen con el siguiente código:

<Mx: Botón

overSkin="@Embed(source='../assets/overSkin.gif')"
upSkin="@Embed(source='../assets/upSkin.gif')"
downSkin="@Embed(source='../assets/downSkin.gif')"/>

El ejemplo anterior asigna un archivo de imagen diferente a cada estado de botón.

La adición de CSS

7 Añadir estilos de página usando CSS. Puede agregar las declaraciones de estilos CSS directamente dentro de la aplicación principal de la flexión. Para ello, utilice el "<fx: Style>" etiqueta.

8 Añadir código CSS entre las etiquetas de estilo de apertura y cierre.

<Fx: Style>
.myTextStyle {
fontSize: 12;
color: # 000000;
}
</ Fx: Style>

El código CSS anterior crea un estilo llamado "myTextStyle" e indica que su tamaño de fuente es 12 y es de color negro.

9 Aplique su nuevo estilo a un elemento específico.

<S: Botón id = "myBtn" styleName = etiqueta "myTextStyle" = "Haga clic en" />

El código anterior se aplicará el estilo de fuente para el botón con un ID de "myBtn."

Consejos y advertencias

• "Marcos Zoom" no existen en Flex. Se pueden añadir efectos de zoom para diferentes componentes o elementos utilizando el efecto MX Zoom.
• Tenga en cuenta que cualquier código dentro del entorno de la flexión entre mayúsculas y minúsculas. Si usted está teniendo un problema con cualquiera de las funciones o estilos, comprobar para ver si tiene una capitalización fuera de lugar.