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/