Cómo personalizar un acordeón Flex

Flex Builder es la solución de Adobe para el desarrollo web por datos. El uso de XML, ActionScript y el resto de la Adobe Creative Suite, un desarrollador web puede tanto diseñar y desarrollar aplicaciones web ricas. La biblioteca de Adobe Flex viene con componentes integrados. Uno de esos componentes es el acordeón. El acordeón es un menú deslizante que muestra información basada en el clic de un usuario. Uso de Adobe Fireworks, un diseñador puede desarrollar y desplegar pieles únicas del componente Accordion. Desollado dará una aplicación web una apariencia única.

Instrucciones

Desarrollar la piel del acordeón

1 Iniciar Fireworks CS5 y abrir un nuevo documento. En el menú "Comandos", seleccione "Flex desuello," y luego "New Skin Flex."

2 Seleccione el componente que desea la piel. Los fuegos artificiales le permiten elegir varios componentes o un solo componente. Seleccione "Componentes específicos", y luego seleccione el componente Accordion de la lista. Seleccione "OK".

3 El uso de los fuegos artificiales del juego de herramientas integrado, el diseño de una piel para su componente acordeón. Exportar la piel Flex mediante la selección de "comandos", luego "Flex desuello," y, por último, "Piel Exportación Flex." Elija dónde desea guardar el archivo de la piel.

Crear el acordeón y el estilo

4 Abra Adobe Flex y cambiar a su principales aplicaciones de código y la vista. Añadir la apertura y de cierre para el contenedor de acordeón:

<Mx: acordeón>
</ Mx: acordeón>

5 Añadir paneles a su acordeón entre la apertura y el cierre de las etiquetas de acordeón.

<Mx: acordeón>

<mx:Form id="option1" label="Option 1">
</mx:Form>

& Lt; mx: Formulario de id = & quot; opcion2 & quot; label = & quot; Opción 2 ''>
& Lt; / mx: Forma>

</ Mx: acordeón>

El código anterior crea el acordeón y añade dos opciones del panel para el usuario para elegir. Los paneles están etiquetados como "Opción 1" y "Opción 2" Coloque el contenido de "Opción 1" y "Opción 2" entre la apertura y el cierre de las etiquetas de "forma".

6 Importar la obra de la piel que ha creado. Seleccione "Archivo", luego "Importar", a continuación, y "Flash Builder" "ilustraciones de la piel." Elija la carpeta que desea importar su obra de arte en la piel. Asegúrese de que la carpeta se encuentra dentro del sistema de archivo principal de aplicaciones.

7 Nombre del archivo CSS obra piel. Flex creará un archivo CSS de la piel se puede llamar desde su aplicación Flex. Nombre de este archivo en el campo "Crear reglas de estilo de la piel" del cuadro de diálogo de importación. Haga clic en Siguiente."

8 Seleccione la ilustración que desea importar. Puede importar la totalidad de la obra o componentes específicos. Después de la selección de su obra, haga clic en "Finalizar". Flex creará automáticamente las clases para la ilustración de la piel. Añadir la clase a su acordeón:

<Mx: acordeón skinClass = "yourAccordionClass">

<mx:Form id="option1" label="Option 1">
</mx:Form>

& Lt; mx: Formulario de id = & quot; opcion2 & quot; label = & quot; Opción 2 ''>
& Lt; / mx: Forma>

</ Mx: acordeón>

El código anterior se agrega la clase de la piel "yourAccordionClass" a su componente Accordion.

Consejos y advertencias

• Flex de código es sensible a mayúsculas. Si se encuentra con problemas, asegúrese de que su aplicación es libre de la capitalización al azar.