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!
Podemos tambem mudar todas as propriedades do dataChooser que quisermos, como estilo do calendario por exemplo, mas isso é outro assunto.
