Criar Teclado alfa numerico para sites

por gunz Ter 12 Jan 2010 - 2:14

Pergunta do aluno: Como criar um teclado numérico para ser usado numa página web?

Resposta: Você pode usar o java e criar um applet para isso.

Criar Teclado alfa numerico para sites Wm-21-05-2008pic01

Criar Teclado alfa numerico para sites Wm-21-05-2008pic01

Figura 1 - Applet executando no Internet Explorer 6

Applet é um aplicativo, escrito em java, que estende java.applet.Applet e que não é executado diretamente. Ele deve ser inserido dentro de outra estrutura, como uma página HTML, por exemplo.

A classe Applet tem os seguintes membros (principais):

· init - contém o código que é executado quando o aplicativo é carregado na página;
· getAppletInfo - retorna uma String com informações sobre o Applet;
· getCodeBase - retorna uma java.net.URL com o endereço da pasta onde o aplicativo reside;
· getDocumentBase - retorna uma java.net.URL com o endereço da página onde o aplicativo está inserido;
· getParameter - retorna o conteúdo de um parâmetro passado do HTML, usando a tag ;
· start - executado pelo navegador ou por um visualizador de applet, para iniciar a execução ao aplicativo;
· stop - executado pelo navegador ou por um visualizador de applet, para interromper a execução.

Para passar um valor do applet para o HTML, precisei criar um objeto da classe netscape.javascript.JSObject.

O código do applet Teclado é:

import java.applet.Applet;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.awt.Button;
import java.awt.Graphics;
import netscape.javascript.JSObject;

public class Teclado extends Applet{

public String conteudo = "";
public String formulario;
public String campo;
public JSObject campoDoFormularioHTML;

public void init(){
formulario = getParameter("formulario");
campo = getParameter("campo");
ActionListener trataEventos = new ActionListener(){
public void actionPerformed(java.awt.event.ActionEvent e){
conteudo += e.getActionCommand();
campoDoFormularioHTML.setMember("value", "" + conteudo);
}
};

Button b7 = new Button("7");
add(b7);
b7.addActionListener(trataEventos);

Button b8 = new Button("8");
add(b8);
b8.addActionListener(trataEventos);

Button b9 = new Button("9");
add(b9);
b9.addActionListener(trataEventos);

Button b4 = new Button("4");
add(b4);
b4.addActionListener(trataEventos);

Button b5 = new Button("5");
add(b5);
b5.addActionListener(trataEventos);

Button b6 = new Button("6");
add(b6);
b6.addActionListener(trataEventos);

Button b1 = new Button("1");
add(b1);
b1.addActionListener(trataEventos);

Button b2 = new Button("2");
add(b2);
b2.addActionListener(trataEventos);

Button b3 = new Button("3");
add(b3);
b3.addActionListener(trataEventos);

Button b0 = new Button("0");
add(b0);
b0.addActionListener(trataEventos);

Button bl = new Button("Limpa");
add(bl);
bl.addActionListener(new ActionListener(){

public void actionPerformed(java.awt.event.ActionEvent e){
conteudo = "";
campoDoFormularioHTML.setMember("value", "" + conteudo);
}
});

JSObject objWin = JSObject.getWindow(this);
JSObject objDoc = (JSObject)objWin.getMember("document");
JSObject objForms = (JSObject)objDoc.getMember("forms");
JSObject objForm = (JSObject)objForms.getMember(formulario);
JSObject objElements = (JSObject)objForm.getMember("elements");
campoDoFormularioHTML = (JSObject)objElements.getMember(campo);
campoDoFormularioHTML.setMember("value", "");
}
}

O código HTML necessário para executar o applet Teclado é:

<table border="1" cellpadding="15" cellspacing="0" align="center">
<tr>
<td>
<form name="formulario">
Digite sua senha: <input type="password" name="senha"
onfocus="javascript:alert('use o SOMENTE teclado virtual')">
<br/>
<input type="button" value="clique aqui"
onclick="javascript:alert(this.form.senha.value);" >
form>
td>
<td>
<applet code="Teclado.class" width=80 height=110>
<param name="campo" value="senha">
<param name="formulario" value="formulario">
applet>
td>
tr>
table>

Existem tags HTML próprias para isso:

Criar Teclado alfa numerico para sites Wm-21-05-2008pic03

Quem define a sintaxe para essas tags é o W3C (World Wide Web Consortium).

Os principais atributos da tag (que foi a usada por mim neste exemplo) são:

· code - nome da classe que será carregada (obrigatório);
· width - largura da área onde será “desenhado” o corpo do applet (obrigatório);
· height - altura da área onde será “desenhado” o corpo do applet (obrigatório);
· alt - texto que será apresentado no navegador se este aceita a tag Criar Teclado alfa numerico para sites Wm-21-05-2008pic04

mas não pode executar;
· name - nome do applet que está sendo executado (nome da instância) que permite a comunicação entre applets ou entre o applet e o formulário.

A tag Criar Teclado alfa numerico para sites Wm-21-05-2008pic04

pode conter tags Criar Teclado alfa numerico para sites Wm-21-05-2008pic05

, que definem os parâmetros passados do HTML para o aplicativo.

Os atributos da tag Criar Teclado alfa numerico para sites Wm-21-05-2008pic05

são:

· name - o nome do parâmetro;
· value - o conteúdo do parâmetro.

Esse applet executou sem problemas em máquinas com IE6, quando compilado com:

javac Teclado.java

Porém tive problemas com o IE7 (tem a ver com a MS JVM). Para resolver, compilei o applet de uma forma especial (para que o aplicativo fosse compatível com uma versão mais antiga de JVM), usando o comando:

javac -source 1.3 -target 1.1 Teclado.java

Criar Teclado alfa numerico para sites Wm-21-05-2008pic02

Criar Teclado alfa numerico para sites Wm-21-05-2008pic02

Figura 2 - Applet sendo executado no Internet Explorer 7 (Windows XP)

Para que o aplicativo seja executado, inclua a propriedade mayscript na tag Criar Teclado alfa numerico para sites Wm-21-05-2008pic04

.

fonte: devmedia