...usar o WI

...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>

<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|'