Sei sulla pagina 1di 291

Zen

Guia do Aluno

Cach ZEN

InterSystems do Brasil

Cach ZEN

COPYRIGHT NOTICE
Copyright InterSystems Corporation
1997-2006
All rights reserved
NOTICE
PROPRIETARY CONFIDENTIAL

This document contains trade secret and confidential information which is the property of InterSystems Corporation,
One Memorial Drive, Cambridge, MA 02142, or its affiliates, and is furnished for the sole purpose of the operation
and maintenance of the products of InterSystems Corporation. No part of this publication is to be used for any other
purpose, and this publication is not to be reproduced, copied, disclosed, transmitted, stored in a retrieval system or
translated into any human or computer language, in any form, by any means, in whole or in part, without the express
prior written consent of InterSystems Corporation.
The copying, use and disposition of this document and the software programs described herein is prohibited except
to the limited extent set forth in the standard software license agreement(s) of InterSystems Corporation covering
such programs and related documentation. InterSystems Corporation makes no representations and warranties
concerning such software programs other than those set forth in such standard software license agreement(s). In
addition, the liability of InterSystems Corporation for any losses or damages relating to or arising out of the use of
such software programs is limited in the manner set forth in such standard software license agreement(s).
THE FOREGOING IS A GENERAL SUMMARY OF THE RESTRICTIONS AND LIMITATIONS IMPOSED BY
INTERSYSTEMS CORPORATION ON THE USE OF, AND LIABILITY ARISING FROM, ITS COMPUTER
SOFTWARE. FOR COMPLETE INFORMATION REFERENCE SHOULD BE MADE TO THE STANDARD
SOFTWARE LICENSE AGREEMENT(S) OF INTERSYSTEMS CORPORATION, COPIES OF WHICH WILL BE
MADE AVAILABLE UPON REQUEST.
InterSystems Corporation disclaims responsibility for errors which may appear in this document, and it reserves the
right, in its sole discretion and without notice, to make substitutions and modifications in the products and practices
described in this document.
Cach, InterSystems Cach, Cach SQL, Cach ObjectScript, Cach Objects, ISM, MSM, DSM, and DTM are
trademarks of InterSystems Corporation.
All other brand or product names used herein are trademarks or registered trademarks of their respective companies
or organizations.
For Support questions about any InterSystems products, contact the InterSystems Worldwide Support Center:
Phone:
US: +1 617 621-0700
Europe: +44 (0) 1753 830-077
Fax:
US: +1 617 374-9391
Europe: +44 (0) 1753 861-311

Cach 2009 - Reviso 3.0 13/04/2010

InterSystems do Brasil

Cach ZEN

InterSystems do Brasil

Cach ZEN

Contedo
Mdulo Introduo ..................................................................................................... 6
Viso Geral .................................................................................................................. 12
Benefcios .................................................................................................................... 16
Demo ............................................................................................................................ 22
Mdulo Cliente e Servidor ....................................................................................... 26
Mdulo Conceito de Aplicaes Zen ..................................................................... 32
Mdulo Conceitos de Componentes Zen .............................................................. 40
Convenes de Nomenclaturas ................................................................................. 46
Mdulo Tabelas Zen ................................................................................................. 54
Mdulo Controles Zen ............................................................................................. 66
Mdulo Formulrios Zen ......................................................................................... 90
Mdulo MVC............................................................................................................ 102
Mdulo MVC Exerccios Adicionais ................................................................... 118
Mdulo Zen e SVG.................................................................................................. 152
Mdulo Grficos Zen .............................................................................................. 160
Mdulo Componentes de Navegao ................................................................... 170
Mdulo Janelas de Expanso e Popup ................................................................ 184
Mdulo Miscelnea ................................................................................................ 202
Mdulo Componentes Customizados .................................................................. 208
Mdulo Localizao ............................................................................................... 218
Mdulo Programao da Aplicao ...................................................................... 226
Respostas dos Exerccios ........................................................................................ 242

InterSystems do Brasil

Cach ZEN

InterSystems do Brasil

Cach ZEN

Mdulo: Introduo

Mdulo: Introduo

InterSystems do Brasil

Cach ZEN

InterSystems do Brasil

Cach ZEN

Lembre-se por favor

InterSystems do Brasil

Desligue ou silencie seu celular ou


pagger durante as aulas.
Responda a chamadas importantes fora
da sala de aula ou em local apropriado.
Responda chamadas menos importantes
durante os exerccios ou breaks

Cach ZEN

InterSystems do Brasil

Cach ZEN

InterSystems do Brasil

10

Cach ZEN

InterSystems do Brasil

11

Cach ZEN

Viso Geral

Viso Geral

InterSystems do Brasil

12

Cach ZEN

InterSystems do Brasil

13

Cach ZEN

Zen Viso Geral

Zen um framework extensvel para criao rpida de aplicaes baseadas na Web.

Framework extensvel, de alto nvel, otimizado para oferecer a mxima velocidade de


desenvolvimento, escalabilidade e disponibilidade para aplicaes Web.

Utiliza tecnologia AJAX, permitindo a criao de aplicaes web muito mais interativas

Oferece biblioteca de componentes visuais pr-construdos para montagem de pginas,


aplicaes e portais web com comportamento semelhante ao de aplicaes desktop.

Esto disponveis diversos tipos de componentes como grids, formulrios, calendrios, botes
diversos, menus, etc.

Oferece ainda, recursos avanados para construo de relatrios em PDF, criados


dinamicamente e distribudos atravs da Web.

possvel a utilizao de recursos que envolvem a utilizao de padres de projeto como o


MVC para a construo das aplicaes, alm da possibilidade de utilizao de grficos vetoriais
SVG.

InterSystems do Brasil

14

Cach ZEN

InterSystems do Brasil

15

Cach ZEN

Benefcios

Benefcios

InterSystems do Brasil

16

Cach ZEN

InterSystems do Brasil

17

Cach ZEN

Zen Benefcios

Desenvolvimento Rpido.

Simplicidade.

Biblioteca Extensvel de Componentes.

Integrao de objetos com o Banco de Dados.

Gerao de Cdigos.

Extensibilidade (CSS)

Uso integrado de SVG.

Fonte de Cliente Independente

Segurana.

Manipulao de Form.

Layout de pgina.

Manipulao de Eventos.

Suporte a Multilinguagem.

Documentos de reports.

Desenvolvimento Zen

Definies de pgina XML compiladas para mximo desempenho e escalabilidade.

Extensa biblioteca de componentes para rpido desenvolvimento.

InterSystems do Brasil

18

Cach ZEN

Extensibilidade Baseada em Objetos

Vrios componentes pr-construdos;

Criao rpida de componentes customizados atravs de herana (subclasses) de componentes


Zen.

Modelo de Objetos Compartilhados

Pgina define mtodos client e server sides.

Servidor e browser acessam dados atravs de poderoso modelo de objetos compartilhados.

InterSystems do Brasil

19

Cach ZEN

Multi-linguagem

Texto de linguagem base extrado automaticamente.


Texto de linguagem local resgatado dinamicamente no momento da execuo.

Segurana

Controle de acesso declarativo a nvel de pgina e componente.


Sincronizado automaticamente com segurana a nvel de base de dados.

InterSystems do Brasil

20

Cach ZEN

InterSystems do Brasil

21

Cach ZEN

Demo

Demo

InterSystems do Brasil

22

Cach ZEN

InterSystems do Brasil

23

Cach ZEN

Introduo Demo
Acesse a pgina de exemplos do Zen atravs do link:
http://localhost:<port>/csp/samples/ZENDemo.Home.cls
Login para os exerccios:
http://localhost:<port>/csp/user/ISCZen.Pag.Login.cls
Usurio: master
Senha: mster

InterSystems do Brasil

24

Cach ZEN

InterSystems do Brasil

25

Cach ZEN

Mdulo - Cliente e Servidor

Mdulo - Cliente e Servidor

InterSystems do Brasil

26

Cach ZEN

InterSystems do Brasil

27

Cach ZEN

Zen e Cach Server Pages

Os seguintes diagramas resumem as interaes entre o cliente CSP e o servidor. Como pginas
Zen so pginas CSP, essas informaes so tambm aplicadas ao Zen.

Os nmeros do diagrama anterior demonstram o fluxo dos eventos em um processo CSP. A seqncia
a seguinte:
1. O browser (ou cliente Web similar) faz uma requisio HTTP;

2. Se o servidor web determina que esta uma requisio CSP, ele envia a requisio ao Gateway CSP
instalado no servidor Web. Alternativamente, se a requisio de um arquivo esttico (como um arquivo
.html ou .jpg), o servidor Web encontra o arquivo em seu sistema de arquivos local e envia o contedo
ao cliente.

InterSystems do Brasil

28

Cach ZEN

3. O Gateway CSP reempacota a requisio e envia ao servidor Cach correto.

4. O servidor Cach decodifica a mensagem, determina qual classe de manipulao de evento (parte da
aplicao) deveria processar o evento, e invoca o mtodo OnPage desta classe.
Pgina Zen so pginas CSP, ento cada classe de pgina Zen tem um mtodo OnPage.
Entretanto, as pginas Zen possuem muito mais recursos.

5. O servidor Cach retorna a sada do mtodo OnPage ao Gateway CSP como uma resposta HTTP;

6. O Gateway CSP entrega a resposta HTTP ao servidor Web;

7. O servidor Web retorna a resposta ao browser que ento processa a resposta. No caso de HTML, a
pgina apresentada.
Aplicaes Zen usam tecnologia CSP para:

Filtrar e responder as requisies HTTP;

Gerenciar sesses e ciclos de vida das sesses;

Gerenciar identidade do usurio, autenticao, e controle de acesso.

Fornecer mecanismo de hiperevento usado para chamar mtodos servidor a partir do cliente;

Chamadas a partir do servidor para executar cdigo com segurana no cliente.

InterSystems do Brasil

29

Cach ZEN

Pginas Zen em tempo de execuo

A seqncia do diagrama anterior mostra uma pgina Zen em um browser. A numerao em negrito

mostra como uma pgina Zen interage dentro do processo CSP, conforme aqui detalhado:

1. O browser envia uma requisio HTTP com nome especfico de uma pgina Zen. O servidor Cach
recebe a requisio e automaticamente direciona para a classe da pgina Zen. Nota: CSP trata este
passo, como descrito anteriormente.

2. A classe da pgina invoca o mtodo callback %OnBeforeCreatePage. Este mtodo fornece a


oportunidade para a aplicao executar qualquer configurao que pode ser necessria antes que a
execuo de %CreatePage inicie.

3. A classe da pgina cria uma instncia de si mesma no servidor Cach.

InterSystems do Brasil

30

Cach ZEN

4. A classe da pgina invoca o mtodo callback %OnAfterCreatePage. Neste mtodo, a aplicao pode
modificar o contedo gerado pelo %CreatePage.

5. O objeto da pgina constri um documento HTML a partir do DOM. A pgina invoca o mtodo
%DrawHTML. Cada pgina Zen e objeto de componente tem um mtodo %DrawHTML que sabe como
desenhar o objeto como HTML.

6. O servidor Cach entrega o documento HTML ao cliente, e o browser mostra o documento HTML.

InterSystems do Brasil

31

Cach ZEN

Mdulo - Conceito de Aplicaes Zen de Aplicaes Zen

Mdulo - Conceito de Aplicaes Zen

InterSystems do Brasil

32

Cach ZEN

InterSystems do Brasil

33

Cach ZEN

Aplicaes Zen

Uma aplicao Zen consiste das seguintes partes:

Uma classe de Aplicao:

Cada aplicao Zen tem uma classe de aplicao. Esta uma classe derivada
de %ZEN.application que fornece comportamento e estilo para a aplicao. A
folha de estilo especificada como um bloco XML embutido dentro da classe.

Classes de Pgina:

Uma aplicao consiste em uma ou mais pginas. Cada pgina uma classe
derivada de %ZEN.Component.page.

Classes de Componente:

Cada pgina contm componentes. Componentes permitem que o usurio


interaja com a pgina. Todos os componentes so derivados de
%ZEN.Component.component. Eles incluem botes, tabelas, campos de textos,
listas, painis basicamente qualquer item que pode ser apresentado na pgina.

InterSystems do Brasil

34

Cach ZEN

Classe de Aplicao Zen

Um classe de aplicao Zen fornece alto nvel de administrao e age como base para todas as
pginas na aplicao.

A aplicao no mantm um inventrio de suas pginas.

A associao entre a aplicao e suas pginas ocorre e toda pgina Zen identifica qual a
aplicao a que pertence.

A classe da aplicao pode definir estilos, inclusive com referncias arquivos externos, a
serem utilizados por todas as pginas desta aplicao.

Exerccios - Crie uma nova aplicao Zen


Neste exerccio ser criada uma nova aplicao Zen:
1. Abra o Cach Studio;
2. Escolha Arquivo -> Mudar Namespace ou F4;
3. Escolha o namespace User;
4. Escolha Arquivo -> Novo or Ctrl-N;
5. Clique na tab Personalizado;
Clique no cone de Nova Aplicao Zen. Informe:
Pacote (O pacote que conter as novas aplicaes): ISCUser.Aplic
Nome da Classe (O nome da classe da nova aplicacao): Aplicacao
Nome da Aplicao (O nome lgico da aplicao): Minha Aplicacao
7. Clique em Terminar.
8. Copie o contedo do arquivo estilo.txt para dentro do bloco XData Style.

InterSystems do Brasil

35

Cach ZEN

Pginas Zen

Uma pgina Zen consiste de:

Uma definio de contedos: Um bloco XML embutido dentro da classe da pgina,


que define o conjunto de componentes que constroem a pgina, junto com seus
parmetros. possvel definir os contedos da pgina programaticamente, mas na
maioria dos casos um bloco XML mais conveniente.

Sobrescrever Estilo: Um bloco XML embutido dentro da classe da pgina, que


sobrescreve estilos CSS especficos da pgina para componentes desta
pgina.Mtodos de Tratamento de Eventos: Uma classe de pgina geralmente contm
mtodos que tratam eventos associados pgina, como quando um usurio interage
com um componente. Alguns destes mtodos podem executar no servidor e outros no
cliente.

InterSystems do Brasil

36

Cach ZEN

Exerccios Criando uma pgina Zen


Neste exerccio voc criar uma pgina Zen:
1. Abra o Cach Studio.
2. Escolha Arquivo -> Mudar Namespace ou F4.
3. Escolha o namespace User.
4. Escolha Arquivo > Novo ou Ctrl-N.
5. Clique na tab Personalizado.
6. Clique no cone Nova Pgina Zen
Em Nome do Pacote escolha: ISCUser.Pag
Em Nome da Classe escreva: BoasVindas
Em Nome da Aplicao escolha: ISCUser.Aplic.Aplication
7. Clique Prximo;
8. Clique Terminar;

InterSystems do Brasil

37

Cach ZEN

Componentes Zen

Classes de Componentes Zen definem o comportamento e layout da pgina. Cada componente


Zen tem as seguintes caractersticas:

Define um conjunto de propriedades e mtodos que determinam seu estado e


comportamento em tempo de execuo;

Define como seu HTML inicial desenhado. tambm possvel definir componentes
que apenas so desenhados usando eles mesmos atravs de lado-cliente, HTML
dinmico;

Define uma folha de estilos CSS padro que especifica como deveria ser apresentado
na pgina;

Define parmetros que ajustam a aparncia ou comportamento de um componente;

Novas classes de componentes podem ser derivadas de classes existentes.

Novos componentes esto automaticamente prontos para usar dentro de definies de


contedo XML da pgina.

Classes de componentes variam em complexidade desde um simples mapeamento de um


controle nativo HTML at componentes avanados como calendrios, grids, .

Componentes incluem os seguintes tipos especializados:

Controles: mostram dados e permitem a entrada do usurio (como caixas de textos e


botes);

Grupos: contm conjuntos de outros componentes (como grupos, grupos de tabelas,


menus e formulrios);

Panes: apresentam informaes (como recuperadas de queries).

Outros componentes que simplesmente apresentam dados na pgina.

InterSystems do Brasil

38

Cach ZEN

Exemplo grupos dentro da pgina:


XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<html id="title">Title</html>
<vgroup width="100%">
<vgroup width="60% align="center" label="Vertical Group">
<hgroup width="40%" align="left" label="Horizontal Group" />
<hgroup width="20%" align="center" label="Horizontal Group" />
<hgroup width="40% align="right" label="Horizontal Group" />
</vgroup>
</vgroup>
</page>
}
Resultado:

InterSystems do Brasil

39

Cach ZEN

Mdulo Conce

Mdulo - Conceitos de Componentes Zen

Mdulo - Conceitos de Componentes Zen

InterSystems do Brasil

40

Cach ZEN

InterSystems do Brasil

41

Cach ZEN

Componentes Zen

Os componentes fornecem layout, estilo e comportamento para a pgina. A seguir uma tabela
que define os termos geralmente usados:
Te r m o

I lust r a o

Re sum o

Pgina

Retngulo apresentado em uma


janela do browser.

Layout

A posio de cada componente


e de cada grupo de
componentes, na pgina.

Est ilo

A aparncia visual dos


componentes, independente de
sua posio na pgina.

Com por t am ent o

Uma ao da aplicao que


resulta de uma entrada do
usurio, um temporizador, ou
algum outro evento.

Pgina

Uma pgina inicialmente vazia. Ela preenchida com componentes que so adicionados ela.

Uma estratgia de layout necessria para determinar onde estes componentes sero exibidos
na pgina.

Layout

Componentes so inseridos dentro de grupos: um tipo especial de componente que pode conter
zero ou mais componentes. Um grupo responsvel pela localizao dos seus componentes na
pgina.

Zen gera tabelas HTML padro baseado na definio de grupos.

possvel distribuir os componentes em linhas verticalmente ou horizontalmente, inserindo-os


dentro de grupos verticais ou horizontais.

Certos componentes permitem camadas, como folhas de papel que ocupam uma posio em
uma pilha. Apenas uma camada mostrada a cada vez, baseado em cliques do usurio. Menus
e guias trabalham desta forma.

Elementos XML que controlam o layout:

<page> um componente de grupo que atua como container de mais alto nvel para
todos os elementos XML;

<html> permite a insero de fragmentos HTML diretamente na pgina;

<hgroup> cria uma linha horizontal de componentes;

<vgroup> cria uma coluna vertical de componentes;

<spacer> insere um espao entre os grupos;

<pane> subdivide uma pgina em regies.

InterSystems do Brasil

42

Cach ZEN

Layout Exemplo de <pane>

<pane paneName="menuPane"/>.

Estilo

Estilo determina a aparncia visual de um componente.

Zen gerencia estilos gerando instrues CSS padro baseados nas entradas fornecidas ao Zen.

H muitos atributos de estilos que podem ser configurados para cada componente. Estes
incluem cor de fundo, tamanho, fontes, ...

possvel aceitar os estilos padro dos componentes ou ento sobrescrev-los a nvel de


componente, pgina ou aplicao.

A seguir uma relao com alguns exemplos de atributos que configuram o estilo de um
componente, a lista completa de atributos est descrita na documentao:

id: pode ser utilizado para selecionar uma definio de estilo CSS para um componente.

name: especifica o nome do componente. Geralmente, usado para identificar um


controle dentro de um formulrio.

align: controla o alinhamento do controle, os valores possveis so: left, right ou


center.

InterSystems do Brasil

43

Cach ZEN

Comportamento

Comportamento refere-se s aes internas ou externas na aplicao que so disparadas pela


entrada do usurio, um temporizador, ou algum outro tipo de evento.

Comportamento envolve muitos aspectos, desde o processamento de cliques de usurios e


pressionamentos de teclas at a gerao de tabelas baseadas em queries do banco de dados.

Personalizao

Uma das caractersticas mais poderosas do framework Zen a de ter a capacidade de


desenvolver componentes novos, reusveis, que automaticamente trabalham com outros
componentes Zen.

A maneira mais comum para estender o Zen, criar um componente personalizado.


Componentes personalizados se ajustam ao framework Zen existente com mnimo esforo.

Opes para criar componentes personalizados:

Construir um componente composto;

Modificar o estilo de um componente;

Criar um componente personalizado;

Criar uma mtrica personalizada.

Estas opes sero detalhadas em um mdulo posterior.

InterSystems do Brasil

44

Cach ZEN

Exerccio Conceitos de Componentes Zen


1. Abra a classe ISCUser.Pag.BoasVindas.
2. Posicione o cursor no incio desta linha.
</page>
3. Pressione Enter.
4. Mova o cursor para a linha em branco acima.
5. Digite o sinal de menor <. Uma lista de elementos XML ir aparecer.
6. Clique button.
7. Pressione Enter.
8. Digite um espao em branco. Uma lista de atributos XML ir aparecer.
9. Clique align=enter.
10. Clique caption=Mtodo Cliente.
11. Complete a classe com:
<hgroup>
<vgroup width="30%">
<calendar align="center"/>
</vgroup>
<vgroup width="40%">
<image align="center" src="images\LabExam.jpg"/>
</vgroup>
<vgroup width="30%">
<colorPicker align="center"/>
</vgroup>
</hgroup>

InterSystems do Brasil

45

Cach ZEN

Convenes de Nomenclaturas

Convenes de Nomenclaturas

InterSystems do Brasil

46

Cach ZEN

InterSystems do Brasil

47

Cach ZEN

Convenes de Nomenclaturas

Programas Zen so case-sensitive. Ento a no o mesmo que A;

As seguintes convenes de nomes so aplicadas em cdigos Zen. Estas convenes usam case
(letras maisculas e minsculas) para diferenciar entre categorias de mtodos ou propriedades.
meuNomeMetodo e MeuNomeMetodo no so o mesmo nome;

Mtodos lado-cliente:

So definidos usando a frase-chave Language=JavaScript, e so escritos em JavaScript. Podem


ser chamados a partir do cliente, e quando chamados, executam no cliente. Os nomes iniciam
com letras minsculas e as iniciais das palavras sucessivas com letras maisculas. O mesmo
verdadeiro para propriedades apenas-cliente.

Exemplo: meuNomeMetodo

Mtodos Zen:

So definidos usando a palavra-chave ZenMethod. Eles podem ser chamados a partir do cliente,
mas so executados no servidor. Estes mtodos so escritos em ObjectScript ou Basic, mas
podem incluir JavaScript embutido que retornam ao cliente. Os nomes iniciam com letras
maisculas, assim como as iniciais das palavras sucessivas.

Exemplo: MeuNomeMetodo

Mtodos lado-servidor:

No usam nenhuma palavra-chave, e so escritos em ObjectScript ou Basic. Esto disponveis


para serem chamados a partir do cdigo que est executando no servidor, e quando chamados,
executam no servidor.

Os nomes iniciam com o caracter %. Propriedades apenas-servidor usam esta conveno


tambm.

Exemplo: %MeuNomeMetodo

Classes Zen:

Geralmente, os nomes de classes Zen iniciam com letra minscula, semelhante as convenes
para mtodos e propriedades lado-cliente.

As excees para esta regra incluem algumas classes de utilitrios apenas-servidor, que iniciam
com uma letra maiscula.

InterSystems do Brasil

48

Cach ZEN

Exemplo: tablePane

Atributos e Propriedades

Nomes de atributos e propriedades iniciam com letra minscula, exceto para manipuladores de
eventos e callbacks.

Exemplo: filterOp

Manipuladores de Eventos

Atributos que identificam Manipuladores de Eventos de componentes seguem a conveno


JavaScript de todos os caracteres minsculos.

Exemplo: onmousedown

CallBacks

Atributos que identificam callbacks lado-servidor de componentes iniciam com On (letra O


maiscula).

Exemplo: OnCreateDataSet

Exerccios Mtodo do lado Cliente

Neste exerccio voc ir adicionar um mtodo JavaScript do lado cliente para a sua classe de
pgina Zen, como segue:
1. Abra ISCUser.Pag.BoasVindas no Cach Estudio.
2. Digite no manipulador de eventos onclick do boto a seguinte expresso:
zenPage.btnClique();

Esta expresso executa um mtodo chamado btnClique em um objeto chamado


zenPage.

zenPage a varivel JavaScript que representa o objeto pgina no lado cliente.


btnClique est disponvel no objeto pgina apenas se ele for definido na pgina
Zen como um mtodo lado-cliente.

Neste exerccio iremos adicionar um mtodo JavaScript lado-cliente na classe de pgina


Zen:

Posicione o cursor logo abaixo do fechamento do bloco XData Contents;

InterSystems do Brasil

49

Cach ZEN

3. Escolha Ferramentas

Modelos

Modelos ou pressione CTRL-T para mostrar a caixa de

dilogo Modelos do Cach Studio. Escolha Zen Method Wizard. Clique em OK.
Informe os seguintes valores para os campos:

Em Nome do Mtodo informe btnClique

Escolha um mtodo de instncia

Escolha executado no cliente

Informe uma descrio

Clique em Terminar. O novo mtodo aparece na classe da pgina assim:

4. Altere o cdigo do mtodo para este:

5. Escolha Compilar
6. Escolha Exibir

Compilar ou o cone.
Pgina Web ou o cone.

7. Clique no boto Pressione. O cdigo JavaScript mostra uma mensagem.


8. Clique em OK para fechar a mensagem.

InterSystems do Brasil

50

Cach ZEN

Notas: mtodo lado Cliente

Alguns itens importantes a observar no mtodo btnClique:

Ele definido como um mtodo de instncia (no usa a palavra-chave ClassMethod);

A palavra-chave Language configurada como JavaScript. Isto significa que a


implementao deste mtodo usa JavaScript. O Studio valida e aplica cores de sintaxe
como JavaScript;

Quando esta classe compilada, o mtodo btnClique no estar disponvel como um


mtodo acessvel no servidor. Ele, no entanto, estar disponvel como um mtodo de
instncia do objeto zenPage no cliente;

O compilador de classe trata a herana. Isto significa que voc pode definir mtodos
JavaScript dentro de uma super classe e eles estaro automaticamente disponveis para
qualquer subclasse.

O corpo deste mtodo usa o mtodo alert padro JavaScript para apresentar a
mensagem no cliente;

Em tempo de execuo, este mtodo executado dentro do ambiente cliente (browser);

O mtodo definido dentro da mesma unidade lgica (isto , dentro da mesma classe)
como a definio da pgina que o referncia. Isto faz com que as pginas sejam fceis
para desenvolver e manter.

InterSystems do Brasil

51

Cach ZEN

Exerccios mtodo do lado Servidor

Neste exerccio, faremos uma alterao em nossa pgina Zen. Esta alterao demonstra a
habilidade de invocar um mtodo no servidor a partir de uma pgina cliente.
1. No Studio, abra a classe de pgina;
2. Usando as tcnicas dos exerccios anteriores, adicione um novo boto dentro do bloco XData
Contents. D ao novo boto os seguintes valores de atributos:
id = meuBotaoServ
caption = Mtodo Servidor
onclick = zenPage.BtnCliqueServ();
3. Posicione o cursor logo abaixo do final do bloco XData Contents;
4. Escolha Ferramentas

Modelos

Modelos ou pressione CTRL-T para mostrar a caixa de

dilogo do Studio. Escolha Zen Method Wizard. Clique em OK. Nesta tela informe o seguinte:
Em Nome do Mtodo informe BtnCliqueServ
Escolha um mtodo de instncia
Escolha executa no servidor
Informe uma descrio.
Clique em Finish. Seu novo mtodo criado com a seguinte aparncia:

5. Altere o cdigo do mtodo para o seguinte:

6. Escolha Compilar
7. Escolha Exibir

Compilar ou o cone
Pgina Web ou o cone

8. Clique no boto Mtodo Servidor. Uma mensagem apresentada.


9. Clique em OK para fechar a mensagem.
10. Use a opo Ver Cdigo Fonte do browser para visualizar o HTML gerado.

InterSystems do Brasil

52

Cach ZEN

Alguns itens importantes a observar sobre o mtodo BtnCliqueServ:

Definido como um mtodo de instncia;

Omite a palavra-chave Language. Isto significa que este mtodo usar a linguagem de
script padro do servidor (ObjectScript ou Basic, neste caso ObjectScript);

Executa no servidor mas tambm envia um hiperevento para o cliente;

Usa a palavra-chave ZenMethod. Isto significa que este um mtodo lado-servidor que
pode ser chamado a partir do cliente. At quando este mtodo chamado a partir do
ambiente do cliente (browser), ele executado no servidor;

O mtodo associa o valor do utilitrio $ZVERSION a varivel msg, ento envia msg ao
cliente;

&js<alert(#(msg)#);> um exemplo de sintaxe de JavaScript embutido. Ao executar


este mtodo no servidor, Zen encontra o fragmento de cdigo JavaScript entre &js<> e
envia este fragmento para o cliente executar. Nota: Este comportamento fornecido
pelo mecanismo de hiperevento do CSP.

Dentro do JavaScript embutido, a sintaxe #(msg)# a conveno para transferir o valor


da varivel msg do cdigo ObjectScript executando no servidor para o JavaScript
embutido executando no cliente.

O objeto zenPage do lado-cliente pode invocar o mtodo BtnCliqueServ lado-servidor.


Isto porque foi definido como um mtodo de instncia, o servidor precisa do estado
completo do objeto lado-cliente atual para ser capaz de executar o mtodo;

O mtodo no retorna nenhum valor. Isto intencional. Ao usar hipereventos CSP, um


mtodo sem valor de retorno executa assincronamente (no aguarda uma resposta).
Desta maneira, a interface do usurio no parece congelar.

InterSystems do Brasil

53

Cach ZEN

Mdulo - Tabelas Zen

Mdulo - Tabelas Zen

InterSystems do Brasil

54

Cach ZEN

InterSystems do Brasil

55

Cach ZEN

Tabelas Zen

As tabelas Zen recebem um resultset retornado por uma query SQL e apresenta os dados como
uma tabela HTML.

H vrias formas para gerar um resultset para uma tabela Zen. Voc pode especificar um
comando SQL, fazer referncia a uma query SQL pr-definida, ou fornecer ao Zen informaes
necessrias para que o comando SQL seja gerado automaticamente.

Uma vez que os dados so recuperados, possvel aplicar na tabela diversas opes de estilo e
funcionalidade.

Inserir uma Tabela em uma Pgina Zen


<tablePane>

Para colocar uma tabela em uma pgina Zen, deve-se inserir um componente <tablePane>
dentro do bloco XData Contents na classe da pgina.

Zen fornece vrios componentes e classes auxiliares para suportar tabelas.

Elementos XML para usar com tabelas Zen

<tablePane> - Desenha uma tabela HTML baseado em uma query SQL. Cada linha do resultset
uma linha da tabela. Ela pode conter os seguintes elementos:

<parameter> fornece parmetros necessrios para a construo da query <tablePane>;

<column> especifica detalhes de layout, estilo e comportamento para uma determinada


coluna na tabela gerada. Seu uso opcional quando deseja-se apresentar todas as
colunas do resultset.

<condition> determina uma condio para aplicar um determinado estilo para a linha ou
clula da tabela. Ex.: se o valor da coluna Mdia for menor que 7 deve-se usar a cor
vermelha para o cor de fundo da linha.

<tableNavigator> fornece automaticamente um conjunto padro de botes para


navegao entre as pginas de uma tabela.

<tableNavigatorBar> alternativo ao <tableNavigator>, fornece botes extra para ajudar


na navegao de pginas.

InterSystems do Brasil

56

Cach ZEN

Origem dos Dados

O elemento <tablePane> usa umas das seguintes origens dos dados para a tabela:
1. Especificando um comando SQL;
2. Fornecendo uma simples descrio que o Zen usa para gerar o comando SQL;
3. Referenciando uma query de classe que gera o comando SQL;
4. Referenciando um mtodo callback que gera o comando SQL;

1. Especificando um comando SQL:

Um <tablePane> pode fornecer um comando SQL completo como valor do atributo sql. Zen ento
executa este comando SQL para obter o contedo da tabela.

Exemplo:
<tablePane id="tabela" sql="SELECT ID,Nome FROM
MinhaApl.Funcionarios WHERE Nome %STARTSWITH ? ORDER
BY Nome"/>

2. Gerando uma query SQL

<tablePane> suporta atributos que permitem a gerao automtica da query baseado


em uma simples descrio.

Para gerar a query SQL deve-se informar os seguintes atributos:

groupByClause - (opcional) uma clusula SQL GroupBy como Ano,Estado;

orderByClause (opcional) uma clusula SQL OrderBy como Nome,Estado.

tableName o nome da tabela SQL que fornece os dados. Este o valor usado
na clusula From.

whereClause (opcional) uma clusula SQL Where como Valor>100.

Exemplo:
<tablePane id="tabela"
tableName="MinhaApl.Funcionarios">
<column colName="ID" hidden="true" />
<column colName="Nome" />
</tablePane>

InterSystems do Brasil

57

Cach ZEN

3. Referenciando uma query de uma classe:

Um <tablePane> pode fazer referncia a queries j existentes em uma classe para obter
o objeto %ResultSet. Os seguintes atributos suportam esta tcnica:

queryClass O nome da classe que contm a query.

queryName O nome da query contida na classe.

Exemplo:
<tablePane id="tabela"
queryClass = "MinhaApl.Funcionarios"
queryName = "ListaFuncionarios" />

4. Usando um mtodo CallBack

Um <tablePane> pode gerar uma tabela usando um objeto %ResultSet definido pela
aplicao. Os seguintes atributos suportam esta tcnica:

OnCreateResultSet O nome de um mtodo CallBack lado-servidor a chamar


para criar o objeto %ResultSet.

OnExecuteResultSet O nome de um mtodo CallBack lado-servidor a chamar


para executar o objeto %ResultSet retornado pelo mtodo identificado pelo
OnCreateResultSet.

Exemplo:
<tablePane id="tabela" OnCreateResultSet="CriaRS"/>

Method CriaRS(Output pSC As %Status, pInfo as


%ZEN.Auxiliary.QueryInfo) As %ResultSet
{
Set pSC = $$$OK
Set tRS = ##class(%ResultSet).%New()
// .... Atividades do mtodo ...
Quit tRS
}
InterSystems do Brasil

58

Cach ZEN

Parmetros da Query

Ao trabalhar com queries SQL para gerar tabelas Zen, muitas vezes necessrio fornecer
valores para parmetros de entrada da query, definidos pelo caracter ?. Para isso, deve-se
usar o elemento <parameter> dentro do elemento <tablePane>.

Exemplo:
<tablePane id="tabela"
queryClass = "MinhaApl.Funcionarios"
queryName = "ListaFuncionarios">
<parameter value="Vendas"/>
<parameter value="Curitiba"/>
</tablePane>

Colunas da Tabela

Conforme descrito anteriormente, o elemento <tablePane> desenha uma tabela HTML


baseada em uma query SQL, e cada linha do resultset apresentada como uma linha da tabela.

Um <tablePane> pode tambm conter um ou mais elementos <column>, que servem para
identificar quais colunas do resultset devem ser apresentadas na tabela.

Os elementos <column> tambm especificam detalhes de layout, estilo e comportamento para


cada coluna.

Exemplo:

<tablePane id="tabela"
tableName="MinhaApl.Funcionarios">
<column colName="ID" />
<column colName="Nome"/>
<column colName="Funcao" style="color: blue;"/>
</tablePane>

InterSystems do Brasil

59

Cach ZEN

O elemento <column> possui vrios atributos que podem ser utilizados para controlar layout,
estilo e comportamento. A lista completa encontra-se na documentao.

colName: o nome da coluna SQL a que esta coluna est associada;

header: um texto que especifica o cabealho da coluna;

hidden: se o valor for igual a true, ento esta coluna no apresentada. O valor default
false;

style: valor do estilo CSS a ser aplicado nas clulas dentro da coluna. Ex.: color: red;

width: especifica a largura da coluna (opcional).

Exerccios Tabelas Zen


1. Crie uma pgina com o nome PesquisaPaciente.
1. Pacote e subpacote: ISCUser.Pag;
2. Inclua uma tabela Zen (<tablePane>);
2. Configure a tabela para ler os dados da classe ISCUser.Dados.Paciente. Utilize como origem de
dados ou a gerao da query SQL (2) ou mtodo CallBack (4), pois iremos configurar alguns
filtros na tabela.
3. Inclua as seguintes colunas na tabela: ID (oculto), Nome, Cidade, Sexo, Adulto e Prioridade
(com relacionamento para a propriedade descrio).
4. Inclua um elemento WhereClause para listar somente os pacientes adultos.
5.

Configure um estilo para a coluna Sexo, fazendo com que o texto desta coluna seja apresentado
em vermelho(style=color: red).

Estilo da Tabela

O elemento <tablePane> oferece vrios atributos para configurao do estilo da tabela. A


relao completa encontra-se na documentao.

caption: texto explicativo da tabela. apresentado no cabealho da tabela;

showRowNumber: se o valor for igual a true, ento mostra uma coluna no lado
esquerdo da tabela com o nmero da linha;

showZebra: se o valor for igual a true, ento apresenta as linhas da tabela alternando
entre uma linha clara e outra escura.

InterSystems do Brasil

60

Cach ZEN

Estilo Condicional para Linhas e Clulas

Cada elemento <condition> uma expresso simples, baseada nos valores de uma determinada
linha, que controla o estilo da linha ou de uma clula individual.
<tablePane id="tabela"
sql="SELECT Nome,Salario FROM MinhaApl.Funcionarios">
<condition colName="Nome"
predicate="STARTSWITH"
value="A"
rowStyle="background: plum;"/>
</tablePane>

No exemplo anterior, as linhas em que o valor do Nome inicia com a letra A ser apresentada
com a cor de fundo plum;

A quantidade de condies aumenta o processamento necessrio para apresentar a tabela,


portanto deve-se usar conscientemente.

O elemento <condition> possui vrios atributos, segue alguns deles:

cellStyle: estilo CSS a ser aplicado nas clulas dentro de colunas-alvo, para linhas em que a

condio verdadeira. Ex.: color: red;

colName: nome da coluna que fornece o dado a ser avaliado.

predicate: operador lgico usado pela condio. O valor padro EQ (igual). A


sequncia apresenta as opes para este atributo;

targetCol: nome da coluna a aplicar o cellStyle. Se no for informado, usado o


valor de colName;

value: valor a ser comparado com o valor na coluna identificado em colName. Se


estiver entre {} ser usado o nome de outra coluna, ex.: {Nome}

Valores possveis para o atributo predicate:

CONTAINS: Verdadeiro se o valor na coluna identificada por colName contm (como uma
substring) o valor especificado por value;

EXTEQ: Verdadeiro se o nome do arquivo tiver a extenso especificada em value;

EQ: Igual (=);

GT: Maior (>);

GTEQ: Maior ou igual (=>);

LT: Menor (<);

LTEQ: Menor ou igual (=<);

NEQ: No for igual (=);

STARTSWITH: inicia com ...

InterSystems do Brasil

61

Cach ZEN

Modo Snapshot

Um <tablePane> pode operar em modo snapshot. Neste modo, Zen executa a query da tabela
uma vez e copia estes resultados para um local temporrio no servidor.

As prximas atualizaes da pgina mostram os dados a partir deste local temporrio.

Este modo especialmente til ao trabalhar com tabelas multi-pginas, ou com tabelas que o
usurio pode escolher a ordem dos dados.

Atributos:

useSnapshot: quando for igual a true ativado o modo snapshot. O valor padro
false.

pageSize: para tabelas em modo snapshot, este atributo identifica que para apresentar
os dados em vrias pginas, e qual o tamanho da pgina (quantos registros apresentar
em cada vez). 0 (zero), o padro, significa que para apresentar todos os dados na
primeira pgina.

Exemplo:
<tablePane id="tabela"
sql="SELECT Nome,Salario FROM Pac.Classe"
useSnapshot="true"
pageSize="25" />

Exerccios Tabelas Zen


6. Insira uma coluna (a primeira) informando o nmeor da linha.
showRowNumbers="true"
7. Configure para que tenha estilo zebra (linhas claras e escuras alternadas).
showZebra="true"
8. Inclua uma condio, fazendo com que as linhas com pacientes masculinos tenham todo o texto
em negrito (font: bold;)
<condition colName="Sexo" predicate="EQ" value="M" rowStyle="font: bold;"/>
9. Configure a tabela para usar o modo Snapshot e apresentar 10 linhas por pgina.
useSnapshot="true" pageSize="10"

InterSystems do Brasil

62

Cach ZEN

Filtrando Colunas

Uma tabela Zen pode criar filtros a serem apresentados acima do cabealho de qualquer
coluna. Um filtro um campo de entrada onde o usurio pode informar um ou mais critrios de
pesquisa.

Quando o usurio submete estas alteraes, a query associada ao <tablePane> re-executada


usando novos critrios.

Os filtros trabalham apenas com tabelas que usam um comando SQL gerado automaticamente
ou um mtodo callback OnCreateResultSet.

O elemento <column> possui diversos atributos para trabalhar com filtros, entre eles:

filterType: Indica que a coluna deve apresentar o filtro e qual tipo de filtro usado. Os
valores possveis so: "", "text", "range", "date", "datetime", "enum", "query", ou "custom".

filterEnum: Se filterType for igual a Enum, este atributo define um conjunto de valores
possveis a usar no filtro. Ex.: vermelho,verde,azul.

filterEnumDisplay: Se filterType for igual a Enum, e se filterEnumDisplay fornece uma


lista de valores, a combo box apresenta estes valores no lugar dos valores
correspondentes em filterEnum.

filterOp: Operador SQL a avaliar o filtro. Os valores possveis so: "", "%STARTSWITH",
"=", ">=", "<=", "<>", ">", "<", "[","BETWEEN", "IN", ou "%CONTAINS".

filterQuery: Se filterType for igual a query, este atributo define o comando SQL usado
para popular a combo box.

Exemplo:
<tablePane id="tabela" useSnapshot="true"
tableName="MinhaApl.Funcionarios">
<column colName="ID" hidden="true"/>
<column colName="Nome" filterType="text" />
<column colName="Departamento"
filterType="enum"
filterEnum="Vendas,RH,Produo"
filterOp="=" />
</tablePane>

InterSystems do Brasil

63

Cach ZEN

Links em Colunas

Colunas em tabelas Zen podem apresentar links, como por exemplo links que acessam outra
pgina para editar os dados do objeto mostrado na linha atual.

Este link pode ser mostrado tanto em uma coluna que contm um dado, como em uma coluna
extra na tabela.

Alguns atributos:

link: Indica que a coluna apresentada como um link, e o valor do atributo a URL a
acessar. Para invocar um mtodo JavaScript lado-cliente, inicie a URL com javascript:.
Ex.: link=javascript:zenPage.meuMetodo();

linkCaption: Se a coluna tem um link definido e no apresenta um valor de um dado,


este atributo especifica um texto para usar como um texto explicativo do link.

linkConfirm: Se a coluna tem um link definido, o texto deste atributo apresentado como
uma mensagem de confirmao antes de o link ser executado.

Exemplo:
<tablePane id="tabela"
sql="SELECT ID,Matricula,Nome FROM Apl.Funcionarios">
<column colName="ID" hidden="true"/>
<column colName="Matricula"
link="MinhaApl.EditFunc.cls?ID=#(%query.ID)#"
linkTitle="Ver informaes do funcionrio." />
<column
link="javascript:zenPage.inclDep('#(%query.ID)#');"
linkCaption="Incluir dependente"
linkConfirm="Deseja incluir um dependente?" />
</tablePane>

InterSystems do Brasil

64

Cach ZEN

Botes de Navegao

O componente <tableNavigator> mostra automaticamente um conjunto de botes para


movimentao atravs das pginas de uma tabela Zen (<tablePane>).

O <tableNavigatorBar> tem sintaxe idntica ao <tableNavigator>, no entanto apresenta botes


extras para auxiliar na navegao entre as pginas.

Para usar um dos componentes, coloque-o em qualquer lugar de uma pgina que contm um
<tablePane> e configure o atributo tablePaneId com o valor do atributo Id do elemento
<tablePane>.

Exemplo:
<tablePane id="minhaTab" tableName="Apl.Funcionarios">
<column colName="ID" hidden="true"/>
<column colName="Nome"/>
</tablePane>
<tableNavigatorBar tablePaneId="minhaTab" />

Exerccios Tabelas Zen


10. Inclua um filtro na coluna Nome para que sejam listados somente os pacientes cujo nome
iniciem com um determinado texto.
11. Inclua um filtro na coluna Prioridade para que sejam listados somente os pacientes de uma
determinada categoria.
12. Inclua uma coluna, a ltima da tabela, com um link. Este link, quando clicado, deve chamar um
mtodo JavaScript que mostra uma mensagem de alerta informando o nome do paciente da
linha que o usurio clicou. Tambm deve pedir a confirmao do usurio, se realmente deseja
gerar um alerta.
13. Como nossa tabela est limitada a apresentar 10 registros por pgina, devemos incluir um
elemento de barra de navegao. Teste ambos o <tableNavigator> ou o <tableNavigatorBar>.

Exerccios Tabelas Zen (Pesquisa Exames)


1. Crie uma pgina de pesquisa para exames, usando <tablePane...>, deve se chamar
PesquisaExames.
1. Nome do pacote e subpacote: ISCUser.Pag.
2. Inclua uma tabela Zen, <tablePane>.
InterSystems do Brasil

65

Cach ZEN

Mdulo Controles Zen

Mdulo Controles Zen

InterSystems do Brasil

66

Cach ZEN

InterSystems do Brasil

67

Cach ZEN

Controles Zen

Controles Zen so os elementos de entrada do usurio que so inseridos em um formulrio Zen


(discutido no prximo mdulo).

Cada controle tem um valor associado a ele. A propriedade que contm o valor atual do controle
a value.

Zen valida e submete todos os valores dos controles de um formulrio, como uma unidade.

Categorias dos Controles

Os controles Zen esto divididos nas seguintes categorias:

Botes: <button>, <image>, <submit>;

Textos: <label>, <text>, <textarea>, <password>;

Escolhas simples: <checkbox>, <colorPicker>, <radioButton>, <radioset>;

Listas: <select>, <listBox>, <dataListBox>, <combobox>, <dataCombo>;

Calendrios: <calendar>, <dateText>;

Planilhas: <dynaGrid>;

Ocultos: <hidden>.

Atributos Comuns

Todos os controles Zen possuem atributos em comuns.

clientType: Indica o tipo do dado (data type) JavaScript para o valor do controle. Por
padro, um controle trata o valor como string, no entanto, para fins de validao, podem
ser usados os seguintes: string, boolean, integer e float.

dataBinding: Se este controle est associado um data controller, este atributo identifica
a propriedade que fornece o valor ao controle.

disabled: a aparncia no alterada, mas no responde s aes do usurio;

onblur: evento que disparado quando o controle perde o foco. Ex.: <button
onblur=alert(Perdeu o foco);>;

onchange: disparado quando o valor do controle alterado;

onclick: disparado quando clicado com o mouse no controle;

ondblclick: disparado quando clicado duas vezes com o mouse no controle;

readOnly: quando verdadeiro, este controle apenas-leitura e no submetido seu valor


quando o formulrio que o contm submetido;

required: quando verdadeiro, o usurio deve informar um valor para este controle, caso
contrrio, a validao falhar;

InterSystems do Brasil

68

Cach ZEN

Botes

Zen oferece os seguintes controles em estilo de botes:

<button> o usurio clica em um boto que pode disparar aes;

<image> o usurio clica em uma imagem;

<submit> o usurio clica em um boto que submete um formulrio;

<button> e <submit>

O componente <button> um simples mapeamento do elemento HTML <input type=button>.

O componente <submit> um tipo especial de boto que submete um formulrio.

Alm dos atributos comuns a todos os controles, os componentes <button> e <submit> tem
ainda:

caption: texto apresentado no boto.

Exemplo: <button caption=Texto do boto/>

<image>

O controle <image> mostra uma imagem esttica.

Pode ser usado para apenas apresentar uma imagem, ou serve como um boto se for
especificado o atributo onclick.

Atributos:

src: identifica o caminho e o nome do arquivo da imagem. O caminho relativo ao


diretrio de instalao do Cach.

Ex.: <image id=imgTeste src=/csp/Apl/imagens/imagem.png>

InterSystems do Brasil

69

Cach ZEN

Textos

Zen oferece os seguintes controles de estilo texto:

<label> mostra um rtulo de texto;

<text> o usurio informa um texto;

<textarea> o usurio informa vrias linhas de texto;

<password> o usurio informa um texto como senha.

<label>, <text> e <password>

O controle <label> mostra passivamente um texto esttico.

O controle <text> um simples mapeamento do elemento HTML <input type=text>.

O controle <password> um mapeamento do elemento HTML <input type=password>.


Qualquer texto informado neste controle apresentado com pontos, dessa forma no possvel
visualizar o que est sendo digitado.

Alm dos atributos comuns, os controles <text> e <password> possuem os seguintes:

maxlength: nmero mximo de caracteres que o usurio pode informar dentro do


controle;

size: valor inteiro que indica a largura do controle. O padro 20.

<textarea>

O controle Zen <textarea> uma caixa de texto multi-linha.

um mapeamento do elemento HTML <textarea>.

Tem os seguintes atributos:

cols: nmero de colunas do controle. O default 19;

rows: nmero de linhas do controle. O default 2.

InterSystems do Brasil

70

Cach ZEN

Escolhas Simples

Zen oferece os seguintes controles para simples escolhas:

<checkbox> o usurio marca e desmarca uma caixa;

<colorPicker> o usurio seleciona uma cor de uma paleta;

<radioSet> o usurio clica em uma opo em uma linha de botes radio;

<radioButton> botes radio podem ser colocados em qualquer lugar da pgina.

A nicas diferena entre <radioSet> e <radioButton> que <radioSet> tem layout mais simples.

Use <radioSet> para uma simples lista de opes;

Use <radioButton> quando voc quer um layout mais sofisticado.

<checkbox>

O controle Zen <checkbox> um mapeamento do elemento HTML <input type=check>.

Apresenta um texto perto da caixa e detecta cliques do usurio no texto ou no caixa.

Diferente do checkbox HTML, o controle Zen sempre submete um valor.

Exemplo:

InterSystems do Brasil

71

Cach ZEN

<colorPicker>

O componente <colorPicker> mostra uma linha de cores para o usurio escolher. O usurio clica
em uma cor para escolh-la;

<colorPicker> oferece uma alternativa para a paleta complexa <colorPane>;

Possui os seguintes atributos (alm dos atributos comuns):

colorList: lista de cores (valor CSS) separadas por vrgula a apresentar dentro do
controle, da esquerda para a direita. O valor padro como mostrado na imagem acima :
,black,gray,darkblue,darkred,darkgreen,blue,red,green,yellow,
orange,plum,purple,white

<radioSet>

Este controle apresenta uma lista concisa de botes radio de um conjunto de opes;

A maneira mais simples para definir um <radioSet> fornecer um valueList para o usurio
escolher. possvel informar valores correspondentes ao valueList para o usurio visualizar
atravs do displayList.

Exemplo:

possvel tambm indicar uma fonte de dados para as opes dos botes atravs de queries
SQL.

InterSystems do Brasil

72

Cach ZEN

Quando usada esta tcnica, as colunas retornadas pela query determinam o que mostrado
no <radioSet>.

Se o %ResultSet tem apenas uma coluna, o contedo desta coluna usado tanto para o
valor lgico (valueList) quanto para o apresentado (displayList).

Se o %ResultSet tem duas (ou mais) colunas, o contedo da primeira coluna fornece o
valor lgico (valueList) e o da segunda coluna fornece o valor a ser apresentado
(displayList);

Os seguintes atributos do suporte o uso de queries SQL:

maxRows: Opcional, informa o nmero de mximo de itens a retornar pelo SQL.

queryClass: Opcional, o nome da classe que contm a query. Deve-se informar tambm
o atributo queryName.

queryName: Opcional, o nome da query na classe que ir fornecer o %ResultSet.

sql: Opcional, comando SQL que fornece os dados para o <radioSet>.

Exemplo:

InterSystems do Brasil

73

Cach ZEN

<radioButton>

um mapeamento do elemento HTML <input type=radio> com algumas capacidades


melhoradas.

Possui os seguintes atributos (alm dos comuns):

name: (no id) estabelece a associao entre os botes radio. criado um conjunto de
botes associados informando o mesmo nome (name) para todos os botes;

caption: o texto a ser apresentado no boto radio;

optionValue: define o valor lgico associado ao boto.

Exemplo:

Listas

Zen oferece os seguintes controles de listas:

<select> mostra uma caixa de lista. Mapeamento do elemento HTML <select>.

<listBox> define uma caixa de lista com opes fixas para o usurio escolher.

<dataListBox> Zen gera uma caixa de lista, baseado em uma query.

<combobox> define uma combo box com opes fixas.

<dataCombo> Zen gera uma combo box, baseado em uma query.

InterSystems do Brasil

74

Cach ZEN

<select>

Este elemento produz uma lista de opes (combobox) onde o usurio pode escolher um item.

A maneira mais simples para definir um <select> fornecer um valueList para o usurio
escolher. possvel informar valores correspondentes ao valueList para o usurio visualizar
atravs do displayList.

Exemplo:

possvel tambm indicar uma fonte de dados para as opes atravs de queries SQL.

Quando usada esta tcnica, as colunas retornadas pela query determinam o que mostrado
no <select>.

Se o %ResultSet tem apenas uma coluna, o contedo desta coluna usado tanto para o
valor lgico quanto para o apresentado.

Se o %ResultSet tem duas (ou mais) colunas, o contedo da primeira coluna fornece o
valor lgico (valueList) e o da segunda coluna fornece o valor a ser apresentado
(displayList);

Os seguintes atributos do suporte ao uso de queries SQL:

maxRows: Opcional, informa o nmero de mximo de itens a retornar pelo SQL.

queryClass: Opcional, o nome da classe que contm a query. Deve-se informar tambm
o atributo queryName.

queryName: Opcional, o nome da query na classe que ir fornecer o %ResultSet.

sql: Opcional, comando SQL que fornece os dados para o <select>.

Exemplo:

InterSystems do Brasil

75

Cach ZEN

<listBox>

O controle Zen <listBox> apresenta uma caixa de lista, cujas opes podem ser formatadas
individualmente.

Este controle no um mapeamento do elemento HTML <select>. Isto permite fornecer


funcionalidades no disponveis com <select> HTML, incluindo:

Mais controle sobre o contedo da lista;

Soluo de problemas com Internet Explorer operando em conjunto com CSS.

Exemplo:

InterSystems do Brasil

76

Cach ZEN

<dataListBox>

um tipo especializado de <listBox> que apresenta ao usurio uma lista de opes obtidas
atravs de uma query SQL.

Diferente do <listBox>, este controle no permite adicionar elementos <option> ou configurar os


elementos individualmente.

No h opes estticas definidas, ento no h elementos <option>.

Para fornecer os dados a um <dataListBox> so utilizados os mesmos recursos das tabelas Zen,
ou seja, possvel:

Especificar uma query SQL (atributo sql).

Gerar uma query SQL (atributos groupByClause, orderByClause, tableName e


whereClause).

Referenciar uma query de uma classe (atributos queryClass e queryName).

Usar um mtodo CallBack (atributos onCreateResultSet e onExecuteResultSet).

Exemplo:

InterSystems do Brasil

77

Cach ZEN

<comboBox>

O controle Zen <combobox> no um mapeamento do elemento HTML <select>. Este controle


fornece funcionalidade no disponvel com o <select> HTML, incluindo:

A habilidade de editar os valores em uma caixa de texto;

Maior controle sobre o contedo da lista;

Solues de problemas com Internet Explorer junto com CSS.

A maneira mais simples para criar um <combobox> fornecer os atributos valueList e


displayList, de forma semelhante aos outros controles abordados anteriormente.

Alternativamente, possvel fornecer elementos <option> dentro do componente <combobox>.

<option> mais flexvel do que valueList e displayList porque ele permite a aplicao de
estilos CSS para cada item da lista.

Exemplo:

Os controles <combobox> e <dataCombo> possuem vrios atributos, entre eles:

comboType: Como a caixa dropdown ativada pelo combo box:

image indica que ser apresentada uma imagem para o usurio clicar;

button indica que um boto apresentado perto do texto do combo box;

timer indica que a caixa dropdown apresentada automaticamente aps um


determinado tempo depois que o usurio informar algo na combo box.

buttonCaption: texto a apresentar no boto quando comboType button;

InterSystems do Brasil

78

Cach ZEN

delay: quando comboType timer, especifica nmero de milisegundos a aguardar


depois que o usurio termina de digitar e antes de apresentar o dropdown. O default
250.

editable: se verdadeiro, o usurio pode editar um valor dentro da caixa de entrada, como
se fosse um campo de texto.

maxlength: nmero mximo de caracteres que o usurio pode informar dentro do


controle.

selectedIndex: ndice baseado em 0 da opo selecionada na lista dropdown.

InterSystems do Brasil

79

Cach ZEN

<dataCombo>

um tipo especializado de <combobox> que apresenta ao usurio uma lista de opes obtidas
atravs de uma query SQL.

Diferente do <combobox>, este controle no permite adicionar elementos <option> ou configurar


os elementos individualmente.

Como no h opes estticas definidas, ento no h elementos <option>.

O <dataCombo> fornece sua lista criando, executando e lendo um objeto %ResultSet no


servidor.

As colunas retornadas determinam o que apresentado na lista <dataCombo>:

Se o %ResultSet, tem apenas uma coluna, o contedo desta coluna usado tanto para
o valor lgico quanto para o valor a ser apresentado.

Se tiver duas (ou mais) colunas, a primeira coluna fornece o valor lgico e as demais
colunas fornecem os valores a apresentar. Atravs dos atributos valueColumn e
choiceColumn possvel alterar essas colunas.

Se tiver mais de duas colunas, possvel utilizar os atributos displayColumns e


columnHeaders para especificar que a lista dropdown tem vrias colunas.

Para fornecer os dados a um <dataCombo> so utilizados os mesmos recursos das tabelas Zen,
ou seja, possvel:

Especificar uma query SQL (atributo sql).

Gerar uma query SQL (atributos groupByClause, orderByClause, tableName e


whereClause).

Referenciar uma query de uma classe (atributos queryClass e queryName).

Usar um mtodo CallBack (atributos onCreateResultSet e onExecuteResultSet).

Exemplo:

InterSystems do Brasil

80

Cach ZEN

Exemplo:

Esta definio de <dataCombo> tem os seguintes efeitos:

A query definida pelo sql chamada sempre que a lista dropdown apresentada. Ela
fornece um conjunto de valores lgicos (ID) e de apresentao (Nome). O parmetro ?
recebe o valor do campo texto do <dataCombo>; o valor de searchKeyLen indica que os
primeiros 10 caracteres sero usados nesta busca.

A query definida pelo sqlLookup usada para encontrar um especfico valor de


apresentao para um especfico valor lgico. Esta query deve retornar uma nica linha
contendo um valor de apresentao.

InterSystems do Brasil

81

Cach ZEN

Calendrios

Zen oferece os seguintes controles para seleo de datas:

<calendar> o usurio seleciona datas a partir de um calendrio popup;

<dateText> o usurio pode informar/digitar ou selecionar uma data.

<calendar>

Componente que apresenta um calendrio navegvel por ms, onde o usurio pode visualizar e
selecionar uma data.

Segue relao de alguns atributos deste controle:

dayList: lista separada por vrgula das abreviaes dos dias a apresentar no incio do
calendrio. O valor padro : $$$Text(S,M,T,W,T,F,S);

endYear e startYear: nmero do ano mximo/mnimo (4 dgitos) a considerar no


calendrio.

fixedMonth: se verdadeiro, o calendrio apresenta apenas um ms, e no fornece


maneira para o usurio mudar o ms/ano.

maxDate e minDate: string no formato AAAA-MM-DD. Se especificado indica a maior e a


menor data a considerar.

monthList: lista separada por vrgula dos nomes dos meses. Ex.:
$$$Text(Jan,Fev,Mar,..).

showTime: se verdadeiro, apresentando alm do calendrio uma caixa de texto para


informao de horrio.

timeCaption: texto para mostrar no campo de horrio quando showTime verdadeiro.

InterSystems do Brasil

82

Cach ZEN

<dateText>

O controle <dateText> essencialmente uma combo box. Apresenta uma caixa de texto e um
boto, que quando pressionado, mostra um calendrio popup.

Este controle tambm faz a converso do valor digitado pelo usurio para o formato data ou
mostra uma mensagem de data invlida.

Deve-se informar a data no formato AAAA-MM-DD.

Pode-se configurar nos parmetros format como DMY e separator como / para as datas no
formato europeu.

Atributos:

invalidDateMessage: mensagem apresentada pelo controle quando o usurio digita uma


data invlida. O padro $$$Text(Invalid Date,%ZEN);

minDate e MaxDate: opcional; no formato AAAA-MM-DD; indica a menor e a maior data


a considerar no calendrio;

showTime: se verdadeiro, apresentado alm do calendrio uma caixa de texto para


informao de horrio.

format: DMY,MDY, YMD.

separator: /,.,-

Exemplo:

InterSystems do Brasil

83

Cach ZEN

Planilhas

O controle <dynaGrid> mostra um grid editvel, em duas ou trs dimenses, semelhante a uma
planilha.

possvel criar um <dynaGrid> das seguintes formas:

Especificar um dataset, linhas e colunas (descrito neste mdulo);

Associar o <dynaGrid> a um MVC.

<dynaGrid> com Data Set

Os dados apresentados em um <dynaGrid> so fornecidos por um objeto


%ZEN.Auxiliary.dataSet.

dataSet um objeto especial que contm dados usados para definir uma, duas ou trs
dimenses de dados.

O <dynaGrid> cria automaticamente um objeto dataSet com duas dimenses, com o nmero de
linhas (dimenso 1) e colunas (dimenso 2) especificados pelo nmero de entradas <gridRow> e
<gridColumn> dentro da definio do <dynaGrid>.

InterSystems do Brasil

84

Cach ZEN

O seguinte exemplo especifica 4 linhas e 4 colunas para o objeto dataSet inicial:

Uma aplicao pode alterar o tamanho e contedo do objeto dataSet inicial atravs da definio
de um mtodo callBack.

Deve-se especificar o nome deste mtodo no atributo OnCreateDataSet.

A assinatura do mtodo callback OnCreateDataSet deve ser:

Onde:

pGrid: o objeto dynaGrid que est invocando o callback;

pDataSet: o objeto dataSet associado ao objeto dynaGrid;

O mtodo retorna um valor %Status indicando sucesso ou falha.

InterSystems do Brasil

85

Cach ZEN

Exemplo de mtodo callBack:

Quando o mtodo callback altera o objeto dataSet para conter 3 dimenses, isso d ao
<dynaGrid> a habilidade para movimentar entre pginas de dados.

Cada pgina apresentada como um grid de duas dimenses que representa a pgina atual que
est sendo visualizada.

A imagem abaixo ilustra este modelo de dados.

InterSystems do Brasil

86

Cach ZEN

Campos Ocultos

O controle Zen <hidden> um mapeamento do elemento HTML <input type=hidden>.

Est presente em um formulrio, e tem um valor (value) associado, mas nunca visvel ao
usurio.

O valor pode ser alterado programaticamente.

Os controles <hidden> so submetidos junto com o formulrio.

InterSystems do Brasil

87

Cach ZEN

Exerccios - Controles Zen


1. Crie uma nova pgina Zen com:
1. Pacote: ISCUser.Page;
2. Aplicao: ISCUser.Aplic.Aplication;
3. Nome da Classe: PacienteControles;
2. No cabealho da pgina, insira o texto: Exerccio Controles Zen.
3. Insira um texto no incio da pgina: Cadastro de Pacientes (<label>).
4. Insira um grupo horizontal com:
1. Um texto (<label>): Nome do Paciente:
2. Uma caixa de texto (<text>). Atribua um id.
5. Insira um outro grupo horizontal com:
1. Um texto (<label>): Prioridade:
2. Um conjunto de botes de rdio (<radioSet>) que l a classe
ISCUser.Dados.PacientePrioridade
e apresente todas as prioridades dos pacientes.
6. Insira outro grupo horizontal com:
1. Um texto (<label>): Adulto:
2. Um checkbox (<checkbox>).
7. Insira outro grupo horizontal com:
1. Um texto (<label>): Sexo:
2. Uma caixa de seleo (<select>) com duas opes: Masculino e Feminino (valores
lgicos 1 and 2).
8. Insira outro grupo horizontal com:
1. Um texto (<label>): Indicao:
2. Um combo box (<dataCombo>) que l a classe ISCUser.Dados.Paciente e apresente
todos os pacientes. Este combo box deve permitir que o usurio informe os primeiros
caracteres do nome do paciente para filtrar os registros.
9. Insira outro grupo horizontal com:
1. Um texto (<label>): Data de Nascimento:
2. Um calendrio (<calendar>) com os dias da semana e o nome dos meses.
10. Insira outro grupo horizontal com:
1. Um boto com o texto: Limpar.
2. Um boto com o texto : Salvar.
3. Um boto com o texto : Deletar.
InterSystems do Brasil

88

Cach ZEN

InterSystems do Brasil

89

Cach ZEN

Mdulo Formulrios Zen

Mdulo Formulrios Zen

InterSystems do Brasil

90

Cach ZEN

InterSystems do Brasil

91

Cach ZEN

Formulrios Zen

Formulrio Zen um grupo especializado desenvolvido para conter controles.

Tem os mesmos atributos de estilo e layout de qualquer outro grupo Zen.

H dois componentes de formulrios disponveis:

<form> um grupo Zen que contem uma lista especfica de componentes. Estes
componentes podem ou no estar ligados a um data controller. O layout inteiramente
determinado pela definio do <form> no XData Contents;

<dynaForm> uma extenso do <form> que insere dinamicamente os controles. A lista de


controles pode ser determinada pelas propriedades de um data controller associado, ou
por um mtodo callback que gera a lista de controles. Layout automtico.

Hierarquia de Classes Zen

InterSystems do Brasil

92

Cach ZEN

Interaes com o Usurio

A interao bsica entre o usurio de uma aplicao Zen e um formulrio Zen a seguinte:
1. O usurio interage com os controles no formulrio;
2. Zen pode validar os dados no momento que so informados;
3. Uma ao do usurio indica que para submeter o formulrio;
4. Zen pode validar os dados antes de tentar submeter o formulrio;
5. Zen interage com o usurio para tratar qualquer erro encontrado;
6. Quando estiver tudo certo, Zen submete os dados do formulrio;
7. Ento pode ocorrer:

Dados do formulrio podem ser gravados no servidor;

A mesma pgina Zen pode ser reapresentada;

Uma pgina Zen diferente pode ser apresentada;

A mesma pgina Zen pode ser apresentada, mas com componentes


adicionados ou alterados.

Definindo um Formulrio

Os componentes Zen <form> e <dynaForm> suportam vrios atributos, entre eles:

autoValidate: se verdadeiro (padro), automaticamente valida o formulrio


sempre que ele submetido;

controllerId: associa o formulrio a um data controller que fornece os dados ao


formulrio;

nextPage: prxima pgina a ser apresentada quando o formulrio submetido


com sucesso;

onchange: expresso JavaScript invocada quando o valor de um controle deste


formulrio alterado pelo usurio;

InterSystems do Brasil

93

Cach ZEN

Fornecendo valores para um Formulrio

Um formulrio pode inicialmente mostrar os campos em branco, ou voc pode fornecer os dados
para os campos.

Fornecer dados para um campo significa atribuir um valor para a propriedade value do controle.

H vrias formas para fazer isso:

Atribuir um valor ao atributo value:

<text value=ol/>

Atribuir um valor ao atributo onLoadForm:

<form id=MeuForm onLoadForm=CarregaForm>

Atribuir as propriedades value a partir do mtodo da pgina %OnAfterCreatePage.

Do ..%SetValueById(Nome,$G(^formTeste(Nome)))

No lado cliente, chamar o mtodo setValue para cada controle.

Exemplo:

InterSystems do Brasil

94

Cach ZEN

Detectando Modificaes no Formulrio

Um formulrio Zen rastreia se ocorreram ou no alteraes em algum controle do formulrio.

Os mtodos isModified dos controles retornam verdadeiro se o valor lgico do controle


(propriedade value) for diferente do valor lgico original (propriedade originalValue).

Ao chamar o mtodo isModified do formulrio, invocado o isModified de cada controle do


formulrio, e se algum deles retornar verdadeiro, ento o isModified do formulrio retorna
verdadeiro.

Validando um Formulrio

Todo formulrio Zen tem um mtodo validate, que valida os valores dos controles do formulrio.

Se o atributo autoValidate for verdadeiro, o mtodo validate chamado automaticamente cada


vez que o formulrio submetido. No entanto, o mtodo validate pode ser chamado
explicitamente pela aplicao.

O mtodo validate faz o seguinte:

Chama o manipulador onvalidate do formulrio, se definido. Se este evento retornar


falso, Zen declara o formulrio como invlido e no executa demais verificaes.

Zera a propriedade invalid de todos os controles do formulrio, e testa cada controle


chamando o mtodo validationHandler de cada controle, que faz:

Se os atributos readOnly ou disabled forem verdadeiros, retorna verdadeiro;

Se o atributo required for verdadeiro e o controle no possui um valor, retorna


falso;

Se o controle define um evento onvalidate, ele executado e retorna seu valor.

Como o mtodo validate testa cada controle, um array de controles invlidos criado;

Aps todos os testes do mtodo validate, se retornar verdadeiro, ento o formulrio


vlido;

Se o formulrio contiver um ou mais controles com valores invlidos, ele invlido e as


aes necessrias so tomadas.

InterSystems do Brasil

95

Cach ZEN

Submetendo um Formulrio

A requisio para submeter o contedo de um formulrio pode ser disparada das seguintes
maneiras:

O usurio clica em um boto <submit> colocado dentro do formulrio;

A aplicao chama o mtodo submit do formulrio em resposta a um evento do usurio:


%form.submit

Quando um formulrio submetido, os valores dos controles do formulrio so enviados ao


servidor e o mtodo %OnSubmit da pgina que contm o formulrio chamado.

O mtodo %OnSubmit recebe todos os valores submetidos. Zen automaticamente trata todos os
detalhes da operao submit, incluindo chamadas a mtodos no servidor, e processamento de
erros.

Todos os formulrios so submetidos usando o mtodo HTTP POST.

Exemplo:

InterSystems do Brasil

96

Cach ZEN

InterSystems do Brasil

97

Cach ZEN

Formulrio para Login

Um pgina de login um caso especial de formulrio Zen.

Por padro, dependendo das configuraes de segurana do Cach, quando um usurio inicia
uma aplicao Zen, uma janela, padro do Cach, solicitando usurio e senha apresentado.

Para criar um formulrio de login personalizado, necessrio:

Criar uma classe de pgina Zen;

No bloco XData Contents, inserir um formulrio com controles para usurio e senha. O
atributo name dos controles devem respeitar o exemplo:

<page>
<form>
<text name="CacheUserName" />
<password name="CachePassword" />
<submit caption="OK" />
</form>
</page>

No Portal de Administrao, v em Home

Administrao de Segurana

Aplicaes

CSP.

Clique no boto Editar da aplicao;

No campo Pgina de Login informe o caminho e nome da classe da pgina Zen. Ex.:
/csp/MinhaApl/MinhaPagLogin.cls

Clique em Salvar.

InterSystems do Brasil

98

Cach ZEN

Exerccios Formulrios Zen

Crie uma nova pgina chamada Login;


1. Insira um Formulrio:
1. Inclua um Text para Login;
2. Inclua um Password para Password;
3. Inclua um boto Submit ;
2. Sobrescreva o mtodo %OnSubmit com o cdigo a seguir:
ClassMethod %OnSubmit(pSubmit As %ZEN.Submit) As %Status
{
Set loginok = 1
Set vuser = pSubmit.%Data("txtusuario")
Set vpass = pSubmit.%Data("txtsenha")
Set rs=##class(%ResultSet).%New()
Set sql="Select Password From ISCUser_Dados.Usuarios Where Login = ?"
Do rs.Prepare(sql)
Do rs.Execute(vuser)
If 'rs.Next() { Do pSubmit.%SetError("formlogin",Login Invlido)

Else {
If rs.GetData(1) '= vpass
{
Do pSubmit.%SetError("formlogin","Invalid Password")
}
Else {
Set UserId = 1
Do %session.Set("UsuarioId",UserId)
Do %session.Set(NomeUsuario",vuser)
Set pSubmit.%NextPage = ..Link("ISCUser.Pag.Menu.cls")
}
}
Quit $$$OK

InterSystems do Brasil

99

Cach ZEN

Exerccios Formulrios Zen (Controles.)

1. Neste exerccio iremos aprimorar a pgina ISCUser.Pag.PacienteControles criada no mdulo


anterior.
2. Faa com que ao ser carregada a pgina, no calendrio que informa a data de nascimento j
venha selecionado o dia atual, e que o checkbox Ativo venha marcado, para fazer isso:

Crie o mtodo callback %OnAfterCreatePage() e insira:


do ..%SetValueById(calNasc,$zdate($horolog,3))
do ..%SetValueById(chkAdulto,1)
Quit $$$OK

3. Insira um formulrio (<form>) fazendo com que todos os controles da pgina sejam filhos dele.
4. Altere o boto Salvar para o tipo Submit.
5. Altere a caixa de texto Nome do Cliente para que o seu preenchimento seja obrigatrio.
6. Configure o campo Nome do Cliente para apresentar a seguinte mensagem em caso de no
preenchimento: Informe o Nome do Paciente..
7. Configure o formulrio para que em casos de erros na validao seja apresentada a seguinte
mensagem: Falha na Validao da Pgina..
8. Teste a pgina informando e no informando um valor para o campo Nome do Cliente.

Formulrios Dinmicos

<dynaForm> um tipo de formulrio especializado que insere dinamicamente os componentes


de controles em uma pgina Zen.

Layout determinado automaticamente pelo cdigo interno do <dynaForm>.

A lista de controles pode ser determinada pelas propriedades de um data controller associado,
ou por um mtodo callback.

InterSystems do Brasil

100

Cach ZEN

InterSystems do Brasil

101

Cach ZEN

Mdulo - MVC

Mdulo - MVC

InterSystems do Brasil

102

Cach ZEN

InterSystems do Brasil

103

Cach ZEN

Modelo-Viso-Controle (MVC)
Para simplificar o fluxo de dados entre a origem dos dados e a pgina Zen, so fornecidos um

conjunto de classes que definem o modelo de dados (o Modelo) e conecta-o a um conjunto de


componentes Zen (a Viso) atravs de um objeto intermedirio (o Controle).
Exemplos de usos tpicos de MVC:

Criar um formulrio que apresenta um conjunto de propriedades, carregadas a partir de


um objeto persistente do banco de dados. O formulrio apresenta automaticamente
controles apropriados para o tipo de dado (data type) de cada propriedade.

Criar um grfico baseado em valores de um formulrio. O grfico atualiza-se


automaticamente cada vez que o usurio submete alguma alterao no formulrio.

Mostrar medidores representando um conjunto de valores calculados no servidor. Sempre


que a pgina atualizada, os medidores automaticamente atualizam-se com os valores
atuais do servidor.

Arquitetura

InterSystems do Brasil

104

Cach ZEN

Modelo de Dados (Data Model)

Um modelo de dados define um conjunto de propriedades com nome e valor.


Um modelo de dados tem a habilidade de recuperar valores de dados de uma ou mais origem (um
objeto persistente, banco de dados externo, ou global) e colocar estes valores em suas prprias
propriedades.
Estas propriedades ento tornam-se disponveis para serem acessadas por um componente data
controller em uma pgina Zen.
O desenvolvedor da classe de modelo de dados responsvel pela implementao dos mtodos
que:

Carrega os valores de uma origem para as propriedades da classe modelo;

Grava os valores novamente no servidor;

E valida os valores.

H duas variaes de classes de modelos de dados:

Uma subclasse de %ZEN.DataModel.ObjectDataModel chamada de objeto de modelo


de dados. Contm um conjunto de valores nomeados, que so propriedades
formalmente definidas dentro da subclasse.

A classe abstrata %ZEN.DataModel.Adaptor define uma interface. Qualquer classe


persistente que implemente esta classe torna-se um modelo de dados.

Controlador de Dados (Data Controller)


O controlador de dados gerencia a comunicao entre um modelo de dados e uma viso dos
dados.
um componente (dataController) que inserido em uma pgina Zen junto com outros
componentes, mas no visvel.
A propriedade modelClass informa o nome da classe de modelo de dados associada.

InterSystems do Brasil

105

Cach ZEN

Viso dos Dados (Data View)

A viso dos dados qualquer componente Zen que implemente a interface


%ZEN.Component.dataView.
Um componente de visualizao de dados conecta a um data controller associado em tempo de
execuo e usa-o para receber e gravar valores a partir do modelo de dados associado.
Mais do que um componente de visualizao de dados podem apontar para o mesmo data
controller.
A seguir a lista de componentes Zen que implementam a interface %ZEN.Component.dataView,
ou seja, os componentes que visualizam dados (que podem ser ligados a um data controller):

<dynaGrid>

Todos os formulrios;

Todos os grficos;

Todos os medidores.

Criando um Formulrio
As sequncias mostram um exemplo simples de como usar o MVC para criar um formulrio.
Suponha um objeto persistente chamado Dados.Cliente que contm registros de clientes. Este
objeto pode ter dezenas de propriedades. No entanto, ns queremos criar uma pgina simples
que apenas apresente as informaes demogrficas, neste caso o nome e a cidade do cliente.

Passo 1: Modelo de Dados.

Primeiro, definimos uma classe de modelo de dados (ModeloCliente) que saiba como
carregar e armazenar as propriedades do objeto Cliente:

InterSystems do Brasil

106

Cach ZEN

Passo 2: Controlador de Dados

Suponha que j temos criado uma classe de pgina Zen. Agora inserimos um
componente data controller na pgina Zen adicionando um elemento <dataController>
no bloco XData Contents.

Onde:

id o nome que os visualizadores de dados usaro para identificar o


dataController.

modelClass o nome do pacote e da classe de modelo de dados.

modelId o nmero que identifica o registro a ser carregado inicialmente da


origem de dados.

Passo 3: Visualizador de Dados

Agora possvel criar um formulrio e conect-lo ao controlador de dados


(dataController).

Para isso deve-se configurar a propriedade controllerId do <form> para ser igual a
propriedade id do <dataController>.

Dentro do formulrio criamos 2 controles <text>. E fazemos referncia entre os controles


<text> e as propriedades da classe de modelo de dados atravs do atributo dataBinding.

InterSystems do Brasil

107

Cach ZEN

Exemplo:

Cada controle <text> est agora conectado a uma propriedade da classe de modelo de dados.

Passo 4: Resultado

Quando a pgina Zen que contm o formulrio apresentada, o componente


dataController cria um objeto Apl.ModeloCliente no servidor, e carrega os dados do
registro nmero 1 (identificado pelo atribulo modelId do <dataController>) em suas
prprias propriedades.

O dataController coloca estes dados nos controles apropriados dentro do formulrio.

O atributo dataBinding de cada controle identifica qual propriedade fornece o valor para
cada controle.

A imagem sequinte mostra o formulrio com os valores do registro nmero 1.

Um dataController pode ser compartilhado entre vrios componentes. Por exemplo, o mesmo
dataController pode fornecer dados para um formulrio, um grfico e um medidor em uma
pgina Zen.

InterSystems do Brasil

108

Cach ZEN

Formulrios Dinmicos

O elemento Zen <dynaForm> cria um formulrio dinamicamente contendo todas as propriedades


da classe de modelo de dados a que o formulrio est conectado atravs do dataController.
Desta maneira no necessrio a criao manual dos controles de apresentao do valor de cada
propriedade, como foi utilizado com o elemento <form>.
O sequncia apresenta um exemplo da utilizao do <dynaForm>.

Este simples cdigo cria automaticamente todos os controles necessrios para a entrada de dados
de todas as propriedades contidas na classe de modelo de dados (Apl.Cliente).
O tipo do controle (textbox, checkbox, ...) criado determinado pelo tipo de dado (data type) de
cada propriedade.
Onde:

Como visto anteriormente, o elemento <dataController> conecta-se a um registro de


uma classe de modelo de dados, atravs dos atributos modelClass e modelId.

O elemento <dynaForm> cria um formulrio dinamicamente com base nas propriedades


da classe de modelo

Como resultado do simples cdigo apresentado anteriormente, temos a seguinte pgina Web.

InterSystems do Brasil

109

Cach ZEN

Gravao dos dados do Formulrio


Para gravar os valores de um formulrio associado a um dataController, chame o mtodo save do
componente dataController, ou do formulrio que est conectado ao data controller.
O mtodo save retorna ao servidor e grava os dados chamando os mtodos apropriados da
classe de modelo de dados.
A diferena entre chamar o mtodo save do formulrio ou do dataController, que o mtodo save
do formulrio, alm de gravar as informaes, executa a validao do formulrio.

Validao dos dados

Ao invs de aguardar pela validao no servidor, possvel adicionar validao no lado cliente.

Para isso deve-se definir o mtodo IsValidJS de uma propriedade especfica na classe de
modelo de dados.
O cdigo abaixo um mtodo de classe, JavaScript, que usa a conveno de nome

propriedadeIsValidJS e retorna uma mensagem de erro se o valor da propriedade invlido ou


(uma string vazia) se valor estiver OK.

InterSystems do Brasil

110

Cach ZEN

Componentes de Visualizao de Dados


A sequncia apresenta a relao de atributos que permitem aos componentes Zen agir como
componentes de visualizao de dados.
Nem todos os componentes Zen suportam estes atributos, a distino :

controllerId e onnotifyView so parte da interface de visualizao de dados, ento eles


so aplicados a componentes Zen que implementam esta interface, como <dynaGrid>,
formulrios, grficos e medidores;

dataBinding adaptvel apenas aos componentes que mostram apenas um valor, como
medidores e controles

controllerId: identifica o dataController para este visualizador de dados. O controllerId


deve ser compatvel com o valor do atributo id do componente <dataController>.

dataBinding: identifica a propriedade do modelo de dados que est conectada a este


componente.

onnotifyView: expresso JavaScript lado cliente que executada cada vez que o
dataController associado com o visualizador de dados executa um evento.

Classes de Modelos de Dados


Na maioria dos casos, o Modelo de Dados consiste de dois objetos: o Modelo de Dados que
fornece a interface e o objeto de origem (ou objetos) que fornecem os dados.
A criao de um Modelo de Dados feita atravs da criao de uma subclasse de um tipo

especfico de Modelo de Classes e implementando um ou mais mtodos callback.


A forma mais simples de criar um modelo de dados adicionando a superclasse

%ZEN.DataModel.Adaptor a uma classe persistente. Isto automaticamente fornece a interface


de Modelo de Dados para a classe persistente.
Para casos personalizados, deve-se criar uma nova classe que deriva de
%ZEN.DataModel.ObjectDataModel e implementar seus vrios mtodos callback.
As propriedades de uma classe de Modelo de Dados definem o contedo do modelo de dados.
Consumidores de modelos de dados (como formulrios dinmicos) podem usar as definies de
propriedades para apresentar automaticamente o contedo do modelo de dados.

InterSystems do Brasil

111

Cach ZEN

Object Data Model x Adaptor Data Model

Como dito anteriormente, h duas maneiras para trabalhar com classes de modelos de dados:

Herdando de %ZEN.DataModel.ObjectDataModel: a classe de modelo de dados serve


como um mapeamento de uma classe de dados independente. Neste caso deve-se
implementar os mtodos que recupera os dados do objeto persistente, grava os dados,
abre o objeto, etc.

Herdando de %ZEN.DataModel.DataModelAdaptor: torna qualquer classe persistente um


Modelo de Dados. Neste caso voc no tem a necessidade de implementar os mtodos
bsicos para recuperao, gravao dos dados, etc. No entanto a convenincia
oferecida por esta tcnica torna a classe pouco flexvel.

InterSystems do Brasil

112

Cach ZEN

Personalizando o Modelo de Dados


Uma das maneiras de personalizar a forma com que as propriedades da classe de modelo de

dados so apresentadas em uma pgina Zen, sobrescrever o mtodo callback


%OnGetPropertyInfo.
Por exemplo, para que uma propriedade Avaliacao seja apresentada em um formulrio dinmico
como uma combobox ao invs de um campo texto (padro):
Exemplo:
ClassMethod %OnGetPropertyInfo(pIndex As %Integer, ByRef pInfo As %String, pExtended As
%Boolean = 0) As %Status
{
Set pIndex = pIndex + 3 #; adiciona um campo no final do formulrio
Set pInfo("Extra") = pIndex
Set pInfo("Extra","%type") = "checkbox"
Set pInfo("Extra","caption") = "Extra!"
Set pInfo("Extra","label") = "This is an extra checkbox."
Set pIndex = pIndex + 1 #; adiciona outro campo no final do formulrio
Set pInfo("Comments") = pIndex
Set pInfo("Comments","%type") = "textarea"
Set pInfo("Comments","caption") = "Please enter additional comments:"
Set pIndex = pIndex + 1
Quit $$$OK
}
As superclasses de Modelos de Dados fornecem parmetros de propriedades teis para
personalizar a forma com que feita a exibio na pgina Zen.
A seguir relao de alguns desses atributos, a utilizao deles opcional:

ZENCONTROL: tipo do controle a ser usado para mostrar a propriedade dentro do


formulrio. Se no definido, Zen escolhe o controle baseado no tipo do dado da
propriedade.

ZENHIDDEN: 1 (verdadeiro) ou 0 (falso). Se verdadeiro, indica que este um campo


oculto.

ZENLABEL: texto usado pela propriedade dentro do formulrio.

ZENREADONLY: 1 ou 0. Se verdadeiro, o controle no pode ser editado pelo usurio.

ZENSQL: corresponde a propriedade sql que vrios componentes Zen possuem.

ZENSQLLOOKUP: corresponde a propriedade sqllookup que vrios componentes Zen


possuem.

ZENTAB: ordem que o controle apresentado dentro do formulrio.

InterSystems do Brasil

113

Cach ZEN

Exerccios MVC

1. Modifique a classe persistente PacientePrioridade, tornando-a uma classe de modelo de


dados. Para isso faa com que herde de %ZEN.DataModel.Adaptor.
2. Crie uma nova pgina Zen ISCUser.Pag.Prioridade e insira:
1. Um componente <dataController> com ligao com o ID de nmero 1 do objeto da
classe de modelo de dados PacientePrioridade.
2. Um form (<form>) com ligao com o <dataController>.
3. Dois componentes <text>, sendo um para a propriedade Codigo e outro para a
propriedade Descricao.
4. Dois botes que permitam a navegao entre registros.
5. Insira o seguinte cdigo ao atributo onclick do boto Anterior:
onclick="zenPage.anterior();
6. Insira o seguinte cdigo ao atributo onclick do boto Prximo:
onclick="zenPage.proximo();
7. Insira o seguinte mtodo JavaScript que far acesso ao registro prvio.
8. Insira um mtodo JavaScript que far acesso ao prximo registro.

Exerccios MVC (Paciente)


1. Crie uma nova classe de modelo de dados chamada ISCUser.MVC.Paciente que herde de
%ZEN.DataModel.ObjectDataModel.
2. Insira nesta nova classe todas as propriedades da classe persistente.

3. Sobrescreva o mtodo %OnNewSource, que cria uma nova instncia do objeto Paciente.

InterSystems do Brasil

114

Cach ZEN

Method %OnNewSource(Output pSC As %Status = {$$$OK}) As %RegisteredObject


{
Set status = ##class(ISCUser.Dados.Paciente).%New()
Quit status
}
4. Crie o mtodo %OnOpenSource, que abre um objeto:

5. Crie o mtodo %OnLoadModel, que traz para a classe de modelo de dados os valores das
propriedades do objeto persistente.

6. Crie o mtodo %OnSaveSource, que salva um objeto.

7. Crie o mtodo %OnStoreModel, que atualiza a classe de dados com os valores inseridos na
classe de modelo de dados.

InterSystems do Brasil

115

Cach ZEN

8. Crie o mtodo %OnDeleteSource , que deleta um objeto.

9. Crie uma nova pgina Zen, ISCUser.Pag.Paciente.

10. Insira um <dataController>. Faa com que seja carregado o primeiro registro da classe
de modelo ISCUser.MVC.Paciente criada no passo anterior.

11. Insira um formulrio dinmico ligado ao <dataController> criado anteriormente. Lembrese de incluir um valor para o atributo id, ser necessrio depois.

12. Insira 5 botes aps o <dynaForm> para:


1. Ir para o registro anterior.
2. Ir para o prximo registro.
3. Criar um novo registro, que chama o mtodo JavaScript novo();
4. Salvar o registro, que chama o mtodo JavaScript salva();
5. Deletar um registro, que chama o mtodo JavaScript deleta().

13. Codifique os mtodos JavasCript: novo(), salva() e deleta(), na pgina Zen.

InterSystems do Brasil

116

Cach ZEN

14. Modifique a propriedade Prioridade na classe de modelo de dados incluindo os parmetros


ZENSQL e ZENSQLLOOKUP, como a seguir:
ZENSQL = "SELECT ID,Descricao FROM ISCUser_Dados.PacientePrioridade
ZENSQLLOOKUP = "SELECT Descricao
FROM ISCUser_Dados.PacientePrioridade
WHERE ID = ?

15. Inclua em algumas propriedades da classe de modelo de dados, parmetros para a configurao
da aparncia, usando:
ZENCONTROL, ZENLABEL, ZENTAB, ...

InterSystems do Brasil

117

Cach ZEN

Mdulo MVC Exerccios Adicionais

Mdulo MVC Exerccios Adicionais

InterSystems do Brasil

118

Cach ZEN

InterSystems do Brasil

119

Cach ZEN

Exerccios Adicionais Super Classe de Pgina

Crie uma superclasse de pgina usando a herana


1. Crie uma superclasse de pgina para as classes at o momento.
2.

Nomeie a classe: ISCUser.Pag.Pagina.cls e faa com que herde de %ZEN.Component.Page.


Para o layout use o Default.
1. Esta superclasse ser usada pelas pginas desenvolvidas com MVC e <dynaForm>.

3. Modifique o Xdata Contents da superclasse.


1. Abra a classe ISCUser.Pag.Paciente e copie o contedo do XData Contents.
2. Cole no Contents de Pagina.cls.
3. Mude o ttulo em html por Title.
4. No <dataControler>
1. Altere o parmetro modelClass:
De: "ISCUser.MVC.Paciente -> Para: " #(%page.ClasseModelo)# "
2.

Altere o parmetro modelId:


De: 1-> Para: "#(%page.ModelId)#

5. Crie o parmetro.
Parameter CLASSEMODELO As %String;
6. Crie as propriedades.
Property ClasseModelo As %String [ InitialExpression = {..#CLASSEMODELO} ];
Property ModelId As %String(ZENURL = "ModelId");
7. Altere o id do controller para id = controller e o id do form para id = form.
8. Copie os mtodos de instncia da classe de pgina Paciente.cls para a Pagina.cls.
9. Faa alteraes nos mtodos:
1. Altere zenPage.getComponentById('orgPaciente'); para
zenPage.getComponentById('controller');
2. Altere zenPage.getComponentById('frmPaciente'); para
zenPage.getComponentById('form');

InterSystems do Brasil

120

Cach ZEN

Exerccios Adicionais Usando relacionamentos

1. Crie as pginas ISCUser.Pag.Exames.cls e ISCUser.Pag.ExamesItem.cls.


2. Faa com que herdem de ISCUser.Pag.Pagina, a superclasse para pginas.
3. Salve e compile.
4. Em Exames.cls:
1. Crie: Parameter CLASSEMODELO = ISCUser.Dados.Exames";
2. Elimine o XData Style e o Contents.
3. Remova os parmetros APPLICATION e DOMAIN.
5. Em ExamesItem.cls:
1. Crie: Parameter CLASSEMODELO = ISCUser.Dados.ExamesItem";
2. Elimine o XData Style e Contents.
3. Remova os parmetros APPLICATION e DOMAIN.
6. Crie a pgina ISCUser.Pag.Menu.cls e links para acessar as pginas:
1. Use: <html><a href=...>...</a></html>
1. <html><a href="ISCUser.Pag.Paciente.cls">Pacientes</a></html>
2. <html><a href="ISCUser.Pag.Prioridade.cls">Prioridades</a></html>
3. <html><a href="ISCUser.Pag.Exames.cls">Exames</a></html>
4. <html><a href="ISCUser.Pag.ExamesItem.cls">Itens dos Exames</a></html>

5. Observe o funcionamento da herana, veja que os campos e botes j foram


criados.

Exerccios Adicionais Fazendo pesquisas usando <tablePane> e manipulando mtodos


1. Crie a pgina ISCUser.Pag.PesquisaItens.cls.
2. Adicione um componente <tablePane>.
3. Crie colunas na <tablePane> para as colunas, ID, Tipo e Quantidade da tabela
ISCUser_Dados.ExamesItem.
4. Mostre a descrio do Tipo, fazendo:
colName = Tipo->Descricao," observe que a seta (->) um join entre as tabelas Exames e
Itens. Adicione um header.
5. Adicione um navegador para os dados:
Para isso: useSnapshot = 'true e pageSize = 10 na definio da <tablePane>.
6. Adicione um link na classe 'ExamesItem.cls para pesquisar todas as requisies e itens
requisitados.
InterSystems do Brasil

121

Cach ZEN

Abra a classe 'ExamesItem.cls'. Onde deveria ser colocado o link?


Para isso temos que modificar a superclasse de pgina e no a classe de itens diretamente.
Abra a classe Pagina.cls e insira aps os botes:
<vgroup width="30%">
<pane paneName="Links" width="100%"/>
</vgroup>
7. Na classe ExamesItem crie um 'XData Links e dentro um <pane> e dentro dele um link para a
pgina de pesquisa criada anteriormente. V em Classe->Adicionar->Novo Xdata.
Observe que o nome do Xdata o mesmo que foi atribudo ao parmetro paneName
anteriormente.
XData Links [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<pane xmlns="http://www.intersystems.com/zen">
<vgroup align="left">
<link href="ISCUser.Pag.PesquisaItens.cls" caption=Pesquisa Itens "/>
</vgroup>
</pane>
}

8. Em PesquisaItens.cls', para facilitar a pesquisa pode-se filtrar os itens por exames, adicione na
classe:
Property ExameId As %String (ZENURL = exame");
Receberemos como parmetro de url o id do exame e usaremos como filtro para a query na
pesquisa.

9. Adicione entre <table> e </table > um elemento <parameter>.


Na definio da <tablePane> uma clusula where: whereClause = Exame = ?".
'Exame o nome da coluna da tabela.
<parameter value="#(%page.ExameId)#"/>

10. Teste o funcionamento chamando a url e passando um parmetro:


http://localhost: <port> /csp/user/ISCUser.Pag.PesquisaItem.cls?exame = 1
Deveriam ser listados somente os itens daquele exame.

InterSystems do Brasil

122

Cach ZEN

Exerccios Adicionais Usando launchPopupWindow'


11. Retorne para a pgina de cadastro de exames e crie um link para a pesquisa, faa isso:
1. Crie o XData Links.
2. Depois: <link href="javascript: zenPage.pesquisa();" caption=Pesquisa Exames"/>
12. Crie o mtodo pesquisa():
Method pesquisa() [ Language = javascript ]
{
var link = 'ISCUser.Pag.PesquisaExames.cls';
zenPage.launchPopupWindow(link,Pgina de Pesquisa Exames','status,scrollbars,resizable,top=100,left=100,width=400,height=500');
}
13. Em PesquisaExames.cls na definio da <tablePane> adicione:
<... valueColumn="ID" ... onselectrow="zenPage.fire();" ...>
Onde: o primeiro parmetro o valor a ser retornado quando voc seleciona uma linha e o
segundo o mtodo a ser invocado.
14. Crie o mtodo fire(): observe que a tabela referenciada pelo id, neste caso tblExames,
'getValue () usado para pegar o valor que foi selecionado.
Method fire() [ Language = javascript ]
{
var idTabela = zenPage.getComponentById(tblExames').getValue();
zenPage.firePopupAction('Action', idTabela);
}
Onde: 'Action uma ao qualquer e idTabela o valor atribudo ao valueColumn.

InterSystems do Brasil

123

Cach ZEN

Neste ponto voc ainda no poder testar.


15. Na pgina ISCUser.Pag.Exames.cls sobrescreva o mtodo onPopupAction (Classe->
sobrescrever) e atribua ao parmetro modelId do <dataController> o valor recebido da linha
selecionada.
Method onPopupAction(popupName, action, value) [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
controller.setModelId(value);
}
'Action e 'value so os valores retornados pelo mtodo fire ();
setModelId atribui ao controller o id selecionado na pesquisa e retornado em value.
16. Altere agora ExamesItem e PesquisaItens'. Abra a pesquisa numa janela popup.
17. Faa alteraes:
1. Em Exames, inclua um link para o cadastro 'ExamesItem.cls
<link href="javascript: zenPage.chamaItem();" caption=Cadastro de Itens"/>
2. Crie o mtodo chamaItem().
Veja que estamos enviando o id (pai) para o cadastro dos itens (filhos).
Method chamaItem() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
var id = controller.getModelId();
if (id=='')
{
alert(Pesquise um exame!');
return;
}
var link = "ISCUser.Pag.ExamesItem.cls?exame= + id;
location.href = link;
}
18. Na classe 'ExamesItem.cls' crie a propriedade.
Property ExameId As %String(ZENURL=exame");
19. Na classe 'ExamesItem' crie o mtodo atualiza() que ser chamado por 'onloadHandler:
Method atualiza() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
InterSystems do Brasil

124

Cach ZEN

controller.setDataByName('Exame',zenPage.ExameId);
// informa a tela para atualizar...
zenPage.getComponentById('form.Exame').setValue(zenPage.ExameId);
zenPage.getComponentById('form.Exame').setProperty('disabled',"true");
}
Confia as mudanas. Veja que o campo ficou protegido.
20. Sobrescreva o mtodo 'onloadHandler e chame o mtodo atualiza():
zenPage.atualiza (); dentro de 'onloadHandler;
21. Para filtrar os itens, para a pesquisa de itens, passe o id como parmetro de url na pgina onde
a pesquisa chamada:
1. Abra a classe ExamesItem.cls e modifique o link para 'javascript: zenPage.pesquisa ();
2. Adicione um caption.
3. No mtodo pesquisa () altere o link para a chamada de itens. Passe o id do exame.
4. Teste.

InterSystems do Brasil

125

Cach ZEN

Exerccios Adicionais usando OnGetPropertyInfo'


Na tela de cadastro de exames, queremos o Nome do paciente e no o ID e na tela que itens queremos
a Descrio e no o ID do tipo, como faramos isso? Lembre-se no possumos um form para manipular
diretamente.
Para manipular os campos da tela temos que sobrescrever o mtodo %OnGetPropertyInfo na classe
de modelo de dados ou usar o parmetro "OnGetPropertyInfo" do <dynaForm> que deve chamar um
mtodo na pgina, cujo nome especificado neste parmetro.
Os parmetros dos campos sero informados neste mtodo.
O mtodo deve ter uma assinatura padro: vamos cham-lo PropriedadeInfo.
Method PropriedadeInfo (pIndex As %Integer,ByRef pInfo As %String,pModelId As %String) As
%Status
{
Set pInfo("Field1") = pIndex
Set pInfo("Field1","%type") = "textarea"
Set pInfo("Field1","label") = "LabelField1: "
...
Quit $System.Status.OK()
}
22. Faa as alteraes necessrias.
1. Em 'Exames.cls' atribua parmetros para a propriedade Paciente: veja o nome da
propriedade na classe de dados se necessrio.

Method PropriedadeInfo(pIndex As %Integer, ByRef pInfo As %String, pModelId As %String)


As %Status
{
Set pInfo("Paciente","sql") = "Select ID,Nome
From ISCUser_Dados.Paciente
Order By Nome"
Set pInfo("Paciente","sqllookup") = "Select Nome
From ISCUser_Dados.Paciente
Where ID = ?"
Quit $System.Status.OK()
}
23. Na superclasse faa alteraes na definio do <dynaform> no parmetro OnGetPropertyInfo =
"PropriedadeInfo.
24. Teste suas alteraes.

InterSystems do Brasil

126

Cach ZEN

InterSystems do Brasil

127

Cach ZEN

Mdulo - Relatrios Zen

Mdulo - Relatrios Zen

InterSystems do Brasil

128

Cach ZEN

InterSystems do Brasil

129

Cach ZEN

Relatrios Zen

Zen fornece um framework extensvel para a criao de relatrios no formato XHTML ou PDF.
A criao de um relatrio exige 3 passos:
1. O desenvolvedor cria uma classe de relatrio Zen e, dentro dela, fornece dois blocos
XML:

2.

XData ReportDefinition que define os dados

XData ReportDisplay que define o layout

O desenvolvedor ou usurio final gera a sada informando a URI da classe do relatrio


em um browser, ou chamando o mtodo GenerateReport a partir da linha de comando
ou de dentro da aplicao. O tipo da sada deve ser informado: XHTML ou PDF.

3.

A classe do relatrio direciona os dados e as informaes de exibio atravs de uma


das duas seqncias: XHTML ou PDF.

InterSystems do Brasil

130

Cach ZEN

XData ReportDefinition
O bloco XData ReportDefinition especifica os dados a apresentar no relatrio.
Tambm descreve como formatar estes dados em XML.
Pode conter referncias a seguinte varivel:

%val o valor do atributo field no mesmo elemento.

E pode conter os seguintes elementos XML:

<report> - identifica a query que retorna os dados;

Que contm os seguintes elementos em qualquer ordem e quantidade:

<element> - escreve um elemento XML;

<attribute> - escreve um atributo XML;

<aggregate> - calcula totais, mdias para o relatrio.

Contem 0 ou 1:

<group> - agrupa itens para que operaes possam ser executadas em grupo.

possvel omitir ou sobrescrever o bloco XData ReportDefinition se for fornecido um valor vlido
para o parmetro de classe DATASOURCE.
Se for fornecido o parmetro de classe e o bloco XML, o valor do parmetro ter preferncia.

<report>

O elemento <report> o container de nvel mais alto dentro do bloco XData ReportDefinition.
Um <report> pode conter vrios elementos <element>, <attribute> e <aggregate> em qualquer
ordem.
Um <report> pode conter um <group>. Cada <group> pode conter um outro <group>.
<report> requer um atributo name e alguma combinao de atributos de query.

InterSystems do Brasil

131

Cach ZEN

<element>
O elemento <element> vlido dentro de um <group> ou <report>.
Cada <element> adiciona um elemento XML no documento XML.
Tem os seguintes atributos:

expression: Opcional. Pode ser usado para processar o valor de field antes de ger-lo. A
linguagem da expresso deve ser COS. Dentro da expresso, a varivel %val
representa o valor de field. O atributo expression pode ser usado sem o atributo field
para retornar um dado esttico como a data do relatrio. Ex.:
<element name=dataAtual expression=$ZDate($Horolog,3) />

field: especifica uma coluna do resultset.

name: gera um elemento XML deste nome na sada. Uma entrada como esta:
<element name=meuMes field=mes />
Produz um elemento XML assim:
<meuMes>Julho</meuMes>

<attribute>

O elemento <attribute> vlido dentro de um <group> ou <report>.


<attribute> funciona exatamente igual ao <element>, mas a sua informao gerada como um
atributo do elemento <group> ou <element> que o contm.

<aggregate>
O elemento <aggregate> pode aparecer dentro de um <group> ou <report>.
<aggregate> executa clculos sobre todos os registros do resultset retornado pela query do
<report>.
Tem os seguintes atributos:

type: especifica o tipo de clculo a executar. Os valores possveis so: SUM, COUNT,
AVG, MAX, MIN, CLASS, CUSTOM.

class: se o type for igual a CLASS, deve especificar o nome do pacote e da classe que
deriva de %ZEN.Report.CustomAggregate.

method: se o type for igual a CUSTOM, deve especificar um nome de mtodo ladoservidor da classe do relatrio Zen.

InterSystems do Brasil

132

Cach ZEN

<group>

O elemento <group> indica que o Zen deveria executar o mesmo conjunto de operaes em todos
os registros do resultset compatveis com um critrio especificado.
Se o <group> no especifica nenhum critrio, Zen executa as operaes do <group> em cada
registro do resultset.
Os elementos contidos dentro do <group> especificam o que fazer.
Um <report> pode conter um <group>. E cada <group> pode conter outro <group>.
Apenas um <group> deve existir em cada nvel.
Atributos dos elementos <group> e <report>:

name: o elemento <group> gera um elemento XML com este nome no arquivo de sada
XML.

breakOnField: o termo breakOnField significa: Se encontrar este campo, pare para


examinar seu valor. Todos os registros do resultset que contm o mesmo valor no
campo especificado por este atributo so processados juntos.
Se este atributo no for informado, o <group> processa todos os registros do resultset da
mesma forma.
O campo informado neste atributo, deveria estar ordenando o resultset, pois o resultset
examinado sequencialmente e cria uma parada sempre que o campo especificado muda.
Ento se a query no estiver ordenada por este campo, uma parada pode ocorrer
inesperadamente.

breakOnExpression: Fornece uma expresso a aplicar ao valor do campo especificado


por breakOnField.
A linguagem da expresso deve ser COS.
Por exemplo, suponha que voc queira agrupar por ms, e voc tem um mtodo na
classe de relatrio Zen chamado LeMes que l uma data e retorna o ms. Ento voc
poderia fornecer um <group> como este:

<group name=mes breakOnField=data breakOnExpression=..LeMes(%val)>

InterSystems do Brasil

133

Cach ZEN

Um <group> ou <report> pode especificar uma query. A seguir relao de atributos que suportam
query.

sql: Opcional. Query SQL que retorna o contedo da lista <select>.

queryClass: Opcional. Nome da classe que contm uma query. O atributo queryName
deve ser tambm fornecido.

queryName: Opcional. Nome da query da classe que fornece o %ResultSet para lista
<select>. O atributo queryClass deve ser tambm fornecido.

OnCreateResultSet: Opcional. Nome de um mtodo callback que cria um objeto


%ResultSet.

Exerccios Relatrios
1. Crie uma nova pgina de relatrio Zen com:
1. Pacote: ISCUser.Rel
2. Nome da classe: Paciente
3. Nome do relatrio: Paciente

2. O wizard solicitar que voc informe uma query que suprir os dados para o relatrio, digite :
Select ID,Nome,Cidade,Estado,Sexo,Adulto,Prioridade->Descricao as Prioridade
From ISCUser_Dados.Paciente
Order By Prioridade,Nome

3. O wizard criar e apresentar uma classe de relatrio Zen com alguns parmetros e os blocos
XData ReportDefinition e XData ReportDisplay.

4. Um relatrio consiste de um ou mais agrupamentos. Defina o primeiro grupo adicionando um


elemento <group> dentro do XData ReportDefinition. Informe o seguinte cdigo depois do
comentrio existente neste bloco e antes de </report>.
<group name="Prioridade" breakOnField="Prioridade></group>

5. Compile e veja a pgina web gerada.

6. Adicione um elemento <attribute> dentro do <group>:


<attribute name=nome field=Prioridade />
InterSystems do Brasil

134

Cach ZEN

7. Compile e veja a pgina web gerada.

8. Adicione um elemento <aggregate> entre o element <attribute> e </group>


<aggregate name="qt" type="COUNT" field="ID" />

9. Adicione dentro de <group> mais um elemento <group> e mais elementos <element> no bloco
XData ReportDefinition.
<group name="Paciente" breakOnField="ID">
<element name="Cidade" field="Cidade"/>
<element name=Estado" field=Estado"/>
<element name="Sexo" field="Sexo"/>
<element name="Adulto" field="Adulto"/>
<attribute name=Nome" field=Nome"/>
</group>

InterSystems do Brasil

135

Cach ZEN

XData ReportDisplay
O bloco XData ReportDisplay responsvel pela especificao da apresentao dos dados
obtidos pelo bloco XData ReportDefinition.
Os estilos no bloco XData so independentes do formato de sada.
Um relatrio pode ser chamado/iniciado a partir do browser ou da linha de comando de um
Terminal.
O relatrio pode gerar a sua sada nos formatos XHTML e PDF.

Elementos do bloco XData ReportDisplay

<element>: identifica o ttulo. Contm os seguintes elementos (na seguinte ordem):

<document> - caractersticas gerais da pgina, principalmente para formato


PDF.

<pageheader> - cabealhos da pgina, usado no PDF e opcionalmente no


HTML.

<pagefooter> - rodaps da pgina, usado no PDF e opcionalmente no HTML.

<body> - container de elementos que controlam:

Layout Grfico;

Estilo e Aparncia;

possvel omitir o bloco XData ReportDisplay completamente, desde que seja informado uma
valor vlido para os parmetros de classe HTMLSTYLESHEET e XSLFOSTYLESHEET.

tambm possvel omitir o XData ReportDisplay se quiser usar a classe de relatrio Zen para
apenas gerar arquivos de dados XML.

<report>

O elemento <report> o container de nvel mais alto em um bloco XData ReportDisplay.


Ele pode conter apenas os seguintes elementos, na seguinte ordem e quantidade:

<document> (0 ou 1)

<pageheader> (0 ou 1)

<pagefooter> (0 ou 1)

<body> (1).

O elemento <report> tem os seguintes atributos:


InterSystems do Brasil

136

Cach ZEN

name: o nome do relatrio, que deve ser compatvel com o nome do relatrio no bloco
XData ReportDefition.

title: o ttulo do relatrio, usado por itens como o nome do arquivo PDF ou ttulo da
pgina XHTML.

style: se style=none, a folha de estilo padro Zen no desenhada, do contrrio .


A folha de estilo padro uma coleo de classes de estilo disponveis que incluem
p.banner1, table.table1, td.table1, th.table1, ...

<document>
O elemento <document> aplicado principalmente para sada PDF.
Especifica caractersticas de layout fsica como dimenses de pginas e margens.
Pode conter vrios elementos <class>, <xslinclude> e <cssinclude> para personalizar o estilo.
Se for omitido, mesmo se for gerar um PDF, caractersticas de layout padro so aplicados, como
tamanho de pgina de 8.5x11 polegadas.
O elemento <document> tem os seguintes atributos:

headerHeight: especifica a altura do bloco destinado ao cabealho, entre a margem


superior e o corpo do relatrio.

footerHeight: especifica a altura do bloco destinado ao rodap.

height: especifica a altura da pgina.

width: especifica largura da pgina.

marginBottom: especifica a margem inferior.

marginLeft: especifica a margem esquerda.

marginRight: especifica a margem direita.

marginTop: especifica a margem superior

O elemento <class> cria estilos CSS a serem aplicados no relatrio.


Os subelementos <att> descrevem as caractersticas do estilo.
Para fornecer o seguinte fragmento de documento CSS:

InterSystems do Brasil

137

Cach ZEN

necessrio o seguinte elemento <class> e elementos <att>:

O elemento <cssinclude> referencia um arquivo de estilos CSS externo e a ser aplicado em sadas
XHTML.
O elemento <xslinclude> referencia um arquivo de estilos CSS externo a ser aplicado em sadas
PDF.
Exemplo: para importar a classe th.minhaTabela de arquivos externos, o elemento <document>
deveria conter:

Com o arquivo meuEstilo.css contendo:

E meuEstilo.xsl contendo:

<pageheader>
O elemento <pageheader> contm o cabealho do relatrio. Se presente no <report>, deve estar
antes do elemento <body>.
Pode conter os mesmos elementos de layout e aparncia descritos em <body>, mas todo o seu
contedo apresentado no espao em branco fornecido pelo atributo headerHeight do elemento
<report>.
Relatrios XHTML no suportam o cabealho pgina-a-pgina, ento o cabealho apresentado
apenas no incio do relatrio.
InterSystems do Brasil

138

Cach ZEN

<pagefooter>
O elemento <pagefooter> contm o rodap do relatrio. Se presente no <report>, deve estar antes
do elemento <body>.
O rodap no apresentado em relatrios XHTML.

<body>
Deve estar localizado obrigatoriamente dentro de <report>.
No tem atributos, mas contm a maior parte das informaes do relatrio.
Contm elementos que controlam:

Layout grfico;

Estilo e aparncia.

InterSystems do Brasil

139

Cach ZEN

Elementos de Layout e Apresentao


Abaixo relao de elementos que apresentam o contedo visual ao relatrio. Podem estar
contidos em <pageheader>, <pagefooter>, <body>, ou <group>:

<barChart>, <lineChart> e <pieChart> - grfico de barras, linhas e pizza;

<block> - grupo de itens para uma tabela em linha ou coluna;

<header> e <footer> - grupo de itens do cabealho e rodap da pgina;

<group> - grupo de itens para aes repetidas;

<img> - imagem;

<item> - valor de um dado;

<line> - linha horizontal;

<list> - lista numerada ou com marcadores;

<p> - texto de qualquer tamanho;

<table> - tabela

Elementos de Layout e Apresentao Atributos

Cada um dos elementos listados anteriormente possui 3 atributos.


Os elementos podem tambm ter atributos especficos conforme a sequncia.

class: classe de estilo CSS a ser aplicado ao elemento. Classes de estilo so definidos
por elementos <class>.
Exemplo: <table class=minhaTabela ...>

style: informa as caractersticas de estilo do elemento.


Exemplo: style=fill:yellow; font-size: 6pt ;

width: largura do elemento.

Os elementos podem tambm ter atributos especficos conforme a sequncia.

<block>
O elemento <block> desenha todos os seus elementos-filhos sequencialmente.
Pode ser usado em qualquer lugar no <report> como um tipo de elemento de expanso, mas
mais til como um container dentro do <table>.
Em geral, o <table> trata cada elemento-filho como uma nova linha e coluna, ento o elemento
<block> pode ser usado para agrupar vrios elementos em uma nica linha ou coluna.
InterSystems do Brasil

140

Cach ZEN

<group>
Permite o relatrio Zen apresentar dados estruturados hierarquicamente, que tpico de XML.
Alm dos atributos comuns, ainda contm:

line: especifica a densidade da linha a ser desenhada entre cada iterao do <group>.
Se o valor for 0, a linha no criada.

name: apresenta o contedo dos dados XML cujo nome compatvel com este atributo.
Ento, se os dados XML contm elementos <Clientes>, o bloco XData ReportDisplay
deveria conter: <group name=Clientes> ... </group>
Pode haver outro <group> dentro de um <group>. Ex.:
<group name=Clientes> <group name=Vendas> ... </group></group>

pagebreak: se verdadeiro, inserido uma quebra de pgina a cada iterao de <group>.

<header> e <footer>
Os elementos <header> e <footer> so simples containers que identificam os elementos a serem
apresentados no cabealho e rodap da pgina.

<img>
Insere uma imagem no relatrio.
Alm dos atributos comuns, ainda possui:

height: especifica a altura da imagem;

width: especifica a largura da imagem;

src: URI da origem da imagem. Se o atributo src iniciar com um ponto de exclamao,
ele interpretado como uma expresso XPath. Isto permite a voc criar URIs
dinamicamente dentro de dados XML, e ento usar estas URIs customizadas como
origem da imagem.

InterSystems do Brasil

141

Cach ZEN

<item>
O elemento <item> mostra um valor literal ou um valor a partir de XML no relatrio.
Deve ter UM dos seus atributos value, field ou special especificado.
Alm dos atributos comuns, ainda possui:

field: apresenta o valor de um campo XML. field geralmente usado com expresses
XPath, ento se voc tem o dado:
<Vendas id=1><cliente>ABC Systems</cliente></Vendas>
Para obter o valor o atributo id voc precisa da expresso XPath: field=@id.
Entretanto para obter o valor do elemento <cliente> voc precisa da expresso XPath:
field=cliente.
O atributo field interpretado com relao ao atual <group> compatvel. Para um <item>
dentro de <group name=Vendas>, apenas atributos de <Vendas> e seus filhos so
disponveis.

link: cria um hyperlink sobre o dado apresentado.

special: apresenta dados dinmicos pr-definidos:

number mostra o nmero do registro dentro do grupo.

page-number insere o nmero da pgina em um relatrio PDF.

page-count insere o nmero de pginas em um relatrio PDF.

page-number-of insere o nmero da pgina no formato 2 of 18 em um


relatrio PDF.

page-number-/ - insere o nmero da pgina no formato 2/18 em um relatrio


PDF.

As referncias ao contador de total de pginas podem ser lentas em extensos relatrios PDF.

formatNumber: String que especifica o formato de nmero a usar. Esta string usa as
mesmas convenes como a funo XSLT format-number. Ex.: ###.# representa um
nmero de 3 dgitos com 1 casa decimal.

value: apresenta o valor literal do atributo.

InterSystems do Brasil

142

Cach ZEN

<line>
Insere uma linha no relatrio. Pode ser tanto uma linha horizontal visvel como apenas um espao
horizontal.

Alm dos atributos comuns, ainda possui:

align: alinhamento dentro da pgina do relatrio. Possveis valores so: left, right, e
center.

pattern: possveis valores so empty, solid e dashed.

color: cor da linha no formato CSS. Aplica-se apenas linhas do tipo solid ou dashed.

count: quantidade de linhas a apresentar.

length: especifica o comprimento da linha.

thickness: especifica a densidade da linha. Aplica-se apenas linhas do tipo solid ou


dashed.

lineHeight: altura em branco reservada para a linha.

<list>
Usado para apresentar uma lista (numerada/ordenada) em um relatrio Zen.
O atributo style aplica-se aos marcadores ou nmeros.
Alm dos atributos comuns, possui ainda:

group: Obrigatrio. Identifica o grupo que fornece os valores para a lista. Deve ser
compatvel com algum grupo definido no bloco XData ReportDefinition.

image: A URI de uma imagem a ser apresentada como um marcador personalizado.

startvalue: o valor do primeiro item da lista. Seu valor sempre especificado como um
valor inteiro.

type: o estilo do marcador ou numerao a usar na lista. Possveis valores so: none,
circle, square, disc, 1, A, a, I, i. Relatrios PDF no suportam square ou
circle.

InterSystems do Brasil

143

Cach ZEN

<p> e <pagebreak>
<p> cria um bloco de contedo esttico.
Trata seu contedo como texto puro e usa a opo p para a classe de estilo.
<pagebreak> insere uma quebra de pgina em relatrios PDF.
Insere uma linha tracejada em relatrios XHTML apresentados em tela, e quebra a pgina quando
o relatrio XHTML impresso.

<table>
Cria uma tabela no relatrio. Alm dos atributos comuns, ainda possui:

align: alinha o relatrio dentro do relatrio. Os valores possveis so left, right e


center.

orient: cada elemento contido dentro da tabela tratado ou como uma linha ou como
uma coluna, dependendo do valor deste atributo. Os valores possveis so col e row.

group: uma tabela pode ser usada para mostrar um grupo de dados. Se este atributo
especificado, a tabela mostra uma linha ou coluna na tabela para cada item no grupo.

altcolor: valor CSS que especifica a cor de fundo para linhas alternadas (2,4,6,..).
apenas possvel quando orient col e group definido.

layout: identifica se o tamanho das linhas e colunas so fixas ou determinados


automaticamente. Os valores possveis so: auto e fixed.

InterSystems do Brasil

144

Cach ZEN

Exerccio Relatrio Paciente (cont.)

10. Continuando com a classe de relatrio criada no incio deste mdulo, iremos especificar como
apresentar os dados gerados na primeira parte do exerccio em XHTML ou PDF.
11. Um relatrio bsico consiste de um <body> e elementos de apresentao. Adicione <body> e
<p> no bloco XData ReportDisplay:

12. Modifique o valor do parmetro de classe DEFAULTMODE de "xml para "HTML.


13. Compile e visualize os relatrio.

14. Adicione a seguinte tabela no bloco XData ReportDisplay


<report xmlns="http://www.intersystems.com/zen/report/display" name="Paciente">
<body>
<p class="Banner1"> Relatrio de Pacientes por Prioridade </p>
<group name="Prioridade" line="1px">
<table orient="row" width="4in">
<item field="@nome" width="2in><caption value="Prioridade:" width="2in"/></item>
<item field="qt><caption value=Qtd. Pacientes:"/></item>
</table>
</group>
</body>
</report>
Onde:

<group name=Prioridade> uma referncia ao elemento <Prioridade> no XML


gerado.

<item field=@nome a sintaxe para referenciar o atributo nome.

<item field=qt a sintaxe para referenciar o atributo qt.

InterSystems do Brasil

145

Cach ZEN

15. Faa as modificaes necessrias no bloco XData ReportDisplay como apresentado abaixo:
<line pattern="empty"/>
<table orient="col" group=Paciente" altcolor="#FFDFDF" width="3.8in">
<item field=Nome" ><caption value=Nome:"/></item>
<item field=Cidade" ><caption value="Cidade:"/></item>
<item field=Estado" ><caption value=Estado:"/></item>
<item field=Sexo" ><caption value=Sexo:"/></item>
<item field=Adulto" ><caption value="Adulto:"/></item>
</table>
</group>
</body>
</report>

InterSystems do Brasil

146

Cach ZEN

Grficos em Relatrios Zen


Relatrios Zen suportam apenas os elementos <lineChart>, <barChart> e <pieChart>.
<lineChart> no suportam marcadores ou linhas preenchidas em relatrios Zen.
Grficos em relatrios Zen no so interativos.
A squncia apresenta a relao de atributos disponveis nos grficos em relatrios:

dataFields: lista de campos separados por vrgula para obter os dados.

dataGroup: especifica o grupo que fornece os elementos de dados para o grfico.

seriesColors: lista de valores CSS de cores separadas por vrgula usada para as sries
de dados.

seriesCount: nmero de sries de dados a apresentar no grfico.

seriesGroup: o grupo que fornece a lista de sries para o grfico.

seriesNames: lista de nomes separados por vrgula usado como ttulo para cada srie de
dados na caixa de legenda.

Exerccios Relatrios (cont.)

16. O seguinte cdigo insere um grfico no seu relatrio. Adicione o cdigo ente </p> e <group>:
<barChart width="4in" height="3in" title=Pacientes por Prioridade"
dataFields="!qt" dataGroup=Prioridade">
</barChart>
Onde:
dataGroup=Prioridade uma referncia ao elemento categoria no XML gerado.
dataFields=!qt a sintaxe que referencia o elemento <qt> no grfico.

17. Compile a classe e visualize o grfico gerado.

InterSystems do Brasil

147

Cach ZEN

Relatrios Zen a partir do Browser


Os relatrios XHTML ou PDF podem ser visualizados em um browser informando a URI do
arquivo .cls.
Para especificar o formato de sada use o parmetro $MODE na URI. Por exemplo:

Para visualizar um relatrio em formato HTML:


http://localhost:57772/csp/Apl/Apl.Relatorio.cls?$MODE=html

Para visualizar um relatrio em formato PDF:


http://localhost:57772/csp/Apl/Apl.Relatorio.cls?$MODE=pdf
Para visualizar em formato PDF deve-se instalar e configurar uma ferramenta de
terceiros. A documentao Zen descreve este procedimento.

Para visualizar os dados do relatrio em formato XML:


http://localhost:57772/csp/Apl/Apl.Relatorio.cls?$MODE=xml

Relatrios Zen a partir da Linha de Comando


possvel executar um relatrio Zen a partir da linha de comando, fazendo o seguinte:
1. Alterar para o namespace que contem a classe do relatrio:
ZN "meuNameSpace"
2. Criar uma instncia da classe do relatrio:
Set relatorio = ##class(meuPacote.MinhaClasse).%New()
3. Executar o relatrio:
Do relatorio.GenerateReport("C:\Temp\MeuExemplo.pdf",2)

Onde:

C:\Temp\MeuExemplo.pdf o caminho do arquivo a criar.

2 o tipo da sada do relatrio. Possveis valores incluem:

0 XML

1 XHTML

2 PDF

3 HTML (depurao)

4 XSLFO (depurao)

InterSystems do Brasil

148

Cach ZEN

Exerccios Adicionais Pr Relatrio e datas

1. Em 'Exames.cls', adicione um link que ir chamar um relatrio por data.


Voc pode apresentar como uma janela popup ou outra janela do browser.
1. Chame 'ISCUser.Pag.PreExame.cls

2. Crie uma pgina pr relatrio onde ir informar as datas a serem usadas como filtro no
relatrio. Salve como ISCUser.Pag.PreExame.cls. Esta pgina ir chamar o relatrio.
1. Adicione no 'Contents' dois componentes <dateText>.
-

Um para data inicial

<dateText id="txtDataInicial" label="Data Inicial" separator="/" format="DMY"/>


-

Um para data final

<dateText id="txtDataFinal" label="Data Final" separator="/" format="DMY"/>


-

Um boto Ok" que far a chamada de um mtodo que redirecionar


para o relatrio.

<button id="btnEnviar" caption=Enviar" onclick="zenPage.relatorio();"/>

Exerccios Adicionais usando window.open

3. Crie o mtodo relatorio().


Method relatorio() [ Language = javascript ]
{
var inicio = zenPage.getComponentById('txtDataInicial').getValue();
var fim = zenPage.getComponentById('txtDataFinal').getValue();
var link = 'ISCUser.Rel.Exames.cls?datainicial=+inicio+"&datafinal="+fim;
window.open(link,'','Relatrio de
Exames','status,scrollbars,resizable,top=10,left=10,width=800,height=800');
}

4. Crie uma pgina de relatrio 'ISCUser.Rel.Exames.cls herdando de


%ZEN.Report.reportPage. Configure o XData ReportDefinition. Para o sql selecione as
colunas: ID, Codigo, DataExame, ValorExame, Paciente-> Nome da tabela 'Exames.
1. Pegue as datas inicial e final: faa isso dentro da classe do relatrio.

InterSystems do Brasil

149

Cach ZEN

Property DataInicial As% String (ZENURL = datainicial");


Property DataFinal As% String (ZENURL = "datafinal");

5. Formate o 'XData ReportDisplay para ter um cabealho com as dimenses das margens.
<document width="210mm" height="297mm" headerHeight="25mm

marginLeft="15mm"

marginRight="7mm" marginTop="7mm marginBottom="7mm">


</ document>

6. O cabealho deve ter: data e hora um ttulo e as datas de incio e fim. Faa isso em
<pageheader> no ReportDisplay:
<pageheader>
<item field="@Hospital"/>
<line pattern="empty"/>
<item field="@Data"/>
<line pattern="empty"/>
<item field="@Titulo"/>
<line pattern="empty"/>
<item displayCaption="true" caption="Data inicial: " field="@Inicio"/>
<line pattern="empty"/>
<item displayCaption="true" caption="Data final: " field="@Fim"/>
<line pattern="empty"/>
<line pattern="dashed"/>
</pageheader>

7. Para isso voc deve ter definido a empresa, datas e ttulo. Faa isso no incio do relatrio.
Parameter HOSPITAL = "Hospital";
Parameter TITULO = "Ttulo do Relatrio";
Property DataInicial As %String(ZENURL = "datainicial");
Property DataFinal As %String(ZENURL = "datafinal");
Property Formato As %Integer(ZENURL = "format") [ InitialExpression = 4 ];

Property Hospital As %String [ InitialExpression = {..#HOSPITAL} ];


Property Titulo As %String [ InitialExpression = {..#TITULO} ];

InterSystems do Brasil

150

Cach ZEN

8. E em seguida no ReportDefinition:
<attribute name="Data" expression="$ZDateTime($horolog,4)"/>
<attribute name="Hospital" expression="..Hospital"/>
<attribute name="Titulo" expression="..Titulo"/>
<attribute name=Inicio" expression="$zdate($zdateh(..DataInicial,8),..Formato)"/>
<attribute name=Fim" expression="$zdate($zdateh(..DataFinal,8),..Formato)"/>

9. Adicione uma clusula Where para o sql:


Where DataExame BETWEEN ? and ?

10. A seguir adicione abaixo de <report>:


<parameter expression="..EditaData(..DataInicial)"/>
<parameter expression="..EditaData(..DataFinal)"/>

11. Importe a classe 'EstiloRelatorio.cls' e fornea um estilo. Esta classe escreve o estilo
diretamente na pgina gerada, usando o mtodo %DrawHTMLPage.
Faa isso em <document> no XData ReportDisplay inclua o elemento:
<cssinclude href=ISCUser.Pag.EstiloRelatorio.cls"/>

12. Configure os estilos de : Hospital, Titulo, Data, Data de Inicio e Data de Fim e
a tabela de apresentao dos dados do relatrio. Faa no atributo class .

InterSystems do Brasil

151

Cach ZEN

Mdulo Zen e SVG

Mdulo Zen e SVG

InterSystems do Brasil

152

Cach ZEN

InterSystems do Brasil

153

Cach ZEN

Zen e SVG

SVG (Scalable Vector Graphics) uma linguagem que permite descrever grficos vetoriais em 2
dimenses em formato XML.

Zen usa SVG para apresentar com alto desempenho, grficos e medidores orientados a dados.

possvel usar componentes SVG embutidos ao Zen para definir painis de controle que
atualizam estatsticas em tempo real.

Layout de Componentes SVG

Os seguintes componentes permitem a incluso de componentes SVG em uma pgina Zen:

<svgFrame>

<svgGroup>

<svgSpacer>

<svgFrame>

um componente Zen que cria um quadro retangular na pgina Zen, onde possvel incluir
componentes SVG.

Apenas componentes SVG podem ser inseridos dentro deste quadro.

Qualquer componente SVG dinmico, como um medidor ou grfico, exige um <svgFrame> para
cont-lo.

A imagem seguinte apresenta um exemplo de componentes Zen e componentes SVG.

InterSystems do Brasil

154

Cach ZEN

O elemento <svgFrame> possui vrios atributos, entre eles:

backgroundStyle: especifica o estilo de fundo do quadro em formato CSS.

disabled: se verdadeiro, este quadro e seus filhos so desabilitados.

editMode: modo de edio do quadro. Os valores possveis so:

none o usurio no pode editar o contedo do quadro. Padro.

select o usurio pode clicar em um componente SVG para selecion-lo.

drag- o usurio pode mover um componente SVG dentro do quadro.

layout: especifica como os componentes SVG so dispostos no quadro. Os valores


possveis so horizontal e vertical.
Se o valor for igual none ou for deixado em branco, os componentes podem ser
posicionados usando coordenadas x e y especficas.

snapToGrid: se verdadeiro, todas as operaes do mouse (redimensionamento e


posicionamento) so foradas a ocorrer no grid definido por gridX e gridY.

<svgGroup>

<svgGroup> um container especial que contm e controla layout de componentes SVG dentro
de um <svgFrame>.

Possui os seguintes atributos:

disabled: se verdadeiro, este grupo e seus filhos so desabilitados.

layout: especifica como os componentes SVG dentro deste grupo devem estar
dispostos. Possveis valores so: horizontal e vertical.

<svgSpacer>

O elemento <svgSpacer> til dentro de containers <svgGroup> para criar um espao entre os
componentes.

Use <svgSpacer> com o atributo width para inserir um espao na horizontal, e com o atributo
height para inserir um espao na vertical.

InterSystems do Brasil

155

Cach ZEN

<rect>

O elemento Zen <rect> desenha um retngulo.

Este elemento insere um espao dentro de um <svgGroup> ou <svgFrame>, mas diferente do


<svgSpacer>.

A diferena entre <svgSpacer> e <rect> que <rect> pode ter atributos estilo de exibio, como
uma cor de preenchimento.

Atributos:

rx: define um retngulo com cantos arredondados.

style: define um estilo para o elemento.

Atributos de Componentes SVG

Todos os componentes SVG tem os mesmos atributos para definio de estilo. Estes atributos
so totalmente diferentes dos atributos dos componentes Zen normais.

Alguns deles so:

height: altura do componente.

width: largura do componente.

hidden: se verdadeiro, o componente fica desabilitado.

x: posio x do componente. A posio atual do componente pode depender do layout


do <svgGroup> onde ele est inserido. Se o <svgGroup> tem layout vertical ou
horizontal, esta coordenada ignorada.

y: posio y do componente.

InterSystems do Brasil

156

Cach ZEN

Medidores

Um medidor um componente SVG que apresenta uma representao grfica de um nico valor
numrico.

Zen fornece vrios medidores pr-construdos. Para inserir em uma pgina Zen, fornea o
elemento do medidor dentro de um <svgFrame> ou <svgGroup>:

<fuelGauge> - medidor de combustvel

<indicatorLamp> - luz indicadora

<lightBar> - barra de luzes

<smiley> - expresso facial

<speedometer> - velocmetro

<trafficLight> - semforo

Fornecendo Dados para os Medidores

possvel atualizar o valor apresentado pelo medidor dinamicamente de duas maneiras:

A partir de mtodo JavaScript, ajustando o valor do atributo value do medidor atravs


dos mtodos de classe getComponentById e setValue:
Ex.: this.getComponentById(meuMedidorID).setValue(Valor);

Associar o medidor a um data controller (visto no mdulo MVC). Exemplo:

No exemplo anterior, h um componente data controller vinculado classe modelo


Apl.Cliente. E um medidor de expresso facial conectado este data controller
apresentando o valor da propriedade Avaliacao.

InterSystems do Brasil

157

Cach ZEN

Atributos de Medidores

Todos os medidores tem atributos comuns, entre eles:

animate: controla a animao do medidor em verdadeiro ou falso. A animao de um


medidor por exemplo a movimentao do ponteiro de velocmetro.

controllerId: indica o data controller que fornece os dados.

dataBinding: indica a propriedade da classe conectada ao data controller que fornece os


dados.

label: um texto a apresentar no medidor.

rangeLower: valor inteiro ou decimal que define o menor valor da faixa de valores
representado pelo medidor.

rangeUpper: valor inteiro ou decimal que define o maior valor da faixa de valores
representado pelo medidor.

thresholdLower: valor inteiro ou decimal que define um piso para o comportamento do


medidor. O medidor ir fazer algo quando o valor for menor que este atributo.
Geralmente, este atributo maior que rangeLower e serve com um aviso que o valor do
medidor est aproximando do valor mnimo.

thresholdUpper: o inverso do atributo anterior. Serve como um aviso que o valor do


medidor est aproximando do valor mximo.
value: representa o valor atual do medidor.

InterSystems do Brasil

158

Cach ZEN

Exerccios Zen e SVG

Neste exerccio inclua uma tag <svg> para mostrar o valor da renda de um paciente.
1. Insira um componente <svgFrame> na classe ISCUser.Pag.Paciente aps os botes de
navegao.
2. Insira um medidor <fuelGauge> dentro do <svgFrame> conectando ao <dataController> atravs
do atributo controllerId e propriedade Renda atravs do atributo dataBinding.
3. Abaixo esto algumas configurao que podem ser usadas como referncia.

InterSystems do Brasil

159

Cach ZEN

Mdulo Grficos Zen

Mdulo Grficos Zen

InterSystems do Brasil

160

Cach ZEN

InterSystems do Brasil

161

Cach ZEN

Grficos Zen

Zen oferece vrios tipos de grficos como: grficos de linha, grficos de barras, grficos em
forma de pizza, etc.

Todo grfico um componente SVG.

Todos os grficos so criados dentro de um espao virtual que mede 100 unidades por 100
unidades. As dimenses atuais deste espao so representadas pelos atributos height e width.

Dentro deste espao virtual h uma rea menor onde o grfico apresentado. Margens
preenchem o espao ao redor do grfico. E geralmente estas margens so usadas para
apresentar textos e legendas.

Convenes de Layout para Grficos Zen

InterSystems do Brasil

162

Cach ZEN

Grfico de Linhas

Um <lineChart> mostra uma ou mais sries de dados como um conjunto de linhas que cruzam
um grid.

Possui os seguintes atributos especiais:

chartFilled: se verdadeiro, a rea abaixo de cada linha preenchida (como um grfico de


rea).

chartPivot: se verdadeiro, mostra as categorias verticalmente e os valores


horizontalmente.

chartStacked: til para grficos com mais de uma srie de dados. Se verdadeiro, as
linhas so empilhadas uma sobre a outra.

Grfico de Barras

Um <barChart> mostra uma ou mais sries de dados como um conjunto de barras horizontais ou
verticais.

Possui os seguintes atributos especiais:

chartPivot: se verdadeiro, mostra as categorias verticalmente e os valores


horizontalmente.

chartStacked: til para grficos com mais de uma srie de dados. Se verdadeiro, as
barras so empilhadas uma sobre a outra.

InterSystems do Brasil

163

Cach ZEN

Fornecendo Dados ao Grfico

Os dados de um grfico consistem de uma ou mais sries de dados.

Cada srie um simples array de valores numricos.

possvel fornecer dados a um grfico de duas maneiras:

Invocando um mtodo JavaScript na classe da pgina, atravs do atributo ongetData do


grfico.

Associando o grfico um data controller, atravs do atributo controllerId.

Invocando um mtodo JavaScript

Todos os grficos suportam o atributo ongetData. O valor deste atributo uma expresso
JavaScript que Zen invoca quando:

O grfico mostrado inicialmente.

O mtodo updateChart do grfico invocado.

Exemplo:
ongetData=return zenPage.leDados(series);

O mtodo chamado pelo ongetData deve aceitar um nico argumento, series, que contm o
nmero de sries (baseado em 0) a ser gerado pelo grfico.

O cdigo seguinte apresenta um exemplo de um mtodo que gera valores aleatrios para o
grfico.

A imagem abaixo apresenta um exemplo de um mtodo que gera valores aleatrios para o
grfico.

InterSystems do Brasil

164

Cach ZEN

Usando um <dataController>

Todos os grficos suportam os seguintes atributos, que associam um grfico uma viso de um
dataController.

controllerId: identifica o <dataController> que fornece os dados para o grfico.

onnotififyView: expresso JavaScript que executada toda vez que o dataController


conectado ao grfico causa um evento.

O cdigo seguinte apresenta um exemplo de utilizao de <dataController> para fornecer dados


a um grfico.

O grfico l o valor para seriesSize a partir do nmero de propriedades da Classe Modelo


conectada ao <dataController>.

InterSystems do Brasil

165

Cach ZEN

Atributos de Grficos

A classe %ZEN.SVGComponent.chart oferece um grande nmero de atributos aplicveis aos


grficos Zen que controlam:

Layout e estilo;

rea de impresso;

Marcadores;

Legendas;

Ttulos;

Coordenadas dos eixos.

Atributos de Layout e Estilo

backgroundStyle: definio de estilo CSS SVG. Especifica o estilo do fundo do quadro


do grfico.

marginBottom: especifica a margem inferior. Textos do eixo X ou a legenda do grfico


geralmente aparecem neste espao.

marginLeft: especifica a margem esquerda. Textos do eixo Y ou a legenda do grfico


geralmente aparecem neste espao.

marginRight: especifica a margem direita.

marginTop: especifica a margem superior. O ttulo do grfico geralmente aparece neste


espao.

Atributos de rea de Impresso

gridStyle: estilo CSS SVG para o grid.

labelStyle: estilo CSS SVG para os textos do grfico.

labelsVisible: se verdadeiro, o grfico apresenta os textos dos eixos do grfico.

ongetLabelX: expresso JavaScript que fornece os textos para o eixo X.

ongetLabelY: expresso JavaScript que fornece os textos para o eixo Y.

plotAreaStyle: estilo CSS SVG para a rea de impresso do grfico.

seriesColor: cores para as sries de dados no estilo CSS. O valor padro :


blue,red,green,yellow,orange,plum,purple

InterSystems do Brasil

166

Cach ZEN

Exerccios Grficos Zen

Crie uma pgina com um grfico de prioridade de exames:


1. Crie ISCUser.Pag.Grafico.cls
1. Inclua um dataController
<dataController id=origem
modelClass="ISCUser.MVC.GraficoPrioridade"
modelId=1/>
2. Inclua um dynaGrid
<dynaGrid align="center" width="400"
id="dynaGrid"
gridLabel="dynaGrid"
controllerId=origem"/>

3. Inclua um componente <svgFrame>.


<svgFrame id="svgFrame"
height="300"
width=300"
backgroundStyle="fill: black;"
layout="horizontal">
4. Inclua um grfico.
Escolha um grfico e atribua os parmetros.

InterSystems do Brasil

167

Cach ZEN

Exerccios - Modificando a pgina de Menu

Continuando com as definies na pgina de Menu:


1. Limpe o bloco dentro de <page></page>
2. Inclua os grupos Vertical e Horizontal.

3. Dentro de <vgroup id="image ...> inclua.

<image src="images\intersystems.jpg" width="982" height="60"/>

4. Dentro de <vgroup id="frame ..> inclua.

<iframe frameBorder="false" id="framePrincipal"


name="framePrincipal" align="center" width="100%"
height="450" src="ISCUser.Pag.BoasVindas.cls"/>

InterSystems do Brasil

168

Cach ZEN

InterSystems do Brasil

169

Cach ZEN

Mdulo Componentes de Navegao

Mdulo Componentes de Navegao

InterSystems do Brasil

170

Cach ZEN

InterSystems do Brasil

171

Cach ZEN

Links, Menus e Guias

Componentes de navegao permitem grande flexibilidade ao desenvolvedor Zen.

Este mdulo agrupa os componentes disponveis de acordo com o tipo do item que cada
componente projetado a apresentar.

Links

Menus

Guias

Links

Os seguintes componentes Zen fornecem links disponveis atravs de URI:

<link>

<locatorBar>

<link>

O componente <link> apresenta um simples link (um elemento HTML <a>) em uma pgina Zen.

Possui vrios atributos, entre eles:

caption: texto a apresentar no link.

disabled: se verdadeiro, o link desabilitado.

href: URI do contedo a apresentar quando o usurio clica no texto do link. Para invocar
um mtodo JavaScript deve-se iniciar a URI com javascript:.
Exemplo: href=javascript:zenPage.meuMetodo();

title: mensagem de ajuda que aparece quando o usurio pra o mouse sobre o texto do
link.

Exerccios Links
1. Crie uma nova pgina Zen chamada Links.
2. Insira 3 links para outras pginas Zen criadas em exerccios anteriores.
InterSystems do Brasil

172

Cach ZEN

3. Insira um link que ao ser clicado mostre uma mensagem (alert) ao usurio.

<locatorBar>

A barra de localizao apresenta vrios links que representam a localizao da navegao do


usurio.

O cdigo necessrio para criar a barra de localizao acima o seguinte:

Como pode-se notar a barra de localizao composta por um elemento <locatorBar> e vrios
elementos <locatorLink>, um para cada link a apresentar.

<locatorLink>

O elemento <locatorLink> pode aparecer somente dentro de um elemento <locatorBar>.

Cada <locatorLink> define um link dentro da barra de localizao.

Este componente tem vrios atributos, entre eles:

id: valor que pode ser usado para selecionar um estilo CSS.

caption: texto a apresentar no link.

href: URI do contedo a apresentar quando o usurio clica no texto do link.

title: mensagem de ajuda que apresentada quando o usurio pra o mouse sobre o
link.

InterSystems do Brasil

173

Cach ZEN

Exerccios Links

Crie um locator bar dentro da pgina de Menu.


1. Crie um grupo vertical como:
<vgroup id="menus" width="100%">
<hgroup width="100%" >
<hgroup id="locator" width="60%" height="100%" >
<hgroup/>

2. Dentro de <hgroup id="locator >, inclua:


<locatorBar id="locator"
containerStyle="background: #A0B088;
background-image: url(images/locatorgradient.png);
background-repeat: repeat-x;
padding-top: 6px;">

3. Adicione um <locatorBar></locatorBar>, e inclua:


1. <locatorLink caption="Home" href="ISCUser.Pag.Menu.cls" />
2. Faa o mesmo para:
1. Login
2. Logout
3. Grafico
3. E um LocatorLink para o site da intersystems:
1. <locatorLink caption="InterSystems

2. href="http://www.intersystems.com" />

InterSystems do Brasil

174

Cach ZEN

4. Teste o link do Grfico:


A pgina chamada ser aberta sobre a pgina de menu, ns gostaramos que fosse
mostrada no frame principal, para isso necessrio fazer:
1 - Crie um mtodo JavaScript, mostra():
Method mostra(pLink) [ Language = javascript ]
{
framePrincipal.location = pLink;
}

2 - Altere o locatorlink para:


<locatorLink caption="Grafico" href="javascript:
zenPage.mostra('ISCUser.Pag.Grafico.cls')" />

InterSystems do Brasil

175

Cach ZEN

Menus

Componentes de menus permitem a criao de menus clssicos de navegao, com listas de


opes que o usurio pode selecionar clicando em um item.

Ao selecionar um item de menu, vrias aes podem ser disparadas, dependendo de sua
programao:

Um submenu pode ser apresentado;

Uma mensagem pop-up (alert) pode ser apresentada;

Uma pgina diferente pode ser acessada;

O contedo da pgina atual pode ser alterado.

Para produzir o menu anterior, o seguinte cdigo necessrio:

InterSystems do Brasil

176

Cach ZEN

Como pode ser observado no cdigo anterior, a criao de um menu feita atravs do elemento
<menu>.

Cada item do menu um elemento <menuItem>.

A criao de um submenu feita atravs da insero de outro <menu> dentro de um <menu>.

Alguns itens de menu apresentam uma mensagem (alert) ao ser selecionados e outros acessam
uma pgina Zen diferente. Esta ao programada atravs do atributo href.

possvel criar separaes dentro dos itens do menus atravs do elemento <menuSeparator>,
isto cria uma linha horizontal dentro do menu.

<menu>, <hmenu> e <vmenu>

Os componentes <menu>, <hmenu> e <vmenu> so muito similares.

A diferena entre eles a forma de layout que cada um possui:

<menu> possvel especificar o layout vertical ou horizontal atravs do atributo layout.

<hmenu> os itens de menu inseridos dentro deste componente so posicionados


horizontalmente.

<vmenu> os itens de menu inseridos dentro deste componente so posicionados


verticalmente.

<menuItem>

Este componente representa cada item dentro de um menu.

Possui vrios atributos, entre eles:

caption: texto do item do menu.

help: mensagem de ajuda que apresentada quando o usurio pra o mouse sobre o
item de menu.

image: identifica o caminho e nome do arquivo da imagem a ser apresentada no item do


menu. Se tanto este atributo como o atributo caption forem especificados, ambos sero
apresentados um ao lado do outro.

link: URI do contedo a apresentar quando o usurio clica no texto do item do menu.

InterSystems do Brasil

177

Cach ZEN

Exerccios Menus

Crie um Menu de opes dentro da pgina de Menu.


1. Crie entre <vgroup id=menu></vgroup> outro <hgroup>:
<hgroup id="principal" width="100%">
<vgroup id="menu" width="20%" valign="top">
<hgroup width="65%" id="hGroupItem" hidden="true">
</hgroup>
</vgroup>

2. Dentro de <hgroup id=hGroupItem >, inclua o Menu:


<menu id="menu1" layout="vertical" width="60%">
<menu caption=Cadastro" layout="vertical">
<menuItem caption=Paciente"
link="javascript: zenPage.mostra('ISCUser.Pag.Paciente.cls')" />
<menuSeparator/>
<menu caption="InterSystems" layout="vertical">
<menuItem caption="Site" link="http:\\www.intersystems.com"/>
<menuItem caption="Downloads"
link="http://www.intersystems.com/cache/downloads/index.html"/>
</menu>
</menu>
</menu>

InterSystems do Brasil

178

Cach ZEN

Guias (tabs)

Os seguintes componentes Zen suportam o uso guias (tabs) em aplicaes Zen.

<tabGroup>

<tab>

<lookoutMenu>

<tabGroup>

Apresenta um conjunto de guias (componentes <tab>).

Pode ser apresentado apenas uma guia por vez.

O cdigo para a criao do conjunto de guias acima :

InterSystems do Brasil

179

Cach ZEN

<tabGroup> possui vrios atributos, entre eles:

currTab: identifica a guia atualmente selecionada.

onhideTab: expresso JavaScript que invocada quando uma guia que estava sendo
apresentada trocada por outra.

onshowTab: expresso JavaScript que invocada quando o usurio seleciona uma nova
guia.

remember: se verdadeiro, armazena em um cookie da sesso a ltima guia


apresentada, para que quando a pgina for acessada novamente esta guia venha
selecionada automaticamente.

showTabBar: se verdadeiro, apresenta o conjunto de botes para a seleo das guias.

<tab>

um tipo de grupo especializado que define uma guia dentro de um <tabGroup> ou


<lookoutMenu>.

Possui os seguintes recursos:

caption: texto que identifica a guia;

tabResource: nome de um recurso do Cach. O usurio precisa ter privilgios para


acessar este recurso ou a guia torna-se desabilitada.

InterSystems do Brasil

180

Cach ZEN

<lookoutMenu>

Um <lookoutMenu> apresenta uma pilha de botes, um em cada guia.

Clicando em um boto os outros botes so deslocados para apresentar as outras opes.

Um <lookoutMenu> contm um conjunto de componentes <tab>, que contm componentes


<menuItem> e <menuSeparator>.

O seguinte cdigo necessrio para criar o menu ao lado.

InterSystems do Brasil

181

Cach ZEN

O componente <lookoutMenu> possui os seguintes atributos:

expandable: se verdadeiro, o componente pode ser expandido e contrado/encolhido.

expanded: se verdadeiro, o componente aparece expandido, ou seja, seus filhos so


visveis.

oncontract: expresso JavaScript invocada quando o componente contrado/encolhido.

onexpand: expresso JavaScript invocada quando o componente expandido.

Exerccios Lookout Menu

Crie um lookoutMenu dentro da pgina de Menu.


1. Crie dentro de <hgroup id="principal" > um:
<hgroup width="100%" id="hGroupLook" >

2. Dentro de <hgroup width="100%" id="hGroupLook >, inclua um lookoutMenu:

InterSystems do Brasil

182

Cach ZEN

InterSystems do Brasil

183

Cach ZEN

Mdulo Janelas de Expanso e Popup

Mdulo Janelas de Expanso e Popup

InterSystems do Brasil

184

Cach ZEN

InterSystems do Brasil

185

Cach ZEN

Janelas de Expanso e Popup

Este mdulo descreve componentes que possuem comportamento visual dinmico, como
janelas popup, componentes com recursos para ocultar ou apresentar seu contedo, etc.

Esses componentes so:

<expando> - grupo expansvel.

<repeatingGroup> - grupo de repetio.

<dynaTree> - rvore dinmica.

<dynaView> - caixa com contedo dinmico.

<modalGroup> - contedo HTML que torna-se visvel em resposta a um evento de


usurio.

Janelas de Dilogo.

<expando>

O componente <expando> um grupo com a habilidade de mostrar ou ocultar seus filhos.

Para criar um grupo que possa ser exibido ou ocultado, basta inserir os componentes Zen
diversos dentro do componente <expando>. Exemplo:

InterSystems do Brasil

186

Cach ZEN

<repeatingGroup>

um grupo especializado que define o layout para uma nica entrada do grupo, e ento atravs
de uma query em tempo de execuo so geradas vrias entradas com este layout.

Exemplo de utilizao:

O pgina do exemplo anterior produzida com o cdigo:

Este cdigo cria um grupo que repetido de acordo com o atributo sql, isto , cria 10 entradas,
uma para cada registro do comando SQL.

Em cada grupo criado um boto com o nome do cliente e um texto com a cidade do cliente.

InterSystems do Brasil

187

Cach ZEN

<dynaTree>

O componente <dynaTree> mostra um conjunto de itens definidos pelo usurio como uma rvore
expansvel.

semelhante ao componente <expando>, no entanto ao invs de especificar os componentes, o


<dynaTree> adquire seu contedo dinamicamente atravs de:

Uma global, ou

Mtodo Callback

<dynaTree> Usando uma Global

A maneira mais simples de fornecer o contedo para um <dynaTree> especificar uma global
no atributo dataGlobal.

Suponha que a global ^minhaArvore tenha os seguintes ns:

Isto produz a seguinte pgina Zen:

<dynaTree> Usando um Mtodo Callback

possvel tambm fornecer contedo a um <dynaTree> atravs de mtodo Callback.

Para isso deve-se informar o atributo OnGetNodeInfo igual a um mtodo callback servidor.
Exemplo:

Sendo a assinatura do mtodo GeraConteudo:

InterSystems do Brasil

188

Cach ZEN

<dynaView>

O componente <dynaView> mostra um conjunto de itens definidos pelo usurio dentro de uma
caixa.

Os itens podem ser apresentados de dois modos:

list onde apenas a primeira coluna apresentada.

details cada item mostrado em uma linha.

O <dynaView> recebe a lista de itens invocando um mtodo callback no servidor. O nome do


mtodo especificado no atributo OnGetViewContents. Ex.:

O mtodo GeraConteudo cria a lista de itens:

InterSystems do Brasil

189

Cach ZEN

Onde:

pContents(x) array multidimensional que contm os itens a apresentar no componente.


O array subscrito pelo nmero do item (iniciando com 1). Cada array contm uma
estrutura $List com as seguintes informaes:

1. Campo: texto a apresentar na primeira coluna;

2. Campo: valor interno/lgico que representa a linha;

3. Campo: URI da imagem a ser apresentada com o item.

4./5./... Campos: demais colunas a apresentar.

pHeaders(x) array multidimensional que fornece o cabealho das colunas, subscrito


pelo nmero da coluna.

Exerccios Dyna Tree

Crie um <dynaTree> dentro da pgina de Menu.


1. Crie dentro de <hgroup id="principal" > a:
<hgroup id="hGroupDyna" hidden="true" enclosingClass="celulaMenu" width="100%" >

2. Dentro de <hgroup width="100%" id=" hGroupDyna >, inclua um dynaTree:


<dynaTree id="dytMenu" OnGetTreeInfo="GetTreeInfo"/>

3. Crie o mtodo GetTreeInfo:


ClassMethod GetTreeInfo(pRoot As %String, Output pTree, ByRef pParms) As %Status
{
Set userID = %session.Get("UserId")
#; top-most nodes are children of 0
Set pTree(0,"ch",1) = ""
Set pTree(0,"ch",2) = ""
Set pTree(0,"ch",3) = ""

#; each node supplies: $LB(caption, value, hasChildren, link, expanded, icon)


Set pTree(1)=$LB(("Cadastros"),("Cadastros"),1,"",1,,Cadastros Gerais")

InterSystems do Brasil

190

Cach ZEN

Set pTree(2)=$LB(("Relatrios"),("Relatrios"),1,"",1,,"Relatrios Gerais")


Set pTree(3)=$LB((Pesquisas"),(" Pesquisas "),1,"",1,,"Pesquisas Gerais")

Set pTree(4) = $LB(("Paciente"),("Paciente"),0,"javascript:


zenPage.mostra('ISCUser.Pag.Paciente.cls')",1)
Set pTree(1,"ch",4) = ""
Set pTree(5) = $LB(("Exames"),("Exames"),0,"javascript:
zenPage.mostra('ISCUser.Pag.Exames.cls')",1)
Set pTree(1,"ch",5) = ""
Set pTree(6) = $LB(("Prioridade"),("Prioridade"),0,"javascript:
zenPage.mostra('ISCUser.Pag.Prioridade.cls')",1)
Set pTree(1,"ch",6) = ""

Set pTree(7) = $LB(("Exames por Data"),("Exames por Data"),0,"javascript:


zenPage.mostra('ISCUser.Pag.PreExame.cls')",1)
Set pTree(2,"ch",7) = ""

Set pTree(8) = $LB(("Exames"),("Exames"),0,"javascript:


zenPage.mostra('ISCUser.Pag.PesquisaExames.cls')",1)
Set pTree(9) = $LB(("Exames Itens"),("Exames Itens"),0,"javascript:
zenPage.mostra('ISCUser.Pag.PesquisaItem.cls')",1)
Set pTree(10) = $LB(("Paciente"),("Paciente"),0,"javascript:
zenPage.mostra('ISCUser.Pag.PesquisaPaciente.cls')",1)
Set pTree(3,"ch",8) = ""
Set pTree(3,"ch",9) = ""
Set pTree(3,"ch",10) = ""

Quit $System.Status.OK()
}

InterSystems do Brasil

191

Cach ZEN

Grupos Modais

Um grupo modal um tipo especializado de grupo que normalmente no apresenta seu


contedo. O contedo apresentado atravs de um interao na pgina.

Quando o grupo modal torna-se visvel, apenas seu contedo recebe eventos do usurio.

Qualquer evento que ocorre fora do grupo modal (como um clique de mouse) automaticamente
faz com que o grupo modal fique oculto novamente.

possvel definir o contedo de um grupo modal inserindo um componente <modalGroup>


dentro de classe de pgina ou criando uma instncia da classe %ZEN.Component.modalGroup
programaticamente.

H trs opes de grupos modais:

Esttico: insira um componente <modalGroup> no bloco XData Contents. Seu contedo


permanecer oculto at que seja chamado o mtodo show do grupo modal.

Dinmico: a pgina chama o mtodo createComponent para criar um componente de


grupo modal dinamicamente.

Embutido: deve-se chamar o mtodo show do grupo modal para mostrar um grupo
embutido:

msgBox

calendar

Para fechar um grupo modal, deve-se chamar o mtodo endModal.

Exemplo: Grupo Modal Esttico

O bloco XData Contents possui:

Um componente HTML que mostra o valor digitado na janela modal.

Componente <groupModal> que cria um grupo modal esttico. Dentro do grupo


inserido uma caixa de texto e um boto OK.

Um boto que chama o mtodo show fazendo com que o grupo seja apresentado.

InterSystems do Brasil

192

Cach ZEN

O mtodo grupoModalEstatico chamado quando o usurio clica no boto com o texto


Informe um valor. Ao clicar neste boto o grupo modal apresentado, pois feita a chamada
ao mtodo show.

O mtodo mgBtnClique chamado quando o usurio clica no boto OK do grupo modal. Este
mtodo l o valor que o usurio digitou, coloca este valor na pgina principal e fecha o grupo
modal atravs do mtodo endModal.

InterSystems do Brasil

193

Cach ZEN

Exemplo: Grupo Modal Dinmico

O bloco XData Contents possui apenas:

Um componente HTML que apresenta o valor que usurio informou;

Um boto que chama um mtodo que cria o grupo modal dinamicamente.

Neste exemplo no h o elemento <groupModal>. O grupo criado inteiramente dentro


de um mtodo e no atravs de elementos.

O mtodo grupoModalDinamico, chamado quando o usurio clica no boto da pgina principal,


cria dinamicamente o grupo modal e seus controles:

InterSystems do Brasil

194

Cach ZEN

O mtodo btnClique, chamado quando o usurio clica no boto Salvar do grupo modal, l os
dados informados pelo usurio, escreve esses dados na pgina principal e fecha o grupo modal:

InterSystems do Brasil

195

Cach ZEN

Exemplo: Grupos Modais Embutidos calendar

O bloco XData Contents possui apenas um boto que ao ser pressionado chama o mtodo
grupoModalCalendario:

O mtodo grupoModalCalendario cria um grupo modal embutido do tipo calendrio e especifica


a chamada ao mtodo acaoCalendario quando o usurio escolhe uma data:

O mtodo acaoCalendario, que chamado quando o usurio escolhe uma data, gera uma
mensagem na tela mostrando a data selecionada.

InterSystems do Brasil

196

Cach ZEN

Exemplo: Grupos Modais Embutidos Msgbox

Semelhante ao grupo modal calendrio, no bloco XData Contents h apenas um boto que
chama um mtodo que cria a caixa de mensagem.

O mtodo grupoModalMsg apresenta o grupo modal do tipo caixa de mensagem:

InterSystems do Brasil

197

Cach ZEN

Janelas de Dilogo

Zen possui classes embutidas que oferecem os seguintes recursos para trabalhar com caixas de
dilogo:

Janela de dilogo;

Janela para seleo de cores;

Janela para seleo de arquivos;

Possibilidade de criao de nova janela de dilogo;

Possibilidade de criao de novo modelo de janela de dilogo.

Exemplo de Seleo de Arquivos

O cdigo abaixo cria uma pgina Zen com um boto que ao ser pressionado apresenta uma
janela de dilogo para a seleo de um arquivo.

InterSystems do Brasil

198

Cach ZEN

Exerccios Adicionais Menu

1. Podemos agora selecionar o tipo de menu que gostaramos, selecionando das opes de um
combobox.

2. Inclua abaixo de locatorbar:


1. <label label=Opes de Menu: " labelStyle="font-size: 0.80em;" />
2. <select name="sel" id="OpMenu"
valueList="1,2,3" displayList="DynaTree,Menu,LookOut"
onchange="zenPage.mudaMenu();" />

3. Crie o mtodo mudaMenu().


Method mudaMenu() [ Language = javascript ]
{
var op = zenPage.getComponentById('OpMenu').getValue();
var dy = zenPage.getComponentById('hGroupDyna');
var mi = zenPage.getComponentById('hGroupItem');
var lo = zenPage.getComponentById('hGroupLook');
var lb = zenPage.getComponentById('labelMenu');

if (op == '')
{
dy.setProperty('hidden',false);
mi.setProperty('hidden',false);
lo.setProperty('hidden',false);
lb.setProperty('label','All...');
}
...
}

4. Crie as propriedades.
Property Usuario As %String [ InitialExpression = {%session.Get("NomeUsuario")} ];
Property Sessao As %String [ InitialExpression = {%session.SessionId} ];

InterSystems do Brasil

199

Cach ZEN

5. Crie dentro de <vgroup id="user" width="10%">


<label align="left" label='User: #(%page.Usuario)#'/>
<label align="left" labelStyle="bold;" label="Session: #(%page.Sessao)#"/>
<link id="lnkSair" align="left" caption=Sair" href="ISCUser.Pag.Logout.cls"/>

6. Crie uma pgina de logout que ser chamada quando o usurio fechar a aplicao ou um pouco
antes de expirar o tempo da sesso.
1. Ela dever conter um link para logar novamente.
2. <link href="ISCUser.Pag.Login.cls" caption="Clique aqui para o login!."/>
3. Dever conter uma mensagem de que a sesso foi encerrada. A sesso ser encerrada
com %session.EndSession = 1
4. Em 'onloadHandler voc deve encerrar a sesso chamando o mtodo FimSessao()
(ZenMethod) e no mtodo adicionar
Set %session.EndSession = 1
Faa: zenPage.FimSessao (); dentro de 'onloadHandler';
ClassMethod FimSessao() As %Status [ ZenMethod ]
{
Set %session.EndSession = 1
Quit $System.Status.OK()
}

InterSystems do Brasil

200

Cach ZEN

InterSystems do Brasil

201

Cach ZEN

Mdulo - Miscelnea

Mdulo - Miscelnea

InterSystems do Brasil

202

Cach ZEN

InterSystems do Brasil

203

Cach ZEN

<timer>

O elemento <timer> no tem nenhuma representao visual, ele apenas dispara um evento no
lado cliente em um especfico perodo de tempo.

A contagem do atributo timeout (em miIisegundos) inicia automaticamente sempre que a pgina
carregada.

Um <timer> dispara o evento apenas uma vez, ento para reiniciar o temporizador, deve-se
chamar o mtodo startTime de dentro do mtodo especificado no atributo ontimeout.

<fieldSet>

O elemento <fieldSet> um componente agrupador que desenha uma caixa exterior ao redor
dos controles contidos nele.

Cria um painel visual que ajuda a organizar os controles dentro de uma pgina.

Para inserir este componente basta inserir um <fieldSet> e dentro dele os componentes filho.

InterSystems do Brasil

204

Cach ZEN

Possui 2 atributos:

legend: especifica o texto a apresentar na borda do componente.

title: especifica o texto a apresentar quando o usurio pra o mouse sobre o texto de
legend.

<colorPane>

O componente deixa o usurio ver e selecionar cores ou incorporar valores do RGB a um paleta
grande da cor. A paleta uma grade que possa ser visualizada como uma fatia possvel de um
cubo tridimensional de cores disponveis.

O <colorPane> captura uma fatia do cubo aceitando a escolha do usurio de uma de trs faces
(vermelho, verde, ou azul) e cortando atravs do cubo, paralela a essa face, em algum nvel de
saturao (mais brilhante ou menos ofuscante) para produzir uma grade das cores.

InterSystems do Brasil

205

Cach ZEN

Exerccios FieldSet

1. Usando o fieldSet.
1. Em 'Pagina.cls' adicione um <fieldSet> para conter o controller o dynaForm e os
buttons. Use 'align = left.

2. Crie outro <fieldSet> para conter os links. Atribua a ambos width = "95%".
Exerccios TimeOut

O timeout padro de 900s para a sesso.


Se nada acontecer antes destes 900s ela automaticamente expira.

Entretanto, para prevenir que a sesso expire necessrio controlar este tempo, ou seja, h quanto
tempo a sesso est aberta, e momentos antes de expirar chamar uma pgina adequada para
tratamento.

Isto feito criando na pgina de menu um controle de tempo de sesso.


1 criado na superclasse de pgina um parmetro para contar o tempo de sesso e gravado
no %session.
Property SessionTimeout As %Integer [ InitialExpression = {..SessionControlerTimeout()}
];

2 Criar o mtodo SessionControlerTimeout()


ClassMethod SessionControlerTimeout() As %Status [ Final, Private ]
{
// inicializa a propriedade ControleTimeout
Do %session.Set("ControleTimeout",0)
Quit $$$OK
}

InterSystems do Brasil

206

Cach ZEN

Na pgina de Menu crie dois mtodos.


Method %OnAfterCreatePage() As %Status
{
Set timer = ##class(%ZEN.Component.timer).%New()
Set timer.id = "timer"
Set timer.timeout = 30*1000 //a cada 30s
Set timer.ontimeout =
"zenPage.atualizaTimer();zenPage.getComponentById('timer').startTimer()"
Do %page.%AddChild(timer)
Quit $$$OK
}

ClassMethod atualizaTimer() As %Status [ ZenMethod ]


{
Set valorAtual = %session.Get("ControlTimeout")
Set valorAtual = valorAtual + 30
If %session.AppTimeout-valorAtual<60
{
&js<zenPage.logout();>
}
Do %session.Set("ControlTimeout",valorAtual)
Quit $system.Status.OK()
}

InterSystems do Brasil

207

Cach ZEN

Mdulo Componentes Customizados

Mdulo Componentes Customizados

InterSystems do Brasil

208

Cach ZEN

InterSystems do Brasil

209

Cach ZEN

Componentes Customizados

Zen um framework EXTENSVEL devido a possibilidade de poder criar novos componentes,


personalizar componentes existentes, construir novos medidores, etc.

H 4 opes para criar componentes personalizados:

Construir um componente composto;

Modificar o estilo de um componente;

Criar um componente novo;

Criar um novo medidor.

Componentes Compostos

Um componente composto une um grupo de componentes embutidos ao Zen, e permite


referenciar este grupo, dentro do bloco XData Contents, como se fosse um nico componente.

Exemplo: A classe seguinte cria um novo componente composto.


Este novo componente, chamado compComposto, possui dois botes e um mtodo que
executado ao clicar em um dos botes.

Uma vez criada a classe do componente composto, ele pode ser utilizada em qualquer outra
pgina Zen.

Para incluir o componente composto criado pela classe anterior, basta inserir o componente e
fazer as devidas referncias ao namespace do componente.

InterSystems do Brasil

210

Cach ZEN

Criando componentes customizados

Para criar um componente novo, uma nova classe deve ser criada que herde de uma classe
base Zen.

Sua classe nova comea automaticamente com as seguintes caractersticas:

Uma projeo XML para usar na classe da pgina XData Contents

Algumas propriedades, mtodos, parmetros, ou outras caractersticas.

Manipulao apropriada de algum material do lado cliente da classe:

JavaScript

CSS style definitions

HTML

SVG

As propriedades podem ser expostas para configurao, para visualizao e usar para
modificar os mtodos do lado cliente getProperty e setProperty.

A tabela seguinte uma lista de verificao para criar uma classe de componente customizada
Task

InterSystems do Brasil

Descrio

211

Cach ZEN

Classes Bases para componentes Customizados

Estilo Customizado

Para definir um novo estilo CSS para um componente customizado, voc pode colocar um
XData Style block dentro de uma sub-classe. Dentro deste bloco abra um <style type="text/css">
e feche com </style>.

Exemplo
XData Style
{
<style type="text/css">
/* @doc="Main style definition for MyComponent." */
.MyComponent
{
color: blue;
background: yellow;
white-space: nowrap;
}
</style>
}

InterSystems do Brasil

212

Cach ZEN

Propriedades Customizadas

Sendo um componente uma classe, voc pode definir propriedades alm das herdadas.

Nomenclatura

Propriedades somente cliente: minhaPropriedade

Propriedade somente Servidor (o % essencial): %MinhaPropriedade

Propriedades que invocam um evento JavaScript: onmousedown

Propriedades que identificam um mtodo callback server-side callback :


OnCreateDataSet

Outras Propriedades: minhaPropriedade

Projeo XML

Todos os componentes Zen so derivados da classe %XML.Adaptor e usam


este mecanismo para definir o comportamento XML

Toda propriedade simples de componente Zen pode ter um valor de atributo


XMLPROJECTION. Se voc no quiser fazer uma propriedade visvel atravs de
XML, ajuste seu parmetro de XMLPROJECTION para none" como no seguinte
exemplo:

Property beeswax As %ZEN.Datatype.string(XMLPROJECTION="none");

Mtodo setProperty

Se voc adicionar uma propriedade a uma classe de componente customizada,


voc deve cancelar o mtodo setProperty.

Parmetros Datatype

Toda a classe Zen herda (de %ZEN.componentParameters) o seguinte conjunto


de parmetros da propriedade, que voc pode aplicar a toda a propriedade voc
adiciona a uma classe de Zen

ZENENCRYPT

ZENEXPRESSION

ZENLOCALIZE

ZENSETTING

Classes Datatype

Para a convenincia, Zen fornece um conjunto de classes datatype que voc


pode usar ao definir propriedades Zen. As classes do datatype esto no pacote
de %ZEN.Datatype.

InterSystems do Brasil

213

Cach ZEN

Mtodos Customizados

As definies destes mtodos influenciam onde e como podem ser usadas.

Chamado de

Executado em

Linguagem

Cliente

Cliente

JavaScript

Cliente

Server

Server

Server

ObjectScript ou
Basic
ObjectScript ou
Basic

Keyword
Language =
JavaScript

Nomenclatura

myMethod

ZenMethod

MyMethod

%MyMethod

Criao de um medidor personalizado


Esta tabela seu checklist para construir um componente medidor personalizado. Veja os exemplos no
prximo slide.

Task

Description

Subclass

Extend %ZEN.SVGComponent.meter to create a new class.


Any subclass of %ZEN.SVGComponent.meter must override this method to render

renderMeter

the SVG contents of the meter. The odometer and clock examples show how to make
SVG calls from the meter class.
(Optional) Provide class parameters and appropriate values. The odometer example

Parameters

overrides the DEFAULTHEIGHT and DEFAULTVIEWBOXHEIGHT parameters from


the base meter class.
(Optional) Provide properties, if needed. The odometer sets a maximum number of

Properties

digits for its display. The clock overrides the value property from the base meter class
with an ObjectScript expression that is evaluated each time the meter is displayed.
For the clock, this expression calculates the current time.

InterSystems do Brasil

214

Cach ZEN

XData SVGStyle

(Optional) Provide any CSS style definitions for the meter.

XData SVGDef

(Optional) Provide any SVG definitions for the meter.


(Optional) You may override this method to provide unique ways to set certain

setProperty

properties of the meter. The clock example does this for the value property, then
defers to the superclass for setting all other properties.

Methods
renderLabel

XML Element

(Optional) Provide supporting methods as needed for component behavior.


(Optional) Any subclass of %ZEN.SVGComponent.meter may override this method to
set the x and y positions of the meter label.
To add the component to a page, place it within that pages XData Contents block as
an XML element. Examples of this convention follow this table.

Criao de um novo medidor

Para criar um novo medidor tambm necessrio criar uma classe que deriva de uma classe
Zen de componentes SVG.

Tambm pode-se criar novos parmetros para classe, propriedades, escrever mtodos que
desenham o medidor, etc.

Exemplos de medidores personalizados:

InterSystems do Brasil

215

Cach ZEN

Exerccios Componentes Customizados

Podemos customizar o componente DateText para criar um componente com barras automticas na
digitao, por exemplo. Queremos a data no padro 'D / M / Y'. Depois de digitar os dois primeiros
nmeros uma barra ser adicionada depois mais dois e mais um barra e depois mais 4 dgitos.

1. Crie a classe ISCUser.Componente.Data.cls, derivada de %ZEN.Component.dateText.

2. Localize a tag <input type="text> dentro do mtodo %DrawHTML e modifique o manipulador de


eventos 'onkeyup para chamar o mtodo mascara():
zenPage.getComponent(#(..index)#).mascara(event,this)

O argumento 'event' o evento no cliente e this o objeto do componente na pgina.

Crie mtodo mascara() que possui dois argumentos, pE a tecla digitada e pComponent o
objeto.
Method mascara(pE, pComponent) [ Language = javascript ]
{
var whichCode = (window.Event) ? pE.which : pE.keyCode;
//cod. teclado: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
var strCheck = '48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105';
if (strCheck.indexOf(whichCode) == -1 || whichCode==8) return;
vr = new String(pComponent.value);
tam = vr.length;
if (tam == 2)
{
pComponent.value = vr + '/';
}
if (tam == 5)
{
pComponent.value = vr + '/';
}
}
InterSystems do Brasil

216

Cach ZEN

4. Crie na classe do componente os parmetros.


Parameter DOMAIN = "iscuser";
Parameter NAMESPACE = "http://www.iscuser.com/iscuser";

5. Teste sua Data na classe Exames.cls, no mtodo PropriedadeInfo.


Set pInfo ( "Data", "%type") = ISCUser.Componente.Data
Set pInfo ( "Data", "format") = "DMY"
Set pInfo ( "Data", "separator ")="/"

Para que informemos a data no formato Europeu e tenha / como delimitador.

InterSystems do Brasil

217

Cach ZEN

Mdulo Localizao

Mdulo Localizao

InterSystems do Brasil

218

Cach ZEN

InterSystems do Brasil

219

Cach ZEN

Localizao

A localizao um poderoso recurso do Cach disponvel tanto para CSP quanto para Zen que
torna possvel a traduo dos textos da aplicao, para mensagens apresentadas ao usurio,
ttulo dos controles, textos informativos para botes, etc.

Com o Zen esse recurso ainda mais fcil de ser utilizado, pois faz automaticamente a
identificao dos textos que precisam ser traduzidos.

InterSystems do Brasil

220

Cach ZEN

O prximo cdigo mostra o uso de Linguagem utilizando uma pgina Zen


/// Created using the page template: Default
Class CursoZen.Aplic.localizacao Extends %ZEN.Component.page
{
/// Class name of application this page belongs to.
Parameter APPLICATION = CursoZen.Aplic.MinhaNovaAplic";
/// Displayed name of this page.
Parameter PAGENAME = "localizacao";
/// Domain used for localization.
Parameter DOMAIN = CursoZen";
/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
</style>
}
/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
Textos traduzir
<page xmlns="http://www.intersystems.com/zen" title="">
<label label="Page Test with Localization ..." labelStyle="font-size:20px" />
<fieldSet legend="Controls" align="center">
<text label="Code"/>
<text label="Name"/>
<hgroup>
<button caption="Save"/>
<button caption="Return"/>
<button caption="Language" onclick="zenPage.Message();"/>
</hgroup>
</fieldSet>
</page>
}
ClassMethod Message() [ ZenMethod ]
{
set msg = $$$TextJS("Your Language is: ")
&js<alert('#(msg_" - "_%session.Language)#');>
Quit

}
}

InterSystems do Brasil

221

Cach ZEN

InterSystems do Brasil

222

Cach ZEN
1:

^CacheMsg("CursoZen")

pt-br"

2:

^CacheMsg("CursoZen","en",60550761)

"Controls"

3:

^CacheMsg("CursoZen","en",766317539)

"Language"

4:

^CacheMsg("CursoZen","en",1403964196)

"Page Test with Localization ..."

5:

^CacheMsg("CursoZen","en",2687646265)

"Return"

6:

^CacheMsg("CursoZen","en" = "Your Language is:


,2722840033)
"

7:

^CacheMsg("CursoZen","en",3609698214)

"Code"

8:

^CacheMsg("CursoZen","en",4115961312)

"Save"

9:

^CacheMsg("CursoZen","en",4262580536)

"Name"

10:

^CacheMsg("CursoZen","pt-br",60550761)

"Controles"

11:

^CacheMsg("CursoZen","pt-br",766317539)

"Language"

12:

^CacheMsg("CursoZen","pt-br",1403964196)

"Pgina de Teste com Zen"

13:

^CacheMsg("CursoZen","pt-br",2687646265)

"Voltar"

14:

^CacheMsg("CursoZen","ptbr",2722840033)

"Sua Linguagem: "

15:

^CacheMsg("CursoZen","pt-br",3609698214)

"Cdigo"

16:

^CacheMsg("CursoZen","pt-br",4115961312)

"Salvar"

17:

^CacheMsg("CursoZen","pt-br",4262580536)

"Nome"

InterSystems do Brasil

223

Cach ZEN

Exerccios Language (Localizao)


1. Crie uma Propriedade na pgina de Menu.
Property SessionLanguage As %String [ InitialExpression = {%session.Language} ];
2. Crie dentro de <vgroup id="flags" width="10%>
<label id="lan" align="center" label="Language: #(%page.SessionLanguage)#"/>
<spacer width="100" />
<hgroup width="100%">
<image id="flag1" src="images\BandeiraBrasil.jpg" width="30" height="15"
onclick="zenPage.Modifica('pt-br');"/>
<image id="flag2" src="images\BandeiraUsa.jpg" width="30" height="15"
onclick="zenPage. Modifica('en');"/>
<image id="flag3" src="images\BandeiraEspanha.jpg" width="30" height="15"
onclick="zenPage. Modifica('es');"/>
</hgroup>

3. Crie o mtodo Modifica();


Method Modifica(pFlag) [ ZenMethod ]
{
set (%session.Language,%page.SessionLanguage)= pFlag
&js<zenPage.reloadPage();>
Quit
}
Method reloadPage() [ Language = javascript ]
{
document.location.reload();
}

4. Exporte o texto atravs de: Do ##class(%Library.MessageDictionary).Export(file)


Traduza.
Importe atravs de: Do ##class(%Library.MessageDictionary).Import(file).
Consulte a global ^CacheMsg.

InterSystems do Brasil

224

Cach ZEN

InterSystems do Brasil

225

Cach ZEN

Mdulo Programao da Aplicao

Mdulo Programao da Aplicao

InterSystems do Brasil

226

Cach ZEN

InterSystems do Brasil

227

Cach ZEN

Programao da Aplicao
Uma aplicao de Zen especifica um conjunto de atividades que podem resultar quando um
cliente Zen e um servidor Zen interagem. Estas atividades podem consistir em pginas Web
pages, querys de uma base de dados, gravar dados no disco, e mais. Quando voc cria uma
aplicao de Zen, voc cria um suite das classes de Zen que especificam estas atividades. A
linguagem que voc usa para estas classes o Cach ObjectScript - com possibilidades de uso
de XML, de HTML, de SVG, e de Javascript quando necessrio
Zen um framework extensvel para criao rpida de aplicaes baseadas na Web.

Classes Zen so Classes CSP

A base das classes da aplicao %ZEN.application e a base das classes de pginas


%ZEN.Componente.page so herana de %CSP.page.
Isto significa que cada classe da aplicao Zen e cada classe de pgina Zen so tambm uma
instancia de Cach Server Page.
Todas as propriedades, mtodos, parmetros e variveis do CSP (como a %session) esto
disponveis nas pginas de uma aplicao Zen.

Classes de Applicao Zen

Cada aplicao de Zen tem uma classe da aplicao. Esta uma classe derivada de
%ZEN.application que fornece tarefas comuns e age como a nica raiz para todas as pginas na
aplicao.
A seguinte tabela lista os elementos de uma classe de Aplicao Zen:
Elemento

Tipo

APPLICATIONNAME

Parmetro de Classe

CSSINCLUDES

Parmetro de Classe

HOMEPAGE

Parmetro de Classe

JSINCLUDES

Parmetro de Classe

USERPACKAGES

Parmetro de Classe

USERSVGPACKAGES

Parmetro de Classe

XData Style

Documento XML Embutido

InterSystems do Brasil

228

Cach ZEN

Classe de Pginas Zen

As pginas dentro de uma aplicao de Zen so derivadas da classe %ZEN.Component.page.


Uma classe da pgina define e serve aos componentes de uma pgina Zen em um browser.
A seguinte tabela lista os elementos de uma classe de Pgina Zen:
Parmetros

Descrio

APPLICATION

Nome do pacote e da classe da aplicao associada.

AUTOLOGOUT

Se 1 (true) tentative de refresh nesta pgian quando a sesso


expirar. Se 0 (false) no faz. O default 1.

CSSINCLUDES

Lista separada por virgule do estilo CSS.

DOMAIN

Usado para a Localizao. O default "" (vazio).

JSINCLUDES

Lista separada por vrgula, de arquivos JavaScript incluidos na


pgina.

PAGENAME

Define uma string que voc possa usar nos ttulos ou nos labels.
Se no especificado, o nome da classe da pgina de Zen usado

PAGETITLE

Valor default para o atributo title.

RESOURCE

Nome de um recurso de sistema para que o usurio atual deve


prender privilgios do USO a fim ver esta pgina ou invocar alguns
de seus mtodos do server-side do cliente.

USERPACKAGES

Lista separada por vrgulas dos pacotes definidos pelo usurio da


classe cujas definies da classe e do estilo do HTML esto pr
geradas incluindo arquivos.

Lista separada por vrgulas dos pacotes definidos pelo usurio da


USERSVGPACKAGES classe cujas definies SVG que esto pr geradas incluindo
arquivos.

InterSystems do Brasil

229

Cach ZEN

Classe de Pginas Zen

Zen oferece diversas variveis especiais que representam instncias de objetos de vrios tipos
dentro da aplicao de Zen.
A seguinte tabela lista as variveis especiais:

Uso em Zen
Runtime
Expressions

Server Side
Variveis

Refers To

Uso nestas classes

%application

Objeto da aplicao

Pgina

No

%composite

Objeto composto atual

Pgina, Componente

Sim

%page

Objeto da pgina atual

Pgina, Componente

Sim

%query

Objeto atual de
ResultSet

Pgina, Componente

Sim

%session

Objeto atual da sesso


CSP

Pgina, Componente

Sim

%this

Objeto atual (pgina ou


Pgina, Componente
componente)

Sim

%url

Um objeto cujas as
propriedades sejam
parmetros de URI da
pgina atual

Sim

%zenContext

String que indica o que o


cdigo do usurio est Pgina
fazendo atualmente

InterSystems do Brasil

Pgina, Componente

No

230

Cach ZEN

Classes de Pginas Zen Variveis Especiais

%application:

A varivel de server-side %application est disponvel em cada classe da pgina de Zen.


Pretende-se para o uso nos mtodos que funcionam quando o objeto da pgina for
criado.
Para o exemplo, o seguinte mtodo definido na classe ZENDemo.Application da
aplicao:
ClassMethod GetQuickLinks(Output pLinks) As %Status {
Set pLinks("Home") = "ZENDemo.Home.cls"
Set pLinks("Expense Calculator") = "ZENDemo.ExpenseCalculator.cls"
Set pLinks("MVC Master Detail") = "ZENMVC.MVCMasterDetail.cls"
Set pLinks("MVC Chart") = "ZENMVC.MVCChart.cls"
Set pLinks("MVC Meters") = "ZENMVC.MVCMeters.cls"
Set pLinks("MVC Form") = "ZENMVC.MVCForm.cls"
Set pLinks("Test Suite") = "ZENTest.HomePage.cls"
Set pLinks("Controls") = "ZENDemo.ControlTest.cls"
Set pLinks("Methods") = "ZENDemo.MethodTest.cls"
Quit $$$OK
}

As classes que so associadas com esta aplicao podem ento invocar este mtodo
como:
Class ZENDemo.ExpenseCalculator Extends %ZEN.Component.page {
/// Application this page belongs to.
Parameter APPLICATION = "ZENDemo.Application";
// ...Intervening lines removed...
/// Return an array of quick links to be displayed by the locator bar.
ClassMethod GetQuickLinks(Output pLinks) As %Status {
// dispatch to our application class
Quit %application.GetQuickLinks(.pLinks)
}
}

InterSystems do Brasil

231

Cach ZEN

%page e zenPage

%this, this, e zenThis

Zen oferece variveis especiais para representar o objeto da pgina de Zen nos lados
client e server :
Em ObjectScript ou no cdigo Basic que funciona no lado do usurio, o objeto da
pgina %page:
Set btn = %page.%GetComponentById("NewBtn1)

Em Zen runtime expressions, o objeto da pgina %page:


text id="rows" label="Rows:" value="#(%page.Rows)#" size="5"/>

Em mtodos JavaScript que rodam no lado clint, o objeto da pgina zenPage:


var chart = zenPage.getComponentById('chart');

Em JavaScript expressions que so valores de atributos XML, o objeto da


pgina zenPage:
<button caption="+" onclick="zenPage.makeBigger();"/>

Zen oferece variveis especiais representar um objeto de Zen (componente ou pgina)


no client e server sides:

Em ObjectScript ou no cdigo Basic que funciona no lado do usurio, o objeto


da pgina %this:
Set %this.Name = pSource.Name
Em Zen runtime expressions, o objeto da pgina %this:
<html>Item #(%this.tuple)#: <b>#(%query.Title)#</b></html>

Em mtodos JavaScript que rodam no lado clint, o objeto da pgina this:


var out = this.getComponentById('events');

Em JavaScript expressions que so valores de atributos XML, o objeto da


pgina zenThis:
onchange="zenPage.changeLayout('svgFrame',zenThis.getValue());"

zenEvent

Suponha que voc tem uma expresso Javascript como o valor de um atributo do evento
de XML, tal como o onchange no seguinte exemplo do listBox.
<listBox id="listBox" label="listBox" listWidth="240px"
onchange="zenPage.notifyOnChange(zenThis);" value="2">
<option value="1" text=Maa" />
<option value="2" text="Banana" style="font-size: 1.5em; "/>
<option value="3" text=Cereja" />
<option value="4" text=Abbora" />
<option value="5" text="Eggplant" style="font-size: 2.1em; "/>
</listBox>
A varivel especial zenEvent consulta o objeto atual do evento Javascript que descreve o
evento zenEvent fornece uma maneira browser-neutra de comear o acesso ao evento
atual (tal como um clique No mouse). No exemplo acima, o onchange references o
mtodo do notifyOnChange. O mtodo notifyOnChange do lado cliente pode referenciar
a varivel especial zenEvent dentro de seu cdigo do Javascript.

InterSystems do Brasil

232

Cach ZEN

%zenContext

Quando toda a atividade no usurio est pelo Zen, a varivel especial %zenContext do
server-side diz que tipo de atividade esta. %zenContext uma String. Se %zenContext
tiver o valor, ser:
page, Zen est servindo pgina em resposta a um pedido do HTTP

submit, Zen est processando um submit request

method, Zen est processando um hyperevent

Classe de Pginas Zen Zen Runtime Expressions

Zen Runtime Expressions

Pginas sempre fornecendo a informao esttica em uma descrio de pgina Zen, s


vezes til para a pgina que funciona no cliente para poder invocar as runtime
Expression que executam no server.
Uma runtime expression incluido dentro # () # e v algo assim:

<button caption="#(minhaPropriedade)#" />


Onde minhaPropriedade tem um valor especfico no server.

A sintaxe Zen runtime expression pode ser usada, com restries, somente nos
seguintes contextos
XML que est embutido com o bloco Xdata
<button caption="#(%query.Name)#" onclick="alert('#(%query.Name)#')"/>

Um mtodo server-side Cach ObjectScript ou ZenMethod (mas no um mtodo


JavaScript)
&html<<li>#($ZCVT(tBullet.text,"O","HTML"))#</li>>

JavaScript que embutido com um bloco &js<> em um ZenMethod


Uma expresso JavaScript desde que como o valor de um atributo de XML tal
como o onclick
HTML que embutido com um bloco &html<> block em um mtodo server-side

Os seguintes itens no podem aparecer dentro do # () # delimitadores de uma Zen


runtime expression:

InterSystems do Brasil

Chamada para macros, como $$$Text


Expresses JavaScript
Expresses ObjectScript, a menos que a expresso runtime aparecer dentro de
a mtodo server-side ObjectScript ou ZenMethod

233

Cach ZEN

Propriedades Zen no client e Server

No lado server, voc pode ajustar valores de propriedades da classe diretamente,


usando a sintaxe normal do ponto. Por exemplo:
Method serverInstanceMethodCreate() [ ZenMethod ]
{
#; create
Set group = %page.%GetComponentById("group")
If '$IsObject(group) {
&js<alert('Unable to find group.');>
Quit
}
Set count = group.children.Count()
Set cal = ##class(%ZEN.Component.calendar).%New()
Set cal.id = "NewCal"_count
Do group.%AddChild(cal)
Set btn = ##class(%ZEN.Component.button).%New()
Set btn.id = "NewBtn"_count
Set btn.caption = "New Button"
Do group.%AddChild(btn)
Set btn = ##class(%ZEN.Component.text).%New()
Set btn.label = "Hey"
Do group.%AddChild(btn)
}

No lado cliente, voc no pode acessar valores de propriedade diretamente. Voc deve
usar os mtodos get e set fornecidos nas classes de componentes. Para propriedades
single-valued, use os mtodos getProperty e setProperty.
Por exemplo:
var index = table.getProperty('selectedIndex');

Ou:
var svg = zenPage.getComponentById('svgFrame');
svg.setProperty('layout','');
svg.setProperty('editMode','drag');

Importante:
No confunda o getProperty e o setProperty com os mtodos getValue e
setValue, que manipulam valor de um componente do controle, e no os aplique
a nenhuma outra propriedade do componente.

InterSystems do Brasil

234

Cach ZEN

ZENURL

Para receber um parmetro passado pela url, dentro da classe, use ZENURL.

Depois, use em qualquer posio na pgina com a sintaxe #(%page.Propriedade)#.

Se no desejar criar propriedades dentro da classe use: #(%url.Propriedade)# . Ex.:


modelId="#(%url.ModelId)#

Exemplo:
Property DataInicio As %String(ZENURL = datainicio);

Mtodos Zen

A seguinte tabela esboa as possibilidades para tipos diferentes de mtodo em uma


classe da pgina de Zen

Chamado
de

Executa
no

Tipo de
Class

Chamada

Linguagem do
Cdigo

Keyword

Nomemclatura

Cliente

Cliente

Instncia

JavaScript

Language
=
JavaScript

meuMtodo

ZenMethod

MeuMtodo

%MeuMtodo

Assncrono

Server
(Can send

Instncia
Sincrono

back code
Cliente

ObjectScript ou
Assncrono

that runs
on the

Classe

client)

Server

Server

InterSystems do Brasil

Instncia

Basic

Sincrono

ObjectScript or
Basic

235

Cach ZEN

Mtodos Zen Mtodos Server-Side Callback


Callback Method

Descrio

%OnBeforeCreatePage

Este mtodo de classe chamado imediatamente antes que o objeto da


pgina do server-side seja criado.

%OnCreatePage

Este mtodo de instncia chamado imediatamente depois que o objeto


da pgina do server-side criado mas antes que alguns de seus
componentes filhos sejam criados.

%OnAfterCreatePage

Este mtodo de instncia chamado aps o objeto da pgina serverside e todos seus componentes filhos predefinidos so criados. Uma
sub-classe pode cancelar este mtodo para adicionar, para remover, ou
para modificar itens dentro da pgina de modelo, ou para fornecer
valores para controles.

%OnDrawHTMLHead

Este mtodo de Instncia chamado quando o HTML para a pgina


est sendo redirecionado imediatamente antes da extremidade da seo
HTML HEAD da pgina. Isto fornece uma maneira de adicionar
componentes na seo PRINCIPAL de uma pgina se este for sempre
necessrio.

%OnDrawHTMLBody

Este mtodo de Instncia chamado quando o redirecionamento HTML


para a pgina fechado para que inicie a seo HTML BODY (antes
que seus filhos sejam redirecionados). Isto fornece uma maneira
adicional na seo do BODY de uma pgina sempre que isto for
necessrio.

InterSystems do Brasil

236

Cach ZEN

Mtodos Zen Mtodos Server-Only


Mtodo

Descrio

%GetComponent

Encontra um objeto componente dado seu nmero de ndice.

%GetComponentById

Encontra um objeto componente dado seu valor de identificao de ID.

%GetComponentByName Encontra um objeto componente dado seu nome.


%GetValueById

Encontra o valor de um objeto do controle dado seu ID

%GetValueByName

Encontra o valor de um objeto de controle dado o seu nome.

%SetErrorById

Atribui o valor de uma mensagem de erro a um componente dado o ID

%SetErrorByName

Atribui o valor de uma mensagem de erro a um componente dado seu


nome.

%SetValueById

Atribui valor de um objeto do controle dado seu valor de ID

%SetValueByName

Atribui o valor de um objeto de controle dado o seu nome.

%SetValuesByName

Atribui os valores de um conjunto de objetos do controle dados uma


disposio dos valores subscritos por nome.

InterSystems do Brasil

237

Cach ZEN

Mtodos Zen Mtodo Callback de Pgina do Lado Cliente


Mtodo Callback

Descrio

onloadHandler

Este mtodo da pgina do lado cliente, se definido, chamado quando a


pgina do cliente termina seu carregamento ( chamada pelo evento onload
do HTML da pgina).

onpopupAction

Este mtodo da pgina do lado cliente, se definido, chamado quando uma


janela popup, lanada para esta pgina, terminada.

onresizeHandler

Este mtodo da pgina do lado cliente, se definido, chamado quando a


pgina do cliente redimensionada (est chamada pelo evento HTML da
pgina onresize).

onunloadHandler

Este mtodo da pgina do lado cliente, se definido, chamado quando a


pgina do cliente est a ponto de descarregar ( chamada pelo evento
onunload do HTML da pgina).

InterSystems do Brasil

238

Cach ZEN

Mtodos Zen Mtodos de Pagina do Lado Cliente


Mtodo

Descrio

cancelPopup

(Popup somente windows). Feche a janela atual popup com nenhuma


ao adicional.

createComponent

Cria um novo componente na pgina (pelo nome do componente).

createComponentNS

Cria um novo componente na pgina (pelo nome do componente e


namespace).

endModal

Esconda o modalGroup atual, se houver um.

getComponent

Encontre um componente na pgina dada seu nmero de ndice atribuido


no sistema.

getComponentById

Encontre um componente na pgina dada seu valor de ID.

startModal

Coloca um modalGroup visvel. Alternadamente, use o mtodo show do


modalGroup.

InterSystems do Brasil

239

Cach ZEN

Mtodos Zen Mtodo de componente do Lado Cliente


Mtodo

findElement

getEnclosingDiv
getHidden

Descrio
Procura um elemento nomeado HTML associado com um componente
especfico
Pega o elemento HTML div usado para incluir um componente especfico
Retorne se um componente est escondido (ou exibido).

getProperty

Retorna o nome da propriedade de um componente.

getSettings

Recupera e atribuiGet nomes de propriedades que podem ser observadas e


modificadas usando getProperty e setProperty.

getValue

(Sub-classe somente para controles). Recupera o valor de um controle.


equivalente a chamada getProperty('valor').

invokeSuper

Invoca a o mtodo implementado da super classe do corrente componente.

isOfType

Testa se o componente uma sub-classe ( um tipo de) outro componente.

refreshContents

setHidden
setProperty
setValue

InterSystems do Brasil

Faz a request para o servidor regerar a definio HTML do componente. Para


componentes tablePane, usa a instncia de executeQuery.
Atribui se um componente est escondido (ou exibido).
Atribui o valor de uma propriedade para um componente.
(Sub-classe somente para controles). Atribui um valor para um controle.

240

Cach ZEN

InterSystems do Brasil

241

Cach ZEN

Respostas dos Exerccios

Respostas dos Exerccios

InterSystems do Brasil

242

Cach ZEN

InterSystems do Brasil

243

Cach ZEN

Respostas dos Exerccios


Abaixo esto as classes completas criadas durante os exerccios em ordem alfabtica.

Aplicao
Class ISCUser.Aplic.Aplicacao Extends %ZEN.application
{
/// Este o nome desta aplicao.
Parameter APPLICATIONNAME = "Minha Aplicacao";
/// Esta a URL da pgina inicial principal desta aplicao.
Parameter HOMEPAGE;
/// Este bloco de estilos contm definies de estilo CSS vlidas para toda a aplicao.
XData Style
{
<style type="text/css">
*{ /* padro texto geral */
padding-left:0px;
padding-right:0px;
margin:0;
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
color: #003082;
}
body{ /* fundo geral */
/*#E6E6FA*/
background-color: #D3E0EE;
}
.iframe{
}
.textol{ /* texto pgina de login e dynaForm dos modelos de cadastro */
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #003082;
font-size: 10px;
}
.caixatextolU{ /* caixa de texto pgina de login UPPER */
border:solid 1px #7F9DB9;
font-family: Arial;
font-size: 10px;
TEXT-TRANSFORM: uppercase;
}
.caixatexto{ /* caixa de texto padro */
border:solid 1px #7F9DB9;
InterSystems do Brasil

244

Cach ZEN

font-family: Arial, Helvetica, sans-serif;


font-size: 10px;
font-style: normal;
color: #003082;
background-color: #F5FAFC;
}
.botaol{ /* boto pgina de login */
color: #003082;
width: 91px;
background-color: #DAE4F1;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
border: 1px solid #7F9DB9;
text-transform: none;
}
p { /* estilo do pargrafo */
padding-bottom:5px;
}
a { /* estilo dos links */
color: #003082;
}
a:hover { /* em cima do link */
color: #003082;
}
a:visited { /*links j visitados*/
color: #003082;
}
.menu_fundo { /*estabelece a area fundo do menu */
width:auto;
height:34px;
background-color: #E9F4F8;
border-top: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
}
.tabelaMenu { /* classe do table do menu */
background-color:#DAECF3;
border: 1px solid #CCCCCC;
height: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #003082;
InterSystems do Brasil

245

Cach ZEN

font-style: normal;
font-weight: bold;
background-position: center;
}
.celulaMenu { /* classe do td do menu */
background-color: #E9F4F8;
border-right: 1px solid white;
border-left: 1px solid white;
border-top: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
cursor:pointer;
width:80px;
text-align:center;
vertical-align:middle;
}
.celulaFavoritos { /* classe do td do Favoritos */
background-color: #F5FAFC;
cursor:pointer;
width:80px;
text-align:center;
vertical-align:middle;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #CCCCCC;
border-left-color: #CCCCCC;
}
.tabelaSubMenu { /* classe do table dos submenus */
background-color:#E9F4F8;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #003082;
background-position: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.tabelaSubMenuFavoritos { /* classe do table do submenu do Favoritos*/
background-color:#E9F4F8;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
InterSystems do Brasil

246

Cach ZEN

font-style: normal;
font-weight: normal;
filter: Invert;
cursor: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.celulaSubMenu { /* classe do td dos submenus */
border-top: 1px solid white;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0px;
cursor:pointer;
}
.usuario { /* descricao usurio logado */
width:193px;
float:right;
text-align:right;
padding-top:3px;
background-image:url(../imagens/fundo_usuario.gif);
background-repeat:no-repeat;
padding-right:10px;
}
.rodape { /* rodap pgina principal */
font-size:10px;
color:#666666;
}
.rodape a { /* link rodap pgina principal */
font-size:10px;
clear:both;
}
.titulo { /* para todos os ttulos de janelas */
color: #003082;
font-weight:bold;
font-size: 12px;
}
.destaque{
color: #cc0000;
font-weight:bold;
font-size: 12px;
text-align: left;
}
.titulodestaque{
color: #FF0000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
InterSystems do Brasil

247

Cach ZEN

}
.textodestaque{
color: #FF0000;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.comboboxImgButton { /*imagem do botao do combobox */
background: white;
vertical-align: middle;
border-top: 1px solid #7F9DB9;
border-bottom: 1px solid #7F9DB9;
border-left: 1px solid #7F9DB9;
border-right: 1px solid #7F9DB9;
width: 1.3em;
height: 1.4em;
}
.comboboxInput { /* caixa de texto do combobox */
vertical-align: middle;
border-top: 1px solid #7F9DB9;
border-bottom: 1px solid #7F9DB9;
border-left: 1px solid #7F9DB9;
border-right: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
background-color: #F5FAFC;
color: #003082;
}
.text { /*campos de texto comum*/
vertical-align: middle;
border-top: 1px solid #7F9DB9;
border-bottom: 1px solid #7F9DB9;
border-left: 1px solid #7F9DB9;
border-right: 1px solid #7F9DB9;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
background-color: #F5FAFC;
color: #003082;
}
.password {
vertical-align: middle;
border-top: 1px solid #7F9DB9;
border-bottom: 1px solid #7F9DB9;
border-left: 1px solid #7F9DB9;
border-right: 1px solid #7F9DB9;
InterSystems do Brasil

248

Cach ZEN

font-family: Arial, Helvetica, sans-serif;


font-size: 10px;
font-style: normal;
font-weight: normal;
background-color: #F5FAFC;
color: #003082;
}
.controlStyle {
vertical-align: middle;
border-top: 1px solid #7F9DB9;
border-bottom: 1px solid #7F9DB9;
border-left: 1px solid #7F9DB9;
border-right: 1px solid #7F9DB9;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
background-color: #F5FAFC;
color: #003082;
}
.tabGroupBody { /* corpo do tabGroup (height de 100% para ajustar-se ao contedo, necessrio no
Firefox) */
background: white;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
height: 100%;
}
.textonormal {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #003082;
font-style: normal;
font-weight: normal;
}
.textobold {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #003082;
font-style: normal;
}
.textoboldbranco {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.celulatabelatitulo {
InterSystems do Brasil

249

Cach ZEN

font-family: Arial, Helvetica, sans-serif;


font-size: 10px;
font-style: normal;
font-weight: bold;
color: #003082;
background-color: #DAECF3;
background-position: center center;
}
.celulatabelainterna {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #003082;
background-color: #F5FAFC;
background-position: center center;
}
.celulatabelainternabold {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #003082;
background-color: #F5FAFC;
background-position: center center;
}
</style>
}
}

InterSystems do Brasil

250

Cach ZEN

Data Personalizada
Class ISCUser.Componente.Data Extends %ZEN.Component.dateText
{
Parameter DOMAIN = "iscuser";
Parameter NAMESPACE = "http://www.iscuser.com/iscuser";
Method %DrawHTML()
{
#; do not add this to set of events
Set tIgnore("onchange")=""
Set disabled = $S(..disabled:"disabled",1:"")
Set ro = $S(..readOnly:"readonly",1:"")
Set bflag = $S(..readOnly:"readonly",1:"")
#; if localized properties have not been set, set them
Set:..dayList="" ..dayList = $$$Text("S,M,T,W,T,F,S")
Set:..monthList="" ..monthList =
$$$Text("January,February,March,April,May,June,July,August,September,October,November,December"
)
Set:..timeCaption="" ..timeCaption = $$$Text("Time:")
#; if there are expressions for these props, evaluate
Set ..minDate = $$$ZENVAL(..minDate)
Set ..maxDate = $$$ZENVAL(..maxDate)
Set ..format = $$$ZENVAL(..format)
Set ..separator = $$$ZENVAL(..separator)
#; Get value
Set tValue = $$$ZENVAL(..value)
Set tDisplayValue = tValue
&html<<table border="0" cellspacing="0" cellpadding="0">>
#; render as one line as CR will mess up the display
&html<<tr><td style="white-space: nowrap">
<input class="#(..controlClass)#" type="text" size="#(+..size)#"
id="#(..%MakeId("control"))#" #(..%Attr("title",..title))#
#(..%Name())# #(disabled)# #(ro)# #(..%Attr("value",tDisplayValue))#
#(..%Attr("tabindex",..tabIndex))# #(..%GetEventHandlers(.tIgnore))#
onchange="zenPage.getComponent(#(..index)#).ondatechangeHandler();"
onkeyup="zenPage.getComponent(#(..index)#).mascara(event,this);"
/>
<img src="/csp/broker/images/datetext.gif" id="#(..%MakeId(""))#"
onclick="zenPage.getComponent(#(..index)#).showDateSelector();"
class="comboboxImgButton"/>
</td></tr>>
&html<</table>>
}
InterSystems do Brasil

251

Cach ZEN

Method mascara(pE, pComponent) [ Language = javascript ]


{
var whichCode = (window.Event) ? pE.which : pE.keyCode;
//cod. teclado: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
var strCheck ='48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105';
if (strCheck.indexOf(whichCode) == -1 || whichCode == 8) return;
vr = new String(pComponent.value);
tam = vr.length;
if (tam == 2)
{
pComponent.value = vr + '/';
}
if (tam == 5)
{
pComponent.value = vr +'/';}
}
}

InterSystems do Brasil

252

Cach ZEN

MVC Grfico Prioridade


Class ISCUser.MVC.GraficoPrioridade Extends %ZEN.DataModel.ObjectDataModel
{
Property Baixa As %Numeric;
Property Normal As %Numeric;
Property Alta As %Numeric;
Method %OnLoadModel(pSource As %RegisteredObject) As %Status
{
set rs = ##class(%ResultSet).%New()
set sql = "SELECT Paciente->Prioridade->Descricao As Nome, Count(Paciente->Prioridade) As
Total "_
"FROM ISCUser_Dados.Exames "_
"Group By Paciente->Prioridade"
do rs.Prepare(sql)
do rs.Execute()
while rs.Next() {
set Nome=rs.GetData(1) if Nome="" Set Nome="Nada"
set Total=rs.GetData(2)
xecute "set .."_Nome_" = "_Total
}
Quit $$$OK
}
}

InterSystems do Brasil

253

Cach ZEN

MVC Paciente
Class ISCUser.MVC.Paciente Extends %ZEN.DataModel.ObjectDataModel
{
Property Nome As %String;
Property Endereco As %String(ZENLABEL = "Endereo");
Property Cidade As %String;
Property Estado As %String;
Property Sexo As %String(DISPLAYLIST = ",M,F", VALUELIST = ",1,2");
Property Adulto As %Boolean;
Property Renda As %Numeric;
Property Prioridade As ISCUser.Dados.Paciente(ZENSQL = "Select ID,Descricao From
ISCUser_Dados.PacientePrioridade", ZENSQLLOOKUP = "Select Descricao From
ISCUser_Dados.PacientePrioridade Where ID = ?");
Method %OnNewSource(Output pSC As %Status = {$$$OK}) As %RegisteredObject
{
Set status = ##class(ISCUser.Dados.Paciente).%New()
Quit status
}
Method %OnOpenSource(pID As %String, pConcurrency As %Integer = -1, Output pSC As %Status =
{$$$OK}) As %RegisteredObject
{
Quit ##class(ISCUser.Dados.Paciente).%OpenId(pID,pConcurrency,.pStatus)
}
Method %OnLoadModel(pSource As ISCUser.Dados.Paciente) As %Status
{
Set ..Nome = pSource.Nome
Set ..Endereco = pSource.Endereco
Set ..Cidade = pSource.Cidade
Set ..Estado = pSource.Estado
Set ..Sexo = pSource.Sexo
Set ..Adulto = pSource.Adulto
Set ..Renda = pSource.Renda
Set ..Prioridade = pSource.Prioridade
Quit $$$OK
}

InterSystems do Brasil

254

Cach ZEN

Method %OnSaveSource(pSource As ISCUser.Dados.Paciente) As %Status


{
Set tSC = pSource.%Save()
Set ..%id = pSource.%Id()
Quit tSC
}
Method %OnStoreModel(pSource As ISCUser.Dados.Paciente) As %Status
{
Set pSource.Nome = ..Nome
Set pSource.Endereco = ..Endereco
Set pSource.Cidade = ..Cidade
Set pSource.Estado = ..Estado
Set pSource.Sexo = ..Sexo
Set pSource.Adulto = ..Adulto
Set pSource.Renda = ..Renda
Set pSource.Prioridade = ..Prioridade
Quit $$$OK
}
ClassMethod %OnDeleteSource(pID As %String) As %Status
{
Set status = ##class(ISCUser.Dados.Paciente).%DeleteId(pID)
Quit status
}
}

InterSystems do Brasil

255

Cach ZEN

Boas Vindas
Class ISCUser.Pag.BoasVindas Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Boas Vindas";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Boas Vindas">
<html id="title">Boas Vindas</html>
<vgroup width="100%">
<!-- put page contents here -->
<button caption="Mtodo Cliente" onclick="zenPage.btnClique();"/>
<button caption="Mtodo Servidor" onclick="zenPage.BtnCliqueServ();"/>
<hgroup>
<vgroup width="30%">
<calendar align="center"/>
</vgroup><vgroup width="40%">
<image align="center" src="images\LabExam.jpg"/>
</vgroup>
<vgroup width="30%">
<colorPicker align="center"/>
</vgroup>
</hgroup>
</vgroup>
</page>
}

InterSystems do Brasil

256

Cach ZEN

Method btnClique() [ Language = javascript ]


{
alert('ok');
}
Method BtnCliqueServ() [ ZenMethod ]
{
Set msg = $ZVersion
&js<alert('#(msg)#');>
Quit
}
}

InterSystems do Brasil

257

Cach ZEN

Estilos Relatrio
Class ISCUser.Pag.EstiloRelatorio Extends %ZEN.Component.page
{
Parameter PRIVATE = 0;
Parameter CONTENTTYPE = "text/css";
Method %DrawHTMLPage()
{
// Nova definio de tamanhos de fontes
write "th.TabMinima {",!
write " font-size:8px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write "td.TabMinima {",!
write " font-size:8px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write "th.TabMenor {",!
write " font-size:9px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write "td.TabMenor {",!
write " font-size:9px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write "th.TabMedia {",!
write " font-size:10px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write "td.TabMedia {",!
write " font-size:10px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write "th.TabMaior {",!
write " font-size:12px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write "td.TabMaior {",!
write " font-size:12px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
InterSystems do Brasil

258

Cach ZEN

write " }",!


write "th.TabMaxima {",!
write " font-size:14px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write "td.TabMaxima {",!
write " font-size:14px;",!
write " font-family:Verdana;",!
write " vertical-align:top;",!
write " }",!
write ".NomeEmpresa {",! //Nome da empresa
write " font-size:12px;",!
write " font-family:Verdana;",!
write " float:left;",!
write " }",!
write ".Data {",! //Data do relatrio
write " font-size:10px;",!
write " font-family:Verdana;",!
write " float: right;",!
write " }",!
write ".DataSub {",! //Data do relatrio
write " font-size:10px;",!
write " font-family:Verdana;",!
write " float: left;",!
write " }",!
write ".Titulo {",! //Ttulo do relatrio
write " font-size:16px;",!
write " font-family:Verdana;",!
write " font-weight:bold;",!
write " }",!
write ".SubTitulo {",! //Ttulos 2 relatrio
write " font-size:12px;",!
write " font-family:Verdana;",!
write " text-decoration:underline;",!
write " vertical-align:top;",!
write " }",!
write ".SubSubTitulo {",! //Ttulos 3 relatrio
write " font-size:10px;",!
write " font-family:Verdana;",!
write " font-style:italic;",!
write " vertical-align:top;",!
write " }",!
}
}

InterSystems do Brasil

259

Cach ZEN

Exames
Class ISCUser.Pag.Exames Extends ISCUser.Pag.Pagina
{
Parameter PAGENAME = "Exames";
Parameter CLASSEMODELO = "ISCUser.Dados.Exames";
XData Links [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<pane xmlns="http://www.intersystems.com/zen">
<link href="javascript: zenPage.pesquisa();" caption="Pesquisa Exames"/>
<link href="javascript: zenPage.chamaItem();" caption="Cadastro de Itens"/>
<link href="ISCUser.Pag.PreExame.cls" caption="Relatrio por Datas"/>
</pane>
}
Method pesquisa() [ Language = javascript ]
{
var link = 'ISCUser.Pag.PesquisaExames.cls';
zenPage.launchPopupWindow(link,'Pgina de Pesquisa Exames','status,scrollbars,resizable,top=100,left=100,width=400,height=500');
}
Method onPopupAction(popupName, action, value) [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
controller.setModelId(value);
}
Method chamaItem() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
var id = controller.getModelId();
if (id=='')
{
alert('Pesquise um exame!');
return;
}
var link = "ISCUser.Pag.ExamesItem.cls?exame=" + id;
location.href = link;
}
Method PropriedadeInfo(pIndex As %Integer, ByRef pInfo As %String, pModelId As %String) As %Status
{
Set pInfo("Paciente","sql") = "Select ID,Nome From ISCUser_Dados.Paciente Order By Nome"
Set pInfo("Paciente","sqllookup") = "Select Nome From ISCUser_Dados.Paciente Where ID = ?"
Set pInfo("DataExame","%type") = "ISCUser.Componente.Data"
Set pInfo("DataExame","format") = "DMY"
Set pInfo("DataExame","separator") = "/"
Quit $System.Status.OK()
}
}

InterSystems do Brasil

260

Cach ZEN

Exames Itens
Class ISCUser.Pag.ExamesItem Extends ISCUser.Pag.Pagina
{
Parameter PAGENAME = "Itens dos Exames";
Parameter CLASSEMODELO = "ISCUser.Dados.ExamesItem";
Property ExameId As %String(ZENURL = "exame");
XData Links [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<pane xmlns="http://www.intersystems.com/zen" >
<link href="javascript: zenPage.pesquisa();" caption="Pesquisa Itens"/>
</pane>
}
Method pesquisa() [ Language = javascript ]
{
var link = 'ISCUser.Pag.PesquisaItens.cls?'+"exame="+zenPage.ExameId;
zenPage.launchPopupWindow(link,'Pgina de Pesquisa - Itens de
Exames','status,scrollbars,resizable,top=100,left=100,width=400,height=500');
}
Method onPopupAction(popupName, action, value) [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
controller.setModelId(value);
}
Method atualiza() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
controller.setDataByName('Exame',zenPage.ExameId);
// informa a tela para atualizar o campo...
zenPage.getComponentById('form.Exame').setValue(zenPage.ExameId);
zenPage.getComponentById('form.Exame').setProperty('disabled',"true");
}
Method onloadHandler() [ Language = javascript ]
{
zenPage.atualiza();
}
}

InterSystems do Brasil

261

Cach ZEN

Grfico
Class ISCUser.Pag.Grafico Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Grafico Prioridade";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<dataController id="origem"
modelClass="ISCUser.MVC.GraficoPrioridade" modelId="1"/>
<dynaGrid align="center" width="400" id="dynaGrid" gridLabel="dynaGrid" controllerId="origem"/>
<svgFrame id="svgFrame" height="300" width="300" backgroundStyle="fill: black;" layout="horizontal">
<lineChart id="grf" controllerId="origem" width="300" height="300" />
</svgFrame>
</page>
}
}

InterSystems do Brasil

262

Cach ZEN

Links
/// Created using the page template: Pgina Ttulo
Class ISCUser.Pag.Links Extends %ZEN.Component.page
{
/// Nome da classe da aplicao qual esta pgina pertence.
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
/// Nome de exibio desta pgina.
Parameter PAGENAME;
/// Domnio usado para localizao.
Parameter DOMAIN = "iscuser";
/// Este bloco de estilos contm definies de estilo CSS vlidas especificamente para a pgina.
XData Style
{
}
/// Este bloco XML define o contedo desta pgina.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<html id="title">Links</html>
<vgroup width="100%">
<link caption="Boas Vindas" href="ISCUser.Pag.BoasVindas.cls"/>
<link caption="Exames" href="ISCUser.Pag.Exames.cls"/>
<link caption="Pacientes" href="ISCUser.Pag.Paciente.cls"/>
<link caption="Mensagem" href="javascript: alert('Ok');"/>
</vgroup>
</page>
}
}

InterSystems do Brasil

263

Cach ZEN

Login
Class ISCUser.Pag.Login Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Login";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Login">
<html id="title">Login</html>
<vgroup width="100%">
<spacer height="50"/>
<form name="formlogin" align="center" labelPosition="left">
<text id="txtusuario" name="txtusuario" label="Usurio: " />
<password id="txtsenha" name="txtsenha" label="Senha: " />
<submit id="btnEnviar" caption="ok"/>
</form>
</vgroup>
</page>
}

InterSystems do Brasil

264

Cach ZEN

ClassMethod %OnSubmit(pSubmit As %ZEN.Submit) As %Status


{
#; this is overridden by subclasses
Set loginok = 1
Set vuser = pSubmit.%GetValue("txtusuario")
Set vpass = pSubmit.%GetValue("txtsenha")
Set rs = ##class(%ResultSet).%New()
Set sql = "Select Senha From ISCUser_Dados.Usuarios Where Login = ?"
Do rs.Prepare(sql)
Do rs.Execute(vuser)
If 'rs.Next()
{
Do pSubmit.%SetError("formlogin","Login invlido!")
}
Else
{
If rs.GetData(1) '= vpass
{
Do pSubmit.%SetError("formlogin","Senha invlida!")
}
Else
{
Set UserId = 1
Do %session.Set("UsuarioId",UserId)
Do %session.Set("NomeUsuario",vuser)
Set pSubmit.%NextPage = ..Link("ISCUser.Pag.Menu.cls")
}
}
Quit $System.Status.OK()
}
}

InterSystems do Brasil

265

Cach ZEN

Logout
/// Created using the page template: Default
Class ISCUser.Pag.Logout Extends %ZEN.Component.page
{
/// Nome da classe da aplicao qual esta pgina pertence.
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
/// Nome de exibio desta pgina.
Parameter PAGENAME = "Logout";
/// Domnio usado para localizao.
Parameter DOMAIN = "iscuser";
/// Este bloco de estilos contm definies de estilo CSS vlidas especificamente para a pgina.
XData Style
{
<style type="text/css">
</style>
}
/// Este bloco XML define o contedo desta pgina.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<label label="Sua sesso foi encerrada!" labelStyle="color: red;font: bold"/>
<link href="ISCUser.Pag.Login.cls" caption="Clique aqui para o login!."/>
</page>
}
ClassMethod FimSessao() As %Status [ ZenMethod ]
{
Set %session.EndSession = 1
Quit $System.Status.OK()
}
Method onloadHandler() [ Language = javascript ]
{
zenPage.FimSessao();
}
}

InterSystems do Brasil

266

Cach ZEN

Menu

Class ISCUser.Pag.Menu Extends %ZEN.Component.page


{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Menu";
Parameter DOMAIN = "iscuser";
Property Usuario As %String [ InitialExpression = {%session.Get("NomeUsuario")} ];
Property Sessao As %String [ InitialExpression = {%session.SessionId} ];
Property SessionLanguage As %String [ InitialExpression = {%session.Language} ];
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Menu de Opes">
<hgroup width="100%">
<vgroup id="image" width="60%">
<image src="images\intersystems.jpg" width="982" height="60"/>
</vgroup>
<vgroup id="user" width="20%">
<label align="left" label='Usurio: #(%page.Usuario)#'/>
<label align="left" labelStyle="bold;" label="Sesso: #(%page.Sessao)#"/>
<link id="lnkSair" align="left" caption="Sair" href="ISCUser.Pag.Logout.cls"/>
</vgroup>
<vgroup id="flags" width="20%">
<label id="lan" align="center" label="Language: #(%page.SessionLanguage)#"/>
<spacer width="100" />
<hgroup width="100%"><image id="flag1" src="images\BandeiraBrasil.jpg" width="30" height="15" onclic
k="zenPage.Modifica('pt-br');"/>
<image id="flag2" src="images\BandeiraUsa.jpg" width="30" height="15" onclick="zenPage.Modifica('en');
"/>
<image id="flag3" src="images\BandeiraEspanha.jpg" width="30" height="15" onclick="zenPage.Modifica
('es');"/>
</hgroup>
</vgroup>
</hgroup>

InterSystems do Brasil

267

Cach ZEN

<vgroup id="menus" width="100%">


<hgroup width="100%">
<hgroup id="locator" width="60%" height="100%"
containerStyle="background: #A0B088;background-image: url(images/locatorgradient.png);backgroundrepeat:repeat-x;padding-top: 6px;">
<locatorBar>
<locatorLink caption="Home" href="ISCUser.Pag.Menu.cls" />
<locatorLink caption="Login" href="ISCUser.Pag.Login.cls" />
<locatorLink caption="Logout" href="ISCUser.Pag.Logout.cls" />
<locatorLink caption="Grafico" href="ISCUser.Pag.Grafico.cls" />
<locatorLink caption="InterSystems"
href="http://www.intersystems.com" />
</locatorBar>
<label id="labelMenu" label="Opes de Menu: " labelStyle="font-size: 0.80em;"/>
<select name="sel" id="OpMenu" valueList="1,2,3" displayList="DynaTree,Menu,LookOut" onchange="ze
nPage.mudaMenu();"/>
</hgroup>
</hgroup>
</vgroup>
<hgroup id="Principal" width="100%">
<vgroup id="menu" width="20%" valign="top">
<hgroup id="'hGroupDyna" enclosingClass="celulaMenu" width="100%">
<dynaTree id="dytMenu" OnGetTreeInfo="GetTreeInfo"/>
</hgroup>
<hgroup width="65%" id="'hGroupItem">
<menu id="menu1" layout="vertical" width="60%">
<menu caption="Cadastro" layout="vertical">
<menuItem caption="Paciente" link="javascript: zenPage.mostra('ISCUser.Pag.Paciente.cls')"/>
<menuSeparator/>
<menu caption="InterSystems" layout="vertical">
<menuItem caption="Site" link="http://www.intersystems.com"/>
<menuItem caption="Downloads" link="http://www.intersystems.com/cache/downloads/index.html"/>
</menu>
</menu>
</menu>
</hgroup>

InterSystems do Brasil

268

Cach ZEN

<hgroup width="100%" id="'hGroupLook">


<lookoutMenu id="lookout" height="220">
<tab caption="Cadastro" enclosingClass="celulaMenu">
<menuItem caption="Pacientes" link="javascript: zenPage.mostra('ISCUser.Pag.Paciente.cls')" />
<menuItem caption="Exames" link="javascript: zenPage.mostra('ISCUser.Pag.Exames.cls')" />
</tab>
<tab caption="Relatorio">
<menuItem caption="Por Data" link="javascript: zenPage.mostra('ISCUser.Pag.PreExame.cls')" />
</tab>
<tab caption="Downloads">
<menuItem caption="Cach" link="http://www.intersystems.com/cache/downloads/index.html" />
</tab>
</lookoutMenu>
</hgroup>
</vgroup>
<vgroup id="frame" width="80%" valign="top">
<iframe frameBorder="false" id="framePrincipal"
name="framePrincipal" align="center" width="100%"
height="450" src="ISCUser.Pag.BoasVindas.cls" />
</vgroup>
</hgroup>
</page>
}

InterSystems do Brasil

269

Cach ZEN

Method mostra(pLink) [ Language = javascript ]


{
framePrincipal.location = pLink;
}
Method Modifica(pFlag) [ ZenMethod ]
{
set (%session.Language,%page.SessionLanguage)= pFlag
&js<zenPage.reloadPage();>
Quit 1
}
Method reloadPage() [ Language = javascript ]
{
document.location.reload();
}
ClassMethod GetTreeInfo(pRoot As %String, Output pTree, ByRef pParms) As %Status
{
//Set userID = %session.Get("UserId")
#; top-most nodes are children of 0
Set pTree(0,"ch",1) = ""
Set pTree(0,"ch",2) = ""
Set pTree(0,"ch",3) = ""
#; each node supplies: $LB(caption, value, hasChildren, link, expanded, icon)
Set pTree(1)=$LB(("Cadastros"),("Cadastros"),1,"",1,,"Cadastros Gerais")
Set pTree(2)=$LB(("Relatrios"),("Relatrios"),1,"",1,,"Relatrios Gerais")
Set pTree(3)=$LB(("Pesquisas"),("Pesquisas"),1,"",1,,"Pesquisas")
Set pTree(4) = $LB(("Pacientes"),("Pacientes"),0,"javascript:
zenPage.mostra('ISCUser.Pag.Paciente.cls')",1)
Set pTree(1,"ch",4) = ""
Set pTree(5) = $LB(("Exames"),("Exames"),0,"javascript:
zenPage.mostra('ISCUser.Pag.Exames.cls')",1)
Set pTree(1,"ch",5) = ""
Set pTree(6) = $LB(("Prioridade"),("Prioridade"),0,"javascript:
zenPage.mostra('ISCUser.Pag.Prioridade.cls')",1)
Set pTree(1,"ch",6) = ""
Set pTree(7) = $LB(("Exames por Data"),("Exames por Data"),0,"javascript:
zenPage.mostra('ISCUser.Pag.PreExame.cls')",1)
Set pTree(2,"ch",7) = ""
Set pTree(8) = $LB(("Exames"),("Exames"),0,"javascript:
zenPage.mostra('ISCUser.Pag.PesquisaExames.cls')",1)
Set pTree(9) = $LB(("Exames Itens"),("Exames Itens"),0,"javascript:
zenPage.mostra('ISCUser.Pag.PesquisaItens.cls')",1)
Set pTree(10) = $LB(("Paciente"),("Paciente"),0,"javascript:
zenPage.mostra('ISCUser.Pag.PesquisaPaciente.cls')",1)
Set pTree(3,"ch",8) = ""
Set pTree(3,"ch",9) = ""
Set pTree(3,"ch",10) = ""
Quit $System.Status.OK()
}
InterSystems do Brasil

270

Cach ZEN

Method mudaMenu() [ Language = javascript ]


{
var opmenu = zenPage.getComponentById('OpMenu').getValue();
var dyna = zenPage.getComponentById('hGroupDyna');
var menu = zenPage.getComponentById('hGroupItem');
var look = zenPage.getComponentById('hGroupLook');
if ( opmenu== 1)
{
menu.setProperty('hidden',true);
look.setProperty('hidden',true);
}
if (opmenu == 2)
{
dyna.setProperty('hidden',true);
look.setProperty('hidden',true);
}
if (opmenu == 3)
{
dyna.setProperty('hidden',true);
menu.setProperty('hidden',true);
}
else
{
dyna.setProperty('hidden',false);
menu.setProperty('hidden',false);
look.setProperty('hidden',false);
}
}
Method %OnAfterCreatePage() As %Status
{
Set timer = ##class(%ZEN.Component.timer).%New()
Set timer.id = "timer"
Set timer.timeout = 30*1000
Set timer.ontimeout =
"zenPage.atualizaTimer();zenPage.getComponentById('timer').startTimer()"
Do %page.%AddChild(timer)
Quit $$$OK
}
ClassMethod atualizaTimer() As %Status [ ZenMethod ]
{
Set valorAtual = %session.Get("ControleTimeout")
Set valorAtual = valorAtual + 30
If %session.AppTimeout-valorAtual<60
{
&js<zenPage.logout();>
InterSystems do Brasil

271

Cach ZEN

}
Do %session.Set("ControleTimeout",valorAtual)
Quit $system.Status.OK()
}
}

InterSystems do Brasil

272

Cach ZEN

Pacientes
Class ISCUser.Pag.Paciente Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Pacientes";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Cadastro Paciente">
<html id="title">Cadastro de Pacientes</html>
<vgroup width="100%">
<dataController id="origem" modelClass="ISCUser.MVC.Paciente" modelId="1"/>
<dynaForm align="center" id="dyfPaciente" controllerId="origem" />
<hgroup align="center">
<button id="btnAnterior" caption="Anterior" onclick="zenPage.anterior();"/>
<button id="btnProximo" caption="Proximo" onclick="zenPage.proximo();"/>
<button id="btnSavar" caption="Salvar" onclick="zenPage.salva();"/>
<button id="btnExcluir" caption="Excluir" onclick="zenPage.deleta();"/>
<button id="btnCriar" caption="Criar" onclick="zenPage.novo();"/>
</hgroup>
<svgFrame width="300" height="300">
<fuelGauge id="medRenda"
animate="true" height="300" width="300"
controllerId="origem" dataBinding="Renda"
thresholdLower="1000" thresholdUpper="9000"
rangeLower="0" rangeUpper="10000"/>
</svgFrame>
</vgroup>
</page>
}

InterSystems do Brasil

273

Cach ZEN

Method proximo() [ Language = javascript ]


{
var controller = zenPage.getComponentById('origem');
var id = controller.getModelId();
id = parseInt(id) + 1;
controller.setModelId(id);
}
Method anterior() [ Language = javascript ]
{
var controller = zenPage.getComponentById('origem');
var id = controller.getModelId();
id = parseInt(id) - 1;
id = (id <= 1)? 1 :id;
controller.setModelId(id);
}
Method novo() [ Language = javascript ]
{
var controller = zenPage.getComponentById('origem');
controller.createNewObject();
}
Method salva() [ Language = javascript ]
{
var form = zenPage.getComponentById('dyfPaciente');
form.save();
}
Method deleta() [ Language = javascript ]
{
var controller = zenPage.getComponentById('origem');
controller.deleteId(controller.getModelId());
}
}

InterSystems do Brasil

274

Cach ZEN

Pacientes Controles
Class ISCUser.Pag.PacienteControles Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Paciente Controles";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Paciente Controles">
<html id="title">Exerccio - Controles Zen</html>
<vgroup width="100%">
<!-- put page contents here -->
<form align="center" invalidMessage="Falha na validao da pgina!">
<hgroup align="center">
<label label ="Cadastro de Pacientes" labelStyle="font-family: Verdana; font-size:
1.2em;" height="40" valign="middle"/>
</hgroup>
<hgroup align="center" >
<label label ="Nome do Paciente" align="right" width="50%"/>
<text id="txtPaciente" width="50%" required="true"
requiredMessage="Informe o nome do Paciente" />
</hgroup>
<hgroup align="center">
<label label ="Prioridade" align="right" width="50%"/>
<radioSet id="rdsPrioridade" width="50%" sql="Select ID,Descricao From ISCUser_Dados.PacientePriori
InterSystems do Brasil

275

Cach ZEN

dade"/>
</hgroup>
<hgroup align="center">
<label label ="Adulto" align="right" width="50%"/>
<checkbox id="chkAdulto" width="50%" />
</hgroup>
<hgroup align="center">
<label label ="Sexo" align="right" width="50%"/>
<select id="selSexo" width="50%" valueList="1,2" displayList="Masculino,Feminino"/>
</hgroup>
<hgroup align="center">
<label label ="Indicao" align="right" width="50%"/>
<dataCombo id="dtcIndicacao" width="50%"
sql="Select ID,Nome
From ISCUser_Dados.Paciente
Where Nome %Startswith ?
Order By Nome"
sqlLookup="Select Nome
From ISCUser_Dados.Paciente
Where ID = ?"
editable="true" searchKeyLen="4" />
</hgroup>
<hgroup align="center">
<label label ="Data Nascimento" align="right" width="50%"/>
<calendar id="calNascimento" width="50%"
dayList="D,S,T,Q,Q,S,S" monthList="Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez"/>
</hgroup>
<hgroup align="center">
<submit id="btnSalvar" caption="Salvar"/>
<button id="btnLimpar" caption="Limpar"/>
<button id="btnDeletar" caption="Deletar"/>
</hgroup>
</form>
</vgroup>
</page>
}
Method %OnAfterCreatePage() As %Status
{
Do ..%SetValueById("calNascimento",$ZDate($Horolog,3))
Do ..%SetValueById("chkAdulto",1)
Quit $$$OK
}
}
InterSystems do Brasil

276

Cach ZEN

Pgina
Class ISCUser.Pag.Pagina Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Super Pgina";
Parameter DOMAIN = "iscuser";
Parameter CLASSEMODELO As %String;
Property ClasseModelo As %String [ InitialExpression = {..#CLASSEMODELO} ];
Property ModelId As %String(ZENURL = "ModelId");
Property SessionTimeout As %Integer [ InitialExpression = {..SessionControlerTimeout()} ];
XData Style
{
<style type="text/css">
</style>
}
/// Este bloco XML define o contedo desta pgina.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Pagina">
<html id="title"></html>
<vgroup width="100%">
<fieldSet width="95%" align="left">
<dataController id="controller" modelClass="#(%page.ClasseModelo)#" modelId="#(%page.ModelId)#"/>
<dynaForm align="center" id="form" controllerId="controller" OnGetPropertyInfo="PropriedadeInfo" />
<hgroup align="center">
<button id="btnAnterior" caption="Anterior" onclick="zenPage.anterior();"/>
<button id="btnProximo" caption="Proximo" onclick="zenPage.proximo();"/>
<button id="btnSavar" caption="Salvar" onclick="zenPage.salva();"/>
<button id="btnExcluir" caption="Excluir" onclick="zenPage.deleta();"/>
<button id="btnCriar" caption="Criar" onclick="zenPage.novo();"/>
</hgroup>
</fieldSet>
<vgroup width="30%">
<fieldSet width="95%" align="left">
<pane paneName="Links" width="100%"/>
</fieldSet>
</vgroup>
</vgroup>

</page>
}

InterSystems do Brasil

277

Cach ZEN

Method proximo() [ Language = javascript ]


{
var controller = zenPage.getComponentById('controller');
var id = controller.getModelId();
id = parseInt(id) + 1;
controller.setModelId(id);
}
Method anterior() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
var id = controller.getModelId();
id = parseInt(id) - 1;
id = (id <= 1)? 1 :id;
controller.setModelId(id);
}
Method novo() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
controller.createNewObject();
}
Method salva() [ Language = javascript ]
{
var form = zenPage.getComponentById('form');
form.save();
}
Method deleta() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
controller.deleteId(controller.getModelId());
}
Method PropriedadeInfo(pIndex As %Integer, ByRef pInfo As %String, pModelId As %String) As %Status
{
Quit $System.Status.OK()
}
ClassMethod SessionControlerTimeout() As %Status [ Final, Private ]
{
// inicializa a propriedade ControleTimeout
Do %session.Set("ControleTimeout",0)
Quit $$$OK
}
}

InterSystems do Brasil

278

Cach ZEN

Pesquisa Exames
Class ISCUser.Pag.PesquisaExames Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Pesquisa de Exames";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Pesquisa Exames">
<html id="title">Pesquisa Exames</html>
<vgroup width="100%">
<tablePane id="tblExames" valueColumn="ID" onselectrow="zenPage.fire();" pageSize="10" useSnapsho
t="true" tableName="ISCUser_Dados.Exames">
<column colName="ID" hidden="true" />
<column colName="Paciente" colExpression="Paciente->Nome" filterType="text" filterOp="[" />
<column colName="Codigo" header="Cdigo" />
<column colName="DataExame" header="Data do Exame" filterType="date" filterOp="=" />
<column colName="ValorExame" header="Valor do Exame" />
</tablePane>
<tableNavigatorBar tablePaneId="tblExames"/>
</vgroup>
</page>
}
Method fire() [ Language = javascript ]
{
var idTabela = zenPage.getComponentById('tblExames').getValue();
zenPage.firePopupAction('Action', idTabela);
}
}
InterSystems do Brasil

279

Cach ZEN

Pesquisa Itens
Class ISCUser.Pag.PesquisaItens Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Pesquisa de Itens de Exames";
Parameter DOMAIN = "iscuser";
Property ExameId As %String(ZENURL = "exame");
XData Style
{
<style type="text/css">
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Itens dos Exames">
<tablePane id="tblItem" valueColumn="ID" onselectrow="zenPage.fire();" tableName="ISCUser_Dados.E
xamesItem" useSnapshot="true" pageSize="16" whereClause="Exame = ?" >
<parameter value="#(%page.ExameId)#"/>
<column colName="ID"/>
<column colName="Tipo->Descricao" header="Descrio"/>
<column colName="Quantidade"/>
</tablePane>
<tableNavigatorBar tablePaneId="tblItem"/>
</page>
}
Method fire() [ Language = javascript ]
{
var idTabela = zenPage.getComponentById('tblItem').getValue();
zenPage.firePopupAction('Action', idTabela);
}
}

InterSystems do Brasil

280

Cach ZEN

Pesquisa Pacientes
Class ISCUser.Pag.PesquisaPaciente Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Pesquisa Paciente";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Pesquisa Paciente">
<html id="title">Pesquisa Pacientes</html>
<vgroup width="100%">
<tablePane showRowNumbers="true" showZebra="true"
id="tblPaciente" tableName="ISCUser_Dados.Paciente"
whereClause="Adulto = 1" useSnapshot="true" pageSize="10">
<column colName="ID" hidden="true"/>
<column colName="Nome" filterType="text" filterOp="%STARTSWITH" />
<column colName="Cidade" />
<column colName="Sexo" style="color: red;" />
<column colName="Adulto" />
<column colName="Prioridade" colExpression="Prioridade->Descricao" filterType="query"
filterQuery="Select ID,Descricao From ISCUser_Dados.PacientePrioridade" />
<condition colName="Sexo" predicate="EQ" value="M" rowStyle="font: bold;"/>
<column link="javascript: zenPage.mostraMsg('#(%query.Nome)#');"
linkCaption="Mostrar Nome" linkConfirm="Deseja Realmente?"/>
</tablePane>
<tableNavigatorBar tablePaneId="tblPaciente"/>
</vgroup>
</page>
}

InterSystems do Brasil

281

Cach ZEN

Method mostraMsg(pVal) [ Language = javascript ]


{
alert(pVal);
}
}

InterSystems do Brasil

282

Cach ZEN

Pr Exames
Class ISCUser.Pag.PreExame Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Pre Exame";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Pre Exame">
<vgroup align="center">
<dateText id="txtDataInicial" label="Data Inicial" format="DMY" separator="/" />
<dateText id="txtDataFinal" label="Data Final" format="DMY" separator="/" />
<button id="btnEnviar" caption="Ok" onclick="zenPage.relatorio();" />
</vgroup>
</page>
}
Method relatorio() [ Language = javascript ]
{
var inicio = zenPage.getComponentById('txtDataInicial').getValue();
var fim = zenPage.getComponentById('txtDataFinal').getValue();
if (inicio !='' && fim != '')
{
var link = 'ISCUser.Rel.Exames.cls?datainicial='+inicio+ '&datafinal='+fim;
window.open(link,'','Relatrio de Exames por
Data','status,scrollbars,resizable,top=10,left=10,width=800,height=800');
}
else {alert('Digite as datas!')}
}
}

InterSystems do Brasil

283

Cach ZEN

Prioridade
Class ISCUser.Pag.Prioridade Extends %ZEN.Component.page
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter PAGENAME = "Prioridades Paciente";
Parameter DOMAIN = "iscuser";
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
background: #C5D6D6;
color: black;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="Prioridades Paciente">
<html id="title">Prioridade do Paciente</html>
<vgroup width="100%">
<dataController id="origem" modelClass="ISCUser.Dados.PacientePrioridade" modelId="1"/>
<form id="frmPrioridade" controllerId="origem" align="center">
<text id="txtCodigo" label="Cdigo" dataBinding="Codigo" />
<text id="txtDescricao" label="Descrio" dataBinding="Descricao" />
<hgroup>
<button id="btnAnterior" caption="Anterior" onclick="zenPage.anterior();"/>
<button id="btnProximo" caption="Proximo" onclick="zenPage.proximo();"/>
</hgroup>
</form>
</vgroup>
</page>
}

InterSystems do Brasil

284

Cach ZEN

Method proximo() [ Language = javascript ]


{
var controller = zenPage.getComponentById('origem');
var id = controller.getModelId();
id = parseInt(id) + 1;
//id = (id <= 1)? 1 :id;
controller.setModelId(id);
}
Method anterior() [ Language = javascript ]
{
var controller = zenPage.getComponentById('origem');
var id = controller.getModelId();
id = parseInt(id) - 1;
id = (id <= 1)? 1 :id;
controller.setModelId(id);
}
}

InterSystems do Brasil

285

Cach ZEN

Relatrio Exames
Class ISCUser.Rel.Exames Extends %ZEN.Report.reportPage
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter DEFAULTMODE = "html";
Parameter REPORTXMLNAMESPACE;
Parameter HOSPITAL = "Hospital";
Parameter TITULO = "Ttulo do Relatrio";
Property DataInicial As %String(ZENURL = "datainicial");
Property DataFinal As %String(ZENURL = "datafinal");
Property Formato As %Integer(ZENURL = "format") [ InitialExpression = 4 ];
Property Hospital As %String [ InitialExpression = {..#HOSPITAL} ];
Property Titulo As %String [ InitialExpression = {..#TITULO} ];
Method EditaData(pVal)
{
// converte para valor interno...
Set pVal = $ZdateH(pVal,..Formato)
Quit pVal
}

InterSystems do Brasil

286

Cach ZEN

XData ReportDefinition [ XMLNamespace = "http://www.intersystems.com/zen/report/definition" ]


{
<report xmlns="http://www.intersystems.com/zen/report/definition" name="Exames"
sql="Select ID,Codigo,DataExame,ValorExame,Paciente->Nome As Paciente
From ISCUser_Dados.Exames
Where %internal(DataExame) BETWEEN ? and ?">
<parameter expression="..EditaData(..DataInicial)"/>
<parameter expression="..EditaData(..DataFinal)"/>
<attribute name="Hospital" expression="..Hospital"/>
<attribute name="Data" expression="$ZDateTime($horolog,4)"/>
<attribute name="Titulo" expression="..Titulo"/>
<attribute name="Inicio" expression="..DataInicial"/>
<attribute name="Fim" expression="..DataFinal"/>
<group name="Exames" breakOnField="ID">
<element name="Codigo" field="Codigo"/>
<element name="Data" field="DataExame"/>
<element name="Valor" field="ValorExame"/>
<element name="Paciente" field="Paciente"/>
</group>
</report>
}

InterSystems do Brasil

287

Cach ZEN

XData ReportDisplay [ XMLNamespace = "http://www.intersystems.com/zen/report/display" ]


{
<report xmlns="http://www.intersystems.com/zen/report/display"
name="Exames" title="Exames de Pacientes">
<document width="210mm" height="297mm" headerHeight="25mm" marginLeft="15mm" marginRight="7
mm" marginTop="7mm" marginBottom="7mm">
<cssinclude href="ISCUser.Pag.EstiloRelatorio.cls"/>
</document>
<pageheader>
<item field="@Hospital" class="Empresa"/>
<line pattern="empty"/>
<item field="@Data" class="Data"/>
<line pattern="empty"/>
<item field="@Titulo" class="Titulo"/>
<line pattern="empty"/>
<item displayCaption="true" class="DataSub" caption="Data inicial: " field="@Inicio"/>
<line pattern="empty"/>
<item displayCaption="true" class="DataSub" caption="Data final: " field="@Fim"/>
<line pattern="empty"/>
<line pattern="dashed"/>
</pageheader>
<body>
<table orient="col" group="Exames" altcolor="##ffbbaa" class="TabMaior">
<item field="Codigo" caption="Cdigo" width="25%"/>
<item field="Data" caption="Data" width="25%"/>
<item field="Valor" caption="Valor" width="25%"/>
<item field="Paciente" caption="Paciente" width="25%"/>
</table>
</body>
</report>
}
}

InterSystems do Brasil

288

Cach ZEN

Relatrio Paciente
Class ISCUser.Rel.Paciente Extends %ZEN.Report.reportPage
{
Parameter APPLICATION = "ISCUser.Aplic.Aplicacao";
Parameter DEFAULTMODE = "html";
Parameter REPORTXMLNAMESPACE;
XData ReportDefinition [ XMLNamespace = "http://www.intersystems.com/zen/report/definition" ]
{
<report xmlns="http://www.intersystems.com/zen/report/definition"
name="Paciente" sql="SELECT ID,Nome,Cidade,Estado,Sexo,Adulto,Prioridade->
Descricao as Prioridade
FROM ISCUser_Dados.Paciente
ORDER BY Prioridade,Nome">
<group name="Prioridade" breakOnField="Prioridade">
<attribute name="nome" field="Prioridade"/>
<aggregate name="qt" type="COUNT" field="ID"/>
<group name="Paciente" breakOnField="ID">
<element name="Cidade" field="Cidade"/>
<element name="Estado" field="Estado"/>
<element name="Sexo" field="Sexo"/>
<element name="Adulto" field="Adulto"/>
<element name="Nome" field="Nome"/>
</group>
</group>
</report>
}

InterSystems do Brasil

289

Cach ZEN

XData ReportDisplay [ XMLNamespace = "http://www.intersystems.com/zen/report/display" ]


{
<report xmlns="http://www.intersystems.com/zen/report/display"
name="Paciente">
<pageheader>
<document>
</document>
</pageheader>
<body>
<p class="Banner1">Relatrio de Pacientes por Prioridade</p>
<barChart dataFields="!qt" dataGroup="Prioridade" width="4in" height="3in" title="Pacientes por
Prioridade" />
<group name="Prioridade" line="1px">
<table orient="row" width="4in">
<item field="@nome" width="2in"><caption value="Prioridade:" width="2in"/></item>
<item field="qt"><caption value="Qtd. Pacientes:"/></item>
</table>
<line pattern="empty"/>
<table orient="col" group="Paciente" altcolor="#FFDFDF" width="3.8in">
<item field="Nome" ><caption value="Nome:"/></item>
<item field="Cidade" ><caption value="Cidade:"/></item>
<item field="Estado" ><caption value="Estado:"/></item>
<item field="Sexo" ><caption value="Sexo:"/></item>
<item field="Adulto" ><caption value="Adulto:"/></item>
</table>
</group>
</body>
</report>
}
}

InterSystems do Brasil

290

Potrebbero piacerti anche