Tabla dinámica en flex

Necesito hacer un cuadrate horas/pistas, es para un polideportivo, quieren que se puedan reservar las pistas desde la web. Así que hay un número de horas (que varían según la actividad , tenis, padel, futbol,...) y una serie de pistas (hay mas pistas de tenis que de futbol por ejemplo) y el día (domingo, festivo o laborable). Los datos los saco de una DB, ya que pueden variar según el año (aumentar el número de pistas, cambiar los horarios....)

La cosa es que tengo que generar una tabla (horas/fecha) que varian y en el que cada celda debe ser un botón con el estado de libre o reservada.

Un datagrid NO me sirve, no necesito que puedan modificar el ancho de cada columna o que ordenen las columnas. Es más necesito que se pueda elegir una fila y una columna.

Un "grid" normal me serviría. Podría cambiar el fondo de cada celda y rellenarlas con un botón al 100%, pero ... el problema es que no sé como generar esas tablas de forma dinámica. A las malas opndré botones en la pantalla de alguna forma, con la x e y.


Imagino que hay alguna solución para esto, la idea es poder poner un grid, con celdas y tal por Action script y no con el mxnl.

No entiendo bien por que un datagrid no te sirve. Puedes bloquear el resize de las columnas y el ordenamiento, puedes usar fácilmente un componente para el itemRenderer de las columnas con los botones que quieras ... de hecho con Flex es muy fácil hacer un Cellrenderer que en Flash nos fuerza a escribir una clase. Lo que si concuerdo es que al pinchar en una celda se te remarca la fila, pero puedes poner un estilo de rollOver que no lo cambie, luego juegas con el click en la celda

Jorge

ummm miraré a ver, lo tenía como idea, pero ... escaldado de mi experiencia con cellrenderes en flash... quería evitar esa solución. Si me dices que es "sencilla" miraré a ver.

Aún no me hago del todo a AS3, los Arrays no son tan flexibles como en AS2 y ... no sabría muy bien como montarlos (he tenido algunos problemas ya, que aún no me lleno a hacer del todo )

Pero bueno, miraré lo del datagrid (era mi primera opción, aunque por lo de la fila y tal lo deseché).

Gracias

Yo lo uso muchísimo ahora: te creas un componente cualquiera y lo pones como itemRenderer de la columna y yata

Jorge

Ok, yo he estado esperimentando con la asignacion de itemRenderer de manera dinámica, el punto es saber como le hgo para detectar un evento (click por ejemplo) en un boton añadido dinamicamente a un datagrid con el itemrenderer

Código :

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/26/displaying-xml-data-in-a-datagrid/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
   creationComplete="llenaGrid();">   

    <mx:Script>
      <![CDATA[

      import mx.controls.dataGridClasses.DataGridColumn;
      import mx.controls.Alert;
      import mx.controls.NumericStepper;

          private function addDataGridColumn(dataField:String):void {
         var dgc:DataGridColumn = new DataGridColumn(dataField);
         dgc.editable = true;
         var cols:Array = grilla.columns;
         cols.push(dgc);
         grilla.columns = cols;
          }

          private function llenaGrid():void {
         // El item renderer
         var productRenderer:ClassFactory = new ClassFactory(mx.controls.Button);
         productRenderer.properties = { label: "Botonnn" };

         var i:Number;
         var cc:Object;
         var arr:Array = new Array(); // Array de datos, estos pueden venir de manera externa

         for(i=0; i<3; i++){
            cc = new Object();
            cc.Columna0 = i * 3;
            cc.Columna1 = "";
            cc.Columna2 = "Data-> " + i;
            cc.Columna3 = "Ejemplo";
            arr.push(cc);
         }

         grilla.dataProvider = arr;
         grilla.columns[0].editable = true;
         grilla.columns[0].itemEditor = new ClassFactory(mx.controls.NumericStepper);
         grilla.columns[0].editorDataField = "value";
         grilla.columns[1].itemRenderer = productRenderer; // ItemRenderer a la columna
         grilla.columns[1].editable = false;
         grilla.columns[2].editable = false;
         grilla.columns[3].editable = false;
          }  
         
      ]]>
    </mx:Script>   

    <mx:VBox width="500">
        <mx:DataGrid id="grilla" editable="true" width="400"></mx:DataGrid>
    </mx:VBox>

<mx:Button label="Add Column" click="addDataGridColumn('lalalala');"/>
</mx:Application>

Eso me genera algo como esto



La pregunta es, ¿¿como le agrego un evento al boton para detectar si hacen click en el???

Estoy viendo ejemplos más complejos pero usan clases externas y componentes personalizados, lo que aumenta la complejidad de la aplicacion un poco, al más puro estilo del cellRenderer donde necesitabas una clase personalizada.

Necesito tener una clase propia, algo que herede de Button, para detectar el evento??

Saludos.

Lo mas simple es crear un componente. He aquí mi componente (Desde File->New->MXML Component) llamado miboton

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="72" height="30">
   <mx:Script>
      <![CDATA[
         private function sayHello():void{
            trace("Hola desde "+this)
         }
      ]]>
   </mx:Script>
   <mx:Button x="3" y="3" label="Button" click="sayHello()"/>
   
</mx:Canvas>

Luego modifico el itemRenderer que usaste para la tabla

grilla.columns[1].itemRenderer = new ClassFactory(miboton);

Con un poco de sudor y lágrimas, en vez del trace puedes hacer algo mas útil

Jorge

Al final yo he optado por hacer una tabla "a mano" de botones. Los situo uno por uno a mano en un Container. Pobré el Tile pero que supuestamente debía ordenarlos, pero se pierde un poco con los ajustes.

Aunque si estoy gratamente sorprendido de la facilidad de los cellrenderer (hice pruebas, pero no me convencían)

Gracias por el aporte.

Estas usando Flex. ? si es asi, haz probado con un Repeater. ?

_CONEJO escribió:

Código :

Con el Repeater pordrias hacer algo como esto

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Repeater class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
      
          import mx.controls.Alert;
  
         [Bindable]
         private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];    
         
        ]]>
    </mx:Script>

    <mx:Panel title="Repeater Example" width="75%" height="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
  
        <mx:Text width="100%" color="blue" 
            text="Use the Repeater class to create 9 Button controls in a 3 by 3 Tile container."/>

        <mx:Tile direction="horizontal" borderStyle="inset" 
            horizontalGap="10" verticalGap="15"
            paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">
        
            <mx:Repeater id="rp" dataProvider="{dp}">
                <mx:Button height="49" width="50" 
                    label="{String(rp.currentItem)}" 
                    click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/>
            </mx:Repeater>    
        </mx:Tile>
  
    </mx:Panel>  
</mx:Application>

Lo saque de la pagina del explorador de componentes de Adobe


solisarg, muchas gracias, eso me temía, tener que usar un componente personalizado, pero al parecer no es tan difícil como yo pensaba

El punto ahora es: como puedo modificar las propiedades de algunos de esos botones.
Usando el ejemplo del conejo, digamos que la base de datos me regresa que la primera y tercera locacion ya esta apartada, y por lo tanto estos botones en específico deben estar deshabilitados (Al hacer click en ellos ejecutan la funcion de apartar)

Al hacer el
[code]grilla.columns[1].itemRenderer = productRenderer;[/
o al hacer
[code]grilla.columns[1].itemRenderer = new ClassFactory(miboton); [/code]
Toda la columna se llena de ese componente, y sus propiedades son iguales.

Como se pueden accesar y modificar las propiedades de los componentes que estan dentro del ItemRenderer, para que al momento de mostrar el datagrid, estas reflejen los valores correspondientes a la base de datos.

Gracias de nuevo pro la ayuda.

Creo que ya encontre una forma, jajaja es más desmother del que pense, pero creo que al final Asi es como debe ser ® jaja

Ya hace lo que quiero, solo falta organizar las cosas de manera que sean usables :fail: , pero creo si se va a poder

En fin seguire probando, y en cuanto quede listo, pondre el código.

Saludos y gracias

Hola, soy nuevo en esto de los ItemRender en Flex, es impresionante la poterncialidad que posee, sin embargo, la información es un poco escasa al respecto.
Tengo lo siguiente: Un XML que tiene datos de la siguiente forma:
<ejemplo>
<perfil id="1" nombreperfil="Administrador"
<perfil id="2" nombreperfil="Usuario"
<perfil id="n" nombreperfil="perfilN"
<permisos nombre="Marcelo">
<administrador>true</administrador>
<Usuario>false</Usuario>
<perfilN>false</perfilN>
</permisos>
<permisos nombre="German">
<administrador>false</administrador>
<Usuario>true</Usuario>
<perfilN>true</perfilN>
</permisos>
<permisos nombre="NNNNN">
<administrador>false</administrador>
<Usuario>false</Usuario>
<perfilN>true</perfilN>
</permisos>
</ejemplo>


perfilN: Puedo tener N perfiles ( cada XML)
NNNNN: puedo tener varios usuarios

Ahora bien, tengo que implementar una tabla (dataGrid) en la cual aparezcan los perfiles como Headers ( horizontalmente) y los usuarios en la primera columna ( el nombre) y cada uno de los perfiles debe aparecer con un checkbox dentro del dataGrid.

O sea, tengo que armar el dataGrid dinamicamente . WOW !!!

Teoricamente, si el usuario quiere modificar el acceso de alguien debe hacer click en el checkbox respectivo, esto luego debe modificarse en la base de datos.


Mi petición es si me pueden orientar al respecto de como hacerlo, será posible realizar Binding directamente al XML o debo realizar mejor un algoritmo que cuando haga click en el checkbox modifique un ArrayCollection que contenga los datos ?