View
0
Download
0
Category
Preview:
Citation preview
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
Recommended