Comunidad de diseño web y desarrollo en internet online

Hacer que un componente Accordion cambien con mouseOver

Citar            
MensajeEscrito el 15 Oct 2008 06:53 am
Bueno, no se si este asunto ya esté arreglado, espero que si es así, cuando menos mi método sea distinto (que no digo más util, jeje :P ) y sobre todo, les sea de gran ayuda a quienes no hayan podido dar con la respuesta.

Resulta que hace poco me encontré con la necesidad (necedaaaad, más que necesidad en sí :lol: ) de lograr que un Accordion cambiara de contenedor (o no se como llamarle, de pestaña, pues), solo pasando el puntero del mouse sobre cada uno de sus botones, es decir, sin necesidad de hacer click en el elemento. Anduve buscando por la documentación de Flex y no encontré una manera de poder saber sobre cual de los botones se encontraba el puntero del mouse, es decir, el componente ToggleButtonBar dispara un evento del tipo ItemClickEvent, que permite saber el indice del boton que disparó ese evento, pero en el componente Accordion, no lo encontre, y mucho menos para saber no el índice del botón en el que se hacía click, sino el indice del botón donde estaba el puntero, sabiendo esto sería facíl llamar a la propiedad selectedIndex del componente Accordion, pues no, no lo encontré. Lo que sí encontré fue un método muy interesante del propio componente Accordion, que es el metodo getHeaderAt(), el cual al ser llamado devuelve una referencia del botón que se encuentre en el índice proporcionado en el parámetro de dicho método, la solución es bastante sencilla en realidad, pero no puedo dejar de compartirla para aquellos que odian andar buscando por toda la documentación de flex (que opino es un buen hábito ese de leer hasta el mas recóndito lugar de la documentación, pero es cuestión de cada quien). Sin más palabrería, aquí esta el ejemplo.


Código :

<?xml version="1.0" encoding="utf-8"?>
<!-- accordion_change_with_mouseOver -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>
       <![CDATA[
          import flash.events.MouseEvent;
          
          private function configureChildren():void{
                        //Creamos un ciclo for para añadir event listeners a todos los
                        //botones del componente Accordion
             for(var i:int = 0; i < myAccordion.numChildren; i++){
                                //Con el método getHeaderAt(), se llama a la referencia
                                //de el boton que esta en la cabecera(header) de cada
                                //child
                myAccordion.getHeaderAt(i).addEventListener(MouseEvent.MOUSE_OVER, dispatchTheClickEvent);
             } 
          }
          
                //Funcion que llama al event click con el metodo dispatchEvent
          private function dispatchTheClickEvent(event:MouseEvent):void{
             event.target.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
          }
          
                //Y eso es todo
       ]]>
    </mx:Script>
    
    <!-- El VBox que contiene todos los demás componentes -->
    <mx:VBox horizontalAlign="center" width="100%" paddingTop="100">
        
        <!-- Un simple panel con algunos estilos y propiedades definidos -->
       <mx:Panel title="Accordion that change with a mouseOver in its children" width="70%"
           paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
           
                <!-- El componente Accordion que despacha el evento creationComplete, el cual llama a la
                     función cofigureChildren(), el cual añade eventListeners a todos los botones del contenedor -->
          <mx:Accordion id="myAccordion" width="70%" creationComplete="configureChildren()">
             <mx:VBox label="1. First child" height="150">
                <mx:Label text="This is the first child's label of the Accordion component"/>
             </mx:VBox>
             <mx:VBox label="2. Second child" height="150">
                <mx:Label text="This is the second child's label of the Accordion component"/>
             </mx:VBox>
             <mx:VBox label="3. Third child" height="150">
                <mx:Label text="This is the third child's label of the Accordion component"/>
             </mx:VBox>
          </mx:Accordion>
       </mx:Panel>
    </mx:VBox>
   
</mx:Application>



La película flash no la pude subir, no cuento con servidor a la mano, alguien que me pueda hechar la mano con eso, gracias.

Por Oz Nuñez

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Jun 2010 02:11 am
Hola
Muy interesante pero me pregunto como se haria esto en AS 2 flash 8
Tendrias la posibilidad de hacerlo para que entienda??
Gracias.
Julian

Por apocrifo3

1 de clabLevel



 

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.