Usando renderes de item customizado e editores de item
Para controlar a exibição de um componente de lista, você escreve um renderer de item ou editor de item personalizado. Seus rendereres de item e editores de item personalizados ainda usam a funcionalidade subjacente do controle de lista, mas permite você controlar a exibição e edição dos dados. Os rendereres de item e editores de artigo personalizados fornecem a você com várias vantagens:
-
Você pode criar uma interface de usuário mais compelativa substituindo a exibição de texto com uma aparência mais intuitivo.
-
Você pode combinar elementos múltiplos em um item de lista única, como label e uma imagem.
-
Você pode programaticamente controlar a exibição dos dados.
O controle de Lista seguinte é uma modificação do controle de Lista na retribuição de item padrão de seção e edição de célula. Neste exemplo, você usa um renderer de item personalizado para exibir o nome do estado, capital, e um URL para o site da web oficial do estado em cada artigo de lista:
<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:local=”*” height=”700″ width=”700″>
<mx:List id=”myList” itemRenderer=”RendererState” rowHeight=”75″ height=”200″ width=”250″>
<mx:dataProvider>
<mx:Object label=”Alaska” data=”Juneau” webPage=”http://www.state.ak.us/”/>
<mx:Object label=”Alabama” data=”Montgomery” webPage=”http://www.alabama.gov/”/>
<mx:Object label=”Arkansas” data=”Little Rock” webPage=”http://www.state.ar.us/”/>
</mx:dataProvider>
</mx:List>
</mx:Application>
<?xml version=”1.0″?>
<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
// Import Event and URLRequest classes.
import flash.events.Event;
import flash.net.URLRequest;
public var u:URLRequest;
// Event listener to open URL using the navigateToURL() method.
private function handleClick(eventObj:Event):void {
u = new URLRequest(data.webPage);
navigateToURL(u);
}
]]>
</mx:Script>
<mx:HBox>
<!– Use Label controls to display state and capital names. –>
<mx:Label id=”State” text=”State: {data.label}”/>
<mx:Label id=”Statecapital” text=”Capital: {data.data}”/>
</mx:HBox>
<!– Define the LinkButton control to open a URL. –>
<mx:LinkButton id=”webPage” label=”Official {data.label} Web page” click=”handleClick(event);” color=”blue”/>
</mx:VBox>
Na próxima imagem, você usa um renderer de item padrão para a primeira e terceiras colunas do DataGrid. Você usa um renderer de item personalizado para a segunda coluna para exibir o álbum junto com o título do álbum no DataGrid.
<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:local=”*”>
<mx:Script>
<![CDATA[
// Data includes URL to album cover.
[Bindable]
public var initDG:Array = [
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Cover: 'http://myComp.com/albums/brighten.jpg'},
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, Cover: 'http://myComp.com/albums/brighten.jpg'}
];
]]>
</mx:Script>
<mx:DataGrid id=”myGrid” dataProvider=”{initDG}” variableRowHeight=”true”>
<mx:columns>
<mx:DataGridColumn dataField=”Artist”/>
<mx:DataGridColumn dataField=”Album”>
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Text id=”albumName” selectable=”false” width=”100%” text=”{data.Album}”/>
<mx:Image id=”albumImage” height=”45″ source=”{data.Cover}”/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField=”Price”/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
<mx:DataGridColumn dataField=”Cover”>
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign=”center”>
<mx:Image height=”45″ source=”{data.Cover}”/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Da mesma maneira que você pode definir um renderer de item personalizado para controlar a exibição de uma célula, você pode usar um editor de item personalizado para editar o conteúdo da célula. Por exemplo, se o renderer de item personalizado exibe uma imagem, você podia definir um editor de item personalizado que usa um ComboBox que permite ao usuários selecionarem uma imagem de uma lista de imagens disponíveis. Ou, você podia usar um CheckBox para permitir o usuário fixar um valor verdadeiro ou falso para uma célula, como o exemplo seguinte mostra:
Usando um renderer de item não implica que o controle também tem um editor de item. Freqüentemente, você não permite seus controles serem editados; Isto é, eles são para somente exibem.
Você também pode usar um editor de item sem um renderer de item correspondente. Por exemplo, você podia exibir informações como um masculino/feminino ou true/false como texto usando o renderer de item padrão. Mas, você podia então usar um editor de item personalizado com um ComboBox que fornece o usuário só um conjunto limitado de opções para entrar na célula quando modificando o valor.
NOTA: Este artigo é uma tradução do original inglês “Using custom item renderers and item editors” da documentação do Flex Builder 2.01,
Caso tenha alguma dúvida utilize o fórum.
Abraços, Luis Carlos Quinhone – quinhone@mxstudio.com.br
Escrito por 
Últimos Comentários