Formulários com validação

Em nosso formulário iremos utilizar sete elementos para o envio dos dados. Serão
eles:

01.   Campo de texto para o nome
02.   Campo de texto para o email
03.   Campo de texto para a cidade
04.   Campo de texto para a mensagem
05.   Um select com a lista dos estados
06.   O botão “Apagar”
07.   Botão “Enviar”

Abaixo você confere um exemplo de como ficará nosso formulário ao concluirmos:




Abra o arquivo “form_contato.fla” em seu Flash (só irá funcionar no Flash MX 2004
ou Flash 8. Se tem uma versão mais antiga, sugiro seriamente que se atualize o
quanto antes) e vamos primeiramente à layer (camada) “form”.

Crie quatro campos do tipo input text, um para cada título do formulário (nome, email,
cidade e mensagem), selecionando a ferramenta de texto, clicando no stage e, após
criar, vá até a barra “Properties” (Propriedades) e mude de “Static Text” para “Input
Text”, conforme a figura abaixo:




Feito isso, vamos atribuir um nome de instância a cada um dos input texts criados.
Selecione o campo referente ao nome, na mesma barra Properties, digite “nome_txt” –
sem aspas - no campo <Instance Name> (nome de instância), em seguida digite
“var_nome” – sem aspas - no campo “Var”, conforme a figura abaixo:




Repita esse procedimento com cada um dos campos de texto criados, alterando
apenas seus nomes, conforme a lista abaixo:

E-mail
Campo Instance Name: email_txt
Campo Var: var_email
Cidade
Campo Instance Name: cidade_txt
Campo Var: var_cidade
Mensagem
Campo Instance Name: mensagem_txt
Campo Var: var_mensagem

Agora criaremos o campo select, que conterá a lista de Estados. Para economizar
nosso tempo, apenas criaremos a lista com dois estados “SP” e “ES”, mas você poderá
colocar todos depois. Abra a Components (components) pressionando “Ctrl + F7”.
Em seguida, em User Interface, dê um duplo clique sobre o componente “ComboBox”,
como mostra a figura abaixo:
Posicione-o ao lado direito do campo referente à Cidade e diminua seu tamanho, para
que fique com espaço para dois digitos, 50 pixels de width (largura) é o ideal.

Selecione o componente que acabamos de criar, digite “estados_cb” – sem aspas - no
campo <Instance Name>. Em seguida, clique sobre a opção “Parameters” e depois dê
um duplo clique sobre a opção “labels”.

Na janela que se abrir, clique no ícone “+” duas vezes e em cada linha criada, digite as
iniciais de um Estado brasileiro. No meu caso, digitei “SP” e “ES” – sem aspas.




Vale lembrar que a opção que ficar na primeira linha será a padrão, que vai aparecer
automaticamente.

Agora vamos criar os dois últimos objetos do nosso formulário, que são os botões
“Enviar” e “Apagar”. Com a ferramenta texto, digite a palavra “Enviar”, depois
“Apagar” – ambas sem aspas. Certifique-se de que esses textos criados não sejam do
tipo “Input” e sim do tipo “Static”.
Selecione a palavra “Enviar” e pressione “F8” para abrirmos a janela de criação de
símbolos. Digite “enviar_btn” no campo “Name” e em “Type” escolha a opção “Button”,
conforme a figura abaixo:




Feito isso, no campo <Instance Name> da barra “Properties”, digite novamente
“enviar_btn”.




Faça o mesmo com a palavra “Apagar”, apenas trocando os nomes para “apagar_btn”.

O principal está pronto, vamos agora para a etapa de validação dos dados informados
pelo usuário.

Etapa de validação

Com a ferramenta de texto, crie um Dinamic Text (texto dinâmico), criando um texto
no stage e mudando na barra “Properties” de “Static Text” para “Dinamic Text”.
Selecione o campo que acabamos de criar e no campo “Var” da barra “Properties”.
Digite “var_status” – sem aspas.

Feito isso, selecione o primeiro frame da layer (camada) “Actionscript” e pressione “F9”
para abrirmos a paleta “Actions”. Em seguida digite:

#include “Acoes.as”

Essa linha importará as ações digitadas no arquivo “Acoes.as”. Agora, abra o arquivo
“Acoes.as” no seu Flash para conferir a programação, cada etapa está explicada com
comentários.

A página “email.asp” é a responsável por receber os dados e enviá-los para o e-mail
informado. Abra-a e mude o endereço de e-mail e o nome do recipiente da mensagem.

E vale lembrar que essa página só funcionará se estiver hospedada em um servidor
que trabalhe com ASP. Para outras tecnologias, como PHP, JSP, CFM, será necessário
desenvolver uma página semelhante a essa, que receba as variáveis da maneira
correta.

07 formulários com validação - Flash 8

  • 1.
    Formulários com validação Emnosso formulário iremos utilizar sete elementos para o envio dos dados. Serão eles: 01. Campo de texto para o nome 02. Campo de texto para o email 03. Campo de texto para a cidade 04. Campo de texto para a mensagem 05. Um select com a lista dos estados 06. O botão “Apagar” 07. Botão “Enviar” Abaixo você confere um exemplo de como ficará nosso formulário ao concluirmos: Abra o arquivo “form_contato.fla” em seu Flash (só irá funcionar no Flash MX 2004 ou Flash 8. Se tem uma versão mais antiga, sugiro seriamente que se atualize o quanto antes) e vamos primeiramente à layer (camada) “form”. Crie quatro campos do tipo input text, um para cada título do formulário (nome, email, cidade e mensagem), selecionando a ferramenta de texto, clicando no stage e, após criar, vá até a barra “Properties” (Propriedades) e mude de “Static Text” para “Input Text”, conforme a figura abaixo: Feito isso, vamos atribuir um nome de instância a cada um dos input texts criados.
  • 2.
    Selecione o camporeferente ao nome, na mesma barra Properties, digite “nome_txt” – sem aspas - no campo <Instance Name> (nome de instância), em seguida digite “var_nome” – sem aspas - no campo “Var”, conforme a figura abaixo: Repita esse procedimento com cada um dos campos de texto criados, alterando apenas seus nomes, conforme a lista abaixo: E-mail Campo Instance Name: email_txt Campo Var: var_email Cidade Campo Instance Name: cidade_txt Campo Var: var_cidade Mensagem Campo Instance Name: mensagem_txt Campo Var: var_mensagem Agora criaremos o campo select, que conterá a lista de Estados. Para economizar nosso tempo, apenas criaremos a lista com dois estados “SP” e “ES”, mas você poderá colocar todos depois. Abra a Components (components) pressionando “Ctrl + F7”. Em seguida, em User Interface, dê um duplo clique sobre o componente “ComboBox”, como mostra a figura abaixo:
  • 3.
    Posicione-o ao ladodireito do campo referente à Cidade e diminua seu tamanho, para que fique com espaço para dois digitos, 50 pixels de width (largura) é o ideal. Selecione o componente que acabamos de criar, digite “estados_cb” – sem aspas - no campo <Instance Name>. Em seguida, clique sobre a opção “Parameters” e depois dê um duplo clique sobre a opção “labels”. Na janela que se abrir, clique no ícone “+” duas vezes e em cada linha criada, digite as iniciais de um Estado brasileiro. No meu caso, digitei “SP” e “ES” – sem aspas. Vale lembrar que a opção que ficar na primeira linha será a padrão, que vai aparecer automaticamente. Agora vamos criar os dois últimos objetos do nosso formulário, que são os botões “Enviar” e “Apagar”. Com a ferramenta texto, digite a palavra “Enviar”, depois “Apagar” – ambas sem aspas. Certifique-se de que esses textos criados não sejam do tipo “Input” e sim do tipo “Static”.
  • 4.
    Selecione a palavra“Enviar” e pressione “F8” para abrirmos a janela de criação de símbolos. Digite “enviar_btn” no campo “Name” e em “Type” escolha a opção “Button”, conforme a figura abaixo: Feito isso, no campo <Instance Name> da barra “Properties”, digite novamente “enviar_btn”. Faça o mesmo com a palavra “Apagar”, apenas trocando os nomes para “apagar_btn”. O principal está pronto, vamos agora para a etapa de validação dos dados informados pelo usuário. Etapa de validação Com a ferramenta de texto, crie um Dinamic Text (texto dinâmico), criando um texto no stage e mudando na barra “Properties” de “Static Text” para “Dinamic Text”.
  • 5.
    Selecione o campoque acabamos de criar e no campo “Var” da barra “Properties”. Digite “var_status” – sem aspas. Feito isso, selecione o primeiro frame da layer (camada) “Actionscript” e pressione “F9” para abrirmos a paleta “Actions”. Em seguida digite: #include “Acoes.as” Essa linha importará as ações digitadas no arquivo “Acoes.as”. Agora, abra o arquivo “Acoes.as” no seu Flash para conferir a programação, cada etapa está explicada com comentários. A página “email.asp” é a responsável por receber os dados e enviá-los para o e-mail informado. Abra-a e mude o endereço de e-mail e o nome do recipiente da mensagem. E vale lembrar que essa página só funcionará se estiver hospedada em um servidor que trabalhe com ASP. Para outras tecnologias, como PHP, JSP, CFM, será necessário desenvolver uma página semelhante a essa, que receba as variáveis da maneira correta.