UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Antes de começar com J2EE

U N I PA C – A R A G U A R IC A M P U S – I X

P R O F. E V E R T O N H I P Ó L I T O D E F R E I T A S

Antes de começar com J2EE

Agenda

IntroduçãoHTML com formulárioFolha de estiloJavascriptDHTML (Javascript e folha de estilo)

Introdução

As página de internet são utilizadas para apresentação de produtos e descrição de serviços, entre outros objetivos.

A linguagem utilizada é a HTML(Linguagem de marcação de hipertexto). Quando utilizamos HTML puro, ou seja, somente

HTML, as nossas páginas se tornam estáticas, isto é, sem mudanças, sem alterações. Isto acontece porque o HTML puro não permite criação

de páginas dinâmicas, que se alteram de acordo com alguma característica qualquer.

Introdução

Para permitir que as páginas sejam dinâmicas, diversas outras tecnologias devem ser utilizadas com as mesmas. Alguns exemplos de página dinâmica seriam: Dependendo da cidade do usuário a página terá seu

layout totalmente diferente. Dependendo do horário de acesso, a página altera

suas cores de exibição. Dependendo do usuário que está acessando, a página

apresenta menus diferentes.

Introdução

Para permitir que suas páginas fiquem dinâmicas, algumas tecnologias podem ser utilizadas, tais como: Javascript CSS

DHTML (Javascript com CSS) Servlets.

Antes de tudo ...

Vamos entender como as coisas funcionam: HTML

A Linguagem HTML serve para apresentar a estrutura da página e seus conteúdos.

CSS – folha de estilos A folha de estilos permite que seu site ganhe “vida”, ela trabalha

com a formatação do site, imagens, fundos e cores. Javascript

A linguagem javascript permite a validação dos campos de formulários bem como alteração de layout (Classes em CSS) em tempo de execução (no lado cliente).

Servlet Os servlets são os programas desenvolvidos em Java que rodam

no lado do servidor. Eles são responsáveis por acessar banco de dados, tratar as regras dos negócios, etc....

Papel do HTML e CSS

HTMLFolha de estilo

Papel do Javascript

HTMLFolha de estiloJavascript

Papel do Servlet

HTMLFolha de estiloBanco de dadosServlet

Papel do Servlet – acesso do usuário “joao”


Papel do Servlet – acesso do usuário “maria”


HTML - Formulário

Para permitir uma maior interação entre “sistemas computacionais” e os seus usuários, é necessário a existência de mecanismos de entrada que permita o computador identificar o que seus usuários querem, quais ações a serem executadas, etc...

O formulário em HTML é um meio do usuário entrar com informações para um sistema.

Exemplo de formulário HTML

Como ocorre o tratamento dos dados no formulário?

Primeiramente, a página com o formulário é carregada. Após o preenchimento do formulário, o javascript valida os

campos que são obrigatórios. Caso estejam preenchidos, envia os dados dos campos para um servidor

tratar as informações. Caso campos obrigatórios estejam em branco, emitir uma mensagem de

erro. Após o javascript validar os campos, os dados do formulário são

enviados para o servidor que irá tratá-los. A tarefa de tratar os dados consta na verificação se os campos obrigatórios

foram validados, se os valores esperados foram informados, armazenamento dos dados no banco de dados, etc...

Após o tratamento dos dados, as informações são armazenadas no banco de dados e uma mensagem de confirmação é retornada pelo servidor. Continua o processo normalmente .....

Tag Form

Os formulários são delimitados pela Tag<FORM>… </FORM>. Esta Tag permite agrupar vários elementos de formulário (botões,

campos de texto, campos de seleção,…) e possui os atributos obrigatórios: NAME

Indica o nome que identifica o elemento formulário na página. Um id pode ser especificado, ou não. (como se fosse um apelido)

METHOD indica sob qual método de envio dos dados (digitados no formulário) será

utilizado:• “POST” os dados são enviados em pacotes.• “GET” os dados são enviados e codificados na URL.

ACTION indica o endereço para onde os dados serão enviados. mailto:adresse.email@machine

• Permite abrir o programa de email correspondente.

mailto:adresse.email@machine

Lembrete

Atenção, todos os elementos (tag) em uma página HTML pode possuir o atributo id para definir um apelido.

<html><head><title>Untitled Document</title></head><body id="paginaCliente"><table id="dadosPessoa"><tr>

<td id="columnName"> Maria Helena</td><td id="columnCor"> Morena</td>

</tr></table></body></html>

Exemplo do uso da tag Form

Sintaxe da tag form<FORM METHOD="POST" ou "GET" ACTION="url“

NAME=“nomeFormulario”>... </FORM>

Exemplo<FORM METHOD=“POST” ACTION=

mailto:[email protected] name=“formCli”> ...</FORM>

mailto:[email protected]

Por dentro da tag Form

É possível inserir qualquer elemento HTML básico numa tag FORM (textos, botões, quadros, relações,…) mas, sobretudo, é interessante inserir elementos interativos.

Estes elementos interativos são : Campos INPUT ,TEXTAREA e SELECT

Tag Form : campo input

A Tag INPUT é a tag essencial dos formulários, pois permite criar um bom número de elementos “interativos”.

A sintaxe desta tag é a seguinte: <INPUT type=“tipo" value=“valor padrão"

name=“nome do elemento"> Atributo name é essencial pois ele permite a manipulação

do campo nos javascript ou servlets (linguagem script). Atributo value permite definir um valor padrão para o

campo. O atributo type permite definir o tipo de elemento que

será exibido no form. A seguir veremos os tipos possíveis.

Form: input: type=“tipos”

Text trata-se de um campo que permite receber uma linha de texto. A dimensão do campo pode ser definida através do atributo size

e a quantidade máxima do texto (caracteres) pode ser definido através do atributo maxlength.

Exemplo

<form id="formCLiente" name="formCli" action="" method="post">Nome do cliente

<input type="text" name="campoNome" value="<digite aqui>" size="40" maxlength="30"></form>

No lado do servidor:Variável chama “campoNome”Seu conteúdo será o valor digitado no campo


hidden trata-se de um campo escondido.

Ele não está visível no formulário, porém, será enviado para o servidor.

Permite definir um valor fixo (que não será informado pelo usuário) para uma variável.

Exemplo

No lado do servidor:Variável chama “faculdade”Seu conteúdo será ‘unipac araguari’

<form id="formCLiente" name="formCli" action="" method="post"><input type="hidden" name="faculdade" value="unipac araguari">

</form>


Password trata-se de um campo de texto utilizado para digitar

senhas. A medida que o usuário digita alguma senha, o mesmo

apresenta asteriscos ao invés do caracter que foi pressionado. Exemplo

No lado do servidor:Variável chama “senha”Seu conteúdo será o valor digitado no campo

<form id="formCLiente" name="formCli" action="" method="post">Informe a senha de acesso ao aluno WEB:

<input type="password" name="senha" size="20" maxlength="20"> </form>


Checkbox Trata-se de um campo de seleção, ativo (checked) ou

inativo(unchecked). Quando ativo, assume o valor que estiver no campo value. Quando inativo, este campos se torna inexistente, portanto não

será enviado para página que trata os dados. Mais de um campo poderá ser selecionado (cada campo

possuirá o mesmo nome, porém, valores “value” diferentes). Quando ativo, no momento que os dados são enviados para o

servidor, para serem tratados, o formato name/value é enviado. O servidor acessa o valor (value) deste campo através do seu nome

(name) O servidor recebera um array (identificado pelo name)

contendo os valores dos campos que foram selecionados.


Exemplo de Checkbox <form id="formCLiente" name="formCli" action="" method="post">Selecione as disciplinas que cursa:

<input type="checkbox" name="disciplina" value="Portugues" checked="checked"> Português

<input type="checkbox" name="disciplina" value="Matemática"> Matemática<input type="checkbox" name="disciplina" value=“111"> Programação

</form>

No lado do servidor:Variável chama “disciplina”Seu conteúdo será [Portugues, 111]

Atenção: o atributo “checked” traz o elemento selecionado por padrão.


Radio Trata-se de um campo de seleção.

Quando selecionado, assume o valor que estiver no campo value.

Poderá ter mais de uma opção de seleção, porém, somente uma opção pode ser selecionada (cada campo possuirá o mesmo nome, porém, valores “value” diferentes).

Quando selecionado, no momento que os dados são enviados para o servidor, para serem tratados, o formato name/value é enviado. O servidor acessa o valor (value) deste campo através do seu

nome (name) O servidor recebera uma única variável identificada pelo

“name” contendo o valor do campo que foi selecionado.


Exemplo Radio

<form id="formCLiente" name="formCli" action="" method="post">Selecione o seu sexo:

<input type="radio" name="sexo" value="M" checked="checked"> Masculino<input type="radio" name="sexo" value="Feminino" > Feminino

</form>

No lado do servidor:Variável chama “sexo”Seu conteúdo será M

Atenção: o atributo “checked” traz o elemento selecionado por padrão.


Submit Exibe o botão responsável por enviar os dados do

formulário para o servidor que irá tratá-la. O botão submit dispara o evento responsável por enviar

os dados que foram digitados no formulário para o servidor que irá tratá-los.

<form id="formCLiente" name="formCli" action="" method="post"><input type="submit" name="enviarDados" value="Cadastrar

cliente“checked="checked" ></form>

Atenção: o atributo “checked” indica que: Se a tecla <ENTER> for pressionada, o botãoserá ativado.


Reset Este campo permite que os dados do formulário

retornem ao seus valores iniciais.

<form id="formCLiente" name="formCli" action="" method="post"><input type="reset" name="limpar" value="Limpar campos">

</form>


Button Botões do tipo button não têm comportamento pré-

definido, sendo usados apenas em scripts no lado cliente.

<form id="formCLiente" name="formCli" action="" method="post"><input type=“button" name=“exibirSenha” value=“Mostrar senha" >

</form>

Atenção: o botão está associados a eventos no lado do javascript.


File O campo de entrada de arquivo permite ao usuário

especificar um arquivo local cujo conteúdo será enviado junto com o formulário submetido, como upload. Para isso, o elemento form do formulário que o contém

deve especificar os atributos method="POST" e enctype="multipart/form-data".

<form id="formCLiente" name="formCli" action="" method="post"><input type="file" name="arquivo“ />

</form>

Form:select

A tag select exibe o campo de seleção baseado em uma lista previamente definida.

Sintaxe:<select name=“nome” size=“10”>

Quem define o nome (name) do controle é o elemento select, enquanto cada valor (value) é dado por um option.

O rótulo de cada opção é dado pelo texto entre as tags de abre e fecha option.

O atributo size define o número de opções (linhas) exibidas da lista. A exibição da barra de rolagem é automática e fica a cargo do

browser. O atributo selected define uma opção pré-selecionada (inicialmente

"ligada"). É recomendado sempre definir explicitamente o que estará pré-selecionado, para evitar ambigüidade de comportamento em diferentes browsers.

Form:select

Exemplo select<form id="formCLiente" name="formCli" action="" method="post"><select name="cidade" size="1"> <option value="1" selected="selected">Ipatinga</option> <option value="Udia">Uberlândia</option> <option value="araguari">Araguari</option> <option value="SP">São Paulo</option></select></form>

<form id="formCLiente" name="formCli" action="" method="post"><select name="cidade" size="1"> <option value="1" selected="selected">Ipatinga</option> <option value="Udia">Uberlândia</option> <option value="araguari">Araguari</option> <option value="SP">São Paulo</option></select></form>’

A lista com o atributo multiple (multiple="multiple") pode ter mais de uma opção selecionada, normalmente pressionando-se CONTROL e/ou SHIFT ao selecionar outro elemento.

Form:textarea

O controle textarea é um campo de texto multi-linha. Os atributos rows e cols definem o número de linhas de altura e o de

"caracteres" de largura, respectivamente. O atributo wrap define se a mudança de linha será automática durante

a digitação ("on"), ou somente quando for pressionado ENTER ("off").

Todos os elementos do formulário podem ter atributo:- readonly (readonly="readonly" somente leitura, o elemento é enviado para o servidor) - disabled (disabled="disabled" desabilitado, o elemento não será enviado para o servidor).

<form id="formCLiente" name="formCli" action="" method="post">Observações:<textarea name="parea" rows="5" cols="60" wrap="off"></form>

Referências bibliográficas

http://pt.kioskea.net/contents/html/htmlform.php3

http://www.mhavila.com.br/topicos/web/controles.html






Trabalho

Descreva os conceitos e defina exemplos que apresente-os:

Documents

UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Antes de começar com J2EE