...usar o WI_Event | Início Anterior Próximo

...usar o WI_Event

Neste passo-a-passo será explicado como o desenvolvedor poderá utilizar o WI_Event para fazer a interação do cliente (browser) com o servidor sem a necessidade de submter a página. Como estudo de caso vamos popular uma combo-box dinamicamente, neste exemplo vamos criar uma página com uma combo-box que terá seus valores populados de acordo com um critério de pesqusia a ser digitado pelo usuário:
Para a montagem desse exemplo primeiramente crie um banco de dados que possua um esquema SQL semelhante ao que segue abaixo.
CREATE TABLE uf (
sigla varchar(2) ,
nome varchar(30)
);
INSERT INTO uf VALUES("AC","Acre");
INSERT INTO uf VALUES("AL","Alagoas");
INSERT INTO uf VALUES("AM","Amazonas");
INSERT INTO uf VALUES("AP","Amapá");
INSERT INTO uf VALUES("BA","Bahia");
INSERT INTO uf VALUES("CE","Ceará");
INSERT INTO uf VALUES("DF","Distrito Federal");
INSERT INTO uf VALUES("GO","Goiás");
INSERT INTO uf VALUES("MA","Maranhão");
INSERT INTO uf VALUES("MG","Minas Gerais");
INSERT INTO uf VALUES("MS","Mato Grosso do Sul");
INSERT INTO uf VALUES("MT","Mato Grosso");
INSERT INTO uf VALUES("PB","Paraíba");
INSERT INTO uf VALUES("PE","Pernambuco");
INSERT INTO uf VALUES("PI","Piauí");
INSERT INTO uf VALUES("PR","Paraná");
INSERT INTO uf VALUES("RJ","Rio de Janeiro");
INSERT INTO uf VALUES("RO","Rondônia");
INSERT INTO uf VALUES("RR","Roraima");
INSERT INTO uf VALUES("RS","Rio Grande do Sul");
INSERT INTO uf VALUES("SC","Santa Catarina");
INSERT INTO uf VALUES("SE","Sergipe");
INSERT INTO uf VALUES("SP","São Paulo");
INSERT INTO uf VALUES("TO","Tocantins");
Após a criação da base de dados crie um projeto pelo WI_Builder e defina o banco de dados criado como o banco de dados do projeto. Primeiramente vamos definir um Evento do tipo SELECT (clique em Projeto e em seguida na opção Events escolhendo o tipo Selects) definindo o identificador como uf, escolha o banco de dados que possui a estrutura de tabela definida acima e no campo SQL digite a seguinte instrução:
SELECT * FROM uf WHERE nome LIKE '|tmp.criterio|%'
Para uma página poder referenciar aos Eventos definidos no WI_Builder é necessário que essa página caregue um arquivo JavaScript que representa a biblioteca de funções do WI_Event. Para inserir a chamada à biblioteca do WI_Event numa página de um projeto usando o WIzard de páginas basta selecionar a opção <HEAD> e no campo Link JS adicionar o valor /|wi.proj.id|/js/wievent.js, o campo Link JS suporta que a definição de vários arquivos JS desde que cada chamada aos arquivos JS estejam separadas por vírgula.
Para inserir a chamada à biblioteca do WI_Engine diretamente no código-fonte de uma página do projeto insira o trecho de código HTML que segue abaixo dentro da tag HEAD do documento HTML que representa a página.
<SCRIPT TYPE="text/javascript" SRC="/|wi.proj.id|/js/wievent.js"></SCRIPT>
No arquivo wievent.js pode ser vista um resumo dos métodos suportados pelo WIEvent.
A biblioteca de funções do WIEvent disponibiliza o método utilitário populateCombo() para ajudar o desenvolvedor na montagem de combos dinâmica.
Logo abaixo segue o código-fonte da página que irá popular irá popular dinamicamente a combo-box.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Populando uma combo-box dinamicamente</title>
<!-- arquivo JS da biblioteca de funções de um objeto WIEvent -->
<SCRIPT TYPE="text/javascript" SRC="/|wi.proj.id|/js/wievent.js"></SCRIPT>
<script>
function popularCombo() {
//instancio um objeto do tipo WIEvent para que eu possa interagir
//com um componente WI_Event definido no WI_Builder.
var evt = new WIEvent();
//crio uma variável "tmp.criterio" na sessão do WebIntegrator com
//o valor que foi digitado no campo "criterio" do formulário.
//Lembre-se que na definição do componente WI_Event pelo WI_Builder
//foi feita a referência a uma variável "tmp.criterio" no comando SQL.
evt.writeobj("tmp.criterio", document.forms[0]["criterio"].value);
//Uso a função populate.Combo com os seguintes parâmetros: "uf"
//é o nome do evento definido no WI_Builder, document.forms[0]["tmp.estados"]
//é o nome da combo definida na página, "sigla" indica o nome da
//coluna que será usada para popular os valores da combo e "sigla"
//indica o nome da coluna que será usada para popular os textos.
evt.populateCombo("uf", document.forms[0]["tmp.estados"], "sigla", "nome");
}
</script>
</head>
<body>
<form>
Critério de pesquisa: <input type="text" name="criterio" value="">
<input type="button" value="Popular Combo" onclick="popularCombo()">
<br>
<select name="tmp.estados"></select>
</form>
</body>
</html>
A população dinâmica de uma combo é apenas um dos exemplos de usabilidade do componente WI_Event, outras funcionalidades podem ser desenvolvidas a depender das necessidades que venham a surgir para um determinado projeto. Como regras para utilizar o WI_Event adote os seguintes pontos:

| ·

a página que for interagir com um componente WI_Event do projeto ou apenas utilizar o objeto WIEvent deve carregar a biblioteca de funções JavaScript que se encontra em /|wi.proj.id|/js/wievent.js.

| · | instancie um objeto do tipo WIEvent.

| ...

| evt = new WIEvent();

| ...

| ·

execute o método desejado.

Exemplos:
Para dar alerts dos estados que iniciam com o prefixo desejado:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<SCRIPT TYPE="text/javascript" SRC="/|wi.proj.id|/js/wievent.js"></SCRIPT>
<script>
function myalerts() {
var evt = new WIEvent();
evt.debug = true; // se desejar ver o debug da comunicação do WIEvent
evt.writeobj("tmp.criterio", document.forms[0]["criterio"].value);
evt.selectdb("uf");
while (evt.next() > -1) {
alert(evt.column("nome"));
}
}
</script>
</head>
<body>
<form>
Critério de pesquisa: <input type="text" name="criterio" value="">
<input type="button" value="Dar alerts" onclick="myalerts()">
</form>
</body>
</html>
Para recuperar numa caixa de texto o nome do estado dado o código do mesmo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<SCRIPT TYPE="text/javascript" SRC="/|wi.proj.id|/js/wievent.js"></SCRIPT>
<script>
function acheNome() {
var evt = new WIEvent();
evt.writeobj("tmp.sigla", document.forms[0]["sigla"].value);
evt.setInputValue("acheNome", document.forms[0]["nome"], "nome")
}
</script>
</head>
<body>
<form>
Sigla: <input type="text" name="sigla" value=""><br>
Nome: <input type="text" name="nome" value=""><br>
<input type="button" value="Ache Nome" onclick="acheNome()">
</form>
</body>
</html>
OBS: Para funcionar precisa ser criado o WIEvent do tipo Select com o seguinte comando sql:
SELECT * FROM uf WHERE sigla = '|tmp.sigla|'