Cód. CustomizacaoTela_LyceumNG_nv.docx

Última atualização: 24/04/2015 09:24

Protegido pela Lei de Direito Autoral nº 9610/98

Lyceum NG:

Customização de Telas

Gestão Acadêmica

24/04/15

2

CONTEÚDO

Sumário – TELAS ................................................................................................................................. 3

Introdução e objetivos ........................................................................................................................ 5

Usuário-Editor .................................................................................................................................. 12

Padrão de Tela .................................................................................................................................. 13

Aluno Online.................................................................................................................................... 15

Docente Online ................................................................................................................................ 16

Criação De Um Controle .................................................................................................................... 17

TextBox ........................................................................................................................................... 19

Propriedades do tipo Controle para TextBox ................................................................................. 21

Propriedades do tipo Layout para TextBox .................................................................................... 22

CheckBox ......................................................................................................................................... 23

Propriedades do tipo Controle para CheckBox ............................................................................... 24

Propriedades do tipo Layout para CheckBox .................................................................................. 25

HyperLink ........................................................................................................................................ 26

Propriedades do tipo Controle para HyperLink .............................................................................. 28

Propriedades do tipo Layout para HyperLink ................................................................................. 28

LinkMethod ..................................................................................................................................... 29

Propriedades do tipo Controle para LinkMethod ........................................................................... 31

Propriedades do tipo Layout para LinkMethod .............................................................................. 32

Possibilidades de Layout .................................................................................................................. 33

Esconder Colunas ............................................................................................................................ 33

Alterar a largura da coluna ............................................................................................................. 34

Alinhar o texto da coluna ................................................................................................................ 35

Alterar o tamanho do título na coluna ........................................................................................... 35

Alterar quantidade de registros por página.................................................................................... 36

Agrupamento .................................................................................................................................. 37

Inserir hiperlink em forma de botão ............................................................................................... 38

Serviços para consultas customizadas ............................................................................................... 43

Criação de novas telas ...................................................................................................................... 49

Customização de menu ..................................................................................................................... 53

Criação de páginas customizadas com HTML gerado por stored procedure ...................................... 58

24/04/15

3

1. Adição da view na tela ....................................................................................................... 61

SUMÁRIO – TELAS

Figura 1 ...................................................................................................................................................... 5

Figura 2 ...................................................................................................................................................... 7

Figura 3 ...................................................................................................................................................... 8

Figura 4 ...................................................................................................................................................... 8

Figura 5 ...................................................................................................................................................... 9

Figura 6 .................................................................................................................................................... 10

Figura 7 .................................................................................................................................................... 10

Figura 8 .................................................................................................................................................... 11

Figura 9 .................................................................................................................................................... 12

Figura 10 .................................................................................................................................................. 13

Figura 11 .................................................................................................................................................. 14

Figura 12 .................................................................................................................................................. 15

Figura 13 .................................................................................................................................................. 15

Figura 14 .................................................................................................................................................. 16

Figura 15 – Relação de Controles ............................................................................................................ 17

Figura 16 - Criação de um novo controle ................................................................................................ 18

Figura 17 - Tela com textBox ................................................................................................................... 19

Figura 18: Propriedades de um TextBox ................................................................................................. 20

Figura 19 .................................................................................................................................................. 23

Figura 20: Propriedades de um checkBox ............................................................................................... 24

Figura 21:Tela com hyperlink .................................................................................................................. 26

Figura 22: Propriedades de um hyperlink ............................................................................................... 27

Figura 23: Tela com linkMethod .............................................................................................................. 29

Figura 24: Propriedades de um linkMethod ............................................................................................ 30

Figura 25 .................................................................................................................................................. 33

Figura 26 .................................................................................................................................................. 33

Figura 27 .................................................................................................................................................. 34

Figura 28 .................................................................................................................................................. 35

Figura 29 .................................................................................................................................................. 35

Figura 30 .................................................................................................................................................. 36

Figura 31 .................................................................................................................................................. 36

Figura 32 .................................................................................................................................................. 37

Figura 33 .................................................................................................................................................. 37

Figura 34 .................................................................................................................................................. 38

Figura 35 .................................................................................................................................................. 38

Figura 36 .................................................................................................................................................. 39

24/04/15

4

Figura 37 .................................................................................................................................................. 40

Figura 38 .................................................................................................................................................. 40

Figura 39 .................................................................................................................................................. 41

Figura 40 .................................................................................................................................................. 41

Figura 41 .................................................................................................................................................. 42

Figura 42 .................................................................................................................................................. 45

Figura 43 .................................................................................................................................................. 48

Figura 44 .................................................................................................................................................. 49

Figura 45 .................................................................................................................................................. 50

Figura 46 .................................................................................................................................................. 51

Figura 47 .................................................................................................................................................. 52

Figura 48 .................................................................................................................................................. 52

Figura 49 .................................................................................................................................................. 53

Figura 50 .................................................................................................................................................. 54

Figura 51 .................................................................................................................................................. 54

Figura 52 .................................................................................................................................................. 55

Figura 53 .................................................................................................................................................. 56

Figura 54 .................................................................................................................................................. 56

Figura 55 .................................................................................................................................................. 57

Figura 56 .................................................................................................................................................. 60

Figura 57 .................................................................................................................................................. 61

Figura 58 .................................................................................................................................................. 62

24/04/15

5

INTRODUÇÃO E OBJETIVOS

Neste documento serão encontradas as informações relacionadas às customizações que podem ser

realizadas nos portais do Lyceum NG que compreendem o Aluno Online, Docente Online e Secretaria

Relacionamento.

Antes de começar os trabalhos de edição de tela, cabe uma definição sobre os elementos usados nas

telas. Entende-se como componente qualquer elemento empregado em uma tela. Existem

basicamente dois tipos de componentes: controles e layouts. Um controle exibe dados na tela,

enquanto um layout serve apenas para organizar a disposição dos controles.

Para se trabalhar na edição de layout de uma tela, o navegador web apresenta os recursos disponíveis

em duas abas laterais, como visto na Figura 1. Estas abas podem ser acessadas ao se clicar nas setas

laterais, presentes nas bordas da janela do navegador quando o usuário tem permissão para edição de

tela.

Na aba à direita, há uma série de propriedades, agrupadas em duas seções – ‘Controle’ e ‘Layout’.

Estas propriedades referem-se ao componente selecionado na árvore exibida na aba esquerda. Há uma

terceira seção, chamada ‘Parâmetros da Página’, onde são criados os parâmetros que serão requeridos

pela página.

Figura 1

24/04/15

6

A aba à esquerda, exibe a hierarquia de componentes que estão alocados para a transação aberta.

Perceba que na parte inferior, há três botões:

Padrão: restaura as modificações que foram realizadas na página para o formado padrão que é

liberado pela Techne.

Recarregar: atualizar a relação de componentes (controles e layouts) que estão presentes na tela em

questão.

Salvar: este botão grava todas as alterações feitas na tela, sejam elas feitas em controles ou em

layout. É importante que depois de feitas as devidas alterações, o botão ‘Salvar’ seja clicado, antes que

um ‘Refresh’ (atualização) seja dado na tela, ou todas as modificações no layout e/ou controle serão

perdidas. Outros casos em que pode haver perda de alterações incluem a reinicialização container de

aplicação ou quando a sessão expira.

COMPONENTES DE LAYOUT

Entende-se como componente de layout aquele componente que não tem a função de apresentar

dados ao usuário; tem por finalidade organizar o arranjo dos dados a serem exibidos. Hoje, o sistema

conta com três componentes de layout: o Column, o Container e o TabPanel.

O Column irá dispor os componentes um ao lado do outro. Já o Container, irá organizar os

componentes um abaixo do outro. Por fim, o TabPanel irá organizar os componentes em abas.

Estes componentes de layout podem ser usados de forma conjunta numa tela ou aninhados, a fim de

produzir o efeito desejado.

COMPONENTES CONTROLE

Entende-se como componente controle aqueles componentes que exibem dados para o usuário,

podendo ser dados recuperados do banco ou dados informados pelo usuário.

Estes controles também podem ser criados via web e suas propriedades configuradas, por meio da

mesma estrutura de abas, vista na Erro! Fonte de referência não encontrada..

A definição das funcionalidades e propriedades de cada controle está no Apêndice A deste

documento.

24/04/15

7

RELAÇÃO CONTROLE X LAYOUT

Um componente de layout pode conter outros componentes de layout assim como controles, a fim de

produzir o efeito desejado pelo usuário.

Nesta hierarquia o nível mais alto, ou seja, a raiz é a Transação; todos os componentes, sejam de

layout ou controle, estão subordinados à raiz.

ORGANIZAÇÃO LADO A LADO

Para exibir dois controles um ao lado do outro, como exibido na Erro! Fonte de referência não

ncontrada., usa-se o componente de layout ‘Column’.

Figura 2

24/04/15

8

Para se criar um Layout Column, clica-se com o botão direito sobre o componente onde se deseja

inserir o Column e seleciona-se a opção ‘Column’ (ver Erro! Fonte de referência não encontrada.).

Figura 3

Depois de criado, basta arrastar e soltar sobre o ‘LAYOUT: Column’ os componentes que se deseja

exibir um ao lado do outro. O Layout Column apresenta algumas propriedades na aba direita da tela,

para ajustar possíveis características do mesmo. (Ver Erro! Fonte de referência não encontrada.)

Figura 4

Border: quando o valor = true, exibe uma borda azul ao redor do grupo de componentes.

Valores possíveis: ‘true’ ou ‘false’

Frame: quando o valor = true, exibe o grupo de componentes sobre um fundo azul. Valores

possíveis: ‘true’ ou ‘false’.

Style: exibe quatros valores que representam os espaçamentos do layout em relação aos

componentes com os quais faz fronteira. Sintaxe: {margin:'5px 5px 5px 5px'}. Os valores

representam os espaçamentos superior, direito, inferior, esquerdo, nesta ordem.

24/04/15

9

Title: quando informado um texto, exibe-o como título, em uma barra azul, acima do grupo

de componentes.

Width: contém a largura do Layout Column.

Para relembrar:

Este componente pode ser usado de forma aninhada com outros componentes;

Exemplo: um Layout Column dentro de outro ou de um Container.

DISTRIBUIÇÃO DOS COMPONENTES NO LAYOUT COLUMN

Quando inseridos no layout column, os componentes possuem na aba de propriedades de layout, uma

propriedade denominada columnWidth. Esta propriedade deve ser preenchida distribuindo-se valores

de forma que a sua soma seja igual a um. A proporção será usada em cada controle para definir a

largura de cada um na tela.

Por exemplo, na tela da Erro! Fonte de referência não encontrada. há quatro controles. Para que cada

m ocupe um quarto do espaço, devemos colocar o valor 0.25 em cada um. Se for necessário mais

espaço para um controle, pode-se aumentar o seu valor, sempre mantendo o total em um. Quando

não definida, essa propriedade pode gerar visualizações diferentes nos diversos navegadores.

Figura 5

24/04/15

10

ORGANIZAÇÃO VERTICAL

Os componentes, por padrão, quando colocados na tela são exibidos um abaixo do outro. Mas há um

componente de layout que os agrupa, um abaixo do outro: é o Layout ‘Container’. (Figura 6)

Figura 6

Para se criar um Layout Container, clica-se com o botão direito sobre o componente onde se deseja

inserir o Container e seleciona-se a opção ‘Container’ (ver Erro! Fonte de referência não encontrada.).

Figura 7

Depois de criado, basta arrastar e soltar sobre o ‘LAYOUT: Container’ criado os componentes que

deseja agrupar um abaixo do outro.

24/04/15

11

O Layout Container apresenta algumas propriedades na aba direita da tela, para ajustar possíveis

características do mesmo. (ver Erro! Fonte de referência não encontrada.)

Figura 8

Border: quando o valor = true, exibe uma borda azul ao redor do grupo de componentes.

Valores possíveis: ‘true’ ou ‘false’.

Frame: quando o valor = true, exibe o grupo de componentes sobre um fundo azul. Valores

possíveis: ‘true’ ou ‘false’.

Style: exibe quatros valores que representam os espaçamentos do layout em relação aos

componentes com os quais faz fronteira. Sintaxe: {margin: '5px 5px 5px 5px'}. Os valores

representam os espaçamentos superior, direito, inferior, esquerdo, segue esta ordem.

Title: quando informado um texto, exibe-o como título, em uma barra azul, acima do grupo

de componentes.

CONCLUSÕES

A Edição de Tela é um recurso útil para que pequenos ajustes e adaptações sejam feitos nas telas,

atendendo as necessidades de cada cliente. A finalidade deste processo é melhorar a usabilidade do

sistema pelo usuário final.

DICAS

Especialmente no navegador Internet Explorer a inclusão dentro de containers resolvem alguns

problemas de visualização. Quando tiver problemas de alinhamento ou aparição de controles, insira o

controle dentro de um container (panel, por exemplo) para verificar se o problema se resolve.

24/04/15

12

USUÁRIO-EDITOR

Por ser realizada no próprio ambiente, a edição das telas do Aluno Online, Docente Online e Secretaria

Relacionamento é realizada por um usuário devidamente registrado no sistema. As permissões fazem

parte do menu de opções do portal Secretaria:

Configuração → Edição de Tela

Figura 9

Para cadastrar um usuário-editor é necessário escolher o portal utilizando o campo “Módulo”,

informar o código do usuário e efetivar a inserção por meio do botão “Salvar”.

Importante:

Os usuários-editores para os portais do Docente e Aluno Online precisam ter dados reais e para o caso

de serem editores de um perfil de acesso específico, estes usuários também precisam estar

enquadrados naquele perfil.

Para os editores do portal Secretaria Relacionamento utilize o número para os registrados como

usuário Hades.

24/04/15

13

PADRÃO DE TELA

Configuração → Padrão de Tela

Quando as telas são construídas inicialmente pelos desenvolvedores, está se criando um produto

padrão, “de fábrica”, original. Modificações feitas especificamente para alguma instância do sistema

são feitas com um padrão de tela. Modificações feitas com usuários com padrão de tela, portanto, não

afetam o produto original.

Figura 10

Para adicionar um padrão de tela é necessário escolher o portal por meio do campo “Módulo” e

utilizar o botão “Adicionar” na parte inferior da tela.

24/04/15

14

Figura 11

É necessário cadastrar um código que identificará o novo padrão de tela. É possível restringir um

padrão de acesso por Unidade e Curso, bastando cadastrar estas informações nos campos

correspondentes.

24/04/15

15

ALUNO ONLINE

Para o Aluno Online também é possível escolher se este será acessado somente por alunos concluintes

ou inativos:

Figura 12

Os demais campos de preenchimento referem-se a:

Padrão de Tela Nome da instância de modificação da tela.

Ordem Ordem que será obedecida caso tenha mais de um padrão de acesso para aquele usuário (aluno ou docente)

PadraoAcesso: Título para o padrão criado.

Após este cadastro é possível marcar quais transações do portal estarão acessíveis para os usuários

que possuírem este padrão de acesso:

Figura 13

Para efetivar utilize o botão “Salvar” na parte superior do bloco.

24/04/15

16

DOCENTE ONLINE

Figura 14

No Docente Online também é necessário informar o código do padrão de acesso que deseja cadastrar

e restringir acesso por Unidade de Ensino.

Os demais campos de preenchimento fazem referência a:

Papel

Padrão de Tela (Cronos) Ordem PadraoAcesso

24/04/15

17

CRIAÇÃO DE UM CONTROLE

Para criar um novo componente do tipo Controle, clica-se com o botão direito sobre o componente no

qual se deseja inserir o novo controle. Será exibida uma relação dos possíveis controles que podem ser

criados (ver Figura 15)

Figura 15 – Relação de Controles

24/04/15

18

Após escolhido o controle, será apresentada uma caixa de diálogo solicitando o nome do novo

controle. O nome do controle deve ser único, não deve haver controles com nomes idênticos.

Sugerimos que a instituição ao nomear um controle utilize em seu padrão de nomenclatura o nome da

instituição. Por exemplo, txtTechneDataDeNascimento (Prefixo txt + nome da instituição + nome do

controle). Informe o nome e clique em ‘Ok’. Caso desista da criação, clique em ‘Cancelar’ (ver Erro!

onte de referência não encontrada.).

Figura 16 - Criação de um novo controle

As propriedades de cada controle são sensíveis ao contexto.

O que isso quer dizer?

Caso o controle esteja solto na tela (dito controle ‘unbound), ele apresentará uma série de

propriedades a serem configuradas. Caso esteja contido em algum outro controle (chamado

controle ‘bound’), como um grid ou um recordManager, ele poderá apresentar

propriedades diferentes.

Atualmente os controles desse tipo estão sendo substituídos por novas versões, mas

sensibilidade de contexto ainda se aplica.

24/04/15

19

TEXTBOX

O textBox é, literalmente, uma ‘caixa de texto’, onde o usuário pode digitar ou ler textos. O textBox

dentro de um grid ou de um recordManager terá um campo de uma tabela associado à ele.

Figura 17 - Tela com textBox

Sugestão de padrão para nomenclatura:

Prefixo txt + nomeInstituição +nomeControle.

Ex.: txtTechneNomeFunc

24/04/15

20

Figura 18: Propriedades de um TextBox

24/04/15

21

PROPRIEDADES DO TIPO CONTROLE PARA TEXTBOX

caption: Rótulo que será exibido associado ao textBox.

dataType: Informa que tipo de dado é suportado pelo controle. Pode assumir três valores: ‘number’ (para valores numéricos), ‘date’ (para datas) e ‘varchar’ (para caracteres alfanuméricos).

formattingMask: Máscara de formatação para o valor a ser exibido no textBox.

horizontalAlign: Alinhamento do texto exibido no textBox. Valores possíveis: ‘left’, ‘right’, ‘top’.

initialValue: Valor inicial dado ao conteúdo do textBox (para controles unbound).

readOnly: Se ‘S’, o textBox só permitirá leitura. Valores possíveis: ‘S’ ou ‘N’.

textMode: Modo de exibição do conteúdo de um textBox: singleLine, texto exibido em uma única linha; multiLine, texto exibido em várias linhas.

visible: Se ‘S’, o textBox será exibido na tela. Valores possíveis: ‘S’ ou ‘N’.

width: Largura do textBox, em pixels.

24/04/15

22

PROPRIEDADES DO TIPO LAYOUT PARA TEXTBOX

border: quando ‘true’, exibe uma borda azul ao redor do controle (controles do tipo unbound). Valores possíveis: ‘true’ ou ‘false’

columnWidth: quando o textBox está dentro de um layout Column, este valor deverá ser informado, representando o percentual da coluna que o texto ocupará. Este valor está contido entre 0 e 1.

frame: quando ‘true’, exibe um quadro azul sob o controle (controles do tipo unbound). Valores possíveis: ‘true’ ou ‘false’

labelAlign: um textBox possui um rótulo (label) associado a ele, informado na propriedade ‘caption’. A propriedade labelAlign representa o alinhamento deste rótulo. Valores possíveis: ‘left’, ‘right’, ‘top’.

labelWidth: Esta propriedade controla o tamanho do label associado ao textBox. Caso o tamanho definido não comporte todo o texto do label, será feita a quebra de linha automaticamente.

style: exibe quatros valores que representam os espaçamentos do textBox em relação aos componentes com os quais faz fronteira. Sintaxe: {margin: '5px 5px 5px 5px'}. Os valores representam os espaçamentos superior, direito, inferior, esquerdo, nesta ordem.

24/04/15

23

CHECKBOX

Um checkBox é uma ‘caixa de marcar’, onde o usuário poderá marcá-la (S = Sim; símbolo: ) ou

desmarcá-la (N = Não; símbolo: ).

Figura 19

Sugestão de padrão para nomenclatura:

prefixo chk + nomeInstituição + nomeControle.

Ex.: chkTechneObrigaCat

24/04/15

24

Figura 20: Propriedades de um checkBox

PROPRIEDADES DO TIPO CONTROLE PARA CHECKBOX

caption: Rótulo que será exibido associado ao checkBox.

initialValue: Valor inicial dado ao checkBox. Pode assumir os valores ‘S’ (marcado) ou ‘N’ (não marcado).

readOnly: Se ‘S’, o checkBox só permitirá leitura. Valores possíveis: ‘S’ ou ‘N’.

visible: Se ‘S’, o checkBox será exibido na tela. Valores possíveis: ‘S’ ou ‘N’.

width: Largura total do checkBox, em pixels.

24/04/15

25

PROPRIEDADES DO TIPO LAYOUT PARA CHECKBOX

border: quando ‘true’, exibe uma borda azul ao redor do controle (controles do tipo unbound). Valores possíveis: ‘true’ ou ‘false’.

columnWidth: quando o checkBox está dentro de um layout Column, este valor deverá ser informado, representando o percentual da coluna que o item de marcação ocupará. Este valor está contido entre 0 e 1.

frame: quando ‘true’, exibe um quadro azul sob o controle (controles do tipo unbound). Valores possíveis: ‘true’ ou ‘false’.

labelAlign: um checkBox possui um rótulo (label) associado a ele, informado na propriedade ‘caption’. A propriedade labelAlign representa o alinhamento deste rótulo. Valores possíveis: ‘left’, ‘right’, ‘top’.

labelWidth: Esta propriedade controla o tamanho do label associado ao checkBox. Caso o tamanho definido não comporte todo o texto do label, será feita a quebra de linha automaticamente.

style: exibe quatros valores que representam os espaçamentos do checkBox em relação aos componentes com os quais faz fronteira. Sintaxe: {margin:'5px 5px 5px 5px'}. Os valores representam os espaçamentos superior, direito, inferior, esquerdo, nesta ordem.

24/04/15

26

HYPERLINK

Um hyperlink é um link, que ao ser clicado, redireciona o usuário para outra tela da aplicação,

referenciada neste controle, podendo haver ou não passagem de parâmetros.

Figura 21: Tela com hyperLink

Sugestão de padrão para nomenclatura:

prefixo hyp + nomeInstituição + nomeControle.

Ex.: hypTechneTipoPericia

24/04/15

27

Figura 22: Propriedades de um Hyperlink

24/04/15

28

PROPRIEDADES DO TIPO CONTROLE PARA HYPERLINK

caption: Rótulo que será exibido associado ao hyperlink.

parametros: Parâmetros que a transação referenciada necessita.

text: Nome a ser exibido como texto pelo hyperlink.

transacao: Transação referenciada pelo hyperlink.

visible: Se ‘S’, o hyperlink será exibido na tela. Valores possíveis: ‘S’ ou ‘N’.

width: Largura total do hyperlink, em pixels.

PROPRIEDADES DO TIPO LAYOUT PARA HYPERLINK

border: quando ‘true’, exibe uma borda azul ao redor do controle (controles do tipo unbound). Valores possíveis: ‘true’ ou ‘false’.

columnWidth: quando o hyperlink está dentro de um layout Column, este valor deverá ser informado, representando o percentual da coluna que o rótulo do hyperlink ocupará. Este valor está contido entre 0 e 1.

frame: quando ‘true’, exibe um quadro azul sob o controle (controles do tipo unbound). Valores possíveis: ‘true’ ou ‘false’.

24/04/15

29

labelAlign: um hyperlink possui um rótulo (Label) associado a ele, informado na propriedade ‘caption’. A propriedade labelAlign representa o alinhamento deste rótulo. Valores possíveis: ‘left’, ‘right’, ‘top’.

labelWidth: Esta propriedade controla o tamanho do Label associado ao hyperlink. Caso o tamanho definido não comporte todo o texto do Label, será feita a quebra de linha automaticamente.

style: exibe quatros valores que representam os espaçamentos do hyperlink em relação aos componentes com os quais faz fronteira. Sintaxe: {margin: '5px 5px 5px 5px'}. Os valores representam os espaçamentos superior, direito, inferior, esquerdo, nesta ordem.

LINKMETHOD

Um LinkMethod tem como função disparar um subprograma (procedimento ou função), que atuará

sobre registros do banco de dados. Durante a chamada ao subprograma, é possível passar parâmetros

para o mesmo.

Figura 23: Tela com LinkMethod

Sugestão de padrão para nomenclatura:

prefixo lkm + nomeInstituição + nomeControle.

Ex.: lkmTechneDesagendarSReq

24/04/15

30

Figura 24: Propriedades de um LinkMethod

24/04/15

31

PROPRIEDADES DO TIPO CONTROLE PARA LINKMETHOD

afterExecute: Instruções em JavaScript que serão executadas após a execução do subprograma.

label: Rótulo que será exibido associado ao LinkMethod.

navigationParameters: parâmetros que serão passados para a transação especificada na propriedade ‘navigationTransaction’.

navigationTransaction: após a execução da rotina, a aplicação pode ser redirecionada para a transação especificada nesta propriedade.

parameters: Valores a serem passados como parâmetros ao subprograma chamado. Não é preciso informar os parâmetros tipo OUT, somente os parâmetros tipo IN ou IN/OUT.

successMessage: Mensagem exibida abaixo do linkMethod, após a chamada da rotina.

visible: Se ‘S’, o linkMethod será exibido na tela. Valores possíveis: ‘S’ ou ‘N’

width: Largura total do linkMethod, em pixels.

24/04/15

32

PROPRIEDADES DO TIPO LAYOUT PARA LINKMETHOD

border: quando ‘true’, exibe uma borda azul ao redor do controle (controles do tipo unbound). Valores possíveis: ‘true’ ou ‘false’.

frame: quando ‘true’, exibe um quadro azul sob o controle (controles do tipo unbound). Valores possíveis: ‘true’ ou ‘false’.

columnWidth: quando o linkMethod está dentro de um layout Column, este valor deverá ser informado, representando o percentual da coluna que o rótulo do linkMethod ocupará. Este valor está contido entre 0 e 1.

labelAlign: um linkMethod possui um rótulo (label) associado a ele, informado na propriedade ‘caption’. A propriedade labelAlign representa o alinhamento deste rótulo. Valores possíveis: ‘left’, ‘right’, ‘top’.

labelWidth: Esta propriedade controla o tamanho do label associado ao hyperlink. Caso o tamanho definido não comporte todo o texto do label, será feita a quebra de linha automaticamente.

style: exibe quatros valores que representam os espaçamentos do linkMethod em relação aos componentes com os quais faz fronteira. Sintaxe: {margin:'5px 5px 5px 5px'}. Os valores representam os espaçamentos superior, direito, inferior, esquerdo, nesta ordem.

24/04/15

33

POSSIBILIDADES DE LAYOUT

ESCONDER COLUNAS

1. Encontre o objeto na coluna da direita;

2. Modifique a propriedade correspondente, neste caso, a propriedade Hidden – informando o

valor para “True” para esconder e “False” para mostrar.

3. Para efetivar a alteração clique no botão “Salvar”

Alterando

Figura 25

Concluído

Figura 26

24/04/15

34

ALTERAR A LARGURA DA COLUNA

1. Utilize a propriedade “Widtn” e digite o tamanho desejado.

Figura 27

24/04/15

35

ALINHAR O TEXTO DA COLUNA

1. Utilize a propriedade “cssClass” e marque uma das opções possíveis;

2. Nesta propriedade são utilizadas as palavras em inglês iniciadas pelo T de Techne.

Alterando

Figura 28

Concluindo

Figura 29

ALTERAR O TAMANHO DO TÍTULO NA COLUNA

24/04/15

36

1. Utilize a propriedade “Caption”;

2. Para pular uma linha utilize o comando “br/”, lembrando que a barra é necessária pelo

padrão do Java.

Alterando

Figura 30

Concluído

Figura 31

ALTERAR QUANTIDADE DE REGISTROS POR PÁGINA

1. A propriedade “Page Size” vai determinar quantos registros aparecerão por página;

24/04/15

37

2. Utilizando o número “0” todos os registros encontrados aparecerão na mesma tela.

Alterando

Figura 32

Concluído

Figura 33

AGRUPAMENTO

24/04/15

38

1. Os registros poderão ser agrupados seguindo uma ordem;

2. Para isso utilize a propriedade “Group” com o nome do campo que deseja ordenar.

Alterando

Figura 34

Concluído

Figura 35

INSERIR HIPERLINK EM FORMA DE BOTÃO

É possível inserir links de atalho em uma página com formato de botões para melhorar a usabilidade

do aluno.

24/04/15

39

1. Posicione o mouse sobre as páginas desejadas e anote suas localizações como mostra o exemplo abaixo:

A localização desta página é secretaria.T113D

Figura 36

24/04/15

40

1. O próximo passo é inserir o objeto:

Figura 37

2. Nomear o novo controle:

Figura 38

3. Informar o nome pela propriedade “Text” e na propriedade “Transacao” o nome

correspondente da página que desejamos para o link:

24/04/15

41

Figura 39

4. Por padrão os objetos ficaram um debaixo do outro, podemos querer um ao lado do outro:

Figura 40

5. Para isso utilizaremos dois objetos de layout:

24/04/15

42

Container: é um elemento de composição e construção de layout, que pode ser utilizado

para, por exemplo, definir a largura de um painel. É como uma caixa invisível para conter

objetos.

Column: como por padrão, os objetos inseridos ficam um debaixo do outro, este objeto é

utilizado para definir colunas, para que assim, os objetos fiquem lado a lado.

Portanto, será inserido um container e também um column para melhorar o layout dos objetos

inseridos.

Figura 41

24/04/15

43

SERVIÇOS PARA CONSULTAS CUSTOMIZADAS

Existem dois serviços para a realização de consultas customizadas através de stored procedures

criadas pelo cliente, um para busca de único registro e outro para listagem.

BUSCA DE ÚNICO REGISTRO

Para utilizar o serviço de busca, basta criar no banco de dados uma procedure que faça uma consulta,

essa procedure pode receber até 10 parâmetros. Para ilustrar o exemplo será considerada a procedure

abaixo:

create procedure busca_aluno_por_codigo(

@p_aluno T_CODIGO

)

as

select ALUNO, CURSO, NOME_COMPL from LY_ALUNO where ALUNO =

@p_aluno

Criada a procedure, basta apenas criar um controle na página onde se deseja chamar a consulta

customizada, para o exemplo de busca de único registro, será utilizado como exemplo um controle

recordPanel. Inserido o recordPanel na página, existem duas propriedades que serão responsáveis por

chamar a consulta customizada: fillMethod e fillMethodParams.

Preenchimento de propriedades do recordPanel.

24/04/15

44

O preenchimento da propriedade fillMethod para consultas customizadas deve conter a declaração do

serviço responsável por chamar a procedure criada, que neste cenário de exemplo deve ser feito da

seguinte maneira:

db.busca(String, Object)

Sendo “String” sempre fixo e obrigatório, o(s) parâmetro(s) “Object” são opcionais e podem ser de

zero até 10 (por exemplo: o preenchimento da propriedade fillMethod para um cenário com uma

procedure com 4 parâmetros: “db.busca(String, Object, Object, Object, Object)”).

Já o preenchimento da propriedade fillMethodParams deve conter os valores a serem passados como

parâmetros, que podem ser valores fixos, parâmetros de página e referências a outros controles, que

neste cenário de exemplo deve ser feito da seguinte maneira:

‘busca_aluno_por_codigo’,’1000701270’

Sendo o primeiro, sempre o nome da procedure a ser chamada pela consulta customizada, seguido de

zero a dez parâmetros opcionais a serem passados para a procedure, conforme o que foi declarado na

propriedade fillMethod.

Agora que a fonte de dados do recordPanel está apontando para a consulta customizada, basta

adicionar os campos que irão receber os dados da consulta, que neste cenário de exemplo devem ser

três campos textField. Para fazer com que estes campos leiam o retorno da consulta basta preencher a

propriedade field de cada um com o nome que a coluna vem na consulta (respeitando maiúsculas).

Que no nosso cenário seriam: “ALUNO”, “CURSO”, e “NOME_COMPL”, cada um em seu respectivo

textField (sem as aspas, conforme exemplo abaixo).

Exemplo de preenchimento de propriedades do textField.

Isso feito, basta salvar as alterações e recarregar a página, e ver o resultado final:

24/04/15

45

Controle contendo os dados retornados pela consulta customizada Figura 42

LISTAGEM

Para utilizar o serviço de listagem, basta criar no banco de dados uma procedure que faça um

consulta, essa procedure pode receber até 10 parâmetros. Para ilustrar o exemplo será considerada a

procedure abaixo:

create procedure lista_alunos_cancelados

as

select ALUNO, CURSO, NOME_COMPL

from LY_ALUNO

where SIT_ALUNO = 'Cancelado'

and CURSO = '100012'

and TURNO = 'MATUTINO'

and CURRICULO = '100-192/04'

and SERIE = 2

Criada a procedure, basta apenas criar um controle na página onde se deseja chamar a consulta

customizada, para o exemplo de listagem, será utilizado como exemplo um controle gridPanel.

Inserido o gridPanel na página, existem duas propriedades que serão responsáveis por chamar a

consulta customizada: fillMethod e fillMethodParams.

24/04/15

46

Preenchimento de propriedades do gridPanel

O preenchimento da propriedade fillMethod para consultas customizadas deve conter a declaração do

serviço responsável por chamar a procedure criada, que neste cenário de exemplo deve ser feito da

seguinte maneira:

db.lista(String)

Sendo “String” sempre fixo e obrigatório, e ao contrário do exemplo de busca de único registro, esta

procedure não recebe nenhum parâmetro, então a declaração não contém nenhum parâmetro

Object.

Já o preenchimento da propriedade fillMethodParams, deve conter os valores a serem passados como

parâmetros, que podem ser valores fixos, parâmetros de página e referências a outros controles, que

neste cenário de exemplo deve ser feito da seguinte maneira:

‘lista_alunos_cancelados’

Sendo o primeiro sempre o nome da procedure a ser chamada pela consulta customizada, após o

nome da procedure de zero a dez parâmetros opcionais a serem passados para a procedure, conforme

o que foi declarado na propriedade fillMethod, que neste exemplo não possui nenhum parâmetro

então colocamos apenas o nome da procedure a ser executada.

Agora que a fonte de dados do gridPanel está apontando para a consulta customizada, basta adicionar

os campos que irão receber os dados da consulta, que neste cenário de exemplo devem ser três

24/04/15

47

campos gridPanelField. Para fazer com que estes campos leiam o retorno da consulta basta preencher

a propriedade field de cada um com o nome que a coluna vem na consulta (respeitando maiúsculas).

Que no nosso cenário seriam: “ALUNO”, “CURSO”, e “NOME_COMPL”, cada um em seu respectivo

gridPanelField (sem aspas, conforme exemplo abaixo).

Exemplo de preenchimento de propriedades do textField.

24/04/15

48

Isso feito, basta salvar as alterações e recarregar a página, e ver o resultado final:

Controle contendo os dados retornados pela consulta customizada.

Figura 43

24/04/15

49

CRIAÇÃO DE NOVAS TELAS

Outra funcionalidade disponível através da customização é a criação de novas telas.

Depois de criada, a nova tela poderá ser acessada apenas pelos usuários que possuam o mesmo

padrão de tela do usuário que a criou, e que possuam o padrão de acesso ao qual a nova transação foi

associada.

1ºPasso:

Criação da transação e associação da mesma ao padrão de acesso ao qual pertence o usuário que irá

criar a nova tela.

Como exemplo, iremos descrever a criação de uma nova tela chamada telateste, no módulo

Secretaria, realizada pelo usuário zeus.

No Módulo Hades do Lyceum Cliente/Servidor acesse o Menu: "Hades" -> "Sistemas". No campo

"Sistema" escolha o nome da aplicação customizada onde será criada a tela, no caso do exemplo:

C_Sec.

Obs.: Para cada módulo existe uma aplicação de customização para guardar as novas telas criadas.

Veja a tabela abaixo:

Módulo Aplicação Customizada

AOnline C_AOnline

DOnline C_DOnline

Secretaria C_Sec

Agora é necessário inserir na grid "Transações", a nova transação com o mesmo nome da tela que será

criada, telateste.

Figura 44

24/04/15

50

Em seguida associe a nova transação ao padrão de acesso a qual pertence o usuário responsável por

criar a tela.

No Módulo Hades do Lyceum Cliente/Servidor acesse o Menu: Hades -> Padrões de Acesso.

Escolha o padrão de acesso, e em seguida, na aba "Transações", insira a nova transação criada

anteriormente.

Figura 45

24/04/15

51

2ºPasso:

Apenas usuários com o privilégio de edição de tela terão permissão para criar novas telas. Por isso o

segundo passo consiste na verificação dos privilégios do usuário que irá criar a tela. Esta configuração

pode ser visualizada no Módulo Secretaria -> Menu: Configurações -> Edição de Telas

Figura 46

(../Secretaria/Secretaria/online/TONL002D.tp)

Note que a permissão é dada aos usuários de cada um dos módulos: Secretaria, Aluno Online e

Docente Online.

3ºPasso:

A nova tela chamada telateste, será criada dentro da pasta chamada pastaTestes.

Abra o browser, acesse o módulo da Secretária e faça seu login com um usuário editor de telas.

Após realizar a autenticação do usuário, digite a seguinte URL:

//[servidor das aplicações]/[Módulo]/[Aplicação Customizada]/[pasta]/[nome

da tela].tp

Onde:

Módulo: Secretaria, AOnline ou DOnline. Os nomes dos módulos devem ser digitados

respeitando as letras em maiúsculo.

Aplicação Customizada: Os nomes das aplicações customizadas devem ser digitados

respeitando as letras em maiúsculo: C_AOnline, C_DOnline e C_Sec.

24/04/15

52

Pasta: pasta em que será criada a nova tela. É obrigatória e tem como finalidade organizar as

telas criadas. Ao informar o nome da pasta, se a mesma ainda não existir, será criada

automaticamente.

Nome da tela: um nome para a nova tela seguido da extensão ".tp"

Seguindo o exemplo a URL ficaria assim:

//[servidor das aplicações]/Secretaria/C_Sec/pastaTestes/telateste.tp

Digitada a URL acima, será exibida uma mensagem informando que a tela ainda não existe, e o link

"clicando aqui" para a criação da mesma, conforme mostrado na figura abaixo:

Figura 47

Ao clicar no link a nova tela será criada e exibida.

Figura 48

O acesso à nova tela pode ser feito digitando-se a URL de criação:

//[servidor das aplicações]/Secretaria/C_Sec/pastaTestes/telateste.tp

Ou através de uma customização de menu ou tela (inserção de um link para a nova página).

24/04/15

53

CUSTOMIZAÇÃO DE MENU

Uma das formas de chamar uma nova tela, é através da customização de menu.

Cada módulo possui seu próprio menu, que pode ser customizado acessando os seguintes endereços:

Módulo Endereço do menu para customização

C_AOnline //[servidor das aplicações]/AOnline/AOnline/menu/MenuAOnline.tm

C_DOnline //[servidor das aplicações]/DOnline/DOnline/menu/MenuDOnline.tm

Secretaria //[servidor das aplicações]/Secretaria/Secretaria/menu/menuSecretaria.tm

A seguir veremos um exemplo de customização do menu do módulo Secretária, onde iremos criar um

novo item de menu para chamar a tela criada no item anterior deste documento.

1ºPasso:

No browser, acessar o módulo desejado e efetuar o login.

Lembrar que, o usuário que irá customizar o menu precisa ter o privilégio de edição de tela, e que

somente os usuários que possuírem o mesmo padrão de tela, irão visualizar esta customização.

Seguindo nosso exemplo, digitar a URL:

//[servidor das aplicações]/Secretaria/Secretaria/menu/menuSecretaria.tm

2ºPasso:

Clique no botão "seta" do lado esquerdo da tela para a exibição dos "Controles e Layout".

Figura 49

Obs.: os botões "seta" só serão exibidos para os usuários que possuírem o privilégio de edição de tela.

24/04/15

54

3ºPasso:

Clique no botão "seta" do lado esquerdo da tela para a exibição dos "Controles e Layout".

Figura 50

4ºPasso:

Em "Controles e Layout" clique com o botão direto do mouse sobre o "MenuSecretaria" e escolha a

opção hyperLinkList.

Na janela "Cria controle" digite um nome para o novo menu (esse nome será apenas interno, o nome

que aparecerá no menu será configurado posteriormente).

Figura 51

Na janela "Controles e Layout", clique sobre o novo menu "MenuTeste", para selecioná-lo. Em seguida

clique sobre o botão "seta" do lado direito da tela para exibição das propriedades (ver figura no

2ºpasso).

Na propriedade Caption digitar o texto que será exibido no menu. Em seguida, salve a alteração,

clicando no botão localizado no lado esquerdo parte inferior da tela.

24/04/15

55

Figura 52

5ºPasso:

Na janela "Controles e Layout", clique com o botão direto do mouse sobre o "MenuTeste" e escolha a

opção hyperlink.

Na janela "Cria controle" digite um nome para o item de menu, no nosso exemplo usaremos

"NovaTela".

6ºPasso:

Na janela "Controles e Layout", clique sobre o novo menu "NovaTela" para selecioná-lo. Agora, na

janela de propriedades, ao lado direita da tela, iremos configurar as três propriedades necessárias

para chamar a nova tela.

Propriedade Descrição

application Nome da aplicação onde se localiza a nova tela a ser chamada: C_AOnline, C_DOnline ou C_Sec. Para as telas de fábrica não é necessário preencher esta propriedade.

text Texto que será exibido no menu para o usuário.

transacao Nome da pasta onde foi criada a tela e o nome da tela separado por um ponto: [nome da pasta].[nome da tela] No exemplo: pastaTestes.telateste

Após o preenchimento das propriedades clique no botão

24/04/15

56

Figura 53

Para acessar o novo menu e testar a chamada a tela, navegue para outra tela qualquer, por

exemplo:"//[servidor das aplicações]/Secretaria/Secretaria/atendimento/TACD203D.tp" e acesse o

menu principal:

Figura 54

24/04/15

57

Clique no menu criado (novo menu) e a nova tela será exibida.

Figura 55

24/04/15

58

CRIAÇÃO DE PÁGINAS CUSTOMIZADAS COM HTML GERADO POR

STORED PROCEDURE

Utilizando-se do serviço de consultas genéricas através de stored procedures, e o controle template , é

possível criar telas inteiras totalmente customizadas.

Este documento se divide em duas partes para guiar nessa criação, a primeira mostra o padrão a ser

seguido para criar a stored procedure que irá fazer a consulta para alimentar a tela, e a segunda parte

irá mostrar como chamar essa procedure na tela através do serviço de consulta genérica e a exibição

dos dados através do controle de tela “template ”.

CRIAÇÃO DA STORED PROCEDURE

O código da stored procedure para montar e retornar o html para a criação da página customizada

deve seguir o seguinte exemplo:

drop procedure GERA_HTML_CUSTOM

go

create procedure GERA_HTML_CUSTOM(

@p_aluno [T_CODIGO]

)

as

set nocount on

begin

-- chama entry-point

declare @v_substitui varchar(1)

exec s_GERA_HTML_CUSTOM @p_aluno, @v_substitui output

if @v_substitui = 'S'

begin

return

end

-- cria a tabela temporária para gravar o html

create table #ly_gera_html_custom(

sessao_id varchar(40),

24/04/15

59

linha_html varchar(max)

);

-- insere o html na tabela temporária

insert into #ly_gera_html_custom values(@SPID@,'<div style="border-width:

4px; border-style: double;">')

insert into #ly_gera_html_custom values(@@SPID, '<b> Código do aluno:

'+isnull(@p_aluno,'')+'</b><br/><br/>')

insert into #ly_gera_html_custom values(@@SPID, 'Aqui podem ser inseridas

quantas linhas com código html forem necessárias

para que a página seja montada, bem como chamadas às classes CSS do

Lyceum, ou mesmo serem criadas novas.')

insert into #ly_gera_html_custom values(@@SPID, '</div>')

set nocount off

-- retorna o html gerado

select linha_html from #ly_gera_html_custom

and sessao_id = @@SPID

end

E o código da procedure de entry-point:

drop procedure s_GERA_HTML_CUSTOM

go

create procedure s_GERA_HTML_CUSTOM(

@p_aluno [T_CODIGO],

@p_substitui varchar(1) output

)

as

-- [INÍCIO]

set @p_substitui = 'N'

24/04/15

60

RETURN

-- [FIM]

Figura 56

24/04/15

61

ADIÇÃO DA VIEW NA TELA

Primeiro deve-se adicionar um controle templates na tela, no local e dentro dos containers da maneira

desejada como qualquer outro controle do Cronos. As parametrizações de altura e largura do controle

devem seguir também o layout desejado para a página.

A propriedade “fillMethod” deve ser preenchida utilizando o serviço de consulta genérica apontando

para a procedure criada, da seguinte maneira:

“db.lista(‘<nome_procedure>’,’<param_1>’)”

Obs.: lembrando que o serviço de consulta genérica aceita de 0 até 10 parâmetros a serem passados

para a procedure. Em caso de dúvida favor ver mais detalhes da utilização deste serviço em sua

documentação.

Agora que o controle template está apontando para a stored procedure como sua fonte de dados, é

hora de configurar como esses dados irão ser exibidos na tela. Como no caso os dados são código

html, basta dizer ao template que não interfira em como esses dados serão exibidos, e que apenas

renderize o código html recebido da stored procedure. Para que isso seja feito, a propriedade “tpl” do

controle template na tela deve ser preenchida da seguinte maneira:

Figura 57

24/04/15

62

Assim o template irá renderizar o código html recebido da stored procedure, podendo ser de qualquer

tamanho e complexidade, e se utilizando de CSS conforme o suporte do navegador o qual a página irá

ser visualizada. Não é recomendado que seja utilizado JavaScript no código retornado pela stored

procedure.

Figura 58

24/04/15

63

cctechne@techne.com.br