Histórico da Página
CONTEÚDO
- Visão Geral
- Procedures do Include ut-4gltreeview.i (facilitador)
- Procedures e Funções do Componente
- Exemplo de Utilização
- Dicas de Conversão do OCX para o 4glTreeView
- Telas do TreeView
- Documentação Complementar do Componente
01. VISÃO GERAL Âncora visao_geral visao_geral
visao_geral | |
visao_geral |
Este componente 4glTreeView, feito em progress, tem como objetivo substituir o componente TreeView fornecido pela Microsoft (mscomctrl.ocx), pois este OCX não possui compatibilidade com o OpenEdge 64Bits.
...
- Performático, onde testamos mais de 5000 nós e não houve perda de performance.
- Temos um include ut-4gltreeview.i que possui algumas procedures "facilitadoras" para manipulação do TreeView.
- Feito totalmente em progress.
- Possuímos o código fonte, onde podemos customizá-lo de acordo com as nossas necessidades.
02. PROCEDURES DO INCLUDE ut-4gltreeview.i (facilitador) Âncora include_4gltreeview include_4gltreeview
include_4gltreeview | |
include_4gltreeview |
Foi disponibilizado o include ut-4gltreeview.i para facilitar a utilização do TreeView, que possui as seguintes variáveis e procedures:
Variável | Tipo | Descrição |
---|---|---|
h-4gltreeview | Handle | Contem o handle da instância do TreeView |
c-codigo-node | Char | Contem o pcKe (chave) do node selecionado |
cImage | Char | Contem a imagem que será apresentada utilizada como ícone no node |
cFgColor | Char | Contem a cor de frente do node |
cFont | Char | Contem o código da fonte utilizada no node |
cExpClp | Char | Expande ou fecha o node |
Procedure | Parâmetros | Descrição | Exemplo/Utilização | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
pi-create-node |
| Cria um node no TreeView. O pcOptn é uma lista de parâmetros que são separados por |
chr(1). Valores válidos para o pcOptn:
| DO ON ERROR UNDO, LEAVE: RUN pi-create-node RUN pi-create-node END. | ||||||||||||||||||||
pi-update-node |
| Atualiza o label, ícone ou a lista de opções de um determinado node. Para remover um item do pcOptn existente, coloque "!" na frente da opção, conforme o exemplo abaixo: pcOptn="!font" A opção acima removerá o fonte definido para o node. | ASSIGN cFgColor = "font=1". | ||||||||||||||||||
pi- |
atualizaTreeview | Faz uma atualização/refresh do TreeView. | RUN pi-atualizaTreeview. | ||
tvNodeEvent |
|
|
Retorno "YES" ou "NO" indicando se o node está expandido.
(INPUT c-codigo-node).
IF RETURN-VALUE = "YES" THEN
MESSAGE "O NÓ ESTÁ EXPANDIDO"
Procedure auxiliar que é assinada no TreeView, onde todos os eventos que ocorrerem no TreeView chamarão esta procedure. Você não precisa chamar esta procedure diretamente, pois quem irá chamá-la é o TreeView. Nesta procedure será alimentada a variável c-codigo-node com a chave do node selecionado. | |||
pi-ClickTreeview | Procedure que será chamada pelo tvNodeEvent sempre que ocorrer um evento de "select" (click em um node) no TreeView. Caso queria capturar este evento, esta Procedure deve ser definida no seu programa. A variável c-codigo-node irá conter a chave do node selecionado. | PROCEDURE pi-ClickTreeView: |
c- |
ELSE
MESSAGE "O NÓ NÃO ESTÁ EXPANDIDO"
codigo-node |
END PROCEDURE. |
pi- |
CtrlPopupTreeview |
|
|
| Procedure |
Você não precisa chamar esta procedure diretamente, pois quem irá chamá-la é o TreeView.
Nesta procedure será alimentada a variável c-codigo-node com a chave do node selecionado.
Procedure que será chamada pelo tvNodeEvent sempre que ocorrer um evento de "select" (click em um node) no TreeView.
Caso queria capturar este evento, esta Procedure deve ser definida no seu programa.
A variável c-codigo-node irá conter a chave do node selecionado.
PROCEDURE pi-ClickTreeView:
MESSAGE "Chave do Nó: " +
c-codigo-node
VIEW-AS ALERT-BOX.
END PROCEDURE.
Ação do Popup:
"build" ou "choose"
Procedure utilizada para criar e controlar o Popup do TreeView.
Ela será chamada pelo tvNodeEvent em dois momentos:
1) Criação do Menu
Executada na momento em que o componente é criado. Passando como parâmetro o Ação "build". Neste momento a Procedure deverá retornar uma String com a lista dos itens que devem ser apresentados no Popup. A lista deve utilizar o separador "chr(1)" e deve ser composta por Label e Valor de cada item. Ex: "LabelItem1" + chr(1) + "valoritem1" + chr(1) + "LabelItem2" + chr(1) + "valoritem2". É possível acrescentar uma regra entre os itens, para isto, basta incluir um item com o Label "RULE" e o valor igual a branco.
xxxxProcedure que será chamada pelo tvNodeEvent sempre que ocorrer um evento de "select" (click em um node) no TreeView.
xxxxCaso queria capturar este evento, esta Procedure deve ser definida no seu programa.
xxxxxA variável c-codigo-node irá conter a chave do node selecionado.
Parâmetro | Tipo | Descrição |
---|---|---|
pcEvent (I) | Char | Evento que aconteceu |
pcNodeKey (I) | Char | Chave do node |
xxxxProcedure que será chamada pelo tvNodeEvent sempre que ocorrer um evento de "select" (click em um node) no TreeView.
xxxxCaso queria capturar este evento, esta Procedure deve ser definida no seu programa.
xxxA variável c-codigo-node irá conter a chave do node selecionado.
Card documentos | ||||
---|---|---|---|---|
|
Card documentos | ||||
---|---|---|---|---|
|
03. PROCEDURES E FUNÇÕES DO COMPONENTE
O componente 4glTreeView possui um código altamente documentado que pode ser utilizado.
Aconselhamos utilizar o include facilitador, pois ele possui variáveis e algumas procedures que vão facilitar o desenvolvimento.
Abaixo temos as principais procedures e funções do TreeView:
utilizada para criar e controlar o Popup Menu do TreeView. Caso queria definir um Popup Menu para a TreeView, esta Procedure deve ser definida no seu programa. Ela será chamada pelo tvNodeEvent em dois momentos: 1) Criação do Popup Menu Executada na momento em que o componente é criado. Passando como parâmetro o Ação "build". Neste momento a Procedure deverá retornar uma String com a lista dos itens a serem apresentados no Popup. A lista deve utilizar o separador "chr(1)" e ser composta por Label e Valor de cada item. Exemplo: "Label Item1" + chr(1) + "valoritem1" + chr(1) + "Label ItemN" + chr(1) + "valoritemN". É possível acrescentar uma régua entre os itens, para isto, basta incluir um item com o Label "RULE" e o valor igual a branco. Obs: O parâmetro pcNodeKey irá conter a chave do node selecionado, caso queira criar um Popup Menu personalizado para cada node. 2) Clique no Item do Popup Menu Executada no momento em que algum item do Popup é clicado. Passando como parâmetro a Ação "choose" e o valor do item clicado no parâmetro pcEvent. | PROCEDURE pi-CtrlPopupTreeview: // Criação do Popup Menu IF pcAction = "build" THEN DO: END. IF pcAction = "choose" THEN DO: RETURN. END PROCEDURE. | |||||||||||
pi-GenericEventTreeview |
| Procedure que será chamada pelo tvNodeEvent para todos os eventos do TreeView que não sejam o evento de "select" (tratado pela PI pi-ClickTreeview) e os eventos de Popup Menu (tratados pela PI pi-CtrlPopupTreeview). Caso queria capturar algum evento específico do TreeView, esta Procedure deve ser definida no seu programa. O parâmetro pcEvent irá conter o evento que ocorreu, por exemplo "expand", que ocorre quando o node é expandido. | PROCEDURE pi-GenericEventTreeview: |
Card documentos | ||||
---|---|---|---|---|
|
03. PROCEDURES E FUNÇÕES DO COMPONENTE Âncora procedures_funcoes procedures_funcoes
procedures_funcoes | |
procedures_funcoes |
O componente 4glTreeView possui um código altamente documentado que pode ser utilizado.
Aconselhamos utilizar o include facilitador, pois ele possui variáveis e algumas procedures que vão facilitar o desenvolvimento.
Abaixo temos as principais procedures e funções do TreeView:
Procedure | Parâmetros | Descrição | Exemplo/Utilização | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
addNode * |
| Adiciona um node no TreeView. Se o node for adicionado a um node pai, ele será o último filho. | DO ON ERROR UNDO, LEAVE: | ||||||||||||||||||
updateNode * |
| Atualiza o label, ícone ou a lista de opções de um determinado node. | RUN updateNode IN h-4gltreeview | ||||||||||||||||||
deleteNode |
| Elimina o node informado. | RUN deleteNode IN h-4gltreeview | ||||||||||||||||||
moveNode |
| Move um node origem, como filho de outro node destino. Caso o pcMode = "parent" e o node destino seja em branco, ele jogara o node origem como o último node do nível 0. | RUN moveNode IN h-4gltreeview | ||||||||||||||||||
enableObject | Habilita o TreeView. | RUN enableObject IN h-4gltreeview. | |||||||||||||||||||
initializeObject | Inicializa o TreeView. | RUN initializeObject IN h-4gltreeview. | |||||||||||||||||||
destroyObject | Elimina o TreeView da memória. | IF VALID-HANDLE(h-4gltreeview) THEN DO: RUN destroyObject IN h-4gltreeview. DELETE PROCEDURE h-4gltreeview. END. | |||||||||||||||||||
getFrameTreeview |
| Retorna o handle da frame do TreeView. | RUN getFrameTreeview IN h-4gltreeview | ||||||||||||||||||
emptyTree | Zera o conteúdo da TreeView. | RUN emptyTree IN h-4gltreeview. | |||||||||||||||||||
expandBranch |
| Expande o node e todos os seus filhos. Obs: Caso queria expandir apenas o node (e não os filhos), use a função "expandNode". | RUN expandBranch IN h-4gltreeview | ||||||||||||||||||
getNodeDetails |
| Retorna detalhes do node do informado. | RUN getNodeDetails IN h-4gltreeview MESSAGE DELETE OBJECT hNdBf. | ||||||||||||||||||
hasNodes |
| Retorna Verdadeiro ou False se o TreeView possuir nodes. | IF DYNAMIC-FUNCTION('hasNodes' IN h-4gltreeview) THEN DO: | ||||||||||||||||||
getTreeCount |
| Retorna a quantidade de nodes do TreeView. | ASSIGN iTreeCount = DYNAMIC-FUNCTION('getTreeCount' IN h-4gltreeview). | ||||||||||||||||||
getNodeParentKey |
| Retorna a chave do node Pai do node informado. | ASSIGN cParentKey = DYNAMIC-FUNCTION('getNodeParentKey' IN h-4gltreeview, | ||||||||||||||||||
selectNode |
| Seleciona o node informado. | ASSIGN lOk = | ||||||||||||||||||
collapseNode |
| Contrai o node informado. | ASSIGN lOk = | ||||||||||||||||||
expandNode |
| Expande o node informado. Obs: Os filhos não serão expandidos. Para isto, utilize a procedure "expandBranch". | ASSIGN lOk = | ||||||||||||||||||
isNodeExpanded |
| Retorno YES ou NO indicando se o node está expandido. | IF DYNAMIC-FUNCTION('isNodeExpanded' IN h-4gltreeview, | ||||||||||||||||||
setNodeTag |
| Atualiza a TAG do node. A TAG é um campo "coringa", onde pode ser gravada qualquer informação para recuperar depois. | ASSIGN lOk = | ||||||||||||||||||
getNodeTag |
| Retornar a TAG gravada no node. | ASSIGN cNodeTag = |
* = Procedures chamadas pelo facilitador
04. EXEMPLO DE UTILIZAÇÃO Âncora exemplo exemplo
exemplo | |
exemplo |
Segue abaixo um programa exemplo, construído em thin-templates, que utiliza o componente 4glTreeView, utilizando grande parte das procedures e funções existentes nestas documentação.
View file name wmainten.w height 250 View file name exemplo-ut-4gltreeview.p height 250
Bloco de código | ||||
---|---|---|---|---|
| ||||
// Deficoes do treeview
{utp/ut-4gltreeview.i}
PROCEDURE afterDisplayFields :
RUN carregaTreeView.
RUN criaTreeView.
END PROCEDURE.
// Carregando o componente treeview
PROCEDURE carregaTreeView :
IF NOT VALID-HANDLE(h-4gltreeview) THEN DO:
// Instancia o treeview
RUN utp/ut-4gltreeview.w PERSISTENT SET h-4gltreeview.
// Indica a Frame "Pai" do componente
RUN setParentFrame IN h-4gltreeview (INPUT FRAME fPage0:HANDLE).
// Inicializa o treeview
RUN initializeObject IN h-4gltreeview.
// Faz a subscricao dos eventos do treeview
SUBSCRIBE TO "tvNodeEvent" IN h-4gltreeview.
// Reposiciona o treeview
RUN repositionObject IN h-4gltreeview (6.35, 2.00).
// Ajusta o tamanho do treeview
RUN resizeObject IN h-4gltreeview (10.70, 28.00).
END.
END PROCEDURE.
// Cria os nodes no treeview
PROCEDURE criaTreeView :
// Limpa o treeview
RUN emptyTree IN h-4gltreeview.
ASSIGN c-codigo-node = "".
// Logica para criar nos nodes do treeview
...
RUN pi-create-node (cNodeId, cNodeIdPai, cDescNode, cImage, cOptn).
...
// Faz o refresh do treeview
RUN pi-atualizaTreeview.
END PROCEDURE.
// Procedure executada toda vez que ocorrer um evento de click em um node
PROCEDURE pi-ClickTreeView :
MESSAGE c-codigo-node VIEW_AS ALERT-BOX.
END PROCEDURE.
// Retira o treeview da memoria
PROCEDURE beforeDestroyInterface :
IF VALID-HANDLE(h-4gltreeview) THEN DO:
RUN destroyObject IN h-4gltreeview.
DELETE PROCEDURE h-4gltreeview.
END.
RETURN "OK".
END PROCEDURE. |
05. DICAS DE CONVERSÃO DO OCX PARA O 4GLTREEVIEW Âncora dicas dicas
dicas | |
dicas |
Segue abaixo uma tabela com algumas dicas para facilitar o processo de conversão dos programas que atualmente utilizar o TreeView OCX.
Processo | OCX | 4glTreeView | |||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Definição de Variáveis | DEFINE VARIABLE chTreeView AS COM-HANDLE NO-UNDO. | // Definições Treeview | |||||||||||||||||||||||||||||||||||||||||
Carregar o TreeView | Carrega o OCX através da procedure "control_load". | Criar um procedure como exemplo da "carregaTreeView" | |||||||||||||||||||||||||||||||||||||||||
Posicionar a TreeView na tela | CREATE CONTROL-FRAME CtrlFrame ASSIGN | RUN repositionObject IN h-4gltreeview (2.46, 1.00). | |||||||||||||||||||||||||||||||||||||||||
Menu Popup | DEFINE VARIABLE pop-menu AS WIDGET-HANDLE NO-UNDO. | Criar a procedure "pi-CtrlPopupTreeview" | |||||||||||||||||||||||||||||||||||||||||
Apagar todos os nós do TreeView | ChTreeView:Nodes:Clear(). | RUN emptyTree IN h-4gltreeview. | |||||||||||||||||||||||||||||||||||||||||
Expandir o node e seus filhos | DO i-cont = 1 TO chTreeView:Nodes:Count: | RUN expandBranch IN h-4gltreeview (c-codigo-node). | |||||||||||||||||||||||||||||||||||||||||
Selecionar um node | ASSIGN chTreeView:SelectedItem = | ||||||||||||||||||||||||||||||||||||||||||
Procedure | Parâmetros | Descrição | Exemplo/Utilização | ||||||||||||||||||||||||||||||||||||||||
addNode * |
| Adiciona um node no TreeView. Se o node for adicionado a um node pai, ele será o último filho. | DO ON ERROR UNDO, LEAVE: |
| Atualiza o label, ícone ou a lista de opções de um determinado node. | RUN updateNode IN h-4gltreeview | |||||||||||||||||||||||||||||||||||||
deleteNode |
| Elimina um node de uma chave especificada. | RUN deleteNode IN h-4gltreeview | ||||||||||||||||||||||||||||||||||||||||
moveNode |
| Move um node origem como filho de outro node destino. Caso o pcMode = "parent" e o node destino seja em branco, ele jogara o node origem como o último node do nível 0. | RUN moveNode IN h-4gltreeview | enableObject | Habilita o TreeView | RUN enableObject IN h-4gltreeview. | initializeObject | Inicializa o TreeView | RUN initializeObject IN h-4gltreeview. | destroyObject | Elimina o TreeView da memória. | IF VALID-HANDLE(h-4gltreeview) THEN DO: RUN destroyObject IN h-4gltreeview. DELETE PROCEDURE h-4gltreeview. END. | |||||||||||||||||||||||||||||||
getFrameTreeview |
| Retorna o handle da frame do TreeView. | RUN getFrameTreeview IN h-4gltreeview | emptyTree | Zera o conteúdo da TreeView. | RUN emptyTree IN h-4gltreeview. | |||||||||||||||||||||||||||||||||||||
applyEntry | Passar o parâmetro vazio ("") | Faz um entry no TreeView. | RUN applyEntry IN h-4gltreeview | expandBranch |
| Expande o node e todos os seus filhos. Obs: Caso queria expandir apenas o node (e não os filhos), use a função "expandNode". | RUN expandBranch IN h-4gltreeview|||||||||||||||||||||||||||||||||||||
getNodeDetails |
| Retorna detalhes de um node do TreeView. | RUN getNodeDetails IN h-4gltreeview MESSAGE DELETE OBJECT hNdBf. | ||||||||||||||||||||||||||||||||||||||||
hasNodes |
| Retorna Verdadeiro ou False se o TreeView possui nodes. | IF DYNAMIC-FUNCTION('hasNodes' IN h-4gltreeview) THEN DO: | VIEW-AS | ALERT-BOX.getTreeCount |
| Retorna a quantidade de nodes da TreeView. | ASSIGN | iTreeCount | = | | DYNAMIC-FUNCTION('getTreeCount' IN h-4gltreeviewchTreeView:Nodes(cNodeId). | MESSAGE "A Treeview possui " + string(iTreeCount) + " nós !"IF NOT ERROR-STATUS:ERROR THEN | VIEW-AS | ALERT-BOX.getNodeParentKey |
| Retorna a chave do node Pai do node informado(INPUT chTreeView:Nodes:Item(cNodeId)). | ASSIGN | cParentKeylOk = | | DYNAMIC-FUNCTION(' | getNodeParentKeyselectNode' IN h-4gltreeview, | |||||||||||||||||||||
Verificar se existem nodes | IF chTreeView:Nodes:COUNT > 0 THEN DO: | IF DYNAMIC-FUNCTION('hasNodes' IN h-4gltreeview) THEN DO: | c-codigo-node)... | ||||||||||||||||||||||||||||||||||||||||
Verificar se o node está expandido | IF chTreeView:SelectedItem:Expanded THEN DO: | IF | selectNode |
| Seleciona o node informado. | ASSIGN lOk = DYNAMIC-FUNCTION(' | selectNodeisNodeExpanded' | :UIN h-4gltreeview, | collapseNode |
| Contrai o node informado. | ASSIGN lOk =END. | |||||||||||||||||||||||||||||||
Pegar a chave do node selecionado | ASSIGN cNodeId = chTreeView:SelectedItem:key(). | ASSIGN cNodeId = c-codigo-node. | |||||||||||||||||||||||||||||||||||||||||
Monitorar o evento de click | PROCEDURE CtrlFrame.TreeView.NodeClick : | Criar a procedure "pi-ClickTreeView" | |||||||||||||||||||||||||||||||||||||||||
Incluir um node | chTreeView:Nodes:Add (cNodeIdPai, | c-codigo-node, "refresh").expandNode |
| Expande o node informado. Obs: Os filhos não serão expandidos. Para isto, utilize a procedure "expandBranch". | ASSIGN lOk =4, | RUN pi-create-node (cNodeId, | c-codigo-node, "refresh").setNodeTag |
| Atualiza a TAG do node. A TAG é um campo "coringa", onde pode ser gravada qualquer informação para recuperar depois. | ASSIGN lOk =cNodeIdPai, | cNodeOptn). | ||||||||||||||||||||||||||||||||
Gravar e recuperar a TAG | // Gravar TAG | // Gravar TAG | getNodeTag |
| Retornar a TAG gravada no node. | ASSIGN cNodeTag =DYNAMIC-FUNCTION(' | getNodeTagsetNodeTag' IN h-4gltreeview, | c-codigo-node).
* = Procedures chamadas pelo facilitador
04. EXEMPLO DE UTILIZAÇÃO
Estamos disponibilizando um exemplo de um programa com thin-templates que utiliza esse componente de TreeView.
View file name wmainten.w height 250
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
// definition do treeview
{utp/ut-4gltreeview.i}
// carregando o componente treeview
PROCEDURE afterDisplayFields :
IF NOT VALID-HANDLE(h-4gltreeview) THEN DO:
// instancia o treeview
RUN utp/ut-4gltreeview.w PERSISTENT SET h-4gltreeview.
// Indica a Frame "Pai" do componente
RUN setParentFrame IN h-4gltreeview (INPUT FRAME fPage0:HANDLE).
// inicializa o treeview
RUN initializeObject IN h-4gltreeview.
// faz a subscricao do evento de click dentro do treeview
SUBSCRIBE TO "tvNodeEvent" IN h-4gltreeview.
// reposiciona o treeview
RUN repositionObject IN h-4gltreeview (6.35 , 2.00).
// ajusta o tamanho do treeview
RUN resizeObject IN h-4gltreeview (10.70 , 28.00).
END.
// carrega os itens do treeview
RUN pi-loadNodes.
// faz o refresh do treeview
RUN pi-atualizaTreeview.
// coloca o cursor no treeview
RUN applyEntry IN h-4gltreeview (INPUT "").
END PROCEDURE.
// esta procedure sera executada toda vez que ocorrer um evento de click em um determinado nó
PROCEDURE pi-ClickTreeView :
MESSAGE c-codigo-node VIEW_AS ALERT-BOX.
END PROCEDURE.
// retira o treeview da memoria
PROCEDURE beforeDestroyInterface :
IF VALID-HANDLE(h-4gltreeview) THEN DO:
RUN destroyObject IN h-4gltreeview.
DELETE PROCEDURE h-4gltreeview.
END.
RETURN "OK":U.
END PROCEDURE. |
Programas de exemplo no produto que estão utilizando este componente:
$/EMS2/Fontes_Doc/Sustentacao/V11/V11/progress/src/wmp/wm0370.w
$/EMS2/Fontes_Doc/Sustentacao/V11/V11/progress/src/wmp/wm0430.w
$/EMS2/Fontes_Doc/Sustentacao/V11/V11/progress/src/wmp/wm0510.w
05. TELAS DO TREEVIEW
cNodeId, STRING(ROWID(ttDados)). | ||
Criar um relacionamento entre a TreeView e a TempTable de Negócio | De preferencia por utilizar o Rowid como chave do Node, | De preferencia por utilizar o Rowid como chave do Node, |
Definir um ícone para o node | Utiliza o componente ImageList para determinar o ícone | Os arquivos de imagem, utilizados pelo componente para determinar |
06. TELAS DO TREEVIEW Âncora telas telas
telas | |
telas |
07. DOCUMENTAÇÃO COMPLEMENTAR DO COMPONENTE Âncora documentacao documentacao
documentacao | |
documentacao |
...
View file | ||||
---|---|---|---|---|
|
View file | ||||
---|---|---|---|---|
|
...