Sistema Completo Flex – parte 1
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/
