Exemplo: FilterFunction Flex

Salve salve pessoas e pessoinhas =)

Voltando a ativa… e agora pra ficar!! hehehe

Hoje quero explor um exemplo usando o FilterFunction com o Flex…. é algo bem interessante e que facilita a vida da galera =)

O que faremos: Vamos criar um array e seta-lo como dataProvider em um grid…. e nos campos nome e email vamos escrevendo e o grid será filtrado automaticamente…. Jóia não?! hehe

Vamos lá então… farei o seguinte…. exponho o código e exmplido ele OK?

Mas como sempre eu digo… procurem evitar o Ctrl+C e Ctrl+V…. ele torna vcs burros! =D hehehe

MXML…

<mx:HBox verticalAlign="bottom">
	<mx:FormItem label="Nome:">
		<mx:TextInput id="txtNome" width="200" change="addFiltro()"/>
	</mx:FormItem>
	<mx:FormItem label="Email:">
		<mx:TextInput id="txtEmail" width="200" change="addFiltro()"/>
	</mx:FormItem>
</mx:HBox>
<mx:DataGrid width="100%" height="100%" id="dg" dataProvider="{listaNomeEmail}">
	<mx:columns>
		<mx:DataGridColumn headerText="Nome" dataField="nome"/>
		<mx:DataGridColumn headerText="Email" dataField="email"/>
	</mx:columns>
</mx:DataGrid>

Essa parte é o MXML…

Vejam que criei dois formItems com TextInput, txtNome e txtEmail… no change deles há uma função chamada addFiltro() onde será executado o filtro… o change irá fazer com que a função seja executada toda vez que houver uma alteração no TextInput, ou seja, toda vez que vc acrescentar ou apagar um caracter.

No DataGrid ta tudo OK não é?! DataProvider listaNomeEmail (ArrayCollection) … dataField nome e email para mostrar os dados…. bem…. é isso….

Aaaaa…. no Application(não pus o código) eu mudei o layout para “vertical”…. pois o Grid está 100%, se ficar absolute, fica por cima dos TextInputs ^^

ACTION SCRIPT (ACS)…

var listaNomeEmail:ArrayCollection = new ArrayCollection([
	{nome:"Guilherme Sjlender", email:"guisjlender@gmail.com.br"},
	{nome:"Guilherme Silva", email:"guilherme@email.com.br"},
	{nome:"Tiago Sjlender", email:"tiago@email.com.br"},
	{nome:"Taniele Berwian", email:"tani@email.com.br"},
	{nome:"Rodrigo Sjlender", email:"rodrigo@email.com.br"},
	{nome:"Valdemar Sjlender", email:"vald@email.com.br"},
	{nome:"Luciana Berté Sjlender", email:"luciana@email.com.br"},
	{nome:"Ana Luiza Berté", email:"anaana@email.com.br"}]);

private function addFiltro():void
{
	listaNomeEmail.filterFunction = regraFiltro;
	listaNomeEmail.refresh();

	dg.dataProvider = listaNomeEmail;
}
private function regraFiltro(objeto:Object):Boolean
{
	return ((objeto.nome.toUpperCase().indexOf(txtNome.text.toUpperCase()) >= 0)
     && (objeto.email.toUpperCase().indexOf(txtEmail.text.toUpperCase()) >= 0));
}

Aqui que o bicho pega! hehehe

Bem… vamos as explicações =)

1º Começamos criando um arrayCollection com os dados de algumas pessoas (eu e minha familia! heahaehea) e seus respectivos emails ^^

2º Criamos a função addFiltro()… Nessa função pegamos a lista listaNomeEmail e dizemos que ela vai ter uma função FilterFunction cujo nome é regraFiltro:

listaNomeEmail.filterFunction = regraFiltro;

Depois de executado essa função “regraFiltro” damos um refresh() na lista e readicionamos ela ao nosso DataGrid.

3º Criamos a função regraFiltro(objeto:Object)… essa função é onde vai ser feito as regras de negócio para dizer se “tal” registro será mostrado ou não…. o parâmetro dessa função (objeto:Object) recebe cada objeto da lista e assim verifica um por um retornando true ou false para ele aparecer ou não… entenderam?

Nessa situação verificamos se o txtNome(txtNome.text.toUpperCase()) está contido(.indexOf) no nome do objeto(objeto.nome.toUpperCase()) e(&&) se txtEmail(txtEmail.text.toUpperCase()) está contido(.indexOf) no email do objeto(objeto.email.toUpperCase()) caso essas duas condições retornem 0 ou mais caracteres ( >= 0 ) o retorno será true, senão, será false…

Compreenderam a situação? Dizemos ao filterFunction da lista qual é a função que irá fazer as regras de validações, damos um refresh e readicionamos para o DataGrid… não tem erro ^^

É isso ai pessoal…. boa sorte nos estudos ai e agora em diante vou ir postando mais direto alguns exemplos legais ok?

Até mais

GuiSjlender 8D

– Error #1053: — Problema com solução! =D

Galera…. esse erro aqui é algo que está dando uma dor de cabeça nos programadores pelo mundo todo…

VerifyError: Error #1053: Substituição ilegal de FlexModuleFactory em mx.core.FlexModuleFactory. at global

            $init()

Esse erro ocorre quando vc está trabalhando com alteração de estilos em seu sistema usando o comando

StyleManager.loadStyleDeclarations

O problema é que ele aparece do nada e não é bem simples você encontrar o motivo do problema, muito menos a resolução do mesmo! Mas seu problema tem cura…. hehehe

Esse erro acontece quando há uma atualização do seu projeto para o novo “SDK 3.4.0.9″ ou superior. Ele não aceita os SWF criados atravéz do CSS na versão inferior a esse SDK… ai o erro será presente em seu projeto!!!

Então… o que fazer?!

Simples…. basta você recriar os SWFs do seu projeto com a versão do SDK 3.4.0.9, ou superior, instalado em seu projeto que o problema será resolvido!

Um problema grande se resolve com pequenos atos! =)

Acho que é isso pessoal…. qualquer duvida deichem algum comentário ok?!

Até mais…

Sistema Completo Flex – parte 2

Daew pessoal…. estou devolta!!!^^

Bem…. no post anterior nós começamos um projeto cujo escopo é montar uma calculadora porreta! hehehe

Montamos a parte do design dela e agora iremos trabalhar um pouquinho com o CSS para deixa-la mais bunitinha aos olhos de quem utiliza-la.

Só uma coisinha…. antes de começarmos com o CSS temos que alterar uma coisa no nosso código…

Prestem atenção, se executarem a calculadora e clicarem no TextInput da calculadora você poderá escrever qualquer informação naquele espaço… isso é inaceitável para uma calculadora, correto?!?! E o que fazer? é muito simples…

Existe uma tag chamada “editable” que irá resolver isso. Ela informa se determinado campo é ou não editável. Então, você só precisa acrescentar no TextInput a tag | editable=”false” |, se estivece true em vez de false o textInput seria editável…

O código ficará assim, sendo que a parte vermelha é a tag que acrescentamos no código ok?!

<mx:TextInput x="10" y="10" width="221" fontSize="20" editable="false"/>

  blz… feito isso agora vamos continuar! \o/

CSS - Cascading Style Sheets

Para quem ja programou com CSS atravéz do html não terá problema algum em entender como funciona no Flex.

O CSS cria a “folha de estilo” e atravéz dele iremos definir padrões visuais para nosso componentes.

Um exemplo de CSS seria…

Button
{
     color: blue;
}

Nesse exemplo estou informando, atravéz de CSS, que o componente Button terá a cor de seu texto azul(blue), se colocarmos isso no código será que irá funcionar?

E como introduzir o  CSS na nossa aplicação?

Existem duas formas práticas de trabalhar com CSS. Falarei das duas:

1. Introduzir no próprimo mxml atravéz da tag <mx:Style…/> : Essa forma é simples, rapida e não mt aconcelhável. Você não perderá em execução, mas seu código irá ficar poluido e isso não é legal.
2. Criar um arquivo .css e lincar o mesmo ao arquivo mxml: Continua sendo fácil, mas não tão prático pois é certo que vc perde um pouco mais de tempo arrumando os campos, passando de um arquivo para outro e blablabla. Mas existem ‘n’ vantagens que eu poderia citar do pq usar um arquivo CSS do que introduzir direto ao código mxml, mas isso não vem ao caso. Vou mostrar das duas formas e uma outra hora irei postar um post sobre a importância da organização de pastas, arquivos e código.

Faremos da primeira forma, irei explicar o que pretendo utilizando dessa forma e por fim mostro da 2ª forma e terminaremos deixando nossa calculadora o bixo! hehe

Escrevam no seu arquivo index.mxml o seguinte “<mx:Style >” , quando fechar essa tag “>” será acrescentado logo abaixo uma tag assim “</mx:Style>” mostrando que até ali você poderá acrescentar suas configurações de CSS.

dentro dessas duas tags escrevam o código que coloquei acima do Button e visualizem no Design… o que aconteceu??? Letrinha azul correto??? =)

É muito fácil! \o/

vejam o código abaixo como base…

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="555" height="461">

     <mx:Style>
         Button
         {
             color: blue;
         }
     </mx:Style>

     <mx:Label x="137.5" y="24" text="Tutorial Calculadora Flex" fontWeight="bold" fontSize="20" fontStyle="italic"/>
     <mx:Panel x="149" y="63" width="261" height="317" layout="absolute" title="Calculadora">
         <mx:TextInput x="10" y="10" width="221" fontSize="20" enabled="false"/>
         <mx:Button x="10" y="53" label="7" fontSize="30" width="47"/>
         <mx:Button x="65" y="53" label="8" fontSize="30" width="47"/>
         <mx:Button x="120" y="53" label="9" fontSize="30" width="47"/>
         <mx:Button x="10" y="107" label="4" fontSize="30" width="47"/>
         <mx:Button x="65" y="107" label="5" fontSize="30" width="47"/>
         <mx:Button x="120" y="107" label="6" fontSize="30" width="47"/>
         <mx:Button x="10" y="161" label="1" fontSize="30" width="47"/>
         <mx:Button x="65" y="161" label="2" fontSize="30" width="47"/>
         <mx:Button x="120" y="161" label="3" fontSize="30" width="47"/>
         <mx:Button x="10" y="215" label="0" fontSize="30" width="47"/>
         <mx:Button x="65" y="215" label="." fontSize="30" width="47"/>
         <mx:Button x="120" y="215" label="=" fontSize="30" width="47"/>
         <mx:Button x="188" y="53" label="C" fontSize="20" width="42"/>
         <mx:Button x="188" y="96" label="/" fontSize="20" width="43"/>
         <mx:Button x="188" y="139" label="X" fontSize="20" width="43"/>
         <mx:Button x="188" y="182" label="-" fontSize="20" width="43"/>
         <mx:Button x="188" y="224" label="+" fontSize="20" width="43"/>
     </mx:Panel>

</mx:Application>

Vejam, abusem, mas não copiem e colem!!!! Escrevam o código!!!! =D

podemos acrescentar mais parâmetros no nosso css… por exemplo…

Button
{
     color: blue;
     corner-radius:20;
     disabled-color: red;
     theme-color: green;
}

O que significa essas novas tags?

• color: esse eu ja tinha explicado, é a cor da letra do Button;
• corner-radius: esse vai alterar o formato do Button, quanto maior o número, mais redondo será o Button, quanto menor, mais quadrado será o Button;
• disabled-color: é a cor que a letra irá ficar caso o botão seja desabilitado (ja veremos como isso é possível);
• theme-color: é o tema do botão, assim as características do botão serão todos da cor passada, por exemplo verde(green) como descrito acima;

Agora acrescente esses parâmetros ao código e escolha um button no código e dentro dele acrescente o seguinte: enabled=”false”, dessa forma veremos a letra desse botão em vermelho…

Agora execute o projeto e veja como está nossos Buttons?!

O legal é que vc faz a modificação em um CSS e todos os Buttons são alterados automaticamente.

Em fim, se forem analizar, todo parâmetro que irá interferir diretamente com o layout de um componente poderá ser pré configurado no CSS para deixar como padrão em seu sistema… uma dica é verificar os parãmetros que cada componente tem para modificar e testar no CSS, vc concegue ver isso atravéz do Design na aba “Flex Properties”.

Outra tática usada com o Flex e CSS é a criação de uma configuração com um nome qualquer e depois setar essa configuração ao componente…. assim você poderá ter botões com configurações diferentes, diferente de quando criamos uma configuração com o nome Button que irá intervir em todos os botões do sistema.

Vamos a um exemplo…

.botaoDiferente
 {
     color: green;
     corner-radius: 10;
     theme-color: blue;
     disabled-color: black;
 }

Vejam que em vez de colocar o “Button” como nome da configuração eu criei um nome próprio. Quando crio uma configuração com um nome próprio é obrigatório acrescentar o “.(ponto) ” no início do nome da Configuração.

Agora é muito simples acrescentar isso a um botão… Escolha um botão e no código acrescente styleName=”botaoDiferente” , dessa forma esse botão terá um estilo diferente dos outros…

Execute a aplicação e veja…

Bem gentem…. essa parte ta explicada…. vamos a parte que intereça! *_* hehehe

Como tinha explicado antes, existe outra forma de trabalhar com CSS que é criando um arquivo .css e depois lincando direto com o projeto…

Então a primeira coisa que vamos fazer é criar o bendito arquivo! hehehe

Clique com o botão direito do mouse na pasta src e vá em New>CSS File … e em Filename coloque o nome do arquivo de “estilo” e clique em Finish.

feito isso seu projeto ficará assim…

Pessoal…. agora a coisa facilita um pouco para criar estilos para cada componente… se verificarem no arquivo estilo.css terá a opção de Source e Design… clique em Design.

Aqui você poderá escolher o componente que quer modificar, então é só modificar que o código css será criado/atualizado automaticamente, igual ao Design do mxml que quando você coloca um componente na aplicação ele atualiza o código acrescentando os parâmetros daquele componente adicionado.

então clique em New Style…

Em “Selector type” deixe marcado a opção “Specific component” e em “Component” escolha o Button, depois disso clique em Ok

E vualáááá… hehehe

Vejam que agora você tem todas as opções de estado que o botão pode ficar. Ex:up, over, down, disabled… E no lado direito vc tem todas as propriedades do botão.

Agora está fácil criar um estilo para seus componentes não é?! hehehe

Modifique as propriedades e veja o resultado no mesmo momento…

Aqui você pode escolher qualquer tipo de componente lá no New Style e configura-lo, o código é alterado automaticamente no Source.

Bem…. deixemos essa parte de lado e vamos ao que intereça certo?

façam o seguinte…. escrevam esse código abaixo no Source do seu CSS… esse será a nossa configuração para o layout da calculadora!

/* CSS file */
.Button1
{
     cornerRadius: 20;
     borderColor: #6D826E;
     fillAlphas: 1.0, 1.0;
     fillColors: #FFFFFF, #3A5F42;
     color: #4A4A4A;
     disabledColor: #000000;
     textSelectedColor: #000000;
     textRollOverColor: #EFEFEF;
     themeColor: #DEE1E2;
}
.Button2
{
     cornerRadius: 20;
     borderColor: #6D826E;
     fillAlphas: 1.0, 1.0;
     fillColors: #3A5F42, #FFFFFF;
     color: #4A4A4A;
     disabledColor: #000000;
     textSelectedColor: #000000;
     textRollOverColor: #EFEFEF;
     themeColor: #DEE1E2;
}
TextInput
{
     cornerRadius: 8;
     borderStyle: solid;
     backgroundColor: #A5B595;
     fontWeight: bold;
     borderThickness: 2;
     borderColor: #226F1E;
}
Panel
{
     borderColor: #3F6943;
     backgroundColor: #D9E8D6;
     cornerRadius: 6;
     roundedBottomCorners: false;
}

Vejam que acrescentei várias tags que não expliquei ainda para vocês, mais isso vou deixar ocmo desafio para descobrir o que cada um faz… verifique o Design as configurações, analize o código, só assim você irá fixar de verdade o conhecimento!

Vejam também que criei duas configurações a parte que é o .Button1 e .Button2, assim poderei ter dois tipos de botões, vocês já verão o resultado…

Bem… salvem o arquivo estilo.css(Crtl+S) e vão para o index.mxml

Lá vamos fazer o seguinte….

Apaguem todo o código que está dentro do <mx:Style > até  o fim do </mx:Style>, também apaguem o </mx:Style> e deixem só o <mx:Style >, acrescentem antes do “>” final um “/” deixando o código assim <mx:Style />. Feito isso escreva dentro da tag “Style” o parâmetro source informando que irás usar as configurações do arquivo estilo.css

<mx:Style source="estilo.css"/>

Depois disso acrescentem nos botões os “styleName” respectivos ao código descrito abaixo…

  <mx:Button x="10" y="53" label="7" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="65" y="53" label="8" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="120" y="53" label="9" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="10" y="107" label="4" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="65" y="107" label="5" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="120" y="107" label="6" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="10" y="161" label="1" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="65" y="161" label="2" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="120" y="161" label="3" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="10" y="215" label="0" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="65" y="215" label="." fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="120" y="215" label="=" fontSize="30" width="47" styleName="Button1"/>
  <mx:Button x="188" y="53" label="C" fontSize="20" width="42" styleName="Button2"/>
  <mx:Button x="188" y="96" label="/" fontSize="20" width="43" styleName="Button2"/>
  <mx:Button x="188" y="139" label="X" fontSize="20" width="43" styleName="Button2"/>
  <mx:Button x="188" y="182" label="-" fontSize="20" width="43" styleName="Button2"/>
  <mx:Button x="188" y="224" label="+" fontSize="20" width="43" styleName="Button2"/>

Feito isso execute o seu projeto e verifique o resultado final….

O que acharam da nossa calculadora??? Bunitinha não é?! hehehe

Bem… avontade para modificar o CSS pois isso não irá interferir no nosso resultado final que é uma calculadora com suas funcionalidades… Mas também não faça muito fiasco ok?! hehehehehehe

Então galera…. essa parte de CSS é algo que com o tempo você vai aprendendo e adquirindo noção do que fazer e como fazer um bom layout para sua aplicação.

Maiores duvidas a respeito de CSS com Flex só postar um comentário que resolvemos as duvidas o quanto antes!

No mais seria isso…. agora vamos passar para a parte 3 que seria as funcionalidades iniciais da nossa calculadora.

Então até a próxima pessoal… Flw

Fuiii \o/

Sistema Completo Flex – parte 1

Olá pessoal gente boa!! ^^

Quero começar um tutorial porreta! hehehe

Vou mostrar em 4 post uma aplicação completa… início, meio e fim! ^^

Vamos aprender funcionalidades simples e avançadas do Flex. Vamos trabalhar com .mxml, .as e .css, montando assim, uma vasta quantidade de informações e tornando esse tutorial um manual completo de como fazer “TAL COISA” no Flex! hehehehe

Bem…. Pretendo expor poucas imagens e bastante código e ja adianto e digo, se sua intenção é aprender mesmo o Flex esquece que existe o Crtl+C/Crtl+V … esses dois comandinhos nos deixam burros! hehehehe Mas sério, para melhor fixação de informação, nada melhor do que escrever o código… evitem usar o Design do Flex Builder, vamos praticar e aprender realmente blz?!

…

Então vamos lá…

Vamos começar pelo escopo do nosso Projeto…. o que iremos fazer?????

Alguma idéia???? =P

Bem…. o Flex é um Framework para aplicações ricas via web (RIA) então vamos criar……. hummm……. vamos fazer uma Calculadora =D~~~~~~

O que acham???

Deve ter passado na cabeça….”CALCULADORA??? =O~~”, “SERÁ Q CHOVE HOJE???? =O~~~~~~”, “2+2 = 22 …. =D ~” hehehehehe

Mas assim pessoal…. nossa intenção aqui é aprender certo? Então nada melhor do que criarmos algo que é conhecido por todos….

E enganado é aquele que pensa que uma calculadora é coisa simples…. vamos fazer uma SUPER calculadora! hehehe

…..

Decidido o nosso Projeto pensemos nas funcionalidades de nossa Calculadora…

• Somar/Subtrair/Multiplicar/Dividir

Simples não?! hehehe, mas ja digo… se leres todos os Post não irá se arrepender!

…..

Afff… chega de enrolação!!!! Vamos começar logo esse projeto e as explicação vão vindo aos poucos! hehe

Então abram o FlexBuilder e Criem um novo projeto com o nome “Calculadora”. (quem não sabe criar um projeto novo leiam antes o Post Conhecendo o Flex)

o projeto inicial irá ficar assim…

 

Feito isso comecemos agora pelo layout… depois de montado nossa calculadora vamos criar um estilo (CSS) para nossa aplicação e só depois vamos dar vida a isso tudo! ^^

Então…. o que tem uma calculadora???????? =P

façamos o seguinte…. vamos uzar esse modelo abaixo OK?!

Então o que iremos usar de componentes? Só será necessário 3 tipos diferentes de componentes que são:

• Panel
• TextInput
• Button

Com esses 3 componentes está prontinho a nossa calculadora!!! ^^ Facil não!? =D~

Vejam como fica…

Parecido não?! 8D

Mas vamos deixa-lo mais parecido com o nosso modelo… tenham calma! ^^

Como podem ver especifiquei por cores e uma legenda o que é o que na nossa calculadora! ^^

Para montar essa Calculadora eu usei o Design do FlexBuilder… como eu disse, prefiram não usar… mas também não é o fim do mundo facilitar a sua vida não?! hehehe

O código… no momento está assim…

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="555" height="461">
    <mx:Panel x="149" y="63" width="261" height="317" layout="absolute" title="Calculadora">
        <mx:TextInput x="10" y="10" width="221" fontSize="20"/>
        <mx:Button x="10" y="53" label="7" fontSize="30" width="47"/>
        <mx:Button x="65" y="53" label="8" fontSize="30" width="47"/>
        <mx:Button x="120" y="53" label="9" fontSize="30" width="47"/>
        <mx:Button x="10" y="107" label="4" fontSize="30" width="47"/>
        <mx:Button x="65" y="107" label="5" fontSize="30" width="47"/>
        <mx:Button x="120" y="107" label="6" fontSize="30" width="47"/>
        <mx:Button x="10" y="161" label="1" fontSize="30" width="47"/>
        <mx:Button x="65" y="161" label="2" fontSize="30" width="47"/>
        <mx:Button x="120" y="161" label="3" fontSize="30" width="47"/>
        <mx:Button x="10" y="215" label="0" fontSize="30" width="47"/>
        <mx:Button x="65" y="215" label="." fontSize="30" width="47"/>
        <mx:Button x="120" y="215" label="=" fontSize="30" width="47"/>
        <mx:Button x="188" y="53" label="C" fontSize="20" width="42"/>
        <mx:Button x="188" y="96" label="/" fontSize="20" width="43"/>
        <mx:Button x="188" y="139" label="X" fontSize="20" width="43"/>
        <mx:Button x="188" y="182" label="-" fontSize="20" width="43"/>
        <mx:Button x="188" y="224" label="+" fontSize="20" width="43"/>
    </mx:Panel>

</mx:Application>

Você pode usar esse código como base para montar a sua calculadora, mas ja sabem né?! SEM Copiar/Colar! hehehe

Aaaa… favor não mecher nas propriedades de cores e formatos dos componentes… isso nós vamos fazer depois no CSS ok?!

O que foi feito no código acima????

Se forem analizar o código acima a primeira coisa que vemos é que o Flex é um código de hierarquias, ou seja, vemos que existe uma “<mx:Panel … >”  com suas especificações e tal, e depois de algum código encontramos o “</mx:Panel>” que significa que a Panel foi finalizada ^^ Mas e pq os Buttons e o TextInput estão intre essas duas tags da Panel? Simplismente pq esses componentes estão incluidos dentro da Panel, concluindo que esses componentes se tornam filhos do componente Pai (Panel), dessa forma a leitura esse código fica muito facil não é?!

Essa é a maior caracteristica do mxml (variação do XML).

Bem…. existem os atributos de cada componente que estão aparecendo no código:

• “x” e “y”: É onde vc especifica a posição do componente;
• “width”: Especifica a largura do componente. Existe também o “heigth” que especifica a altura do componente;
• “label”: Especifica o texto que irá aparecer no componente; (nem todos os componentes tem a propriedade label, um caso é o TextInput. Caso você queira que algo apareça no TextInput existe a propriedade “text”)
• “fontSize”: Aturbuimos o tamanho da fonte do texto daquele componente;
• “layout”: Define que tipo de layout aquele componente terá. Essa propriedade só existe em componentes do tipo Conteiners, ou seja, aqueles que suportam outros componentes dentro dele;
• “title”: Define um titulo para algum componente. Também só presente em componentes do tipo Conteiners.

Ufa… cabo! hehehe é tanta coisa!! ^^ Tem ainda umas propriedades no “<Application …>” mas isso não vou explicar pois no outro post ja dei uma explicadinha!! ^^

Bem…. assim ja da para ter uma pequena noção de como se trabalhar no Flex não é?! =)~

Depois disso tudo pronto, tente executar o seu Projeto para ver como esta! Clique com o botão direito no index.mxml e vá em Run As > Flex Application e prontinho!

 

Bem pessoal… essa é a primeira parte do nosso tutorial… agora na segunda parte vamos mecher no CSS… vou mostrar como montar um layout a partir de um CSS e introduzi-lo em nossa aplicação blz?! ^^

 

Por enquanto é isso… um abraço e até mais!

“Estudo és tudo!” hehehehe

Flw \o/

Sistema Completo Flex – parte 2

Conhecendo o Flex

 

Olá pessoal…. tudo + ou – ???? hehehe

Bem… quero começar o Blog com algo simples porém util para quem está começando…

Vou mostrar passo-a-passo como criar um projeto Flex e ensinar um pequeno exemplo no Flex para quem está começando!

Vamos lá então…

Pergunta: O que eu uso pra programar em Flex?

Resposta: www.google.com.br ! hehehehe brincadeira, hoje existe uma ferramenta chamada Flex Builder 3 da Adobe que resolve esse seu problema. Essa ferramenta é paga mas você pode baixa-la e usa-la por 60 dias de gratis! Se você for um estudante, pode mandar um comprovante de matricula para a Adobe e eles lhe mandam um serial válido para estudo legalizando, assim, a ferramenta. É claro que dai você só pode utilizar essa ferramenta para fins de estudo, caso queira vender seus sistemas Flex, deve comprar a licença blz?! ^^

Então vá em www.adobe.com.br e baixe o Flex Buider 3 (enquanto escrevo esse post ja foi lançado a versão beta do Flex 4… mas vamos trabalhar com o Flex 3 ok?! =P )

Bem… para instalar você pode utilizar da tecnica de Next>Next>Next>Finish! hehehe

Vamos ao que intereça…

Depois de aberto o Flex Builder  clique em “File > New > Flex Project” e abrirá uma tela…

 

Em “Project name” escreva o nome do projeto. como estamos aprendendo iremos colocar o nome de “ShowFlex”, só não me bote as aspas junto né?!?!?!? hehehe

Em “Project location” é onde será salvo o projeto e seus arquivos… vamos deixar marcado a opção “Use default location”, deixa que o Flex Builder se vira sozinho! hehe

Em “Application type” temos a opção de criar um projeto com natureza Web(Flex) e natureza Desktop(AIR), deixemos marcado a primeira opção “Web application (runs in Flash Player)”;

Em “Server technology”  é onde escolhemos a aplicação que vai auxiliar o Flex na comunicação com outras linguagens. Como vamos trabalhar somente com o Flex nesse projeto iremos deixar marcado a opção None.

Bem… feito isso aperte em Next… irá aparecer

 

Aqui você ira falar para o Flex qual pasta ficará os arquivos finais, os executáveis do sistema. Por Default vamos deixar como está, “bin-debug”.

Aperte novamente em Next…

 

Essa é a parte final de configuração para a criação do seu Projeto Flex.

Em Source path vc pode adicionar pastas com componentes para utilizar em seu projeto… para agora iremos ignorar isso pois as bibliotecas do Flex tem tudo o que precisamos de inicio.

Em “Main source folder” será a pasta onde ficarão todos os seus pacotes e arquivos mxml, as, css, etc… ou seja, será onde iremos programar literalmente, é o coração do Projeto! Por padrão deixaremos “src”

Em “Main application file” será exibido o nome do arquivo inicial do projeto, é o executável! Bem… aqui vamos mudar o nome desse arquivo de “ShowFlex.mxml” para “index.mxml” ! Pq isso? Pois depois quando formos executar o projeto o Flex irá criar um arquivo index.html dentro do path bin-debug… depois quando formos por no ar nosso sistema, em vez te colocar http://www.dominio.com.br/ShowFlex.html irei colocar http://www.dominio.com.br =D Legal né?! hehehehe

Bem… feito isso agora é só apertar em Finish e está pronto a base do projeto “ShowFlex”… =D

Facil não é?! É simples… quando treinar mais um pouco não tem como esquecer! =)

Vemos então que no canto esquerdo foi criado um projeto com o nome ShowFlex e com os seguintes pacotes e arquivos…

 

e na parte central/direita aparece…

 

Se observarem bem irão ver que existe duas opções nessa parte:

• Source: Nessa parte iremos, literalmente, programar nosso código;
• Design: Nessa parte iremos montar o nosso layout;

Vamos observar primeiro na visão Source…

Vemos que o Flex acrescentou algum código já no arquivo index.mxml

o “<mx:Application…” aparece só no arquivo principal do projeto, confirmando, assim, que esse arquivo será executado por primeiro e será a base de tudo. Dentro dele temos uma tag xmlns:mx=”http://www.adobe.com/2006/mxml” de faz a ligação do Projeto com os componentes do Flex… sem essa tag você não iria conceguir mostrar nada no seu layout, caso você não tenha criado seus próprios componentes, maaaaassss como esse tutorial é mt básico, acredito que vc ter seus próprios componentes, agora, é algo meio crazy!! hehehehehe

Bem…. continuando… deixe aquela tag lá e pronto! hieiheiheihei

Temos também a tag layout=”absolute” que irá tornar o layout da aplicação livre, ou seja, você poderá colocar seus componentes onde você quiser!

Vamos agora para o Design…

 

Aqui o esquema de abas é o seguinte:

• Components (esquerdo/inferior): Aqui iremos encontrar todos os componentes padrões do Flex…. para você poder utilizar desses componentes só precisa apertar com o mouse em cima do componente que você quiser, arrastar e soltar no centro da área de Design, na posição que melhor lhe agradar e assim montar seu layout;
• Flex Properties(direito): Aqui você poderá configurar as propriedades de cada componente, ações, cores, tamanhos, etc.
• States(direito/superior): Aqui você poderá criar states onde cada state terá alguns componentes sendo que em outros terá outros componentes, ou então propriedades diferentes para um determinado componente… mas isso veremos em outro post… não se preocupe! ^^

Então vamos fazer o seguinte… Procure na aba Components um componente chamado Button. Segure ele e arraste até o centro da aplicação…

 

Vamos agora na perspectiva Source e veja o que aconteceu… foi acrescentado o seguinte código

<mx:Button x="259" y="236" label="Button"/>

Esse código está ai pois acrescentamos ele ao index.mxml quando arrastamos o Button até o centro da nossa aplicação. O “x” e o “y” são as tags de posição do componente, talvez até seus valores sejam um pouco diferentes dos meus pois você pode ter colocado em outra posição o Button, e a tag “label” é o que fica escrito no Button…

faça o seguinte… modifique o conteúdo desse label de “Button” para “Botão”!

Agora vá para a perspectiva Design……. o que aconteceu???? hehehe

Éééééééé…. limpa a boca ai!!! o Flex é facil sim!! iheiheihie

O Flex ganhou um espaço muito grande não só por suas facilidades de compatibilidades e acessos via web, mas com essa ferramenta Flex Builder, ficou bem mais facil montar seus Layouts sem muito trabalho…………..blablablablabla….

^^

Mas chega de ladainha….

Faça o seguinte…. copie esse código e cole em seu index.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Button x="142.5" y="66" label="Pesquisar" width="94"/>
    <mx:Button x="244.5" y="66" label="Gravar" width="94"/>
    <mx:Button x="346.5" y="66" label="Excluir" width="94"/>
    <mx:Label x="252" y="10" text="Escreva aqui:"/>
    <mx:TextInput x="142.5" y="36" width="196"/>
    <mx:DateField x="346.5" y="36" width="94"/>

</mx:Application>

Fez o que eu mandei??? hiehieiheiheihie

Se quiser ver olhe no Design o que foi adicionado no index e analize o código para entender o que significa cada tag… assim você ira fixas bem mais as coisas mais básicas do Flex.

Mas então…. eu quero poder ir montando minha aplicação e ir executando para ver como está ficando, testar as funções que criei, etc…. como iremos executar a nossa aplicação?

Se tomar a atenção no arquivo index.mxml

verás que ele tem uma bolinha azul. Essa bolinha significa que esse arquivo é o arquivo de execução do Projeto então clique com o botão direito nele e vá em “Run As > Flex Application” e prontinho…. seu navegador irá abrir e sua aplicação irá aparecer em tempo de execução para você!!!

Bem pessoal…. Esse tutorial é o primeiro post que faço aqui no Blog e fiz simples assim para ir gradativamente aumentando os níveis de tutoriais e assim cada pessoa que for acompanhar terá um avanço junto com os exemplos… assim será de melhor entendimento para quem está começando, e para quem ja sabe, não custa dar uma relembrada certo, por mais que seja algo bem simples!

Mas é isso ai pessoa…. qualquer duvida ou correção de alguma besteira que eu disse, favor entrar em contato Ok?!

Até mais e bons estudos. 8D

Boas Vindas

Olá Pessoal…

Então é isso…. sou desenvolvedor de sistemas RIAs com Flex e Java.

A minha intenção começando esse Blog é expor alguns tutoriais, tirar duvidas, expor novidades, em fim, esmiuças toda a vida do Flex e Java! hehehe

O Blog será separado em categorias ”Notícias - Java/Flex – Java – Flex” deixando mais fácil a procura de alguma informação.

 

Acho que é isso pessoal… qualquer coisa que eu falar uma besteira me avizem blz!? hehehehe

 

Abraços e bom proveito!

 

Att. GuiSjlender