Olá, pessoal! Estamos aqui novamente para mais um artigo sobre o Oracle APEX. Percebi que já existe uma boa quantidade de artigos sobre APEX e resolvi criar um local para listá-los em ordem de publicação. Neste artigo irei demonstrar como criar um menu em árvore (hierárquico), este tipo de menu é muito comum em aplicações, pois permite exibir uma grande quantidade de membros organizadamente.

Estrutura de dados

Para facilitar o desenvolvimento de um novo componente em APEX é importante planejar e criar o modelo de dados antes de tudo.

Portanto, devemos criar uma tabela para guardar a estrutura de dados do menu, esta tabela deverá possuir um auto-relacionamento com ela mesma para possibilitar a criação do efeito de hierarquia. Também deverá conter o nome que será exibido no menu, o endereço da página que será chamada quando clicado na entrada de menu, o tooltip com uma descrição mais elaborada sobre a entrada de menu e a ordem que as entradas serão exibidas no nível.

Em particular para este exemplo, esta tabela deverá possuir uma coluna chamada TIPO, para diferenciar se a página destino será aberta em um POP-UP ou na mesma janela do menu.

CREATE TABLE  "MENU" 
   (  	    "MNU_ID"            NUMBER not null, 
	    "MNU_PAI_ID"    NUMBER, 
	    "MNU_NOME"     VARCHAR2(40) not null, 
	    "MNU_PAGINA"  VARCHAR2(200), 
	    "MNU_TOOLTIP" VARCHAR2(200), 
	    "MNU_ORDEM"   NUMBER, 
	    "MNU_TIPO"         VARCHAR2(1) not null,
	    CONSTRAINT "MENU_PK" PRIMARY KEY ("MNU_ID") ENABLE,
                    CONSTRAINT "MENU_FK" FOREIGN KEY ("MNU_PAI_ID") REFERENCES MENU ("MNU_ID")
   )

Formulário de cadastro

Crie um formulário simples baseado na tabela MENU criada acima para manipular as informações. Neste artigo não vou abortar como criar este formulário, o objetivo deste artigo é sobre como criarmos um menu em árvore.

Veja abaixo como o formulário pode ficar:

Tela de menu

Após criar a tabela de menu e o formulário para cadastro das entradas de menu, vamos enfim, criar o menu em árvore.

• Crie uma nova página, do tipo “Tree”:

• Selecione o campo ‘informe o nome da página e da região para o menu’.

• Secione o template para a menu. Existem três templates pré-existentes, mas é possível customizar.

• Selecione a tabela MENU que foi criada acima. Ela irá ser a base para gerar a árvore.

• Neste momento, deve-se associar as colunas da tabela, com as propriedades do menu.

1. ID – Código identificador único do membro;
2. Parent ID  – Código identificador do membro de nível superior;
3. Note Text – Descrição que será exibida para o membro do menu;
4. Start With – Identifica qual a coluna da tabela vai conter os  membros para ser utilizado como raíz do menu;
5. Start Tree – Identifica com a condição que será utilizada na propriedade. Pode-se optar identificar o membro raíz através de uma query, um valor fixo, um valor existente em algum item da aplicação ou então iniciar com um valor nulo na coluna determinada na propriedade Start Tree.

• Nesse momento deve-se informar qual a coluna que será utilizada para ordenar os membros do menu na árvore. Também é possível informar clausulas para filtrar as informações da tabela MENU, podemos utilizar variáveis de aplicação, por exemplo, :P3_TEXTO_FILTRO.

• Informe mais algumas propriedades do menu.

1. Include Buttons – Permite criar botões de “Expandir tudo” e “Recolher tudo” automaticamente. É possível customizar o layout dos botões posteriormente;
2. Selected Node Page Item – Para controlar qual foi o último membro clicado, o APEX necessita de um Page Item para guardar essa informação, informe nesta propriedade;
3. Tooltip – Quando o usuário passar o mouse sobre o membro do menu uma breve descrição será exibida. No caso do exemplo temos a coluna MNU_TOOLTIP;
4. Link Option – Determina para qual página será direcionado e qual valor será passado como parâmetro quando clicar em algum membro do menu. No caso do exemplo, utilizaremos um link customizado que será explicado mais abaixo.

• Conclua a criação da página de menu e edite a página.
• Edite as propriedades da árvore.

• Veja que é possível alterar o template do menu além de algumas outras propriedades. A propriedade “Activate Node Link with” identifica se deverão ser clicados uma única vez ou duas vezes para ativar o link do membro.

• Abaixo temos a query que será utilizada para gerar o menu:

select case when connect_by_isleaf = 1 then 0
            when level = 1             then 1
            else                           -1
       end as status, 
       level, 
       "MNU_NOME" as title, 
'#WORKSPACE_IMAGES#'||DECODE(MNU_PAGINA,NULL,'pt_tab.png','pt_build_options.png') as icon,
       "MNU_ID" as value, 
       "MNU_TOOLTIP" as tooltip,
       case when MNU_TIPO = 'J' then 
          decode(MNU_PAGINA,NULL,NULL,MNU_PAGINA) 
       else
          decode(MNU_PAGINA,NULL,NULL,'javascript:var w; w=window.open('''||MNU_PAGINA||''',''popup'',''height=768,width=1024,scrollbars=yes'');w.focus();')        
       end as link 
from "MENU"
start with "MNU_PAI_ID" is null
connect by prior "MNU_ID" = "MNU_PAI_ID"
order siblings by "MNU_ORDEM"

Veja que exitem as seguintes colunas:

Status – Determina se o membro é o mais externo da hierarquia.

Level – O nível do membro na hierarquia.

Title – É a descrição que será exibida no membro.

Icon – É o ícone que será exibido no membro, veja que na query, iremos utilizar uma imagem da aplicação para o ícone de pasta e uma para o ícone de membro.

Value – Valor que representa o membro, deve ser um valor único.

Tooltip – Quando o usuário passar o mouse sobre o membro do menu uma breve descrição será exibida.

Link – Endereço da página que será chamada quando clicado no membro da hierarquia. Veja que podemos colocar comandos javascript, para exemplificar as possibilidades, será utilizado um link customizado, podendo abrir a página na mesma janela ou em um pop-up.

Conclusão

O menu em árvore é muito simples de ser criado no APEX e provê uma boa usabilidade ao usuário final. Veja que abaixo que facilmente foi criado um menu, que ainda pode ser customizado.

Para visualizar o resultado do desenvolvimento acesse: http://apex.oracle.com/pls/apex/f?p=30361:300

Até a próxima!