Categorie

Archivio

Altri blog

12 Marzo 2008

Flex 2: come implementare un binding bidirezionale tra un DataGrid e un Form

In questo articolo vedremo come sia possibile effettuare un collegamento (binding) tra i dati in una riga di un DataGrid con i campi di un Form in maniera bidirezionale, facendo sì che modificando i dati nel Form questi si aggiornino automaticamente anche nel DataGrid.

Quello che sembra un esercizio banale si rivela in realtà di non così immediata realizzazione, perché il binding in Flex è un meccanismo unidirezionale, come mostra l’esempio sottostante:

Il codice (semplificato) corrispondente all’esempio mostrato è il seguente:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    width="456" height="400">
  <mx:XMLList id="employees">
    <employee>
      <name>Christina Coenraets</name>
      <phone>555-219-2270</phone>
      <email>ccoenraets@fictitious.com</email>
    </employee>
    <employee>
      <name>Joanne Wall</name>
      <phone>555-219-2012</phone>
      <email>jwall@fictitious.com</email>
    </employee>
    <employee>
      <name>Maurice Smith</name>
      <phone>555-219-2012</phone>
      <email>maurice@fictitious.com</email>
    </employee>
  </mx:XMLList>
  <mx:Panel
      title="DataGrid e Form - binding unidirezionale">
    <mx:Label ext="Select a row in the DataGrid control."/>
    <mx:DataGrid id="dg" dataProvider="{employees}">
      <mx:columns>
        <mx:DataGridColumn
          dataField="name"
          headerText="Name"/>
        <mx:DataGridColumn
          dataField="phone"
          headerText="Phone"/>
        <mx:DataGridColumn
          dataField="email"
          headerText="Email"/>
      </mx:columns>
    </mx:DataGrid>
    <mx:Form>
      <mx:FormItem label="Name">
        <mx:TextInput text="{dg.selectedItem.name}"/>
      </mx:FormItem>
      <mx:FormItem label="Email">
        <mx:TextInput text="{dg.selectedItem.email}"/>
      </mx:FormItem>
      <mx:FormItem label="Phone">
        <mx:TextInput text="{dg.selectedItem.phone}"/>
      </mx:FormItem>
    </mx:Form>
  </mx:Panel>
</mx:Application>

L’effetto che invece si desidera ottenere è quello mostrato di seguito:

Per ottenere un simile risultato occorre definire un oggetto di supporto e seguire i seguenti passaggi:

definire un binding tra i campi del Form e i campi dell’oggetto di supporto
fare in modo che l’oggetto di supporto assuma i valori della riga selezionata nel DataGrid

Il codice (semplificato) corrispondente all’esempio mostrato è il seguente:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:wg="com.webgriffe.samples.*">
  <mx:ArrayCollection id="employees">
    <wg:Person>
      <wg:name>Christina Coenraets</wg:name>
      <wg:phone>555-219-2270</wg:phone>
      <wg:email>ccoenraets@fictitious.com</wg:email>
    </wg:Person>
    <wg:Person>
      <wg:name>Joanne Wall</wg:name>
      <wg:phone>555-219-2012</wg:phone>
      <wg:email>jwall@fictitious.com</wg:email>
    </wg:Person>
   <wg:Person>
     <wg:name>Maurice Smith</wg:name>
     <wg:phone>555-219-2012</wg:phone>
     <wg:email>maurice@fictitious.com</wg:email>
   </wg:Person>
  </mx:ArrayCollection>  <wg:Person id="per"
    name="{inName.text}"
    phone="{inPhone.text}"
    email="{inEmail.text}" />
    <mx:Panel title="DataGrid e Form - binding bidirezionale">
    <mx:Label text="Select a row in the DataGrid control."/>
    <mx:DataGrid id="dg" dataProvider="{employees}"
      itemClick="per=Person(event.currentTarget.selectedItem);">
      <mx:columns>
        <mx:DataGridColumn
            dataField="name"
            headerText="Name"/>
        <mx:DataGridColumn
            dataField="phone"
            headerText="Phone"/>
        <mx:DataGridColumn
            dataField="email"
            headerText="Email"/>
      </mx:columns>
    </mx:DataGrid>
    <mx:Form>
      <mx:FormItem label="Name">
        <mx:TextInput id="inName" text="{per.name}"/>
      </mx:FormItem>
      <mx:FormItem label="Phone">
        <mx:TextInput id="inPhone" text="{per.phone}"/>
      </mx:FormItem>
      <mx:FormItem label="Email">
        <mx:TextInput id="inEmail" text="{per.email}"/>
      </mx:FormItem>
    </mx:Form>
  </mx:Panel>
</mx:Application>

Il codice completo dell’esempio è scaricabile facendo clic qui.

Pubblicato in Flex