Rich Forms com ColdFusion

Olá pessoal, tudo bem com vocês ?
é muito bom quando sobra tempo para escrever colunas para o MXSTUDIO, fico feliz em poder ajudar as pessoas com minhas colunas, mesmo que de uma pequena forma.
Hoje vamos falar sobre um assunto bem interessante, Rich Forms utilizando apenas ColdFusion, isso mesmo vamos construir um formulario rico sem a ajuda do nosso querido Flash.

Primeiramente gostaria de deixar claro que pesquisei muito sobre esse assunto na internet e abaixo segue alguns links que me ajudaram bastante na criação dessa coluna:

AS Fusion

- Sem dúvida esse foi um dos blogs que eu mais pesquisei

CFForm.com

- Boas dicas sobre o formato XML e Flash

Macromedia Devnet

- Nesse tutorial o autor disponibiliza uma extenção para criar FlashForms, indico essa para pessoas que não gostam de muito codigo.

Bom pessoal essas foram minhas bases de estudo para esse assunto, porém em nenhum desses sites você ira encontrar um codigo como o meu, pois esse exemplo que vou criar aqui hoje é bem básico, e é baseado na minha ultima coluna aqui no MXSTUDIO vejam no link abaixo:

CFINSERT – Lucas Marçal - é nessesário que você leia essa matéria para entender a matéria atual.

exclua todos os codigos HTML que estão dentro dele e vamos criar nosso formulário:

<cfform action=”" method=”post” name=”formulario” format=”flash” width=”777″>

Action = ação do formulario, deixe esse atributo vazio.

Method = Post ou Get, já conhecidos do HTML

Name = Nome do formulário

Format = formato do formulário, que pode ser HTML, Flash, XML

width= Largura

<cfformgroup name=”Caixa” label=”Adciona usuários” type=”panel” width=”500″>

cfformgroup name = Nome da caixa de componentes

type = Tipo de caixa de componentes

width = largura da caixa de componete.

<cfinput name=”nome” type=”text” id=”nome” label=”Nome” width=”300″ tooltip=”Digite seu Nome”>

cfinput name= Nome campo Input

type = Tipo campo Input

label = Texto de Display

width = largura campo

tooltipo = Legenda que aparecerá quando o mouse estiver em cima do campo.

Crie mais 3 campos como esse, que deverão se chamar email, telefone e site, como no exemplo da minha coluna sobre cfinsert

E por fim vamos colocar um botão para dar ação a esse formulario:

<cfinput type=”submit” name=”Submit” value=”Cadastrar”>

e vamos fechar a tag cfformgrop e o cfform

</cfformgroup></cfform>

Nesse momento nosso codigo deve estar dessa forma:

<cfform action=”" method=”post” name=”formulario” format=”flash” width=”777″>
<cfformgroup name=”Caixa” label=”Adciona usuários” type=”panel” width=”500″ >
<cfinput name=”nome” type=”text” id=”nome” label=”Nome” width=”300″ tooltip=”eu”>
<cfinput name=”email” type=”text” id=”email” label=”Email” width=”300″>
<cfinput name=”site” type=”text” id=”site” label=”Site” width=”300″>
<cfinput name=”telefone” type=”text” id=”telefone” label=”Telefone” width=”300″>
<cfinput type=”submit” name=”Submit” value=”Cadastrar”>
</cfformgroup><cfform>

<cfquery name=”q_agenda” datasource=”nome_da_sua_conexao”>
SELECT *
FROM agenda
</cfquery>

Salve o documento e execute para ver o resultado.

Para finalizar vamos adicionar os dados do formulário ao banco, utilizando o cfinsert e depois vamos listar esses dados com o cfgrid, que funciona como o DataGrid do Flahs.
Antes da tag de fechamento do form </cfform> digite as seguintes linhas:

<cfif IsDefined(“FORM.nome”)>

Se o campo de formulário chamdo “NOME” for verdadeiro

<cfinsert datasource=”Nome_sua_conexao” tablename=”agenda” formfields=”nome,email,site,telefone”>

Vamos inserir os dados do formulário no banco de dados utilizando cfinsert

<cfgrid name=”ListaUsuarios” query=”q_agenda” ” height=”440″>

Agora estamos adcionando um cfgrid, que funciona como o DataGrid do Flash os atributos são:

cfgrid Name = Nome do cfgrid

query = nome da query ( conjunto de registros ) que criamos anteriormente

height = altura do cfgrid

Agora devemos definir os campos que serão exibidos no nosso cfgrid

<cfgridcolumn name=”nome” header=”Nome”>
<cfgridcolumn name=”email” header=”Email”>
<cfgridcolumn name=”site” header=”Site”>
<cfgridcolumn name=”telefone” header=”Telefone”>

os atributos são:

cfgridcolum name = nome do campo que esta no banco de dados.

header = cabeçalho

agora vamos fechar o a tag cfgrid e vamos fechar também a tag cfif

</cfgrid> </cfif>

nosso codigo deve estar assim:

<cfform action=”" method=”post” name=”formulario” format=”flash” width=”777″>
<cfformgroup name=”Caixa” label=”Adciona usuários” type=”panel” width=”500″ >
<cfinput name=”nome” type=”text” id=”nome” label=”Nome” width=”300″ tooltip=”eu”>
<cfinput name=”email” type=”text” id=”email” label=”Email” width=”300″>
<cfinput name=”site” type=”text” id=”site” label=”Site” width=”300″>
<cfinput name=”telefone” type=”text” id=”telefone” label=”Telefone” width=”300″>
<center> <cfinput type=”submit” name=”Submit” value=”Cadastrar”></center>
</cfformgroup>
<cfquery name=”q_agenda” datasource=”Nome_sua_Conexao”>
SELECT *
FROM agenda
</cfquery>

<cfif IsDefined(“FORM.nome”)>

<cfinsert datasource=”Nome_sua_conexao” tablename=”agenda” formfields=”nome,email,site,telefone”>
<cfgrid name=”ListaUsuarios” query=”q_agenda” rowheaders=”no” height=”440″>
<cfgridcolumn name=”nome” header=”Nome”>
<cfgridcolumn name=”email” header=”Email”>
<cfgridcolumn name=”site” header=”Site”>
<cfgridcolumn name=”telefone” header=”Telefone”>
</cfgrid>
</cfif>
</cfform>