WIzard de Páginas | Início Anterior Próximo

WIzard

O WIzard é o módulo do WebIntegrator que oferece ao desenvolvedor um ambiente de desenvolvimento baseado nos conceitos RAD (Rapid Application Development) para a criação e/ou edição de páginas WSP. Neste tipo de ambiente a maior parte do tempo de desenvolvimento de uma página será destinado à definição dos valores das propriedades e dos eventos dos elementos que irão fazer parte da página sem ser preciso que o desenvolvedor se importe com a codificação HTML necessária para gerá-la.
Um dos recursos que merece destaque no WIzard é a possibilidade de montagem automática de uma página baseada em informações coletadas de componentes do tipo Objeto definidos no Pré-Página. A primeira vez que o WIzard é executado para uma determinada página ou caso o desenvolvedor peça para recarregar a página o WIzard irá percorrer as definições de Pré-Página dessa página e assim que um componente Objeto é encontrado ele automaticamente insere na página WSP um formulário HTML com os campos correspondentes às colunas referenciadas pelo Objeto, caso a página venha a possuir mais de um Objeto serão criados tantos formulários quanto for a quantidade de Objetos existentes no Pré-Página.

NOTA
Como um sub-produto desse recurso há também a possibilidade da geração da lógica de Pós-Página para realizar inclusões ou alterações, essa lógica também será baseada nas definições do(s) Obejto(s) de Pré-Página. Para saber com maiores detalhes sobre o funcionamento da geração automática de páginas baseada nas definições de Objetos no Pré-Página clique aqui.

O ambiente do WIzard é composto de duas janelas: uma que exibe o layout da página como será visto pelos usuários e uma outra, a janela de Propriedades, onde são exibidas as propriedades do elemento selecionado. Na janela onde se exibe o layout da página, os elementos podem ser selecionados bastando clicar com o mouse sobre o ícone e automaticamente a janela de Propriedades irá exibir os dados do elemento correspondente.
A janela de Propriedades contém em sua parte superior uma combo onde são listados todos os elementos que fazem parte da página e logo abaixo uma pequena barra de ferramentas que oferece as seguintes opções:

Botão | Descrição
| Insere mais um elemento na página. Esse novo elemento será inicialmente do tipo Genérico e será posicionado como o último elemento da página mas o desenvolvedor poderá alterar as suas propriedades a fim de reposicioná-lo e/ou trocar de tipo.

Remove o elemento que se encontra atualmente selecionado.
Facilitador para manutenção de página. Clicando nesse botão, o usuário obterá uma janela contendo todos os elementos que compõem sua página, podendo copiar, mover, e remover elementos.
Desloca o elemento que se encontra selecionado uma posição acima ou à esquerda de onde ele se encontra atualmente. A propriedade Sequência será decrementada de 1.
Desloca o elemento que se encontra selecionado uma posição abaixo ou à direita de onde ele se encontra atualmente. A propriedade Sequência será incrementada de 1.
Exibe a página já processada pelo WIEngine.
Gera a lógica de Pós-Página para a realização de inserções ou alterações baseada nas definições do(s) Objeto(s) de Pré-Página. Para cada Objeto de Pré-Página (formulário) serão criado 4 (quatro) elementos no Pós-Página: dois Updates, um Objeto e um Gravar.
Recarrega as definições de Pré-Página a fim de inserir novos elementos na página. As alterações que foram feitas no layout da página não serão perdidas apenas serão inseridos os campos e/ou formulários (Objetos) novos que o WIzard encontre.
Salva as posições e os dimensionamentos das janelas do WIzard.
Abre a página que está selecionada na combo-box.
Copia o elemento que está selecionado na janela de layout da página para a página que está selecionada na combo-box.
Salva as propriedades do elementos de página.
Este botão localiza-se no canto superior esquerdo da janela de definições da página. Ele abre a janela que contém os componentes padrão do WebIntegrator e os definidos pelo usuário.
Os elementos listados na combo-box localizada acima da barra de botões são aqueles que estão inseridos na página e podem representar um formulário HTML, um determinado tipo de campo de formulário HTML (TEXT, CHECKBOX, TEXTAREA, SELECT, etc.), a tag HEAD de um documento HTML ou um tipo genérico onde o desenvolvedor poderá criar links, inserir imagens ou colocar qualquer outra tag HTML. Para saber mais sobre o tipo Genérico clique aqui.
Como explicado anteriormente, para cada Objeto encontrado no Pré-Página será criado um formulário na página. Esse formulário aparecerá listado na combo-box identificado pelo mesmo identificador do Objeto a que ele se refere seguido de FRM. Para saber maiores detalhes sobre as propriedades de um formulário clique aqui.
O elemento que representa a tag HEAD está representado pela opção <HEAD> na combo-box servindo para que o desenvolvedor possa inserir informações sobre o documento. Os browsers não exibem as informações que se encontram dentro desta tag. Para saber maiores detalhes sobre as propriedades da tag HEAD clique aqui.
Já os elementos que representam tipos de campo de formulário HTML apresentam algumas características comuns sendo divididos em duas partes: o título e o campo. As propriedades relacionadas com o título são iguais para todos os componentes, já as propriedades relacionadas ao campos há algumas que são específicas a depender do tipo escolhido.
Logo abaixo seguem relacionadas as propriedades comuns a todos os elementos que representam campos de formulário (Campo, Grupo e Checkbox).
O campo Nome indica o nome da variável do contexto do WebIntegrator representada por esse elemento. Em se tratando de um campo de formulário esse nome faz referência a uma coluna do Objeto representado pelo formulário.
O campo Tipo indica o tipo de elemento que está selecionado. Clicando no link se abrirá a janela de edição de Elementos Definido pelo Usuário para o elemento que estiver selecionado, caso o elemento não seja do tipo USR. Um elemento pode ser um dos 5 tipos listados a seguir:

| · Genérico (GEN): indica um elemento que a depender das propriedades que estejam setadas poderá se comportar como um botão, um link, uma imagem, um texto com a possibilidade de conter tags HTML ou até mesmo uma combinação desses.

| · Campo (TXT): indica um campo de entrada de dados de um formulário onde o usuário poderá digitar algum valor, exceção feita aos campos HIDDEN ou aqueles que se encontrem desabilitados e/ou com permissão de apenas leitura.

| · Checkbox (CHK): indica um campo de formulário HTML do tipo CHECKBOX, este tipo de campo normalmente é usado para atributos booleanos simples onde um campo deve estar escolhido, ou não. Também pode ser utilizado para atributos que possam levar múltiplos valores ao mesmo tempo. O último é representado por um número de CheckBoxes com o mesmo nome.

| · Grupo (GRP): indica um elemento que representa um grupo de valores donde apenas um poderá ser escolhido. Esse tipo de elemento se divide em mais dois tipos: Combo e Radio que representam respectivamente uma combo-box e um radio group.

| · Form (FRM): indica um elemento que representa um formulário HTML. Normalmente será dentro desse tipo de elemento que elementos do tipo Checkbox, Grupo e Campo ficarão inseridos.

| · Botão (BTN): indica um elemento que representa um botão.

| · Elementos Definido pelo Usuário (USR): são simbolizados por # ou $ mais o nome do elemento.

O campo Quebra Linha indica se há uma quebra de linha logo após o elemento.
O campo Sequência indica a sequência que esse elemento possui na página. Ao se alterar o valor desse campo também se altera a posição (sequência) que o elemento irá aparecer na página. O desenvolvedor também poderá alterar a posição (sequência) do elemento na página usando os botões e que, respectivamente, deslocam-no uma posição acima ou abaixo.
O campo Classe indica o nome da classe CSS que será usada para aplicar um estilo visual a todo o elemento (título + campo). A classe CSS deve estar especificada no arquivo que serviu como modelo para a página ou deve estar em um arquivo CSS a ser incluído na página. Para incluir um arquivo CSS numa página gerada pelo WIzard selecione na combo-box o elemento <HEAD> e no campo Link CSS coloque o nome da arquivo desejado. Clicando em serão listadas as classes CSS que estão definidas nos arquivos CSS que foram definidos para essa página.
O campo Estilo CSS indica o estilo visual que será aplicado a todo o elemento. Aqui o desenvolvedor especifica diretamente os códigos style-sheet a serem aplicados ao elemento, exemplo:
font: italic 12px Verdana, Geneva, Arial, Helvetica, sans-serif; background: blue;
O campo Texto indica o texto que será exibido como rótulo do elemento.
O campo Classe indica o nome da classe CSS que será usada para aplicar um estilo visual ao texto do elemento. A classe CSS deve estar especificada no arquivo que serviu como modelo para a página ou deve estar em um arquivo CSS a ser incluído na página. Para incluir um arquivo CSS numa página gerada pelo WIzard selecione na combo-box o elemento <HEAD> e na propriedade Link CSS indique o caminho relativo ao servidor web do arquivo CSS desejado. Clicando em serão listadas as classes CSS que estão definidas nos arquivos CSS que foram definidos para essa página.
O campo Estilo CSS indica o estilo visual que será aplicado ao campo do elemento. Aqui o desenvolvedor especifica diretamente os código style-sheet a serem aplicados ao elemento, exemplo:
font: italic 12px Verdana, Geneva, Arial, Helvetica, sans-serif; background: blue;
O campo Complemento serve para que o desenvolvedor possa inserir atributos complementares aos elementos inseridos na página e que não esteja relacionado entre as propriedades disponíveis.
Já as propriedades relacionadas ao campo podem sofrer variações a depender do tipo escolhido. Para saber as propriedades relacionadas ao campo de cada um dos elemento que representam campos de formulário clique no links desejado que segue abaixo:

| · Campo

| · Checkbox

| · Grupo

| · Botão

| · Check-Box

| · Formulário

| · Genérico

| · HEAD

| · Componente do Usuário