Teste via writer!

conteudo via writer

Popular datagrid com TextInput no flex

Mais um exemplo de como se trabalhar com datagrid no flex, espero poder ajudar.

Nao sei postar codigos aqui, mas segue o linguição abaixo:

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" width="311" height="240" backgroundColor="#FFFFFF"
creationComplete="inicializa()"
>

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var valores:Object;
[Bindable]
public var lista_nome:ArrayCollection;

public function add():void
{
valores = new Object();
valores.campo1 = caixa1.text;
lista_nome.addItem(valores);
}

protected function inicializa():void
{
this.lista_nome = new ArrayCollection();
}

]]>
</fx:Script>

<s:Panel x="30" y="10" width="250" height="200" title="CRUD">
<s:TextInput x="20" y="14" id="caixa1"/>
<s:Button x="156" y="15" label="add" click="add()"/>
<mx:DataGrid x="22" y="43" width="206" height="116" dataProvider="{lista_nome}">
<mx:columns>
<mx:DataGridColumn headerText="Nome" dataField="campo1"/>
</mx:columns>
</mx:DataGrid>
</s:Panel>

</s:Application>

Entendendo o AS3.0

Olá novamente Flex-maníacos,

Nas partes anteiores aprendemos:

Primeira Parte - As vantagens/desvantagens/Showcases/Cursos/Preços/Produtos e Aplicacoes/Referencias, etc

Segunda Parte - Os nomes dos paineis mais usados e a descricao do que fazem

Terceira Parte - Como criar uma primeira aplicacao no Flex e testando

Quarta Parte – Como é montada a estrutura de programação do Flex, explicando as tags e o MXML.

Agora na Quinta Parte veremos como usar o Action Script 3.0.

Para começar utilizarei o mesmo exemplo da aula4 e vamos adicionar o AS3.0 nele.

Abaixo o modelo que usaremos…

Que gera o seguinte resultado…

Bom, vamos começar,

Vale ressaltar que o FLEX e o FLASH CS3 está trabalhando com AS3.0.

O AS3.0 tem sua linha de desenvolvimento OOP, ou seja, Programacao Orientada a Objeto, que dá um tom de limpeza e organização dentro do projeto, que torna muito mais rápido seu desenvolvimento.

Uma boa diferença do AS2 é que agora é obrigatório que as variáveis, argumentos e funções sejam declarados, que antes era opcional, antes era assim:

function minhaFuncao( ) { }

Agora é assim:

function minhaFuncao( ):void { }

Se tratando de eventos, agora ficou mais interessante, todo mundo consegue fazer o famoso “listener”.

Outra coisa interessante que achei do AS3, é que ele permite a criacao de objetos e caracteristicas muito mais fácil, como:

var meuObjeto:Object = new Object();

meuObjeto.parametro1=33;

meuObjeto.parametro2=false;

meuObjeto.parametro3=null;

Bom, vamos a parte prática, pra que não curte muito ler e sim botar a mão na massa.

Acho importante mostrar aos leitores que o AS3 deve ser escrito dentro de tag especifica, isto quer dizer, nao dá pra sair escrevendo as3 em qualquer lugar, pra isso tem que criar uma tag especial que o FLEX chama de SCRIPT, abaixo definindo:

Bem, pra testar o AS 3.0 vamos ver uma classe chamada alert, bem parecida com o alert do JAVASCRIPT, do HTML….

Observe que somente estamos usando as3.0 dentro da tag mx:Script.

Explicando melhor o codigo:

-Eu defini um método “minhaFuncao” que mostrará a janela de alerta dentro da tag mx:Script.

-Depois na criacao do botao eu disse que no “clique” dele sera chamado “minhaFuncao”

Apartir disto podemos melhorar mais o codigo criando mais um botao, com outro metodo novo direcionado e que mostre outro alerta “diferente” observe o exemplo abaixo:

Boa sorte!

HTTP Service

Talvez alguns se perguntarão, porque HTTP-SERVICE ja no nível iniciante?

Respondo já, é algo prático que mostra resultado de forma a mostrar o que o flex pode fazer, com poucas linhas de código.

Bom, pra muitos só as palavras “HTTP-SERVICE” já dá um nó no cérebro, mas aqui falarei um pouco dele e mostrarei como usar.

Primeiro defino que utilizarei a idéia de componentes, onde voce cria um componente dentro do mesmo projeto e depois em sua aplicacao chama este componente para facilitar o desenvolvimento.

(Obs, ainda nao sei formatar no WordPress de forma que fique bunito que nem nos blogs pagos, se alguem souber, dá um apoio.)

Utilizarei então dois arquivos principais:

• photosFLK
• componenteFLK

Primeiro passo

-Crie um projeto (chamarei de photosFLK), isso gera uma aplicacao com o mesmo nome (File > new > flexProject)

- Após criado o projeto, digite este código dentro de sua aplicação:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundGradientColors=”[0xFFFFFF, 0xAAAAAA]“
horizontalAlign=”left”
verticalGap=”15″
horizontalGap=”15″ creationComplete=”addListenerToControls()”><mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private var photoFeed:ArrayCollection;

// add a event listener to textInput control using the Event Listeners
// You can search more at addEventListeners on this site
private function addListenerToControls():void {
searchTerms.addEventListener(FlexEvent.ENTER,requestPhotos);
}
// Request photos based on keyword criteria you insert
private function requestPhotos(event:Event):void {
// if the photoService is still loading we cancel to prevent errors
// then we call again.
photoService.cancel();
var params:Object = new Object();
params.format = ‘rss_200_enc’;
params.tags = searchTerms.text;
photoService.send(params);
}
// Handler the result function from HTTPService request you did
// and convert the result into a Array Collection
private function photoHandler(event:ResultEvent):void {
photoFeed = event.result.rss.channel.item as ArrayCollection;
}
// If the HTTPService had errors, we handle it here show an alert message
// like we have in Javascript
private function photoFaultHandler(event:FaultEvent):void {
Alert.show(“Impossible to load or reach photos from services”,”Error”);
}
]]>
</mx:Script>

<mx:HTTPService id=”photoService” showBusyCursor=”true”
url=”http://api.flickr.com/services/feeds/photos_public.gne”
result=”photoHandler(event)” fault=”photoFaultHandler(event)”
/>

<mx:HBox>
<mx:Label text=”Flickr tags or search terms:” />
<mx:TextInput id=”searchTerms” />
<mx:Button label=”Search”
click=”requestPhotos(event)” />
</mx:HBox>

<mx:TileList width=”100%” height=”100%”
dataProvider=”{photoFeed}”
itemRenderer=”componentFlk”>
</mx:TileList>

</mx:Application>

Segundo passo

Agora crie um componente do tipo VBOX, renomeando ele para “componenteFlk”

Digite o código abaixo dentro dos códigos do component.

<?xml version=”1.0″ encoding=”utf-8″?> <mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”

width=”125″ height=”125″

paddingBottom=”5″ paddingLeft=”5″ paddingTop=”5″ paddingRight=”5″

horizontalScrollPolicy=”off” verticalScrollPolicy=”off”

horizontalAlign=”center”>

<mx:Image width=”75″ height=”75″

source=”{data.thumbnail.url}”/>

<mx:Text text=”{data.credit}”/>

</mx:VBox>

Terceiro passo

Pronto, agora é só rodar o projeto, clicando no “Play”.

Como este tutorial é somente para ilustar o uso do HTTP Service, defino que:

1-Criamos um projeto e uma aplicacao

2-Criamos um component

3-Definimos de onde viria os dados via HTTP Service. (exemplo abaixo)

<mx:HTTPService id=”photoService” showBusyCursor=”true”
url=”http://api.flickr.com/services/feeds/photos_public.gne”
result=”photoHandler(event)” fault=”photoFaultHandler(event)”
/>

Agora os dados são puxados do site da FLICKR, onde ja possui uma lista de imagens e as respectivas no servidor.

E nosso TileList está usando o componentFlk criado

<mx:TileList width=”100%” height=”100%”
dataProvider=”{photoFeed}”
itemRenderer=”componentFlk”>
</mx:TileList>

Pronto, espero ter ajudado. Passando como utilizar o HTTP Service.

Observe o exemplo de como ficou abaixo…

Boa Sorte!

Tutorial iniciante parte4 – Entendendo o código MXML

Olá novamente Flex-maníacos,

Nas partes anteiores aprendemos:

Primeira Parte - As vantagens/desvantagens/Showcases/Cursos/Preços/Produtos e Aplicacoes/Referencias, etc

Segunda Parte - Os nomes dos paineis mais usados e a descricao do que fazem

Terceira Parte - Como criar uma primeira aplicacao no Flex e testando

Agora na Quarta Parte veremos como é montada a estrutura de programação do Flex, explicando as tags e o MXML.

Confesso novamente que ao ver os códigos do FLEX no primeiro momento achei que era um monstro de setenta e sete cabeças. Mas após ir com calma aprendendo de pouco a pouco eu ja estava bem familiarizado.

Imagino que quem esteja neste nivel tentando aprender FLEX ja deve ter passado por HTML, por isso presumo que entendam TAG`s. Mas mesmo assim, vamos lá.

TAG`s servem para delimitar a programacao, e funcionam assim, sempre deve ser aberto e fechado uma tag e fechado com um sinal de “/”, por exemplo:

<inicio> </inicio>

Então dessa forma vamos acrescentando novas tags:

<inicio> <meio></meio></inicio>

E para ficar mais legivel colocamos assim:

<inicio>

<meio>

</meio>

</inicio>

Para continuar a explicacao mostrarei um código simples que adiciona 2 objetos no stage. Lembrando que cada objeto agora é visto como tags tambem, obs:

Experimente ir digitando este código no Flex, apague tudo e faça igual ao meu exemplo, observe que ao digitar algumas palavras especiais o FLEX ja sabe o que voce quer e vai completando, legal não?

Isso gera o seguinte resultado:

EXPLICACAO DO CODIGO

Agora vamos a explicacao do codigo,

-Na linha1 temos uma tag que “dá o tom” do arquivo dizendo que ele é do tipo XML usando a versao 1 e o encoding “utf-8″.

-Na linha 2 e 9 temos as tags de application para indicar o inicio e o fim da aplicacao

-Na linha 3 e 7 temos as tags que indicam a contrucao de um painel com suas caracteristicas, como largura(width), altura(height), x, y, titulo, etc.

-Na linha 4 e 6 temos as tags que criam um botao, com suas configuracoes, obs que o que esta em “label” aparecerá no botao como texto.

Agora vamos ver como ficou… novamente

Experimente alterar os valores de largura(width), altura(height), x, y, titulo e veja o que acontece no modo design.

Bom, o codigo do FLEX nao é tão dificil assim se formos pensar, lógico que na hora que entrar mais itens complexos e programacao especifica vai deixar mais complexo, mas nada que voce nao consiga acompanhar, boa sorte e até o próximo tutorial.