Criando seu próprio componente "relógio digital" no Flex

Ola pessoal, bom vai ai minha primeira contribuição para esse blog...

Neste artigo, vamos criar nosso próprio componentes no Flex, para quem nao sabe o que é Flex e nem sobre o que estou falando voce encontra as respostas aqui... , entao vamos la mão a obra!

Foi utilizado nesse artigo:

• Adobe Flash Builder 4 que voce encontra aqui.
  
• Eclipse 3.4.2 que voce encontra aqui.
  

Primeiramente vamos criar um novo projeto: File=>New=>FlexProject


Daremos o nome do projeto de "CriandoComponenteRelogioDigital" (claro, escolha o nome que voce quiser), deixarei as outras opções como default.

Pronto, nosso projecto esta criado...

Vamos agora iniciar a criação do nosso componente, para ficar organizado, vamos criar um "pacote" (isto mesmo "pacote" igual no java) onde será armazenado todos os nossos componentes, então clique com o botao direito em cima de pasta "src", depois em New=>Package, daremos o nome nesse exemplo de "MeusComponentes" ...

Agora, vamos criar um arquivo do tipo "Action Script Class", clique com o botao direito em cima do nosso recem criado pacote depois em New=>Action Scrip Class, de o nome de "RelogioDigital", deixe as outras opçoes em default e clique em "Finalize", será criado entao nossa classe como no exemplo abaixo:



Agora vamos para a parte boa...

Primeiramente, como estamos criando um relógio digital, o que nada mais é que um label onde este será atualizado a cada segundo com a hora atual, então vamos dizer a essa classe que a mesma irá herdar todas as características de um Label, onde dessa forma poderemos acessar todos os metodos de um Label., fazemos isso adicionando a palavra chave "extends" no final da declaração da classe... fica assim:


Nota que foi adicionado automaticamente o import necessário para encontrar o componente Label.
Agora ja temos o nosso componente label criado, agora vamos implementar um metodo que irá pegar a data atual e alterar a propriedade "text" desse label, esse metodo deverá ser chamado a cada segundo para manter a data atualizada...
Utilizaremos a classe Timer do Flash para atualizar o Label, o que nada mais é que uma thread que ficara executando em segundo plano. Vamos importa entao a classe Timer, a classe Event e TimerEvent do Flash ... ficando assim:


Como podemos ver, a estrutura da classe do Action Script 3 parede muito com a estrutura do java, onde temos a declaração da classe informando sua heranca e temos seu metodo construtor, que é aquele metodo que é chamado quando a classe é instanciada, será nesse metodo que vamos criar a thread e inicia-la, e que por sua vez essa thread ira chamar um método que irá atualizar a propriedade text do nosso Label,, ficando assim:


Agora sim, temos muita coisa interessante, entao vamos la...

Criamos, primeiramente o nosso objeto hora, que é do tipo Timer, sera esse objeto a nossa thread que ficara executando em segundo plano.
Depois, dentro do nosso método construtor, instanciamos o nosso objeto hora informando em quanto tempo que essa thread ira ficar sendo chamada, no exemplo colocamos 1000 milisegundos, ou seja, a cada um segundo esse objeto ira disparar um evento do tipo TimerEvent, logo após, informamos ao objeto que quando esse evento TimerEvent for disparado, vamos chamar o metodo pegarHora.

Esse metodo pegarHora, ira instanciar um objeto do tipo Date e algumas variáveis que serão utilizadas para formar a hora no formato correto, como por exemplo nos dez primeiro segundo e minutos será adicionado o zero antes do numero, para ficar 01, 02 e assim por diante ao inves de 1, 2 ....
Apos isso, criamos dois" if" para testarmos quando deveremos adicionar este zero, pegando através dos metodos getSeconds (retorna um Number contendo o segundo) e getMinutes (retorna um Number contendo o minuto). Após esses teste, e após pegar a hora com o metodo getHours (que retorna um Number contendo a hora) e as devidas conversoes temos nossa string com a hora, minutos e segundo, agora e so setar a propriedade text do nosso Label "RelogioDigital" e pronto! Esta ai nosso componente!... :)

Beleza, temos nosso componente... agora como utiliza-lo??? Isso é a parte mais facil do nosso artigo... vamos ao nosso arquivo "MXML Application" criado dentro do "default package" como o nome "CriandoComponenteRelogioDigital" , se voce tiver seguido a risco esse artigo esse arquivo estará exatamente com esse nome, se nao estará com o nome que seu projeto foi criado, agora caso nao tenha esse arquivo voce pode cria-lo clicando com o botao direito em cima de "default package" depois em New=>MXML Application e adicionar com o nome que preferir....

Dentro de Source do nosso arquivo mxml, vamos adicionar um novo namespace informando onde que o compilador irar encontrar nosso novo componente,,, no caso desse artigo adicionei o sequinte namespace :

Apos os dois pontos (":") da propriedade xmlns, colocamos o "mp" (aqui voce pode utilizar o nome que preferir) refericiando-o ao pacote que esta o nosso componente, após isso através do namespace "mp" encontraremos nosso componente... dessa forma:

Agora sim.. é so rodar a nossa aplicação e esta lá, nosso Label sendo atualizado automaticamente a cada segundo...

Dessa forma voce poderá usá-lo em todas as sua aplicações Flex simplesmente adicionando o seu componente ao projeto e indicando seu namespace, aumentando ainda mais sua produtividade....

Claro podemos tambem mudar todas as propriedade do nosso componente como a cor, tamanho, fonte... tudo que temos em um Label normal, diretamenten o mxml ou ainda no nosso arquivo ActionScript, caso queira que essa mudança replique para todos os seus componentes do relogio digital na sua aplicação!

Em algum proximo artigo iremos criar o nosso proprio componente calendario do tipo DateChooser onde iremos personaliza-lo para a lingua portugues... mas isso e assunto para outra hora,,,,

Fica ai entao minha dica! Espero que tenham gostado....
Abraços e ate a proxima!


Aqui voce pode baixar o fonte utilizado no artigo, caso nao consiga deixe um recado!