sexta-feira, 28 de dezembro de 2007

Arrastar Panel em Flex

Aqui vai um exemplo de como fazer um componente Panel com drag and drop usando MouseEvent e usando PopUpManager.
Para iniciarmos vamos fazer uma janela usando MouseEvent, para isso temos que criar uma classe actionscript File -> New -> ActionScript Class, coloquei o nome da minha classe de PanelDrag e package comp.



Para fazermos a janela drag and drop com PopUpManager não há a necessidade extender a classe Panel como no exemplo acima.



e agora no mxml principal vamos por um evento em dois botões para utiliza-los na nossa aplicação



e ae está nossa janela com drag and drop de duas formas de fazer, espero que tenha sido útil.
Abraços

código fonte: http://andborges.byethost13.com/exemplo/janela.rar

terça-feira, 25 de dezembro de 2007

Sistema de login em flex

Neste meu segundo post vou criar um sistema básico de login em flex.

No meu projeto criei no meu mxml principal dois states um de nome index e outro de nome login, no state login devemos aplicar o Set as start state para que o state login seja o primeiro a ser iniciado



agora no state login vamos criar nossa tela de login



Como podem ver é uma tela simples com usuário, senha e um botão entrar, neste nosso exemplo vamos apenas verificar se o usuário e senha estão corretos e faremos a transição de states, para isso criaremos um método de nome entrar que deverar ser adicionado no atributo click do botão entrar, click="entrar();".



no nosso método verificamos se os dados estão corretos, se estivem mudamos de state com comando this.currentState = "index" e no state index terá um label que mostrará um Olá login



se os dados estivem errados, mostramos uma mensagem de erro e apagamos a senha digitada.

Esse foi um sistema simples para entendermos como funciona um sistema de login, há vários modos de se fazer a transição de telas, preferi usar states por ser mais prático e de fácil entendimento, na autenticação dos dados o mais correto é fazer uma persistência de dados em um banco de dados utilizando uma linguagem server-side, para entender como funcionar flex com php só ver o post iniciando flex com php e também a vários tutorias na internet que abordam o mesmo assunto.

Abraços

código fonte: http://andborges.byethost13.com/exemplo/login.rar

segunda-feira, 24 de dezembro de 2007

Iniciando flex com php usando amfphp

Ao iniciar meus estudos em flex logo senti a necessidade de utilizar um banco de dados, então irei fazer o meu primeiro post com um exemplo de como acessar um banco de dados com flex e php utilizando amfphp, o banco utilizando será o mysql.

Antes de mais nada vamos criar o nosso banco.

CREATE DATABASE `exemplo` ;

Agora criaremos nossa tabela.

CREATE TABLE `amigos` (
`id` INT( 10 ) UNSIGNED NOT NULL AUTO_INCREMENT ,
`nome` VARCHAR( 254 ) NOT NULL ,
PRIMARY KEY ( `id` )
);


Iremos baixar o amfphp no site http://amfphp.org que está na versão 1.9, agora iremos ao flex e criaremos um novo projeto File - New - Flex Project.
Coloquei nome do projeto de amigos, agora com nosso mxml principal criado vamos jogar o amfphp na pasta raiz do nosso projeto.
Após copiar o amfphp temos que configurar o arquivo services_config.xml, mais antes vamos copiar o arquivo services_config.xml que se encontra dentro de amfphp/browser/ para a pasta principal do projeto flex, agora temos que setar o gateway que fica na tag no atributo uri dentro do arquivo services_config.xml, para saber a url do gateway so abrir o seu browser e ir até o arquivo gateway.php dentro do amfphp, ele lhe mostrar uma mensagem:
amfphp and this gateway are installed correctly. You may now connect to this gateway from Flash.
É so copiar a url do browser colocar no atributo uri no arquivo services_config.xml.



Agora no seu flex clicando com o botão direito do mouse em cima da pasta principal do seu projeto vai aparecer um menu e nele vai ter item properties, ao seleciona-lo irar aparecer uma tela de configuração, ao clicar em flex compiler lhe aparecerá um campo additional compiler argumenst, por padrão ja vai estar preenchido com "-locale en_US" vamos adicionar '-services "services-config.xml"', pronto nosso amfphp está configurado.

Vamos para aplicação agora..

No nosso mxml principal vamos arrastar o componente List e o componente TextInput, o componente list vamos por o id dele de "lista", terá um textinput de id "nome" e outro de "id_amigo".



A comunicação do flex com o amfphp é feito atravéz da classe RemoteObject.



fizemos uma instância da classe no mxml com a tag e configuramos seus atributos

Em destination colocamos amfphp porque é o mesmo que se encontra no nosso arquivo services_config.xml, pode ser mudado se quiser, Source é a classe php que vamos utilizar amigos-> pasta do projeto amfphp amigo-> classe php, ShowBusyCurso ativa o reloginho no curso do mouse e id para identificação do objeto.

Dentro da tag RemoteObject vamos configurar o método da classe amigo que vamos usar

< name="listarAmigos" result="listarMyAmigos(event)">

Name é o nome do método da classe php que vamos usar, o nome tem que ser o mesmo que estiver na classe.

Result é retorno do método, ele recebe um método que deverá ter um atributo de tipo ResultEvent.

Vamos criar agora o listarMyAmigos



Criamos uma variável Bindable do tipo array para que quando ela seja atualizada todo os objetos que a estiverem usando-a sejam atualizados também e dentro do método preenchemos o array com o resultado vindo do amfphp.

Vamos criar um método para iniciar a requisição ao amfphp.



dbAmigos é id do nosso RemoteObject, listarAmigos é o nome do método e send a ação.

Agora vamos configurar o List e os Textinputs

< x="10" y="44" height="288" width="270" dataprovider="{this.myAmigos}" labelfield="nome" id="lista">

< x="321" y="67" width="274" id="nome" text="{lista.selectedItem.nome}">
< x="344" y="112" width="54" id="amigo_id" text="{lista.selectedItem.id}">


No nosso List no atributo dataProvider passamos como parâmetro a variável myAmigos que contém os dados vindo do amfphp e no atributo labelField dizemos qual dado deve ser mostrado no nosso componente List.
Nos TextInputs passamos como valor no parâmetro text nossa lista com o item selecionado e o valor a ser mostrado = lista.selectedItem.nome

para finalizar o nosso mxml na tag principal da nossa aplicação vamos chamar o método carregarMyAmigos, para que o nosso List seja carregado com os dados vindo do amfphp

< application="http://www.adobe.com/2006/mxml" layout="absolute" creationcomplete="{carregarMyAmigos()}" width="602">

e por último vamos partir para o php.

Dentro do amfphp contém uma pasta service que é onde vai ficar todas suas classes php, então dentro da pasta service vamos criar uma pasta chamada amigos e uma classe php chamado amigo, exatamente como definimos anteriormente no RemoteObject.


< ?php
class Amigo
{
private $db;
function Amigo()
{
$this->db = mysql_pconnect("localhost","root","123456");
mysql_select_db("exemplo",$this->db);
}
function listarAmigos()
{
$query = "SELECT * FROM amigos a ORDER BY nome";

$resultado = mysql_query($query,$this->db);

$retorno['amigos']="";
$i=0;
while ($linha = mysql_fetch_array($resultado))
{
$id=$linha['id'];
$nome=$linha['nome'];
$retorno['amigos'][$i]['id']=$id;
$retorno['amigos'][$i]['nome']=$nome;
$i++;
}
return $retorno;
}
}
?>


Se você quiser testar sua classe php so ir em na pasta browser do seu amfphp
http://localhost/flex/amigos/amfphp/browser/

Pronto galera esse foi meu primeiro post, demorou um pouco, mais pra mim foi super gratificante.
Vou deixar disponível o código fonte e qualquer dúvida os comentários estão ae para isso.. abraços

http://andborges.byethost13.com/exemplo/amigos.rar

domingo, 23 de dezembro de 2007

Começando 2008

Para aqueles que estiverem lendo esse post antes do Natal e do Ano novo deixo meus votos de felicidades e que 2008 seja um ano próspero para todos.

Já antes de se iniciar 2008 tive um desejo de criar um blog e atravéz dele passar minhas experiências e meus estudos diários, meu foco será mais em php, flex e flash, como meus estudos com flex se iniciou a pouco tempo espero poder crescer junto com vocês e assim trocarmos conhecimento, sei que ja existe vários blogs e sites focados no mesmo assunto e vários deles são também minha fonte de estudos e meu help.

Já deixo meus agradecimentos a todos que participaram e contribuiram na minha jornada, a Igor Costa um
amigo que me inseriu na programação actionscript e a João Gilberto a quem devo a minha devoção a php.

Acho que falei tudo que tinha que falar, então mãos à obra e vamos ao que interessa e até o próximo post... abraços a todos