Menu VAccordion

Hola Gente, les escribo para ver si alguien me puede ayudar con este codigo que no me funciona, lo que intento hacer es que al cliquear una opcion del menu (AccordionItem) se cambie la pantalla y se muestre la que corresponda. Gracias de nuevo

archivo1.mxml:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
xmlns:views="com.views.*"
xmlns:flexlib="http://code.google.com/p/flexlib/"
layout="vertical" viewSourceURL="srcview/index.html">

<mx:WipeLeft duration="500" id="wipeLeft"/>
<mx:WipeRight duration="500" id="wipeRight"/>

<mx:Style source="assets/css/Main.css" />

<mx:HDividedBox top="60" left="8" right="8" bottom="8" >

<mx:Panel title="Matemática - Módulos">

<flexlib:VAccordion id="accordion"
headerLocation="below" width="200"
resizeToContent="true" headerRenderer="Header" bottom="Abajo"

>

<AccordionItem title="Autoevaluación"
image="@Embed('imagenes/autoevaluacion.png')"
description="De qué se trata?"
contenido="0"/>

<AccordionItem title="Unidad 1"
image="@Embed('imagenes/operacionesconnumeros.png')"
description="Operaciones con números."
contenido="1"/>

<AccordionItem title="Unidad 2"
image="@Embed('imagenes/expresionesalgebraicas.png')"
description="Operaciones con expresiones algebraicas."
contenido="2"/>

<AccordionItem title="Unidad 3"
image="@Embed('imagenes/ecuacionesyproblemas.png')"
description="Ecuaciones y problemas."
contenido="3"/>

<AccordionItem title="Unidad 4"
image="@Embed('imagenes/trigonometria.png')"
description="Trigonometría."
contenido="4"/>

</flexlib:VAccordion>

</mx:Panel>

<mx:ViewStack id="ViewStack" width="100%" height="550" creationPolicy="all">
<mx:Panel width="800" height="550" layout="horizontal" horizontalCenter="0" title="Autoevaluación1" verticalCenter="10"
showEffect="{wipeRight}" hideEffect="{wipeLeft}">
<views:Text1 id="text1" label="Autoevaluacion1"
/>
</mx:Panel>
<mx:Panel width="800" height="550" layout="horizontal" horizontalCenter="0" title="Autoevaluación2" verticalCenter="10"
showEffect="{wipeRight}" hideEffect="{wipeLeft}">
<views:Text2 id="text2" label="Autoevaluacion2"
/>
</mx:Panel>
<mx:Panel width="800" height="550" layout="horizontal" horizontalCenter="0" title="Autoevaluación3" verticalCenter="10"
showEffect="{wipeRight}" hideEffect="{wipeLeft}">
<views:Text3 id="text3" label="Autoevaluacion3"
/>
</mx:Panel>
<mx:Panel width="800" height="550" layout="horizontal" horizontalCenter="0" title="Autoevaluación4" verticalCenter="10"
showEffect="{wipeRight}" hideEffect="{wipeLeft}">
<views:Text4 id="text4" label="Autoevaluacion4"
/>
</mx:Panel>
<mx:Panel width="800" height="550" layout="horizontal" horizontalCenter="0" title="Autoevaluación5" verticalCenter="10"
showEffect="{wipeRight}" hideEffect="{wipeLeft}">
<views:Text5 id="text5" label="Autoevaluacion5"
/>
</mx:Panel>
</mx:ViewStack>


</mx:HDividedBox>
</mx:Application>


Por otro lado tengo los archivos :
Text1.mxml ..... Text5.mxml
por ej:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="730" height="330"
xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*"
xmlns:local="*" >

<viewStackEffects:CoverFlowPapervision3D id="effect" transparent="true"/>

<mx:VBox x="10" y="10" width="332" height="305">
<mx:Label text="Resolvamos los siguientes problemas:"/>
<mx:Text text="a) Un edificio consta de una planta baja más 8 pisos. En cada piso hay tres monoambientes, dos departamentos de dos ambientes y un departamento de 3 ambientes; si la misma estructura se repite en la planta baja, ¿cuántos departamentos tiene el edificio?
b) En el desierto de Atacama la temperatura puede variar a lo largo de un día entre los 30°C al mediodía y los 15° bajo cero a la noche. ¿Cuál es la amplitud térmica diaria?
¿Puedes decir en qué conjunto numérico hemos trabajado para resolver cada problema?" width="323" height="277"/>
</mx:VBox>

<mx:VBox x="350" y="10" width="370" height="305">

<mx:ViewStack id="viewStack" width="364" height="190">

<local:ExampleContainer1 hideEffect="effect" showEffect="effect" width="362" height="189"/>
<local:ExampleContainer2 hideEffect="effect" showEffect="effect" width="362" height="189" />
<local:ExampleContainer3 hideEffect="effect" showEffect="effect" width="362" height="189"/>
<local:ExampleContainer4 hideEffect="effect" showEffect="effect" width="362" height="189"/>

</mx:ViewStack>

<mx:HScrollBar id="hScrollBar" width="350" creationComplete="{hScrollBar.setScrollProperties( 3, 0, 3, 1 );}" scroll="{viewStack.selectedIndex = hScrollBar.scrollPosition}"/>
<mx:ToggleButtonBar dataProvider="{viewStack}" width="352"/>

</mx:VBox>
</mx:Canvas> 

Muchas gracias

Desconozco el VAccodrion que es un componente de flexlib, pero por lógica imagino que le puedes poner un evento click donde selecciones el index del viewstack, algo como

Código ActionScript :

click="move(3)"

//Y el handler

function move(index:int):void{
   viewStack.selecteditem = index
}

No le pongas viewstack de nombre ya que es confuso con el nombre de la clase

Jorge

Muchas gracias Jorge, pude solucionarlo con lo que me dijiste.
Si conocés alguna página de donde pueda sacar ideas de efectos, apariencias, etc de flex sería de mucha ayuda para continuar con el proyecto.
Muchas gracias de nuevo, María Jesús.-

Tienes algunas en Flex 4, mirate por ejemplo http://blog.flexexamples.com/2008/10/13/3d-rotating-objects-in-flex-using-the-fxrotate3d-effect-and-flash-player-10/

Jorge

Buenos dias, tengo una complicación con el VAccordion, cuando voy navegando por el menu llega un momento que se frena todo (se traba), tengo que presionar F5 para que siga funcionando.
Alguien sabe a qué se debe?

Muchas gracias
María Jesús.-