Informática Numaboa - Tutoriais e Programação
Flex para mortais comuns - Primeiro aplicativo
|
Seg 20 Jul 2009 17:52 |
- Detalhes
- Categoria: Flex
- Atualização: Sábado, 27 Fevereiro 2010 14:41
- Autor: vovó Vicki
- Acessos: 7925
O primeiro exemplo de qualquer linguagem de programação costuma ser o famigerado Hello World, o tal do Alô Mundo. Apesar de famigerado, aqui na Aldeia não vai ser muito diferente... mas só no nome, por que a mensagem que veremos na tela NÃO será "Alô Mundo" 
Este tutorial usa o Flex Builder como ferramenta de produção.
O projeto olaMundo
No tutorial de introdução ao Flex vimos como criar um novo projeto. Resumindo é o seguinte: clique em File / New / Flex Project; dê um nome ao projeto e clique em Next; aceite o padrão e clique em Next; aceite o padrão e clique em Finish. Neste exemplo, o nome que usei foi olaMundo.
Quando o projeto é criado, o conjunto de pastas e arquivos deste projeto aparece no painel Flex Navigator (é o painel superior esquerdo). Além disto, o painel de edição recebe uma nova aba identificada por aloMundo.mxml. Estamos prontos para começar.
No painel de componentes (inferior esquerdo) procure por Panel. Clique, arraste e solte o objeto na área de edição. Este painel pode ser reposicionado na área de edição clicando e arrastando. Também pode ser redimensionado clicando e arrastando os pontos brancos que aparecem na borda do objeto.
Dê um duplo clique na faixa mais escura do topo do painel. Isto coloca esta área em edição e você pode digitar o título que deve aparecer nela. Eu escrevi "Quem está numa boa?" (sem as aspas). Clique em qualquer parte branca do painel recém criado para sair do modo de edição e observe o painel de propriedades do Flex Builder (inferior direito, identificado por Flex Properties). Como o novo painel está selecionado (a borda preta e os pontos brancos nos indicam isto), o Flex Properties mostra o tipo do objeto e todas as suas propriedades. Logo no topo pode-se ver mx:Panel, indicando que se trata de um objeto do tipo Panel. Nas propriedades comuns (Common), a propriedade Title mostra o título que acabamos de atribuir ao novo painel.
Dê mais uma pesquisada nas propriedades para ir se familiarizando com este componente. Observe que nas propriedades de Layout a largura (Width) mostra 250 e a altura (Height) mostra 200. Estas medidas estão em pixels. Você pode alterar estas medidas diretamente no Flex Properties ou no painel de edição.
Agora procure o componente Button. Clique, arraste e solte dentro do novo painel. Dê um duplo clique no botão e digite "Clique aqui" (sem as aspas). O resultado deve ser o seguinte:
O script MXML
Clique no botão [Source] da barra de ferramentas do painel de edição para mostrar o script que foi criado automaticamente até agora. Você deve encontrar o seguinte:
De acordo com o tamanho e posição do painel e do botão, os valores de x, y, width e height podem ser diferentes; todo o resto deve ser igual. Vamos entender o que cada linha do script quer dizer.
A primeira linha indica que se trata de um script na linguagem xml versão 1.0 e que a codificação de caracteres é do tipo utf-8. Na linha 2 abrimos uma área para o aplicativo com o marcador <mx:Application>. Esta área vai até a linha 6, onde é fechada com o marcador </mx:Application>. Tudo segue o mesmo princípio de um script HTML, onde também são usados marcadores (tags) especiais para delimitar áreas como, por exemplo, <p> e </p>. Continuando com a comparação, a área do aplicativo é a área mãe que contém tudo o que há no nosso aplicativo, assim como <html> e </html> é área mãe de tudo que estiver numa página HTML.
Dentro da área do aplicativo colocamos um painel. Este também é definido através do MXML com os marcadores <mxPanel> e </mx:Panel>. Observe as linhas 3 e 5.
Dentro do painel colocamos um botão. Os marcadores para botões são <mx:Button> e </mx:Button>. Observe a linha 4. Ela contém apenas um marcador de início de área, mas não tem um marcador de fim de área. É que em MXML podemos "economizar" tags indicando no próprio marcador de início de área o seu fechamento. Para isto colocamos uma barra no seu final, ou seja, <mx:Button ... propriedades> passa a ser <mx:Button ... propriedades/>.
Este script, quando "traduzido", produz os elementos painel e botão que podem ser vistos no modo Design. Bem, se este é o caso, nada nos impede de criar objetos visuais no próprio script. Basta conhecer a estrutura de um script, a sintaxe para criar objetos e as propriedades que este objeto possui. Se quiser fazer um teste, insira uma linha logo abaixo da linha do botão com as especificações de um segundo botão. Mude a coordenada y para um valor menor para que este botão de teste fique acima do botão "Clique aqui". Depois entre no modo Design para ver o resultado
O ActionScript
Como vimos, o MXML é uma linguagem de marcadores e, como toda linguagem de marcadores, é estática (apenas delimita áreas). Se quisermos um pouco de ação, vamos precisar de outra linguagem. Como o projeto foi feito para gerar um aplicativo flash, precisamos usar a linguagem própria do flash, conhecida como ActionScript.
Queremos que, quando o botão do aplicativo for clicado, apareça uma mensagem qualquer. Para tornar isto possível, precisamos criar um script de ação e, para aninhar um script de ação no nosso projeto a primeira coisa a fazer é criar uma área de script. Como fazer isto?
Coloque o cursor no fim da linha 2 e digite Enter. Isto abre uma linha em branco. Digite < para começar um novo marcador e para disparar o sistema automático de complementação (como visto na figura ao lado). Procure por mx:Script na lista apresentada e dê um duplo clique. Depois digite > para fechar a tag. Isto coloca o seguinte na área de edição:
Como queremos que o script apresente uma mensagem na tela, precisamos importar o componente do Flex que faz isto. Na posição onde está o cursor (o código automático o colocou entre <![CDATA[ e ]]>), comece digitando import. A seguir, quando você digitar um espaço, o sistema automático de complementação entra em ação. Duplo clique em mx coloca mx no texto. Digite um ponto e dê um duplo clique em controls. Digite mais um ponto e dê um duplo clique em Alert. Termine a linha com um ponto e vírgula (;). Além de prático, este sistema evita que se digite minúsculas no lugar de maiúsculas e vice-versa. Isto é importante por que o Flex considera maiúsculas e minúsculas (mx.controls.alert não funciona; mx.controls.Alert funciona).
A partir da importação, o controle fica pronto para ser usado. Agora vamos criar uma função que será chamada toda vez que o botão "Clique aqui" for clicado. Vamos chamá-la de clica:
Aqui cabem algumas explicações. Começando com a mais trivial, as observações "Importação do componente Flex" e "Função em ActionScript" servem para esclarecer alguns pontos do script. As observações são linhas do script que são ignoradas durante a execução porque são precedidas por barras duplas (//).
Toda linha de comando precisa terminar com ponto e vírgula. Um erro muito comum é esquecer disto.
Depois de importar o controle Alert, seus métodos podem ser usados. Na função clica() usamos o método Alert.show() para mostrar "Na Aldeia todo mundo está numa boa!" numa janela pop-up cujo título é "Aldeia Numaboa".
A função clica() foi declarada como privada e não tem valor de retorno, ou seja, o retorno é void. As chaves { } delimitam a área da função. Como não são comandos, e sim delimitadores, não precisam (e não devem) ser seguidos por ponto e vírgula.
Associando um evento do botão a um script
A reação do botão a um evento faz parte das propriedades deste botão. Sendo assim, o lugar onde isto é definido é no próprio botão. Volte para o modo Design, selecione o botão e procure o campo de texto identificado por On click no painel de propriedades na aba Common. Neste campo digite {clica();}
Informamos com as chaves { } que se trata de uma função. Dentro das chaves demos um comando que chama a função clica() e, como todo comando, ele deve terminar com ponto e vírgula. Pronto! Isto é tudo. O script completo ficou assim: