Como popular um ComboBox no Flex

Talvez o ComboBox do Flex seja um dos componentes mais fáceis de se usar, dentre todas as tecnologias existentes. Os componentes do Flex que manipulam uma lista de dados possuem um conceito muito legal, que é o seguinte. Você passa para o componente uma Array de Objetos. Então, aquele componente (o ComboBox) tem um array de objetos dentro dele. Agora basta definir qual propriedade do objeto será visível na combo. Vamos a um exemplo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="OnCreateComplete()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            [Bindable]
            private var ArrayObj:ArrayCollection = new ArrayCollection();

            private function OnCreateComplete():void
            {
                var obj1:Object = new Object();
                obj1.nome = "Fulano 1";
                obj1.tel = "111222";

                var obj2:Object = new Object();
                obj2.nome = "Fulano 2";
                obj2.tel = "333222";

                var obj3:Object = new Object();
                obj3.nome = "Fulano 3";
                obj3.tel = "333555";

                ArrayObj.addItem(obj1);
                ArrayObj.addItem(obj2);
                ArrayObj.addItem(obj3); 

            }
            private function OnItemChange():void
            {
                Alert.show("Pessoa " + Combo.selectedItem.nome + " tem o telefone " + Combo.selectedItem.tel);
            }               
        ]]>
    </mx:Script>
    <mx:ComboBox id="Combo" dataProvider="{ArrayObj}" labelField="nome" change="{OnItemChange()}"/>
</mx:Application>

 

Neste exemplo, criamos um array de objetos na função OnCreateComplete. Quando criamos o Combobox, definimos a propriedade dataProvider, que é o array de objetos, e depois definimos a propriedade labelField, que diz qual dos campos do objeto serão vistos na combo. O event change dispara a função OnItemChange que usa a propriedade selecteditem do Combobox para que possa obter informações sobre o atual objeto selecionado.

Como usar janelas MDI no Flex

Neste post iremos aprender como utilizar as famosas janelas MDI que tanto fizeram sucesso no Delphi… agora não são muito usadas, mas para a criação de sistemas comerciais não existe nada melhor.

Crie um projeto no Flex Builder e adicione a biblioteca Flexlib, encontrada no endereço:

http://code.google.com/p/flexlib/downloads/list

Baixe o Zip da última versão disponível.

Descompacte o Zip e copie o arquivo bin/flexlib.swc para o seu projeto. Depois adicione a biblioteca flexlib.swc no seu projeto, indo em propriedades do objeto e acessando “Flex Build Path”. Vá na aba Library Path e acione o botão “Add SWC”. Encontre flexlib.swc e adicione ao seu projeto.

image

Após incluir a flexLib, acesse o modo design da sua aplicação e veja na aba “Componentes”, na pasta “Custom”, diversos componentes que foram inseridos devido a FlexLib. Encontre o componente MDICanvas e arraste-o para a sua aplicacao.

image

Defina um ID para o MDICanvas, como por exemplo “MDI”. Neste canvas poderemos inserir janelas MDI a vontade.

O próximo passo é criar uma janela MDI, indo em Adicionar, MXML Component. No assistente que surge, crie um componente que herde de MDIWindow. conforme a figura abaixo:

image

Voltando a aplicação principal, crie um botão que possa simular o click em um menu. Esse botão executa o seguinte código:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="flexlib.mdi.containers.*">
    <ns1:MDICanvas x="12" y="10" width="295" height="351" id="MDI">
    </ns1:MDICanvas>
    <mx:Button x="10" y="369" label="Button">
        <mx:click>
            <![CDATA[
                MDI.windowManager.add(new Tela01());
            ]]>
        </mx:click>
    </mx:Button>
</mx:Application>

 

Ou seja, quando clicamos no botão, adicionamos uma nova tela MDI. Com o canvas ocupando toda a tela da aplicação, podemos simular melhor o MDI.

Flex no Visual Studio

Esta é para o pessoal do DotNet ! Que tal escrever action script e mxml no Visual Studio? … YES WE CAN !  http://www.ensemble.com/

Uma pequena observação: Eu trabalho com DotNet 8.44 horas do meu dia, entao eu posso dizer que DotNet é legal, que a IDE Visual Studio é a melhor até o momento. Eu vou tetsar este Tofino e dar mais detalhes :)

Update:

Após a instalação do arquivo EnsembleTofinoWithFlexSDK.1.2009.03.04.msi o Tofino instalou no meu atual Visual Studio 2008, tudo que eu precisava para usar o Flex. Algumas telas:

 

image

image

image

image

image

 

Resumindo, essa alternativa ao Adobe Flex Builder cai como uma luva para desenvolvedores DotNet. Lembrando que o Adobe Flex Builder continua infinitamente superior a qualquer IDE Flex existente, inclusive a esta. Agora é esperar o Adobe Flash Builder para melhorias ainda maiores em relação ao Flex Builder 3.

Anúncio importante sobre AMFPHP e Zend_AMF

A todas as pessoas que compraram o livro Desenvolvendo sistemas com Flex e PHP, deixo aqui registrado o meu total comprometimento com esta obra, dando continuidade na mesma e melhorando-a sempre. Eu acredito fielmente que não basta vender, que vender é o primeiro passo para que você, leitor, possa aproveitar o livro. É por isso que continuo a melhorar a obra e a responder dúvidas através do meu email pessoal daniel.schmitz at hotmail.com. Quem conversa comigo pelo email sabe que eu tento ajudar ao máximo.

Na atual velocidade que as tecnologias evoluem, um livro sobre o tema deve, no mínimo, tentar corrigir os exemplos de acordo com a evolução das bibliotecas usadas. E isso ocorre com bastante frequência, em todas as àreas, desde o Flex, PHP, Zend até o Microsoft DotNet MVC …

Desta forma, eu gostaria de deixar claro que, no meu ponto de vista, o AMFPHP* morreu. Foi literalmente subistituido pelo Zend_AMF* e, desta forma, os exemplos contidos no livro irão sofrer pequenas mudanças, para adapatrem-se ao Zend_AMF.

Nos próximos dias, eu estarei reconstruindo os exemplos: Oficina e Locadora de DVDs utilizando o Zend Framework AMF, e liberando um capítulo especial e gratuito sobre esta mudança.

Atenção às atualizações:

* AMFPHP é a biblioteca que tem a responsabilidade de realizar a comunicação entre o Flex e PHP. Torcar AMFPHP pelo Zend_AMF não interfere nos códigos PHP e Flex. É como trocar um cano que liga duas caixas d´água.