Neste screencast eu faço uma introdução sobre o flexorm. Sua integração com o banco de dados SQLite em uma aplicaçõa AIR.

No exemplo é criada uma aplicação Mobile que utiliza o banco de dados nativo do AIR o SQLite.

Download do Código fonte.

Neste screencast, irei mostrar como implementar Skin Properties.

Confira, e qualquer comentário e sugestões serão bem vindas

Obs.: Veja em FullScreen.

Neste screencast utilizei o webservice do Google Product Search para montar uma lista de produtos com busca, thumbnail, fabricante, descrição e valor. Também uma segunda view com detalhes do produto selecionado e para finalizar um botão que leva ? página para a compra do produto. Uma aplicação relevante, com poucas linhas de código e nenhuma [...]

Como a maioria deve saber o significado de RIA é rich internet applications. Há muito tempo atrás, assistindo a um dos screencasts do? Vedovelli, ele falou que o flex é muito rico e que você pode melhorar a experiência dos usuários trabalhando os pequenos detalhes da aplicação. Coisas como limpar os campos e mudança de foco são primordiais para deixar suas aplicações mais intuitivas e fáceis de serem usadas.

Baseado nisso eu passei a prestar um pouco mais de atenção nesses detalhes e uma das coisas que veio ? cabeça foi os eventos de teclado. Claro eu não poderia de deixar de citar meu amigo? @brunoaraujo_id que foi o primeiro que eu vi a manipular esse tipo de evento e quem também me mostrou um exemplo no qual vou mostrar aqui.

Historinhas ? parte, vamos ao que interessa.

Nesse tutorial eu irei (tentarei) explicar como trabalhar com eventos de teclado e também como eles podem ser úteis na sua aplicação.

Primeiro vamos a um simples exemplo para que possamos observar um pouco melhor a classe KeyboardEvent.

Seu browser não suporta iframes.

No exemplo acima tem duas caixas de texto, quando você digita algo na primeira caixa de texto ele exibe na caixa de baixo as propriedades do evento. Nesse primeiro passo nós iremos observar apenas o? charCode e o? keyCode.

• charCode: é o código do caractere, ele obedece a tabela ASCII e você pode pegar o valor de cada caractere? aqui. Lembrando que cada caractere tem seu código, ou seja, o a minúsculo é diferente do A MAIÚCULO.
• keyCode: é o código numérico que corresponde ao valor da tecla no teclado. Ele pode variar conforme sistema operacional e dispositivo.

O mapeamento desses eventos é bem simples você deve apenas verificar qual a tecla pressionada e apartir dai executar alguma ação. Exemplo.

switch(event.keyCode) 

  //Quando o usuário apertar o esc
  case 27:
    //Executa alguma ação
  break;
  //Quando o usuário apertar o enter
  case 13:
    //Executa alguma ação
  break;

Bom, já sabemos qual evento iremos trabalhar e como pegar o código de uma tecla apertada, mas em que isso será útil? O próximo evento ilustra isso perfeitamente.

No exemplo acima eu estou mapeando os eventos do enter e do esc.

Quando o usuário está no state de login e pressiona enter ele verifica se o campo está vazio, se estiver mostrará uma mensagem de erro, caso contrário ele passará para o próximo state. Se o usuário pressionar esc o campo será limpo.

No state de senha ao pressionar esc ele também verifica se o campo está vazio, se estiver ele vai volta para o state de usuário, caso contrário ele irá limpar o campo. Se o usuário apertar enter ele irá dar uma alert avisando que naquele momento seria a hora de fazer o login.

Bom, mais explicações pelo código fonte, ele está bem simples de fácil compreensão.

Você pode também criar atalhos em seu aplicativo, pode por exemplo, fazer com que um ctrl+n deixe o texto em negrito.

Vamos a uma rápida passada sobre isso.

Volte para o primeiro exemplo e pressione ctrl + i.

O resultado do evento será:

[KeyboardEvent type="keyDown" bubbles=true cancelable=false eventPhase=3 charCode=105 keyCode=73 keyLocation=0 ctrlKey=true altKey=false shiftKey=false]

Notem que agora o ctrlKey tem o valor true. Usando no seu código você verifica se ele é true e depois verifica o código da tecla para criar as combinações de atalhos. Agora é só usar a criatividade.

Espero que essas informações tenham sido úteis para vocês.

Abraço e até a próxima.

O Flex 4 e sua IDE, rebatizada para Flash Builder mudou bastante (e para melhor) a forma de desenvolver aplicações em ricas. Agora o Flash Builder 4.5 muda mais ainda e ao meu ver, é a atualização mais significativa desde o lançamento do Flex Framework, lá em 2004. As novidades mais marcantes nesta versão: Possibilidade [...]

Essa semana estou no desafio de construir uma app mobile usando Flex.

Algo bem simples até então, já que estou usando uma versão da prerelease do Flash Builder 4.5 for PHP.

O mais legal é simplicidade de conectar ao servidor, utilizando as mesmas classes de serviço do Zend usadas na app existente rodando hoje na web (Flex + PHP usando Zend Framework).

Muita gente já me adianta falando: “Vai funcionar só no Android né, já que o iPhone e iPad não tem Flash!”.

Maior engano destes ou de você que já pensou o mesmo.

Agora podemos compilar um arquivo APK para plataforma Android e um arquivo IPA para plataforma iOS. Fora as duas grandes plataformas ainda posso gerar para o BlackBerry PlayBook.

Assistam e confiram abaixo a breve experiência:

Neste screencast, falarei um pouco sobre o Spark Form, componente disponível no Flex 4.5 que está previsto ficar disponível ao publico no início do próximo mês.

Você vai ver como podemos criar formulários mais elegantes usando o novo componente da arquitetura Spark.

Twitter!

Abaixo segue um Overview do lançamento Adobe Flash Catalyst CS5.5

Não mudou muita coisa desde o Panini, mas existe um detalhe importante que você confere no Screencast.
.

.

Twitter!

Nova série de screencasts, por hora estou liberando apenas 1, mas serão 6 por post, semana que vem tem mais e esse post será atualizado com imagens e detalhes.

.

AULA 19

Nessa aula eu mostro como criar um novo smartObject a partir de um existente sem que este fique vinculado.
.

.
_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Twitter!

Olá pessoal,
Nesse screencast começaremos a desenvolver uma vitrine virtual.
O interessante dessas aulas é que além de aprender sobre o Balsamiq, você terá uma simulação de todas as etapas pela qual a mente do Arquiteto de Informação durante o processo de construção dos wireframes.

Agora vamos começar…