DESENVOLVIMENTO DE APLICAO WEB

LUCIANO SOLER EVERSON MATIAS DE MORAES

SumrioApresentao ................................................................................................................................. 4 UNIDADE 1: INTRODUO A PROGRAMAO WEB ..................................................................... 6 Seo 1: Estrutra Flex ................................................................................................................ 7 Estrutura da ferramenta ........................................................................................................ 7 Seo 2: Princpios bsicos da programao em Flex ............................................................. 19 Trabalhando com MXML e Action Script 3 .......................................................................... 20 APROFUNDANDO O CONHECIMENTO..................................................................................... 30 PARA CONCLUIR O ESTUDO DA UNIDADE ............................................................................... 31 RESUMO .................................................................................................................................. 31 ATIVIDADES DE APRENDIZAGEM ............................................................................................. 31 UNIDADE 2: EFEITOS E FUNCIONALIDADES BSICAS .................................................................. 33 INTRODUO AO ESTUDO....................................................................................................... 33 Seo 1: Conhecendo as Interfaces dinmicas........................................................................ 33 States ................................................................................................................................... 33 Efeitos Visuais ...................................................................................................................... 37 CSS ....................................................................................................................................... 40 Estudo de Caso .................................................................................................................... 41 Seo 2: Formulrios Interativos ............................................................................................. 52 Formulrios .......................................................................................................................... 52 Validando Dados .................................................................................................................. 56 Aprofundando o Conhecimento .............................................................................................. 60 QUESTES PARA REFLEXO .................................................................................................... 61 PARA CONCLUIR O ESTUDO DA UNIDADE ............................................................................... 61

RESUMO .................................................................................................................................. 61 Exerccios de Aprendizagem .................................................................................................... 61 UNIDADE 3 PROJETO WEB ........................................................................................................... 63 INTRODUO AO ESTUDO....................................................................................................... 63 Seo 1: Entendendo a estrutura fsica e demais ferramentas de apoio................................ 64 Estrutura de Projeto Web.................................................................................................... 64 Trabalhando com WampServer ........................................................................................... 65 SEO 2: Princpios bsicos da programao PHP .................................................................. 74 Entendendo a Linguagem PHP ............................................................................................ 74 Marcadores.......................................................................................................................... 75 Funes PHP ........................................................................................................................ 76 Aprofundando o Conhecimento .............................................................................................. 84 PARA CONCLUIR O ESTUDO DA UNIDADE ............................................................................... 85 RESUMO .................................................................................................................................. 85 Atividades de aprendizagem: .................................................................................................. 85 UNIDADE 4 INTEGRAO FLEX E PHP.......................................................................................... 87 Introduo ao estudo .............................................................................................................. 87 Seo 1: Conceitos bsicos de Integrao ............................................................................... 88 AMFPHP ............................................................................................................................... 88 SEO 2: Princpios bsicos da programao SQL .................................................................. 99 MySql ................................................................................................................................... 99 Aprofundando o conhecimento ............................................................................................ 101 PARA CONCLUIR O ESTUDO DA UNIDADE ............................................................................. 102 RESUMO ................................................................................................................................ 102 Atividades de aprendizagem: ................................................................................................ 102 UNIDADE 5 - INTEGRAO FLEX, PHP E MYSQL ....................................................................... 104 INTRODUO AO ESTUDO..................................................................................................... 104

Seo 1: Trabalhando com incluso de dados no banco....................................................... 104 Sistema CABA (Cadastrar, Apagar, Buscar, Atualizar) ....................................................... 104 Seo 2: Trabalhando e testando as informaes do banco de dados ................................. 114 Aprofundando o Conhecimento ............................................................................................ 128 PARA CONCLUIR O ESTUDO DA UNIDADE ............................................................................. 129 RESUMO ................................................................................................................................ 129 Atividades de Aprendizagem ................................................................................................. 129 REFERNCIAS ............................................................................................................................. 131

ApresentaoCom a evoluo da tecnologia o aparecimento da Internet muitos de ns cada vez mais estamos nos informatizando entrando na era digital onde com um simples clique podemos acessar as mais diversas informaes contidas ao redor do mundo com uma facilidade jamais vista anteriormente. Acredito que voc j deve ter pensado, como ser que tudo isso funciona? Como voc deve ter percebido a Internet um mundo sem fronteiras e barreiras onde a informao flui livremente, e para encontr-la, basta voc saber o endereo. Voc tambm j deve ter ouvido falar de pessoas que ganham milhes com a Internet, e deve ter se perguntado, mas como isso acontece? Muitas dessas pessoas criaram servios que supriram necessidades de um certo nmero de pessoas. Quanto melhor o servio ofertado e maior o volume de usurios utilizando o sistema, maiores tambm as chances de se obter grandes lucros com a web. A oferta de produtos e servios utilizando esta tecnologia tem crescido rapidamente por vrios motivos, entre eles esto a grande interao, facilidade de pesquisa, comparao de preos e caractersticas entre produtos, alm de outros recursos que estes sistemas disponibilizam. Mas voc pode se perguntar, o que mais est faltando? Um sistema assim como todo produto alm de ser coeso (fazer o que promete fazer) deve ser rpido, seguro e visualmente agradvel. Para construir sistemas para internet desta forma vrias linguagens e ferramentas surgiram, facilitando o desenvolvimento, segura. No decorrer deste livro, voc ir encontrar conceitos importantes sobre desenvolvimento de aplicaes para internet. Sero apresentadas duas ferramentas extremamente poderosas para programao de sistemas para internet: 1) A ferramenta Adobe Flex Builder, uma das mais geis ferramentas para desenvolvimento de aplicaes ricas para internet, nela, trabalharemos e focaremos a parte visual de nosso estudo; o Flex, como assim o chamaremos, trabalha com duas linguagens de programao que sero apresentadas no decorrer do livro. 2) A segunda ferramenta apresentada utilizada na construo de sites desde acesso a banco de dados at em sua visualizao, porm em nosso estudo estaremos cada uma com uma particularidade diferente, porm todas com o mesmo ideal, tornar a internet mais interativa, gil e

trabalhando com ela apenas o backend (codificao que interage diretamente com banco de dados) de nossa aplicao. Esta segunda ferramenta chama-se PHP (acrnimo pr-processador de hipertexto), poderosa ferramenta que foi projetada especificamente para desenvolvimento web. Muito antes do termo RIA (Rich Internet Applications) a Adobe estudava formas de aperfeioar a experincia dos usurios com a web, fornecendo aplicativos mais interativos e expressivos. Desde ento esta tecnologia foi amplamente adotada e comprovou-se capaz de gerar um retorno sobre o investimento para as empresas que os implantavam. Boa leitura!

UNIDADE 1: INTRODUO A PROGRAMAO WEBSeo 1: Estrutra Flex Nesta seo ser apresentada a forma de preparao do ambiente para a programao na linguagem Flex, apresentando diferentes ambientes para compilao de cdigos.

Seo 2: Princpios bsicos da programao em Flex Esta seo apresentar os conceitos bsicos da linguagem, suas estruturas de controle e repetio, formas de criao de objetos, mtodos e chamada de funes simples.

Objetivos de Aprendizagem: Nesta primeira unidade voc ir encontrar os princpios bsicos da programao web utilizando uma poderosa ferramenta de desenvolvimento de aplicaes ricas para internet. Sero mostrados vrios detalhes que envolvem a ferramenta abordando desde a instalao at a estrutura da linguagem ActionScript 3 onde tambm ser visto exemplos prticos facilitando o entendimento dos componentes aqui mostrados.

INTRODUO AO ESTUDO

Como voc v a interenet? O que vem a sua cabea quando voc ouve a frase um site da internet? O site que voc imagina se tem uma interao ou somente uma informao? Antes de comearmos a estudar o desenvolvimento de aplicaes ricas para internet RIA (rich internet applications) devemos primeiro entender o que so. Aplicaes ricas procura buscar as caractersticas visuais e de desempenho que temos em nossos programas desktop para a internet. Existem muitas vantagens em se programar utilizando ferramentas voltadas para este tipo de aplicao, dentre estas vantagens esto a velocidade e facilidade de desenvolvimento, uma vez que as ferramentas utilizadas disponibilizam vrios

recursos pr-programados que podemos utilizar sem ter que escrever tudo do zero como acontece quando utilizamos HTML e JavaScript para produzir os mesmos efeitos.

Seo 1: Estrutra Flex

Estrutura da ferramenta Para entender melhor um pouco como a ferramenta funciona:

Arq. apoio .as .mxml compilar

html

+

Nossa aplicao feita em Flex trabalhar com arquivos de marcao mxml cujo objetivo dispor de forma rpida e fcil a criao de objetos em tela. Os arquivos .as (Action Script 3) so utilizados para inserirmos nossas funes que controlaro eventos, validaes de tela, comunicao da ferramenta com outros servios e linguagens. E os arquivos de apoio so arquivos de imagens, sons, animaes entre outros, que faro parte do pacote da aplicao. Com tudo isso ao compilar seu cdigo, a ferramenta gera um arquivo .swf semelhante ao .class do Java onde conseguiremos depois inserir em um site nossa aplicao sem grandes dificuldades.

Instalando o Adobe Flex Builder 3

A instalao da ferramenta extremamente simples. A Adobe disponibiliza em seu site a ferramenta Adobe Flex Builder 3 gratuitamente. Para isso basta:

1) ir em seu site . 2) Criar uma conta, caso j tenha ir logar no site e ir em downloads.

3) Preencha todos os campos com seus dados que tenha um * vermelho na frente

4) Aps o preenchimento de todos os campos com * vermelho na frente, informando seus dados, clique em no final da pgina

5) Selecione a verso desejada e clique em download

Instalando Flex SDK

Outra forma de compilar os arquivos mxml e as (Action Script) atravs da SDK, disponvel no site da Adobe gratuitamente. Utilizando o SDK podemos obter resultados iguais aos da ferramenta, a diferena que teremos que compilar nossa aplicao utilizando linha de comando e a edio dos nossos arquivos poder ser feita por um editor de texto comum. 1) Para isso precisamos acessar o site da SDK basta selecionar download e seremos levados a outro site onde o download comear imediatamente.

2) Aps o download ser concludo devemos extrair o arquivo .ZIP para uma pasta em deu disco, como por exemplo c:\flexSdk3. Apesar do SDK no ter instalador o mesmo precisa estar no PATH do Windows para que funcione corretamente. Voc deve incluir no PATH a pasta Bin de onde instalou o SDK. Exemplo se voc instalou o SDK na pasta c:\flexSdk3 ento deve incluir no PATH o seguinte caminho c:\flexSdk3\bin.

3) Aps a configurao acima descrita poderemos testar se a configurao acima est correta. Para isso voc deve abrir o prompt de comando e digitar mxmlc, nenhuma mensagem de erro dever aparecer. Porm como sabemos a SDK do Flex feita encima da plataforma Java, ento pode vir a aparecer um erro do tipo could not find JRE, este erro gerado pois no conseguiu encontrar instalada a mquina virtual Java, ento voc deve baixar e instalar a JRE ou a JDK mais recente atravs do site da fabricante SUN .

SAIBA MAIS Prompt de Comando muito utilizando nas verses antigas do Sistema Operacional Windows, ainda utilizado atualmente para execuo direta de comandos via linha de comando. A Microsoft disponibiliza em seu site uma lista das principais funes do cmd no endereo abaixo citado:

4) Para se compilar um cdigo mxml e gerar um swf devemos acessar novamente o prompt de comando e digitar mxmlc meuPrograma.mxml ser gerado o arquivo swf na mesma

Cdigo de meuPrograma.mxml 5) Se tudo foi executado corretamente o resultado ser uma tela igual a tela abaixo mostrada.

6) Experimente digitar seu nome e clicar ok. Veja o resultado. Podemos comear mostrando as principais partes da ferramenta. Logo ao iniciarmos a aplicao encontramos a seguinte tela:

Nesta tela podemos encontrar algumas informaes importantes para quem no conhece muito bem a ferramenta. Dentre essas informaes podemos ver que so oferecidos vrios tutoriais sobre como trabalhar com Flex, alguns destes tutoriais so em forma de vdeo onde so demonstrados na ntegra como acessar e criar determinado tipos de projetos na ferramenta. Para conhecermos mais sobre o ambiente que estaremos trabalhando necessrio criar um novo projeto. Para isso devemos acessar o menu file new Flex Project. Em Project Name defina um nome para sua aplicao. Ex: novoProjeto. Aps isso clique em finish.

Quando criamos um novo projeto podemos observar que a aplicao gerou alguns cdigos auxiliares automaticamente. Esse cdigos auxiliam na execuo do projeto; sem eles a vida de um iniciante em Flex seria bem mais rdua. Podemos tambm observar que nossa tela inicial est dividida em vrias partes:

a) Barra de menu da aplicao: utilizada para criar, salvar e compilar seus projetos. Esta barra possui inmeras funcionalidades, foram citadas apenas algumas.

b) Navegao: onde listado a estrutura de arquivos e diretrios de seu projeto

c) Modo Source: neste local mostrado todo o cdigo de sua aplicao

d) Modo Design: apresenta uma prvia da tela, neste modo possvel arrastar e soltar componentes facilitando a modelagem visual de seu sistema. Na parte superior podemos observar o boto source que serve para alternarmos o modo de visualizao.

PARA SABER MAIS Tudo que montado no modo design gera um cdigo que pode ser visto ao clicar no modo source.

e) Outline: aqui fica montada toda a estrutura do seu projeto.

f) Problems: Exibe os erros detectados ao compilar o cdigo.

g) Components: local onde se encontra os componentes mais utilizados para montagem e estruturao de telas como: botes, painis, listas, barras de navegao, etc. possvel criar telas somente arrastando e soltando componentes desta rea para o modo design.

h) States: aqui so mostrados os vrios estados/pginas de nossa aplicao. Atravs destes estados possvel a criao de animaes de transio, melhorando a apresentao visual de nosso sistema.

i) Flex Properties: Local onde podemos configurar as propriedades de componentes de tela, dentre eles: cores, efeitos, tipos de letra, alinhamento, etc. Acaba sendo opcional, pois tem aqueles que preferem configurar diretamente no Modo Source.

Podemos testar a aplicao atravs do cdigo meuPrograma.mxml apresentado no incio do captulo anterior. Para isso basta digitar o cdigo no modo source e selecionar Run na barra de menu.

Seo 2: Princpios bsicos da programao em Flex

Trabalhando com MXML e Action Script 3 MXML

MXML uma linguagem de marcao de texto muito parecida com XML comum que voc j deve estar cansado de ouvir falar. Iremos utilizar o MXML na insero de componentes visuais em nosso aplicativo. Para entendermos melhor como o esta linguagem trabalha iremos criar um novo projeto Flex. Ao criar este projeto e irmos para tela de Source observaremos o seguinte cdigo:

Voltemos agora para a tela Design. Vamos arrastar um componente Button para dentro da tela de Design. Teremos algo como:

Ao clicarmos no Source novamente iremos ver que nosso cdigo mudou

Podemos observar que uma tag Button surgiu. Esta tag foi criada automaticamente quando arrastamos o boto da barra de componentes para dentro do design. O x e y com um os nmeros na frente trazem o posicionamento x e y do boto. O label com

um nome escrito entre aspas a palavra escrita dentro do boto. Experimente colocar seu nome no lugar para ver o que acontece. Vamos inserir mais trs botes e colocar seus nomes de Primeiro, Segundo, Terceiro, Quarto.

PARA SABER MAIS Ao inserir mais componentes observamos que aparecem algumas linhas azul claro alinhando os botes, elas servem somente como sugesto para de alinhamento, facilitando assim ajustes de tela

Existem vrias formas de alterar o nome de um boto, podemos utilizar o source, podemos estar em design e clicar 2x no boto que o mesmo ficar editvel, podemos tambm clicar 1x encima do boto e alterar seu label em Flex Properties conforme a figura abaixo.

Aps a criao teremos

Suponhamos que queremos que algo acontea quando clicarmos em um dos botes, como fazer isso? Como havia sido dito anteriormente o Flex trabalha com o MXML e com o Action Script para executar funes em nossa aplicao. Precisaremos entender um pouco mais sobre esta poderosa ferramenta para podermos prosseguir.

Action Script 3

At o momento inserimos componentes em nossa aplicao, porm nada aconteceu. Como fazer ento para as coisas acontecerem?.

Como ir notar, Action Script 3 muito semelhante a linguagens como Java; segue tambm conceitos de orientao a objetos como ela.

SAIBA MAIS Para saber mais sobre orientao a objetos e aplicaes bsicas acesse:

O principio bsico do Action Script executar um determinado cdigo que chamado atravs de um nome de funo. Ex:public function mostrarMensagem():void{ //aqui entra o cdigo a executar }

Vamos entender um pouco mais o que tudo isso. - public o nvel de acesso que nossa funo ter. Assim como em Java o acesso pblico abre um leque para que essa funo seja vista em qualquer parte de nossa aplicao. - function indica que estamos tratando de uma funo - mostrarMensagem( ) o nome de nossa funo - void o tipo de retorno que teremos. No Flex como tambm no PHP e outras linguagens as funes podem retornar resultados em tipos diferentes. Os tipos aqui retornados so bem parecidos com os tipos em Java. - { e } no podemos esquecer das chaves, que indicam o escopo de sua funo.

PARA SABER MAIS Dizer escopo de uma funo a mesma coisa que dizer at onde a funo se extende.

Para inserirmos cdigos Action Script 3 podemos assim faz-lo de duas maneiras. A primeira inserindo o cdigo junto com o MXML conforme imagem abaixo.

Outra maneira de trabalharmos criando um arquivo separadamente do mxml com a extenso .as e importarmos as funes para dentro de nosso arquivos.

Onde todo o contedo da tag CDATA inserido em um arquivo separadamente que em nosso exemplo chamamos de novoAction.as Crie um arquivo chamado novoAction.as, escreva a funo mostrarMensagem, insira o cdigo da funo descrita anteriormente em seu arquivo e importe o arquivo utilizando a propriedade source do Script. Voc deve estar se perguntando, fiz tudo isso mas ao clicar nos botes em tela nada aconteceu ainda. Para que a funo mostrarMensagem( ) seja executada devemos associ-la a um boto, mas quando e como essa funo ser executada? Ela deve ser executada quando algum clicar no boto que a possui. Para isso devemos inseri-la na propriedade click do boto em questo. A partir de agora nossa interface ganha vida, podemos associar botes a funes e executarmos as mais diversas tarefas em nosso programa. Analisando o cdigo Action que criamos, vimos que existe uma linha Esta linha faz a importao da classe Alert do pacoto mx.controls. Sem esta linha ao executarmos o cdigo Alert.show(ol); iramos ter um erro, pois o Flex por si s no carrega todas as classes necessrias quando compila seus arquivos. Esta uma medida para reduo to tamanho final dos arquivos compilados. Funciona da mesma forma com Java.

Vimos at agora como fazer uma funo mostrar uma mensagem na tela, mas se quisermos que esta mensagem no seja fixa? Vamos criar um novo componente TextInput em nossa tela e capturar suas informaes atravs da propriedade click de um boto.

Para fazer isso temos que primeiramente identificar nosso campo texto para podermos capturar a informao nele contida. Pois no existe como se mostrar algo que no se conhece. A identificao do campo se d atravs da propriedade id de nosso TextInput. Quase que a totalidade de todos os elementos que iremos utilizar em nosso mxml possui esta propriedade. Ela serve para podermos identificas os objetos de nosso programa. Ex: posso ter 10 campos em meu programa, cada um com uma funcionalidade, ex: para nome, endereo, telefone, idade, CPF, etc. Mas como vou saber qual qual? Com o id eu consigo distinguir um do outro, como se fosse o CPF do objeto, cada um tem o seu.

A funo capturarTexto( ) acessa a propriedade text do TextInput identificado no cdigo como campoTexto.

Declarando Variveis

Podemos perceber que atribuir nomes a componentes de um sistema em mxml algo trivial. Agora quanto queremos identificar elementos em Action Script 3 teremos que trabalhar como trabalhamos em outras linguagens, utilizando variveis que armazenam valores do tipo que lhe foi identificado. Os tipos que mais utilizaremos so:Tipo int Descrio valor inteiro entre -2147483648 a 2147483647 valor inteiro sem sinal, entre 0 a 4294967295 valor numerio que pode conter frao Exemplo var idade:int = 10 Valor Padro 0

uint Number

var peso:uint = 12 var saldoConta:Number = 2.76 var portaAberta:Boolean = true var nome:String = "Maria" function respirar():void{ }

0 NaN ("Not a Number") false Null Undefined

Boolean verdadeiro ou falso (true/false) String void texto valor utilizado em funes. Indica que no existe retorno para a funo

Operadores

Para podermos trabalhar com nossas variveis necessitamos de algo para relacionlas. Os operadores so smbolos que podem ser utilizados para manipular valores e variveis realizando operaes entre eles. Os tipos utilizados no Action Script 3 so:Operador Descrio + ++ -* / % == != >, < >=, b a>=b

menor ou igual

Incremento, recebe o += que a varivel tem mais o que vem a frente && || ^ AND OR XOR a&&b a||b a^b c+=b

Estruturas de Controle

As estruturas de controle de uma linguagem de programao permitem controlar o fluxo de execuo de nossos programas. Vamos trabalhar com as estruturas condicionais (deciso) e com as estruturas de repetio (loop).Estruturas Condicionais

IF A instruo IF utilizada para tomada de deciso. Sua sintaxe :

Para testar nosso cdigo crie um boto em sua tela chamado Testa IF, este boto dever chamar a funo abaixo.

Voc ainda pode alterar os valores das variveis para ver as possveis respostas que o programa ir gerar. SWITCH A instruo switch utilizamos para testar vrias condies evitando o uso repetitivo de else if, evitando a poluio no cdigo.

Vamos testar o switch criando uma funo que recebe um parmetro e verifica qual o valor deste, dependendo do valor gera um determinado resultado. Para testar a funo crie um boto TestaSwitch que recebe na chamada click a funo, conforme visto anteriormente.

importante lembrar que o cdigo do boto gerado para este mtodo deve receber o mtodo com o parmetro.

Estruturas de Repetio

WHILE A estrutura de repetio while assim como a estrutura if tambm trabalha com uma condio a diferena entre as duas que se a condio for verdadeira para o if ele executa o bloco uma vez e no while ele executa o bloco enquanto a condio for verdadeira.

O cdigo fica executando at que a condio seja falsa.

Se for criado um boto para chamar o mtodo seu cdigo ficar assim: DO..WHILE Com a diferena de ser executado ao menos uma vez o a estrutura do..while possui as mesmas caractersticas que o while. Sua estrutura :

Para testarmos criaremos a funo testaDoWhile.

A diferena entre esta funo e a anterior que se o valor passado a ela for maior ou igual a 5 o while no executa nada porm a do..while executa uma vez. Faa o teste. FOR A estrutura de repetio for funciona repetindo comandos inmeras vezes porm com um limite j pr-definido. Sua sintaxe :

Onde temos varivel com valor inicial, condio onde essa varivel ser verificada n vezes e atualizao onde temos os termos de contagem.

No esquecendo de criar o cdigo do boto tambm. FOR..IN utilizado para iterao com propriedades de um objeto e tambm com arrays. Muito utilizado quando no sabemos o nmero de objetos que iremos iteragir.

Onde temos Lista como o conjunto de objetos do mesmo tipo ou array.

Experimente colocar dentro do Alert somente o elementoArray e veja o resultado. FOR..EACH..IN Este tipo de iterao usado quando queremos trabalhar com objetos e listas XML.

APROFUNDANDO O CONHECIMENTOPara se aprofundar o conhecimento em desenvolvimento de aplicaes ricas para internet importante a leitura dos tpicos 1.11 e 1.12 do livro Ajax, Rich Internet Applications onde ser tem uma viso geral sobre desenvolvimento de software e RIA. Inserir Livro: Ajax, Rich Internet Applications / Autor: Deitel pginas 21 a 25 Contedo: tpicos 1.11 e 1.12 1.11 - Desenvolvimento de software 1.12 - Rich Internet Applications Concluindo-se a leitura podemos perceber que existe inmeras ferramentas para desenvolvimento de aplicaes para internet, e o mais importante de tudo saber qual dessas ferramentas oferecidas melhor se encaixar nas necessidades de sua empresa e mercado.

QUESTES PARA REFLEXO

Comparando com outras linguagens de programao como Java, voc conseguiu notar a diferena entre elas? Foi possvel notar agilidade de desenvolvimento que o Flex possui sobre outras linguagens?

PARA CONCLUIR O ESTUDO DA UNIDADEComeamos a estudar os conceitos da forma de desenvolvimento utilizando ActionScript e mxml e j podemos perceber que a ferramenta disponibiliza vrios recursos interessantes, recursos que s conseguiramos fazer em outra linguagem se utilizssemos grande volume de cdigo para possuirmos os mesmos efeitos que conseguimos em poucas linhas na ferramenta anteriormente mostrada Nos prximos captulos iremos estudar formas de agregar este conhecimento adquirido em nossos programas. Com isso poderemos focar mais nossos exemplos em resoluo de problemas cotidianos. Para avaliar os conhecimentos por voc adquiridos sugiro que resolva os problemas abaixo propostos.

RESUMONesta unidade 1 vimos conceitos introdutrios da ferramenta Adobe Flex 3 muito utilizada atualmente para desenvolvimento web. Foi possvel conhecer sua estrutura em uma abordagem geral, conhecendo seus componentes, forma de funcionamento, tipos de arquivos gerados e conceitos bsicos de programao. Conseguimos executar chamadas de mtodos de forma simples rpida e prtica, sem nos preocuparmos diretamente com a esttica do produto por ser somente testes.

ATIVIDADES DE APRENDIZAGEM1) Desenvolva um programa para mostrar a lista de mercado contida em um arquivo XML. 2) Crie um programa para dar boas vindas para um nome escrito em um campo TextInput 3) Crie um aplicativo que junte duas entradas de texto TextInput1 e TextInput2 gerando um nome completo no final.

4) Explique as vantagens de separar o cdigo ActionScript do cdigo MXML 5) Crie 5 botes em tela, coloque em todos o mesmo id, verifique o que ocorreu. Aconteceria se fizssemos a mesma coisa nos mtodos? Posso referenciar um mtodo mais de uma vez?

UNIDADE 2: EFEITOS E FUNCIONALIDADES BSICASSeo 1: Conhecendo as Interfaces dinmicas Nesta seo iremos aprofundar nossos conhecimentos sobre modelos visuais do Flex, formas de interao com criao de efeitos de animao. Seo 2: Formulrios Interativos Esta seo apresentar os conceitos de criao de formulrios, formas de interao com o usurio utilizando validaes especficas.

Objetivos

de

Aprendizagem:

Nesta

unidade

iremos

aprofundar

nossos

conhecimentos na ferramenta onde trabalharemos com modelos visuais, suas formas de interao como incluso de efeitos visuais de movimentao, transio, esmaecimento, rotaes, zoom, etc. Ser apresentado tambm algumas caractersticas bsicas para criao de formulrios, formas de interao com usurio atravs validaes de dados em sua aplicao.

INTRODUO AO ESTUDOVimos que o Flex por sua simplicidade pode ser de fcil aprendizado e alta produtividade, mas como fazer para criarmos aplicativos cada vez mais atraentes para nossos clientes? A resposta desta questo depende de muitos fatores, dentre eles esto a alta coeso e a bela aparncia. Todos ns sabemos que um produto mais bonito e coeso muito mais vendvel que um outro qualquer do mercado. Iremos aprender nesta unidade como deixar nossos aplicativos mais atraentes comercialmente incluindo neles uma srie de funes e efeitos para que isso ocorra.

Seo 1: Conhecendo as Interfaces dinmicas

States

O State um componente que auxilia na criao de uma interface dinmica e flexvel, com ela possvel criar diferentes modalidades para situaes especficas. Podemos considerar os States como estados de nossa aplicao, funcionam como sub-pginas em HTML que podemos chamar quando precisarmos. Como vimos na unidade anterior, para criarmos States podemos utilizar a janela de deste componente.

Quando utilizamos o boto de criao de um novo State surge uma janela que sugere a incluso de um nome para seu estado, pergunta em qual state seu novo state baseado e ainda d a opo de se novo estado ser o estado inicial de sua aplicao.

Vamos criar um state chamado estado2 baseado no e deixando o set as start state sem seleo. Aps criarmos o novo state selecionamos temos que certificar se o estato que estamos trabalhando o , para isso basta ir na barra de design e verificar qual o estado que est indicado.

Para podermos testar nosso state vamos criar um simples formulrio como o mostrado abaixo em nosso arquivo .mxml.

Para Saber Mais: Lembrando que nem sempre as propriedades x, y, width e heigth so iguais, essas propriedades indicam a posio x,y na tela do objeto e a largura e

altura do mesmo respectivamente. Digo que varia pois cada um pode trabalhar com o posicionamento em tela da maneira que achar mais conveniente e que melhor atenda a necessidade de seu usurio.

E um script em nosso arquivo .as

Aps a criao teremos uma tela como a abaixo.

Vamos agora selecionar o State estado2 e inserir mais um boto e um label que indique que estamos em outro estado.

PARA SABER MAIS AddChild a funo que adiciona um componente ao estado e RemoveChild remove este componente do estado. Podemos simplesmente alterar propriedades de componentes atravs da funo SetProperties. Ex: No exemplo acima estamos alterando o posicionamento no eixo X de nosso boto.

Precisamos tambm colocar em nosso boto Mudar Estado uma funo que realize a mudana de um estado para outro. Para conseguirmos visualizar melhor essas mudanas vamos na barra de states, clique com boto direito do mouse encima do estado2 e v em Edit State Properties, selecione Set as Start State. Na prxima vez que compilar o programa ver que o estado2 ser sua primeira tela. No podemos esquecer de criar uma funo para mudana de states.

O estado atual da funo recebe vazio pois queremos que ele v para o base state (estado base). Caso houvesse a necessidade de mudarmos para outro estado que no o base state ao invs de vazio colocaramos o nome do estado entre aspas simples.

Teste seu programa. Crie um boto no base state que faa ele mudar para o estado2. No esquea de identificar com label o estado que sua pgina se encontra.

Efeitos Visuais

Para tornar ainda mais uma interface dinmica podemos adicionar efeitos em nossos estados. Primeiramente vamos criar dois painis um chamado painel1 e outro chamado painel2. Cada um dos painis contm um boto que executa uma determinada funo que programaremos mais a frente.

Vamos analisar o cdigo: a) x, y, width e height: so posicionamentos e tamanhos dos nossos elementos de tela; b) layout o posicionamento em tela de dos elementos nela dispostos, o atributo absolut indica que o posicionamento de acordo com o inserido pelo usurio. c) title utilizado para definir um ttulo para o painel. d) showEffect e hideEffect so efeitos que utilizamos mostrar e esconder elementos na tela. Seus atributos sero vistos mais a frente. e) Dentro do painel inclumos um boto que possui uma funo mudarEstado() para podermos fazer transio de estados logo mais.

Aps criarmos os painis vamos criar os estados. Os vamos criar um state chamado estado1 e outro chamado estado2 ambos baseados no base state.

Vamos incluir alguns efeitos em nossos painis. Para isso precisamos criar os componentes fade.

Os efeitos de fade so utilizados para aplicar efeitos a objetos que aparecem e desaparecem da tela. As propriedades alfaFrom e alfaTo indicam o de onde pra onde vai o efeito. Exemplo, na primeira linha temos alfaFrom=0 (significa de transparente) e alfaTo=1 (para 100% visual). Na segunda linha isso acontece de modo inverso vai de totalmente visual para totalmente transparente. Apesar de termos includo vrias funes voc pode perceber que seu programa ainda no executa, para podermos fazer isso funcionar devemos criar uma funo em nosso script para que ocorra a transio de estados.

A funo mudarEstado altera os states do aplicativo. Estaremos aplicando efeitos quando essas transies ocorrerem. As transies so elementos que incluem conjuntos de efeitos com objetivo de criar uma animao mais elaborada. Estes conjuntos de efeitos pode executar de duas maneiras: Seqencial e Paralelo. Sequencial, primeiro um depois outro efeito na ordem. Paralelo, ambos efeitos sendo executados ao mesmo tempo. Veremos agora como criamos transies para nosso programa.

Vamos entender a codificao: a) Transactions indica que posso ter efeitos de transio e que abaixo posso criar efeitos de transio diferentes para cada estado. b) Transaction a transio em si. fromState e toState so respectivamente do estado X para o estado Y. No nosso caso usamos * para indicarmos que esses efeitos servem de qualquer estado para qualquer estado, mas poderamos fazer uma transaction do estado1 para o 2 e criar outra transaction diferente do estado 2 para o estado 1, isso sempre depender da nfase em efeitos que voc deseja incluir. c) Parallel indica que os efeitos inclusos abaixo ocorrem em paralelo ou seja ao mesmo tempo. Poderia utilizar Sequence ao invs de Parallel a nica diferena que os efeitos iriam ocorrer na ordem seqencial ou seja um depois do outro e no os 2 ao mesmo tempo como no paralelo. Existe a necessidade de indicar quais os componentes que participaro do jogo de efeitos por isso utilizamos a propriedade targets, se isso ocorrer somente a um componente ento podemos utilizar o target ao invs do targets. d) Move e Resize so efeitos que s funcionaro se a mudana de estados envolver reposicionamento e redimensionamento respectivamente dos componentes envolvidos. Se meu componente no se mexe ou no muda de tamanho em estados diferentes esses efeitos no aparecero. A propriedade duration o tempo em milisegundos que este efeito acontece. possvel esticar ou encurtar o efeito dependendo do tempo que voc coloca. E por ltimo devemos deixar alterar as propriedades de nossos painis nos estados diferentes.

Vamos entender a codificao: a) States e State vimos anteriormente, so os estados de nossa aplicao b) SetProperty utilizado para configurar algum componente. Muito utilizado dentro de States quando querermos reconfigurar caractersticas de componentes ao mudarmos de estado. c) Target, propriedade que indica o nome do componente a ser alterado d) Name o nome da propriedade que irei alterar. Ex. width e height, largura e altura do meu objeto target. e) Value o valor que a propriedade name do objeto target recebe. Ex na ultima linha o painel2 recebe em sua propriedade height o valor 326.

Compile o cdigo e veja alguns dos efeitos que podemos colocar em nosso aplicativo. Tente trocar o efeito de fade pelo efeito de WipeUp, WipeDown, lembrando que os efeitos wipe no utilizam a propriedade alfaFrom e alfaTo, utilizam somente a propriedade duration (durao do efeito).

CSS

O Adobe Flex se integra com muitas linguagens e estilos da web, dentre eles est o CSS (Cascading Style Sheets), conhecidas tambm como folhas de estilo. Atravs destas folhas de estilo possvel separar as informaes de layout de uma pgina de seu contedo. Podemos falar que o CSS serve para formatar os estilos de texto, botes e formulrios.

LINK Saiba mais sobre o CSS, acessando:

Podemos criar estilos de formatao personalizados configurando cores e tamanhos para os elementos da tela. Vamos ver um exemplo simples de configurao de tela onde definimos um estilo para um boto.

Para inserir o estilo basta abrir uma tag Style no mxml e criar o estilo CSS da forma que desejar. Podemos tambm utilizar um arquivo separado .css para nossos estilos. Para isso na tag Style devemos chamar a propriedade source, igual utilizamos na tag Script anteriormente explicada. No esquece de inserir o estilo em algum componente de seu programa para que possa visualizar os efeitos que ele proporciona. Abaixo inserimos o estilo em um dos botes que criamos anteriormente. Voc pode fazer o mesmo.

Lembrando que o cdigo acima demonstrado pode ser digitado em uma nica linha, s aparece aqui em duas linhas para facilitar a visualizao.

Estudo de Caso

Para podermos prosseguir com novos conhecimentos vamos criar uma calculadora simples revendo alguns conceitos de Action Script 3. Para comearmos devemos criar a tela inicial de nossa calculadora. Podemos utilizar os painis anteriormente criados apenas reconfigurando-os para se adaptarem a nossa necessidade. Vamos utilizar a tela do estado2 para ser nossa tela da calculadora. Para isso devemos ajustar o tamanho para que os botes fiquem melhores adaptados as nossas necessidades.

Como pode perceber o painel do estado2 foi readequado e mudamos a posio do boto do estado tambm. Para que isso funcione devemos inserir ids em nossos botes.

Devemos alterar o ttulo do painel de ESTADO 2 para Calculadora, pois estaremos trabalhando com uma.

Vamos incluir o visor e os botes de nossa calculadora.

O cdigo source desta tela inserido dentro do estado2 logo abaixo do SetProperty.

Chamaremos nosso TextInput de display (segunda linha do cdigo acima) Antes de pensarmos como iremos imprimir os nmeros na tela vamos criar mtodos para realizar as operaes bsicas de nossa calculadora. Primeiramente vamos criar o mtodo soma. Para isso devemos pensar como ser que a calculadora trabalha. a) Temos a digitao de um nmero b) Depois a digitao de uma operao c) Aps isso um novo nmero inserido d) E por ultimo o boto de resultado acionado Tendo em mos essa informao vamos a programao primeiramente de nossas variveis globais.

Onde a o primeiro nmero, b o segundo. O total guarda o resultado final e o tipoOperacao que acima mostrado guarda qual das quatro operaes iremos executar. Criaremos agora a funo que executa a soma

Depois de digitar o nmero o usurio clica no boto de soma que executa a funo acima capturando o valor mostrado no display, sendo recebido como parmetro da funo. Aps isso esta String convertida para um tipo Number atravs do mtodo parseFloat e depois atribumos a operao a ser realizada, no nosso caso a soma. Aps clicar no soma o usurio ir digitar um novo nmero e clicar em resultado. Quando ocorrer a funo seguinte ser executada.

Onde temos que o segundo nmero recebe o valor do display e chamamos a funo calcular para resolver nosso clculo.

No estranhe ver um case com somente uma opo. Estamos montando parcialmente o aplicativo. A funo calcular recebe o tipo de operao a ser executada, como j temos nossas variveis a e b previamente capturadas, vamos somente executar o clculo, e mostrar o resultado na tela passando o valor para a propriedade text do meu display. Para testar nossos botes devemos inserir a chamada das funes nos botes.

Vamos testar para ver como ficou? Acredito que voc percebeu que ao apertar o soma o nmero que estava no display no desapareceu e para que pudesse digitar outro nmero voc teve que apagar o anterior manualmente. Eu sei, ainda temos algumas coisas para ajustar. Continuando a codificao iremos criar as demais funes da calculadora.

Se voc executou alguns testes pode verificar que ao somar alguns nmeros fracionrios as vezes a numerao ficava doida. Para consertarmos isso podemos

torcar a converso .toString da varivel total e colocar .toFixed(2) setando as casas decimais para 2. Muitos me questionam porque no otimizar as funes acima para duas ou 3 no mximo? Bom quando estamos aprendendo quanto mais detalhada for a programao mais facilmente aprenderemos. Por este motivo as funes acima no foram otimizadas. No podemos deixar de atribuir essas funes aos nossos botes.

O principal de nossa calculadora j est funcionando. Vamos agora as funcionalidades secundrias. Percebemos que ao clicar nos botes de nmero nada ocorre, vamos configur-los para que ao clicarmos os valores apaream no display.

Poderia criar uma funo imprimeNumero que captura o os valores que j esto no display e adiciona o que foi enviado atravs do click. Porm o Flex nos proporciona alterar as propriedades do display diretamente na propriedade click do boto conforme abaixo demonstrado.

Para no precisarmos apagar toda vez nosso nmero vamos adicionar em nossas funes de soma, subtrao, multiplicao e diviso uma forma de limpar o display. Inserindo a seguinte linha nos mtodos.

Insira o comando display.text igual mostrado acima nas demais operaes e teste seu programa, voc ver que j est bem mais robusto do que quando comeamos.

Podemos perceber que ainda existem algumas coisas que ainda no esto como deveriam ser, por exemplo. Os nmeros digitados esto alinhados a direita como na figura abaixo.

Para que eles fiquem alinhados a direita devemos incluir a propriedade textAlign em nosso TextInput e defini-la para right.

Podemos ainda mostrar a operao que est sendo executada includo um label em nossa calculadora.

Vamos chamar esse label que ir mostrar toda nossa operao de visor. Lembrando a propriedade id do label deve receber visor. Inseriremos o textAlign do visor para que nosso visor tambm se alinhe a direita.

Vamos criar um boto para limpar a tela. O famoso C (clear) da calculadora.

Onde temos que a funo alm de apagar os dados da tela ainda deixa zerado os valores de a, b, total e tipoOperacao. Para enviarmos os dados para o label, devemos passar o valor do display para nosso visor em todos os nossos mtodos de clculo (soma, diviso, multiplicao, subtrao e por fim no resultado onde capturamos somente o que j temos no visor mais o valor do display.

Finalize seu programa alterando os efeitos de entrada. Troque o nome do boto ir ao estado 2 para Iniciar Calculadora e o Ir ao estado 1 para voltar a inicializao. Tente incluir uma funo de memria em sua calculadora.

Saiba Mais Para se aprofundar em formulrios recomendo a leitura da documentao disponibilizada pela Adobe no site: http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_08.html

Seo 2: Formulrios Interativos

Formulrios

Em um aplicativo comercial, onde trabalhamos com informaes de cadastros de clientes e produtos, vendas, compras e demais operaes, sempre nos deparamos com formulrios onde inserimos diversas informaes que nem sempre so validadas antes de serem armazenadas. Voc pode estar se perguntando como fao para resolver este problema? Podemos trabalhar com formulrios no Flex, validando as informaes de entrada, dando um retorno ao usurio quando a informao inserida por ele estiver incorreta. Como j pode ter percebido, as definies ficam muito mais fceis de entender quando as vemos na prtica, ento iremos criar um formulrio para entendermos melhor como o mesmo funciona. Vamos criar um novo projeto chamado Flex para trabalharmos com nosso formulrio. Criaremos um Panel e nele inseriremos nosso formulrio. Abaixo segue o formato da tela seguida de seu cdigo e devida explicao do mesmo.

Onde temos: a) Panel com propriedades j vistas anteriormente, mais horizontalCenter e verticalCenter que so propriedades usadas para centralizar nossa janela tanto horizontalmente como verticalmente. Podemos configura-los no source ou atravs da janela design na aba Flex Properties em constraints.

b) Inserimos um formulrio e chamamos de formCadastroClientes, podemos observar que a maioria dos nossos itens de formulrio esto com width(largura) e/ou height(altura) = 100%, definimos desta forma pois caso precisemos alterar o tamanho da janela todos os campos se auto ajustaro ao novo tamanho, caso contrrio a cada alterao de tamanho da janela principal ser necessrio alterar o tamanho de todos os campos. c) Podemos perceber que aps criarmos um formulrio e inserirmos um TextInput o formulrio automaticamente cria um FormItem, que contm algumas propriedades entre elas o label.

d) O componente HRule cria ma barra que divide nosso formulrio, normalmente inserimos ele diretamente por cdigo e no arrastando e soltando como os outros componentes, isso porque quando arrastamos e soltamos a ferramenta automaticamente cria um formItem dele e como todo formItem cria um label e outras coisas. e) O formItem telefone diferenciado, temos nele um campo para inserir o telefone, temos tambm um RadioButtonGroup que serve para guardar um grupo de botes Radio onde escolhemos apenas uma opo, no nosso caso apenas um tipo de telefone permitido.

f) E por ltimo inserido um DataField onde temos algumas propriedades como formatString que utilizada para formatar a data; temos tambm a propriedade editable que habilita a insero da data manualmente.

PARA SABER MAIS: Se o formatString for definido com letras minsculas ex: dd-mm-yyyy a data no ir aparecer.

Validando Dados

Para validarmos os dados de entrada precisamos inserir um Validator que possa verificar o texto inserido no campo e notificar o usurio sobre o que est errado. Esta validator chama-se StringValidator. O cdigo abaixo deve ser digitado fora das tags Panel.

Onde temos: a) maxLength e minLength como tamanho mximo e mnimo do campo. b) tooLongError mensagem de texto que aparece quando o texto maior do que o configurado no maxLength. c) tooShortError mensagem de texto que aparece quando o texto menor do que o configurado no minLength. d) requiredFieldError mensagem que aparece quando o campo requerido no foi preenchido. e) required indica q o campo obrigatrio. Somente com esse campo como true que o requiredFieldError ter efeito. f) Source indica qual elemento da minha tela ser validado, no nosso caso estou validando o meu textInput campoNome g) Property indica qual propriedade do meu source ser validada. No caso apresentado o texto contido no campo text. Testando nosso cdigo conseguiremos perceber que criar validaes trabalhoso porm deixa a interface com usurio muito mais amistosa e elegante.

Pode ter percebido que ao iniciar o formulrio voc tambm no sabe qual o campo obrigatrio e qual no . Temos uma maneira de indicar isso utilizando a propriedade required do formItem.

Outro campo que podemos utilizar validaes o campo de email, vamos verificar o que podemos validar com EmailValidator.

PARA SABER MAIS Todo esse cdigo inserido so s configuraes de mensagens, caso voc no preencha os invalid, missing e outros o que voc ver toda vez que surgir algum erro no campo email sero mensagens em ingls padronizadas pela ferramenta.

Entendendo o cdigo: a) InvalidDomainErro utilizando quando o domnio digitado invlido. Ex: jose@s.s b) invalidCharError aparece quando temos caracteres invlidos no endereo. Ex: ?, >, /, etc. c) invalidIPDomainError quando se tem um endereo ip invlido d) invalidPeriodsInDomainErro quando possui pontos(.) consecutivos sem caracteres no meio. e) missingPeriodInDomainError quando esta faltando (.) no nome do domnio) f) missingAtSignError quando esta faltando o @ no endereo g) missingUserNameError quando falta caracteres antes do @ h) tooManyAtSignsError quando se tem mais de um @ no endereo i) requiredFieldError, required, property e source j foram vistos anteriormente. Vamos setar nosso campo email como requerido para deix-lo visualmente mais intuitivo ao usurio.

Temos ainda a validao de campo de telefone onde podemos verificar se o numero digitado contm caracteres invlidos ou se possui um tamanho grande ou pequeno demais para ser um nmero vlido de telefone.

Temos: a) invalidCharError indicando que existem caracteres invlidos no campo. b) wrongLength quando temos um nmero menor ou maior do que o esperado para um nmero de telefone. c) As demais propriedades j vimos anteriormente. Podemos tambm alterar as cores dos campos quando algo ocorrer ex: se quisermos que nosso campo nome fique com seu label em vermelho quando estiver incorreto basta inserir um validator para isso.

E inserirmos uma funo que chamada quando algo invlido ocorrer.

PARA SABER MAIS Se quisermos que algo ocorra quando o campo for vlido basta inserirmos a propriedade valid chamando uma funo qualquer em nosso validator.

Ainda podemos fazer uma validao geral onde verificamos tudo que est errado atravs de uma funo utilizando Validators.

Onde temos: a) validators:array como um array que recebe os meus validadores de nome email e telefone que havamos setado anteriormente. b) erros:Array recebe o resultado do mtodo validateAll da classe Validators que contm todos os erros que os validators esto acusando. c) mensagemErro um Array que receber o blocos de erros enviados pelos validadores d) if(erros.length >0) isso significa se meus validadores me retornarem erros ele vai executar os comandos abaixo. e) campoErro:String recebe o label do FormItem que est dando erro. f) mensagemErro.push captura o campoErro mais a mensagem que o campo est informando e guarda no buffer. g) Alert envia as mensagens para a tela setando o ttulo do Alert para Existem erros .... Por final teremos uma tela parecida com a tela abaixo, com as principais validaes, e auxiliando nosso usurio no preenchimento correto das informaes de nosso formulrio.

Teste se programa, veja como ficaram as validaes, veja o que acontece quando esquecemos de preencher algum campo.

Aprofundando o ConhecimentoPoderemos observar no texto a seguir a importncia das informaes na Internet, formas de armazen-la de maneira diferente da que lhe foi apresentada nesta unidade. Poderemos perceber que muitas ferramentas levam ao mesmo caminho, s precisamos saber qual delas melhor nos adaptamos para agradar nossos clientes. Livro: Macromedia Dreamweaver MX Autor: KHRISTINE ANNWN PAGE Pgina 302 a 329 antes de O que voc aprendeu nesta Lio. Voc deve ter percebido como simples criar um formulrio utilizando outra ferramenta. Estudou as opes de insero de campos de texto, caixas de seleo, botes radio, listas, botes de limpeza de itens na tela, entre outras funcionalidades.

Vimos que existem diversas formas de validao de campos individuais e mltiplos. Esta grande variedade de formas e tipos de validaes nos d um leque imenso de opes para criar um gama enorme de modelos de interfaces que melhor se adaptam a necessidade de nossos futuros usurios.

QUESTES PARA REFLEXOSabemos que para criar uma aplicao amigvel e til para nosso usurio devemos tanto inserir as funcionalidades que nosso usurio espera quanto exibir estas funcionalidades de uma forma que facilite o trabalho do usurio com a ferramenta. Pensando desta maneira voc consegue imaginar o que seria para voc uma ferramenta de edio de texto perfeita?

PARA CONCLUIR O ESTUDO DA UNIDADEPara concluirmos nossos estudos nesta unidade podemos refletir um pouco sobre o quo poderosa esta linguagem e que gama enorme de recursos podemos utilizar para deixar a interface cada vez mais amigvel e interativa.

RESUMONa unidade que se passou foram apresentados vrios recursos que trabalham a nosso favor quando o assunto desenvolver uma interface amigvel, intuitiva e bem aceita. Temos que ficar sempre atentos as necessidades de nossos usurios e o quanto iremos poder utilizar destes maravilhosos recursos, lembrando sempre de no exagerar quando o assunto enfeitar demais. Muitas vezes se a interface for muito carregada de efeitos seu usurio final pode acabar no gostando. Nosso prximo passo agora ser inserir informaes nessas telas que construmos e salv-las em um banco de dados onde futuramente poderemos resgat-las e trabalhar com as informaes nelas contidas.

Exerccios de Aprendizagem

Vamos integrar nosso formulrio de Cadastro de Clientes com a aplicao da Calculadora. 1) criar um estado para seu formulrio. 2) Inserir um boto na tela inicial que chame seu formulrio. 3) Inserir o cdigo de seu formulrio no mxml da calculadora. 4) Iniciar o programa com a tela de opo calculadora ou formulrio. 5) Realizar as demais validaes necessrias.

UNIDADE 3 PROJETO WEB

Seo 1: Entendendo a estrutura fsica e demais ferramentas de apoio Nesta seo ser apresentada a forma de preparao do ambiente para a integrao da linguagem Flex com outros sistemas, apresentando diferentes ambientes e configuraes necessrias para que a integrao ocorra.

Seo 2: Princpios bsicos da programao em PHP Esta seo apresentar os conceitos bsicos da linguagem PHP, suas estruturas de controle e repetio, formas de criao de objetos, mtodos e chamada de funes simples.

Objetivos de Aprendizagem: Nesta unidade iremos estudar os princpios bsicos de funcionamento de um Servidor de Aplicao Web, suas principais caractersticas, funcionalidades, formas de instalao e configurao. Iremos aprender tambm formas de integrar Servidores de Aplicao com Banco de Dados na Internet, alguns cuidados a serem tomados na hora da programao entre outras dicas para garantir o melhor funcionamento de seu aplicativo. Veremos tambm exemplos prticos facilitando o entendimento dos conceitos aqui mostrados.

INTRODUO AO ESTUDOA internet uma forma indispensvel de comunicao atualmente que possibilita um contato mais direto, rpido e dinmico, ampliando os meios em que informaes podem ser difundidas. Voc j parou para pensar como os sites da internet esto interligados? Como essas informaes e formas de comunicaes fluem na rede? Como fazemos para criar e disponibilizar uma pgina na internet? No? Ento vamos conhecer como isso tudo funciona estudando sua estrutura.

Seo 1: Entendendo a estrutura fsica e demais ferramentas de apoio

Estrutura de Projeto Web

Sabemos que nem tudo mil maravilhas quando se trata de programao de computadores. Para podermos atingir excelentes resultados dependemos de uma viso geral do projeto.

Imagem arquitetura de um projeto web (sem pensarmos em segurana) Como podemos perceber na imagem acima, para trabalharmos com construo de sistemas web, dependemos de uma certa estrutura montada que muitas vezes bem mais complexa do que simplesmente um arquivo salvo no HD. O Servidor de Aplicao o local onde armazenamos os aplicativos que queremos colocar online. Atualmente existem inmeros servidores de aplicao diferentes, cada um voltado para uma linguagem e aplicao especfica. A variedade to grande que se fossemos descrever detalhadamente a arquitetura bsica de cada um, teramos que escrever mais alguns livros para tratar somente deste assunto.

SAIBA MAIS W.A.M.P = Windows + Apache + MySQL + PHP. Acesse:

O aplicativo que iremos tratar para o desenvolvimento de nossos estudos ser o WampServer. Este aplicativo instala uma srie de servios em nosso computador, dentre eles podemos citar: Php, MySql e o Apache. Voc pode estar se

perguntando, mas eu poderia instalar estes servios separadamente? Sim, este aplicativo somente uma sugesto para facilitar a instalao deste tipo de servidor.

SAIBA MAIS Servidores de Banco de Dados e Aplicao demandam um conhecimento e estudo profundo na tecnologia aplicada e das necessidades que o mesmo possui. Para saber mais sobre como configurar o Apache e o MySql separadamente acesse o link:

Imagem arquitetura do Wampserver Esta arquitetura simplificada utilizada somente para facilitar o aprendizado sendo inadequada para fins comerciais por possuir alta fragilidade em segurana e alto processamento.WampServer um ambiente de desenvolvimento web para Windows. Que habilita voc para criar aplicaes com Apache, PHP e banco de dados MySql. Ele ainda vem com PHPMyAdmin para facilitar o gerenciamento de suas base de dados (WAMPSERVER, 2010, traduo nossa).

PARA SABER MAIS Normalmente para grandes volumes de informao utiliza-se servidores de aplicao separadamente dos servidores de banco de dados, melhorando o desempenho do sistema.

Trabalhando com WampServer

Incialmente vamos baixar os programas que iremos utilizar para montar nosso servidor de aplicao e banco de dados.

Comeando

com

WampServer,

vamos

acessar

a

pgina

do

Wamp

, clicar em downloads.

Vamos aproveitar para baixar tambm outro software que ir nos auxiliar na criao nossas base de dados, o NaviCat. Para isso vamos acessar a pgina , clicar na aba download.

A instalaao do WampServer simples basta iniciarmos e ir seguindo os next... next, como mostrado abaixo.Primeiramente voc deve escolher a pasta onde ser instalado o programa. Se voc preferir pode deixar a pasta que vem pr-configurada. Estaremos utilizando ela em nosso exemplos.

Aps o isso o programa perguntar se quer criar cones na barra de tarefas e no desktop, pode deixar selecionado. O prximo passo o programa perguntar qual seu browser. Selecione um de sua preferncia.

O firewall do Windows ir perguntar se deseja liberar acesso para este programa voc deve clicar em desbloquear O programa tambm perguntar qual o smtp e o domnio que ser usado. Para nossas atividades no iremos alterar essas informaes, deixando-as padronizadas.

Quando terminar a instalao o programa perguntar se quer iniciar o Wampserver. Vamos iniciar. Ao fazermos isso podemos notar que surgiu um cone no canto inferior direito de sua tela.

Para entendermos o status do servidor devemos observar a legenda.

Devemos executar algumas configuraes iniciais em nosso WampServer para podermos obter o mximo em recursos do mesmo.

Devemos ativar short open tag para podermos executar scripts mais variados.

Devemos comentar as opes de directory e tambm mais abaixo outras opes de acesso

Caso seu WampServer no esteja inicializando ou voc deve verificar se no existe outro software que esteja utilizando utilizando a porta do seu servidor. Acontece algumas vezes do Skype dar problemas com o Wamp, certifique-se que o mesmo esteja desligado e inativo (no pode aparecer nem na lista de programas do gerenciador de tarefas). A instalao do Navicat relativamente simples no temos necessidade de estarmos apresentando suas telas de instalao. Quando formos executar pela

primeira vez devemos inicializar o programa, selecionar o boto connection no menu principal e configurar o banco que iremos utilizar, a porta, o usurio e senha.

No nosso caso, estaremos utilizando o banco MySql, com o usurio root, a senha fica em branco(no digitamos nada), a porta do banco utilizaremos a padro 3306 e o host name / IP address podemos deixar localhost para acesso local apenas, caso queiramos acessar algum banco fora de nossa mquina, deveremos inserir o IP aqui. Aps tudo configurado, clique em test connection, se algum erro existir no ser possvel conectar. Depois de conectarmos no banco devemos criar uma base de dados onde iremos armazenar nossas informaes. Para isso clique com boto direito encima de localhost e selecione New Database. Insira o nome teste para nossa base, utilize a codificao no Character set UTF8 Unicode.

Clicando duas vezes encima da nova base criada conseguiremos ver alguns recursos que poderemos utilizar mais a frente quando nos aprofundarmos na gravao de dados dos formulrios. Ainda precisamos de uma ferramenta para edio do cdigo PHP, irei apresentar algumas das ferramentas mais conhecidas, deixando em aberto a todos que escolham sua ferramenta favorita. Para os mais radicais um recado, voc pode usar o bloco de notas do Windows e salvar seus arquivos digitados com a extenso .php depois basta copiar os arquivos para a pasta c:\wamp\www e pronto, j conseguir visualizar sua pgina. Segue abaixo a lista de ferramentas, e seus respectivos sites: ZendStudio Sobre: uma ferramenta completa para quem trabalha com php avanado (framework adaptado encima do Eclipse) Site: http://www.zend.com/en/ Licena: Trial Eclipse for PHP Developers

Sobre: excelente ferramenta, altamente customizvel, leve e rpida. Existem outras verses do Eclipse adaptadas para outras linguagens, voc pode utilizar a verso padro e instalar um plugin para PHP. Site: Licena: Free NetBeans Sobre: tima ferramenta, muito utilizada na programao Java por facilitar na criao de interfaces mais amigveis. Site: Licena: Free

SEO 2: Princpios bsicos da programao PHP

Entendendo a Linguagem PHP

Estaremos agora aprendendo um pouco mais desta poderosa linguagem muito utilizada na Internet por programadores do mundo todo. Vamos aprender a estrutura bsica, tags, comandos, declarao de variveis e mtodos. Estes conhecimentos nos ajudaro a fazer a interligao do Flex com o PHP e o MySql. Assim como o Action Script 3 visto nas unidades anteriores, o PHP tambm uma linguagem de scripts, e diferente de outras linguagens onde voc precisa escrever vrios comandos para produzir uma pgina HTML simples, no PHP isso feito de forma clara e simples, facilitando a criao de sites.

SAIBA MAIS Podemos aprender, como trabalhar com as tags HTML atravs do site: Podemos ainda testar nossos cdigos HTML atravs do site:

Marcadores

A estrutura bsica do arquivo PHP faz uso dos marcadores. Precisamos deles para definirmos ao nosso servidor de aplicao qual o cdigo PHP e qual o HTML. Vamos ento aos principais marcadores. 1) Principal forma de iniciar os comandos.

2) Forma simplificada.

3) Forma utilizada para imprimir na tela sem o comando echo. 4) Forma diferenciada.

Como em toda a linguagem, vamos criar nossa primeira pgina.

Ao salvarmos este cdigo em nossa pasta www padro e acessarmos http://localhost/seuArquivo.php ver algo assim:

PARA SABER MAIS Para que seus cdigos em php funcionem e para que consiga visualizar os mesmos no endereo localhost voc no pode esquecer de deixar o wampserver ligado e tambm dever salvar seus arquivos .php todos dentro da pasta www do wamp, caso contrrio no ser possvel visualizar.

E se clicarmos com o boto direito do mouse e selecionarmos exibir cdigo fonte, veremos:

Podemos perceber que nossos cdigos e comentrios feitos no PHP no aparecem, mas voc pergunta, mas porque no aparecem? A resposta simples, no aparecem porque o servidor de aplicao l as requisies interpreta o cdigo e gera um HTML a partir do cdigo interpretado.Funes PHP

Assim como no ActionScript o PHP tambm possui funes.

Este um exemplo de funo, podemos perceber que para que a funo possa ser executada ela deve ser chamada (linha funcaoOi();). Lembrando que o cdigo PHP aqui visto s funciona se estiver dentro das tags Podemos inserir cdigo HTML no meio de nossa funo.

Declarando Variveis

O PHP possui alguns tipos bsicos de dados, so eles: Integer igualmente ao Flex, o tipo inteiro no possui decimais, pode ser positivo e negativo alm de poder ser representado em qualquer base (decimal, octal, hexadecimal). O tamanho mximo do inteiro 32 bits.

Float / Double / Real Valor ponto flutuante pode ser definido da seguinte forma:

String Srie de caracteres. Definidos como:

O comando echo serve para escrever as coisas em tela. O ponto ( . ) entre a varivel em vermelho e o texto em verde serve para concatenar, criando uma nica sada. Boolean assim como no Flex, aceita os valores true(verdadeiro) e false(falso)

PARA SABER MAIS

O tipo booleando no case sensitive, isto significa que ao atribuir um valor verdadeiro ou falso tanto faz utilizar True ou TRUE ou true, todos levaro ao mesmo resultado.

Array utilizado para armazenar vrios elementos do mesmo tipo. Podemos dizer tambm que eles possibilitam atribuir a um elemento do array uma chave e um valor. Podemos definir um array PHP de duas maneiras diferentes: Primeira:

A segunda forma :

Object a instncia de uma classe.

SAIBA MAIS O tema Orientao a Objetos muito extenso porm de fcil entendimento, se quiser conhecer mais podemos consultar: Microsoft:

NULL um tipo que aparece nas variveis que no receberam nenhum valor, no foram criadas, ou mesmo atribudo NULL para as mesmas. O tipo nulo aceita apenas valores NULL.

LINK

No confunda NULL com

Recurso no PHP essas variveis referenciam recursos criados que so utilizados para acessar servios ou objetos externos ao programa. Ex: captura de imagens, arquivos, acesso a banco de dados, etc.

No exemplo acima temos uma varivel recebendo a respostas de conexo com o banco de dados. Experimente colocar o usurio e senha do seu banco mySql para ver qual ser o resultado. Se voc no alterou os usurios e senha padres pode usar root para usurio e senha em branco. Como voc deve ter percebido diferente do ActionScript onde voc precisa definir o tipo da varivel antes de atribuir a ela um valor, no php voc no precisa se preocupar em definir o tipo da varivel, pois o php faz isso por voc automagicamente. A linguagem tem a capacidade de alterar os tipos de maneira transparente e instantnea.

PARA SABER MAIS se voc atribuir: x = 1.2 ser reconhecido como float e se mais para frente voc atribuir x = meu texto o php entender q a varivel x um String.

Operadores

Operador + ++ -* / % == ===

Descrio adio subtrao incrementa 1 decrementa 1 multiplicao diviso resto (mdulo) igual idntico

Exemplo $a +$ b $a - $b $a++ $a-$a*$b $a/$b $c = $a%$b $a==$b $a===$b

!== != >, < >=, $b $a>=$b

+=, *=, /=, -=, %=, .=

recebe o que a varivel tem mais $c+=$b o que vem a frente

&& || ! ^

AND OR NOT XOR

$a&&$b $a||$b !$b $a^$b

Estruturas de Controle

Iremos perceber que muitas coisas so bem parecidas entre o ActionScript e o PHP, porm algumas diferenas existem e iremos estudar logo abaixo, desta maneira voc pode ver acontecendo nas duas linguagens. As estruturas de controle de uma linguagem de programao permitem controlar o fluxo de execuo de nossos programas. Vamos trabalhar com as estruturas condicionais (deciso) e com as estruturas de repetio (loop).Estruturas Condicionais em PHP

IF

LINK Comentrios no php so parecidos dos comentrios feitos no Action. Sempre utilizamos o //

A instruo IF utilizada para tomada de deciso. Sua sintaxe :

Para testar nosso cdigo temos que depois de criar a funo criar uma chamada de funo testaIf() conforme mostrado no cdigo abaixo.

Voc ainda pode alterar os valores das variveis para ver as possveis respostas que o programa ir gerar. SWITCH A instruo switch utilizamos para testar vrias condies evitando o uso repetitivo de elseif, evitando a poluio no cdigo.

Vamos testar o switch criando uma funo que recebe um parmetro e verifica qual o valor deste, dependendo do valor gera um determinado resultado. Para testar a funo vamos chamar a funo ao final do cdigo para que ela seja executada.

Questo para Reflexo Sabendo que o comando break tem a mesma funcionalidade tanto no PHP quanto no ActionScript qual sua funcionalidade dentro do switch?

Estruturas de Repetio em PHP

WHILE A estrutura de repetio while assim como a estrutura if tambm trabalha com uma condio a diferena entre as duas que se a condio for verdadeira para o if ele executa o bloco uma vez e no while ele executa o bloco enquanto a condio for verdadeira.

O cdigo fica executando at que a condio seja falsa.

No podemos esquecer de chamar a funo no final do cdigo para testarmos (somente), quando estivermos aplicando em nosso caso de uso no estaremos chamando a funo no final dos mtodos. DO..WHILE Com a diferena de ser executado ao menos uma vez o a estrutura do..while possui as mesmas caractersticas que o while. Sua estrutura :

Para testarmos criaremos a funo testaDoWhile.

A diferena entre esta funo e a anterior que se o valor passado a ela for maior ou igual a 5 o while no executa nada porm a do..while executa uma vez. Faa o teste. FOR A estrutura de repetio for funciona repetindo comandos inmeras vezes porm com um limite j pr-definido. Sua sintaxe :

Onde temos varivel com valor inicial, condio onde essa varivel ser verificada n vezes e atualizao onde temos os termos de contagem.

No esquecendo de chamar o mtodo para testes.

FOREACH Este tipo de iterao usada quando queremos trabalhar com Arrays somente. Existem dois tipos de iterao.

Um cdigo executvel para teste ficaria assim:

Aprofundando o ConhecimentoPara se aprofundar o conhecimento em desenvolvimento de aplicaes ricas para internet que utilizam PHP importante a leitura dos tpicos abaixo apresentados do livro Ajax, Rich Internet Applications onde ser tem uma viso mais aprofundada dos itens discutidos nesta unidade.

Aprofundando o Conhecimento Livro: Ajax, Rich Internet Applications Autor: Paul J. Deitel e Harvey M. Deitel Pginas 462 - 19.1 at 479 - 19.4(incluso) e 494 e 495 - 19.8 e 19.9 e desenvolvimento Web

Concluindo-se a leitura podemos perceber que a linguagem PHP muito extensa e se fossemos falar a fundo neste livro sobre o assunto precisaramos de muitas pginas a mais. Por isso foi apresentado no texto acima uma sntese do que iremos utilizar para integrar nossas ferramentas de programao e criar nosso aplicativo web.

PARA CONCLUIR O ESTUDO DA UNIDADEPara concluir esta unidade podemos refletir sobre a diferena das linguagens Flex apresentada nas unidades 1 e 2 com a linguagem PHP apresentada agora. Foi possvel notar que apesar de diferentes muitas funcionalidades em termos de programao so parecidos nas duas linguagens. Ambas so muito poderosas e juntas fornecem um leque enorme de opes a seu desenvolvedor colocando em mos ferramentas geis e de alta produtividade.

RESUMONesta unidade vimos conceitos introdutrios da linguagem PHP muito utilizada atualmente para desenvolvimento web. Foi possvel conhecer sua estrutura em uma abordagem geral, conhecendo sua sintaxe e diferena de cdigo comparada a linguagem ActionScript 3 mostrada nas unidades anteriores. Vimos que existem muitas diferenas mas tambm foi possvel visualizar as similaridades, que facilitam na integrao dos cdigos e no entendimento geral do aplicativo final gerado. Conseguimos executar chamadas de mtodos de forma simples rpida e prtica, sem nos preocuparmos diretamente com a esttica do produto por ser somente testes. Nos prximos captulos iremos estudar formas de agregar este conhecimento adquirido em nossos programas. Com isso poderemos focar mais nossos exemplos em resoluo de problemas cotidianos. Para avaliar os conhecimentos por voc adquiridos sugiro que resolva os problemas abaixo propostos.

Atividades de aprendizagem:1) Descreva a diferena entre utilizar o comando while e o comando do..while.

2) Se desejarmos criar um lao controlado dentro do php, qual a estrutura que deve utilizar? 3) Sabemos que possvel trabalhar com HTML e PHP no mesmo cdigo, explique como se d esta separao. 4) Crie no PHP as funes de clculo feitas anteriormente em Flex. 5) Crie um programa que valide o tamanho da String como feito em Flex nas unidades anteriores

UNIDADE 4 INTEGRAO FLEX E PHP

Seo 1: Conceitos bsicos de Integrao Nesta seo ser apresentada a forma de integrao do ambiente para a integrao da linguagem Flex com outros sistemas, apresentando vrias configuraes necessrias para que a integrao ocorra.

Seo 2: Princpios bsicos da programao em SQL Esta seo apresentar os conceitos bsicos da linguagem SQL, suas estruturas de incluso, excluso, alterao e pesquisa de informaes no banco de dados mySql.

Objetivos de Aprendizagem: Nesta seo iremos estudar os princpios bsicos de comunicao do Flex com PHP e MySql utilizando AMFPHP. Iremos aprender suas principais caractersticas, funcionalidades, formas de instalao e configurao. Veremos tambm exemplos prticos facilitando o entendimento dos conceitos aqui demonstrados.

Introduo ao estudoSabemos que apesar do Flex ser uma ferramenta muito poderosa para se trabalhar com internet, mas ela completamente integrada como em outras linguagens de programao? E quando se trata de acesso a banco de dados? A ferramenta ainda deixa a desejar quando comparada com as demais? Para resolver esta questo precisamos integr-la a uma linguagem que tenha este tipo de acesso sendo assim trabalhar com movimentao de dados (clienteservidor). Existem diversos programas que servem de interface para que o Flex possa se comunicar com praticamente qualquer linguagem de programao. Dentre elas esto:

- AMFPHP para PHP - BlaseDS para Java - Fluorine para .Net - PYamf para Python O que sabemos que cada um desses sistemas necessita de configuraes diferentes para que possam trabalhar. O que esses programas fazem basicamente transformar os pedidos do ActionScript 3 em pedidos da linguagem destino (no nosso caso em pedidos PHP), e devolver os resultados desse pedido executados na linguagem destino( nosso exemplo PHP) para um formato que o ActionScript consiga ler e trabalhar, e com esta idia que comeamos esta seo.

Seo 1: Conceitos bsicos de Integrao

AMFPHP

Dentre todas essas ferramentas escolhermos o AMFPHP por ser uma ferramenta leve e de fcil integrao. Devemos baixar a ferramenta de seu site oficial http://www.amfphp.org, lembrando que para um estudo mais profundo de como configurar a ferramenta devemos estudar a documentao e os tutoriais disponveis no site. Ao entrar no site basta ir na aba downloads na parte superior da pgina e baixar a ultima verso da ferramenta (em nosso estudo estaremos utilizando a verso 1.9). Ao descompactar teremos duas pastas devemos renomear a pasta amfphp 1.9 para somente amfphp. Vamos criar um novo projeto no Flex cujo caminho deve ser a pasta www do WampServer, aps a criao clique com boto direito encima da pasta de projeto criada e v em Properties, ir aparecer uma janela igual a abaixo mostrada, onde ser possvel verificar o caminho que se encontra seu projeto.

Abra o Windows Explorer v at a pasta e copie a pasta amfphp dentro da pasta do projeto. Aps esta operao, teremos algo como a janela abaixo.

Se voc for no Flex ir ver que apareceu mais uma pasta em seu projeto. Isso mesmo, a ferramenta atualiza automaticamente as pastas em seu diretrio. Podemos utilizar este mesmo processo quando quisermos inserir uma figura em nossa aplicao.

Agora devemos trocar nosso projeto de pasta para podermos configur-lo e forma correta. Iremos encima da pasta do projeto com boto direito e selecionaremos excluir, porm no esquea de colocar (dont delete content folder) significa que no podemos apagar o contedo de nossa pasta, iremos apenas desvincular o projeto da ferramenta, mudar a pasta de diretrio. Vamos mudar a pasta do diretrio atual para o diretrio c:\wamp\www\seuProjeto (onde seu projeto o nome da pasta do seu projeto (no meu exemplo ficaria c:\wamp\www\novoProjeto). Iremos agora ao Flex, e criamos um novo projeto, deixe sem a seleo de Use default location, e usem a localizao do projeto onde se encontra a pasta do seu projeto. Selecionem Application server type como PHP conforme mostrado abaixo.

Ao selecionar next iremos para outra tela onde devemos configurar o Web root que a pasta raiz onde teremos nosso cdigo e a Root Url que ser o endereo onde

nosso aplicativo ser mostrado. Output Folder deixaremos como bin-debug que a pasta onde ser criado nosso swf(compilado).

Depois das configuraes clicamos em Validate Configuration para ver se tem algum problema com nossas alocaes de nomes. A seguinte mensagem deve aparecer quando tudo estiver ok.

Aps isso clicaremos em next onde ser mostrada uma janela para configurao de local onde teremos nosso arquivo principal e a pasta principal dos arquivos fontes.

Devemos observar se o nosso arquivo novoProjeto.mxml que ser o arquivo principal est mesmo na pasta src para no corrermos o risco de nossa aplicao se perder na leitura dos diretrios, impossibilitando assim a integrao das ferramentas. Visto que ainda temos muitas coisas a se configurar vamos criar uma pasta chamada arquivosphp dentro da pasta c:\wamp\www\novoProjeto\amfphp\services e dentro desta pasta arquivosphp iremos criar um arquivo chamado peagape.php onde ficaro minha funes php.

Iremos editar o arquivo peagape.php criando nele uma classe que ter funes que iremos acessar a partir do Flex.

Para testarmos se nossos servios php esto disponveis podemos acessar o browser do AMFPHP atravs do endereo http://localhost/novoProjeto/amfphp/browser/ . Ao acessar a pgina a ferramenta ir solicitar informaes de gateway. Devemos utilizar as informaes padres, basta clicar em save.

Ao clicarmos em save ir aparecer uma janela onde teremos nossas pastas que esto dentro de services como mostrado abaixo.

Ao expandirmos a pasta arquivosphp iremos encontrar nossa classe peagape, se clicarmos nela uma janela para testes ir abrir ao lado. Para testarmos se nossos servios php esto funcionando corretamente digite seu nome no campo nome e depois pressione Call. Se tudo foi configurado corretamente a funo php retornar o na aba results. No nosso exemplo o nosso retorno uma mensagem parabenizando a conexo com o php. Para aqueles que possuem nomes com assento ex: Joo devem ter percebido que seu nome no apareceu corretamente na tela. Para corrigir este problema devemos utilizar uma funo php para converter os caracteres para o padro de nosso projeto e banco no caso UTF8. Dessa forma devemos em nosso retorno de funo php inserir:

Bom at aqui voc pode estar falando, ainda no vi funcionando de dentro do Flex, isso eu concordo, estamos apenas acessando os servios amfphp para termos certeza que todos esto funcionando para s assim iniciar nossas atividades no

Flex. Se seu projeto no est funcionando corretamente, procure refazer os passos anteriores antes de prosseguir.

PARA SABER MAIS Caso voc no esteja conseguindo ver a janela do browser como esta mostrado acima, verifique se seu arquivo peagape.php no est com espaos em branco fora das tags .

At agora o Flex no conhece os servios disponves, devemos criar um arquivo de configurao para a integrao. No diretrio raiz de seu projeto (no meu exemplo c:\wamp\www\novoProjeto crie um arquivo chamado services-config.xml e insira o seguinte cdigo (voc pode criar pelo bloco de notas mesmo, s no esquea de salvar com a extenso XML.

Se seu projeto tiver outro nome que no seja novoProjeto altere a parte do arquivo que esta escrito novoProjeto para o nome de seu projeto. Agora vamos ao Flex, clique com boto direito encima do projeto properties Flex Compiler, e vamos preencher em Additional compliler arguments: -locale en_US -services "services-config.xml". Isso far com que o Flex encontre o arquivo services o qual indica onde esto os servios PHP.

Vamos criar o cdigo para gerar nossa comunicao. Primeiramente crie um TextInput com o nome de campoNome o qual iremos interagir com o php enviando o nome para o php e obtendo uma resposta dele. Devemos antes de continuar criar um objeto remoto que ser responsvel pela transio de dados do Flex para o PHP e vice versa.

Este objeto remoto recebe o identificador de objetoMapeado a propriedade destination dele deve ser amfphp indicando qual o servio e o source indica qual a classe que o amfphp ir buscar o mtodo abaixo escrito (no caso o mtodo testeConexao do PHP) O method criado diz ao Flex qual o nome do mtodo que ele ir se comunicar e o result indica onde o Flex deve colocar o resultado que o php enviar, no exemplo

assim ele vai pegar o resultado e chamar o mtodo resultadoTesteConexao que recebe um objeto vindo do PHP que chamamos de event. Os arguments so os argumentos que transitaro entre as linguagens, pode ser utilizado vrios argumentos, mas para fins didticos foi escolhido trabalhar somente com o argumento dados, que um objeto que recebe toda a informao e envia. Depois de criarmos o objeto vamos criar uma funo chamada chamarTesteConexao o qual passaremos um texto a ele que enviaremos ao php.

Este mtodo criado em meu ActionScript recebe um texto, cria uma varivel do tipo Object chamada objDados, atribumos a este objDados um nome e damos o valor deste nome o contedo da varivel texto. Ex: seu eu digitei no meu campoNome Maria a varivel objDados.nome receber o valor Maria. Agora devemos passar nosso objeto criado na funo do Flex para o objeto remoto chamado de objetoMapeado. Na ultima linha estamos chamando o envio para o mtodo testeConexao do PHP. Temos que criar a funo que receber os dados do PHP. A funo deve ter o nome colocado no result do mtodo do objetoMapeado que no nosso caso resultadoTesteConexao.

Iremos capturar o resultado e mostrar em um Alert. Devemos criar um boto que chama o mtodo chamarTesteConexao. Este mtodo chamarTesteConexao deve receber o contedo do campoNome (nosso TextInput).

Com isso teremos nosso primeiro programa que faz a conversa entre Flex e PHP. Faa o teste, rode seu programa, escreva seu nome e veja o que aparece na tela.

LINK: Acesse o site abaixo e tenha mais informaes sobre o MySql

SEO 2: Princpios bsicos da programao SQL

MySql

Antes um pouco de comearmos a integrar nosso aplicativo com o banco de dados, iremos ver alguns comandos bsicos em SQL que utilizaremos quando estivermos trabalhado com banco de dados. Voc pode estar se perguntando o que vem a ser SQL? Primeiro de tudo devemos conhecer a linguagem de comunicao que utilizaremos em nosso banco. O SQL (Structured Query Language) uma linguagem padro para acessar sistemas de gerenciamento de banco de dados relacionais. Esta utilizada para armazenar e recuperar dados para e a partir de um banco. Inserindo Para inserir informaes em um banco de dados utilizamos o comando INSERT cuja sintaxe : Onde tabela o nome da tabela que iremos trabalhar, podemos indicar ou no as colunas que iremos preencher, em algum caso especial poderemos escolher preencher somente uma ou duas colunas de uma tabela de cem colunas. E values so os valores que essas colunas recebero na respectiva ordem.

Buscando Para recuperar informaes podemos selecionar linhas que correspondam a alguns critrios definidos em uma ou mais tabelas podendo cruzar informaes de vrios lugares para obter a informao que se necessita. A sintaxe bsica de um SELECT :

SAIBA MAIS As variaes e combinaes deste comando so imensas, para saber mais voc pode acessar o site:

Apesar do comando SELECT ter inmeras opes de requisies, nos deixando livres para escolher o que solicitar, como ordenar e limitar a busca, o que mais utilizaremos sero as buscas mais simples do tipo: No exemplo acima iremos selecionar todos os nomes da tabela pessoa onde o campo idade for igual a 20. Podemos trabalhar com mltiplas tabelas.

Veremos todas as vendas feitas para a cliente Maria da Silva. Atualizando Todos sabemos que informaes mudam, desde um nmero de telefone at informaes de contas bancrias. Para atualizar nosso banco de dados podemos utilizar o comando UPDATE cuja sintaxe :

Onde podemos ter: No ultimo exemplo estamos fazendo a atualizao da tabela usurios alterando o nome e o email do usurio cujo ID 348. estamos

Removendo Para remover informaes basta utilizar o comando DELETE cuja sintaxe :

Podemos apagar um usurio cujo id 348.

Devemos tomar muito cuidado com o comando DELETE, pois qualquer descuido corremos o risco de apagar muita informao ao mesmo tempo, como o caso do exemplo abaixo. Se executarmos o comando estaremos apagando todas as linhas da tabela cliente. Existem tambm existem alguns outros comandos que devemos tomar cuidado ao executar como o caso do:

e tambm do: Onde apagamos toda a informao da tabela de no ultimo comando apagamos a base de dados toda.

Aprofundando o conhecimentoVeremos no texto a seguir uma discusso mais aprofundada sobre os comandos SQL mais utilizados. Observe que os comandos SQL podem ser utilizados de diversas maneiras, porm sempre devemos respeitar a sintaxe principal.

LIVRO Sistemas de Banco de Dados ELMASRI - NAVATHE Tpicos 8.5.9, 8.6 e tabela 8.2 Pginas 175, 176, 177, 178, 179 e 180 Concluindo-se a leitura podemos perceber que a linguagem SQL muito extensa e se fossemos falar a fundo neste livro sobre o assunto precisaramos de muitas

pginas a mais. Por isso foi apresentado no texto acima uma sntese do que iremos utilizar para integrar nossas ferramentas de programao e criar nosso aplicativo web.

QUESTO PARA REFLEXO As informaes guardadas no banco de dados ficam dentro de um arquivo especfico?

PARA CONCLUIR O ESTUDO DA UNIDADEFoi possvel notar que cada linguagem tem sua particularidade especfica, com diferenas entre comandos e formas de solicitar informaes ao computador.No caso do SQL podemos notar que o que foi mostrado apenas o bsico, sabemos que para um bom programa de escopo comercial precisaremos utilizar comandos mais complexos para conseguirmos atender as necessidade impostas por nossos exigentes usurios.

RESUMONesta unidade vimos conceitos de integrao do PHP com o Flex, e suas principais configuraes. Aprendemos tambm quais os principais objetos para comunicao destas duas poderosas linguagens alm de estudarmos tambm conceitos introdutrios da linguagem SQL muito utilizada atualmente para desenvolvimento web. Foi possvel conhecer sua estrutura em uma abordagem geral, conhecendo sua sintaxe. Vimos que existem muitas formas de trabalhar com banco de dados inserindo, excluindo, buscando e alterando informaes nas bases de dados, tudo isso facilita a integrao dos cdigos e no entendimento geral do aplicativo final gerado. Na prximas unidade iremos estudar formas de agregar este conhecimento adquirido em nossos programas. Com isso poderemos focar mais nossos exemplos em resoluo de problemas cotidianos. Para avaliar os conhecimentos por voc adquiridos sugiro que resolva os problemas abaixo propostos.

Atividades de aprendizagem:

1) Crie um mtodo no php que retorne as informaes de nome, idade, endereo, email de uma pessoa. Mostre essas informaes em um formulrio no Flex. 2) Crie um comand