Comunidad de diseño web y desarrollo en internet online

TileList Dinamico

Citar            
MensajeEscrito el 22 Feb 2009 08:10 pm
Hola, estoy en la creacion de un proyecto en flex, en el cual se va publicar los productos disponibles en linea, entonces para ello, estoy utilizando un acordion en la izquierda y en la derecha un tileList pero el cual debe de cambiar cuando seleccione una categoria que esta dentro del acordion, aqui les dejo el codigo que ya e avanzado:

Código :

<?xml version="1.0"?>
<!-- Simple example to demonstrate the TileList Control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="areasEmployees.send()">

    <mx:Script>
        <![CDATA[
        
           import mx.events.IndexChangedEvent;
           import mx.rpc.events.ResultEvent;
         import mx.containers.HBox;
         import flash.events.Event;
         
         
         import flash.events.MouseEvent;
         import mx.events.FlexEvent;
   import com.adobe.viewsource.ViewSource;
         
         
                                
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import mx.controls.TileList;
            import mx.controls.Label;
            import mx.controls.List;
            import mx.events.ListEvent;
   
            import mx.controls.Image;
            import mx.events.CloseEvent;
            import mx.containers.TitleWindow;
            import mx.managers.PopUpManager;
            
            
            var j:int;
            var i:int;
            var a:int;
            var b:int;
            var c:int;
            var d:int;
            
       
            /* Array of created containers. */
            private var hBoxes:Array = [];
                        
         [Bindable]
         private var areasObj:Object = new Object();

         public function setArrays(evt:ResultEvent):void {
         //Alert.show(String(evt.result));
         areasObj = Object(evt.result);
         addHB()
         addcontenido()
         a=0;
            b=0;
            c=0;
         }
         
         public function andyflonav( event:Event ):void {
         a=event.currentTarget.selectedIndex;
         //Alert.show(String("Andy " +  ));
         }
         
         public function andys( event:Event ):void {
            b=event.currentTarget.selectedIndex;
         //Alert.show(String("Flores " +  j ));
         }
         
         public function paramarca( event:Event ):void {
         c=event.currentTarget.data;
         d=event.currentTarget.selectedIndex;
         init(event);
         }
         
            public function addHB():void {
                /* Create new HBox container. */          
                for(j=0;j<areasObj.child('producto').length();j++) {
                  var newHB:HBox = new HBox();
                  newHB.label = areasObj.producto.name[j].toString();
                  //var newHBi:Object = new Object();
                  var newLi:List = new List();
                  newLi.dataProvider=areasObj.producto[j].category.name;
                  newLi.height=107;
                  newLi.width=177;
                  
                  newLi.labelField='category';
                  newLi.addEventListener (ListEvent.CHANGE, andyflonav);
                  
                  newHB.addChild(newLi);
                  
                    hBoxes.push(myAcc.addChild(newHB));
                    myAcc.addEventListener(IndexChangedEvent.CHANGE,andys)
                    
            }
            //CameraSelection.dataProvider=areasObj.producto[b].category[a].
            
            }
            
            public function addcontenido():void {
                /* Create new HBox container. */          
                for(j=0;j<areasObj.producto[b].category[a].child('marca').length();j++) {
                  var newHB:HBox = new HBox();
                  var Tmarca:Label = new Label();
                  Tmarca.text=areasObj.producto[b].category[a].marca.name[j].toString()
                  newHB.label = areasObj.producto.name[j].toString();
                  //var newHBi:Object = new Object();
                  
                  var newLi:TileList = new TileList();
                  newLi.dataProvider=areasObj.producto[b].category[a].marca[j].model;
               //   var arayandy:Object = new Object()
                  for(i=0;i<areasObj.producto[b].category[a].marca[j].child('model').length();i++) {
                  //    arayandy.
                      
                      //   private var phone3:Class = new Class;
                     newLi.dataProvider[i].icon="phone3";
                  //   [Embed(source="assets/radioIcon.jpg")]
                  //   var phone3:Class = new Class;
                  }
                  newLi.data=j;
                  newLi.height=207;
                  newLi.width=277;
                  newLi.labelField='name';
                  newLi.iconField='icon';
                  
                  
                  
               //   newLi.myIcon="@Embed(source='assets/icono_msn.jpg')"
                  newLi.addEventListener(ListEvent.ITEM_CLICK, paramarca);
                  //newLi.addEventListener (ListEvent.CHANGE, paramarca);
                  //newLi.width=int(600%)
                  
                  newHB.addChild(newLi);
                  marcas.addChild(Tmarca)
                    hBoxes.push(marcas.addChild(newHB));
                    
            }
            
            
            }
            
            
            
            private var titleWindow:TitleWindow;
            private function init( event:Event ):void {
                var label:Label = new Label();
                label.text = "producto: "+b+" categoria: "+a+" marca: "+c+" ekipo: "+d;
                
                var imagenes:Image = new Image();
            imagenes.source = "assets/radioIcon.jpg"

                titleWindow = new TitleWindow();
                titleWindow.title = event.currentTarget.value.valueOf();
               // titleWindow.title = CameraSelection.;
                titleWindow.showCloseButton = true;
                titleWindow.width = 460;
                titleWindow.height = 580;
                titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);
                titleWindow.addChild(label);
                titleWindow.addChild(imagenes);

                PopUpManager.addPopUp(titleWindow, this, true);
                PopUpManager.centerPopUp(titleWindow);            
            }
            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(titleWindow);
            }
             
         //    [Bindable]
          //   [Embed(source=areasObj.producto.category.marca.model.icon.toString())]
          //   public var phone1:Class;
          //   public function addcontenidos( phone0:Class):void {
          //   [Bindable]
          //   []
           //  public var phone0:Class;
           //  }
             
             
            
            [Embed(source="assets/icono_msn.jpg")]
             public var phone3:Class;
         
        //     [Bindable]
         //    [Embed(source="assets/radioIcon.jpg")]
          //   public var areasObj.producto[0].category[0].marca[0].name.toString():Class;

             [Bindable]
             [Embed(source=("assets/radioIcon.jpg"))]
             public var phone5:Class;
        ]]>
    </mx:Script>
<mx:HTTPService id="areasEmployees" method="GET" url="datox.xml" resultFormat="e4x" result="setArrays(event);"/>
    <mx:Panel title="PCFIX" height="100%" width="100%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
        <mx:HDividedBox width="100%" height="100%">
        <mx:Panel width="199" height="100%" layout="absolute">
           <mx:Accordion id="myAcc" height="350" width="100%"> </mx:Accordion>
        </mx:Panel>
        <mx:Panel width="100%" height="100%" layout="absolute" title="Productos">
           <mx:VBox width="100%" height="100%" id="marcas">
      <!--       <mx:HBox width="100%" height="100%" id="productos">
              
             <mx:Label width="60" color="blue" 
                text="Sony." y="10"/>
            <mx:TileList id="CameraSelection" height="100%" width="100%" 
                 rowHeight="225" columnWidth="125" itemClick="init()" x="0" y="36">
               <mx:dataProvider>
                    <mx:Array id="prod">
                         <mx:Object label="Nokia 6630"  icon="{phone1}" id="unotri" />
                        <mx:Object label="Nokia 6680" icon="{phone2}"/>
                        <mx:Object label="Nokia 7610" icon="{phone3}"/>
                        <mx:Object label="Nokia LGV" icon="{phone4}"/>
                        <mx:Object label="Nokia LMV" icon="{phone5}"/>
                    </mx:Array>
                </mx:dataProvider>      
            </mx:TileList>      
            </mx:HBox>      -->  
            
           </mx:VBox>
        </mx:Panel>
        
</mx:HDividedBox>

    </mx:Panel>
</mx:Application>

mi problema es que quiero que las imagenes que se carguen sean del respectivo producto, y si embebo la imagen , tengo que hacerlo manualmente desde codigo, y quiero que sea algo automático. Espero me puedan ayudar.

Por andyflonav

1 de clabLevel



Genero:Masculino  

Ica - Peru

msie
Citar            
MensajeEscrito el 23 Feb 2009 11:45 am
Tienes que construir distintos dataprovider para cada categoría, usualmente todo esto se hace con una BD, luego las imágenes claro, se cargan externamente. Adobe ha publicado una serie de rtículos sobre Cairngorm con una tienda de ejemplo, en http://www.adobe.com/devnet/flex/articles/cairngorm_pt2.html

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox

 

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