Olá, pessoal! Hoje, vamos ver como construir um menu de ícones no APEX.

Para esse artigo, utilizarei como base a aplicação de demonstração que criamos no artigo anterior.

Vamos criar uma tabela para cadastrar os programas que serão exibidos no menu, juntamente com o ícone que será apresentado e o número da página que será chamada quando clicado no ícone. Veja abaixo a estrutura da tabela.

Posteriormente, é possível criar um controle de acesso às páginas por usuário, mas neste momento vamos optar por uma solução simples.

Devemos criar um relatório do tipo interativo.

Determine o nome da página e da região do relatório e o template “Reports Region”:

Selecione a aba para a página que está sendo criada. No nosso caso, vamos optar por não utilizar aba.

Vamos colocar a query que será utilizada para exibir os dados no relatório, que posteriormente será transformado em um menu.

Veja que na query acima temos as colunas:

• ID_PROGRAMA – ID do programa, representa a chave primária da tabela TB_PROGRAMA.
• NOME – Nome do programa, será utilizado como descrição no menu.
• ICONE – Coluna ICONE da tabela, juntamente com a variável de ambiente #WORKSPACE_IMAGE# indica o caminho da imagem que será exibido no menu. A variável de ambiente #WORKSPACE_IMAGE# retorna o endereço do repositório de imagens da aplicação no APEX. Não se esqueça de efetuar o upload dos ícones.
• LINK– Endereço da página que será chamada quando clicado no ícone. Veja que são utilizadas as variáveis de ambiente APP_ID (ID da aplicação corrente) e APP_SESSION (ID da sessão corrente). Para entender mais sobre a URL do APEX, veja este artigo.

Na propriedade “Link to Single Row View”, selecione “No”, pois utilizaremos esse relatório apenas para chamar outras páginas.

Confirme a criação da página.

Veja como ficou o relatório criado:

Veja que ainda não temos os ícones, vamos transformar em um menu com ícones.

Para isso, edite o relatório interativo criado, vá na aba “Report Attributes” até a seção “Icone View”:

Temos as propriedades:

• ICONE VIEW ENABLED – Identifica se o relatório permite tranformar as linhas em ícones.
• USER CUSTOM ICON LINK – Quando ativado, indica que o link do ícone será determinado através da propriedade “CUSTOM LINK”, localizada mais abaixo.
• COLUMNS PER ROW – Quantidade de ícones por linha. Vamos utilizar 4 ícones por linha.
• LINK COLUMN – Coluna da query que identifica o link de acesso às páginas. No nosso menu, utilizaremos a coluna LINK da query.
• IMAGE SOURCE COLUMN – Coluna da query que identifica o endereço das imagens que serão utilizadas como ícone do menu. No nosso menu, utilizaremos a coluna ICONE da query.
• LABEL COLUMN – Coluna da query que identifica a descrição do ícone. No nosso menu, utilizaremos a coluna NOME da query.
• IMAGE ATTRIBUTES – Pode-se informar propriedades HTML do ícone.
• HTML ALT TEXT – É utilizado par exibir uma descrição quando a do ícone não puder ser apresentada. Pode-se utilizar as variáveis de substituições referenciando as colunas da query utilizando, por exemplo, #COLUMN_ALIAS#.
• HTML TITLE TEXT – Título do ícone.
• CUSTOM LINK – Pode ser informado o comando de criação imagem e links em HTML manualmente. Por exemplo: “<a href=”#LINK#”><img src=”#ICONE#” title=”#NOME#” alt=”#NOME#” /><br />#NOME#</a>”. Onde as variáveis entre “#” são as colunas da query do relatório.

Salve as alterações e execute a página.

Por padrão do APEX, foram habilitados dois botões que permitem ao usuário escolher a forma de exibição do relatório, em forma de Ícones ou Linhas.

Agora vamos deixar automático para, assim que o usuário acessar a página, exibir em forma de ìcones, e também não permitir que o usuário altere a forma de exibição do relatório.

Edite novamente interativo, vá na aba “Report Attributes” até a seção “Seache Bar”, desabilite a exibição da barra de busca do relatório, salve as alterações:

Crie uma ação dinâmica, que transformará o relatório em ícone automaticamente sem a necessidade da ação do usuário:

1 – Dê um nome a ação dinâmica. Na propriedade “Event”, selecione “Page Load”:

2 – Determine a ação que será executada quando a página for carregada. Selecione o valor “Execute JavaScript Code” para a propriedade “Action”:

Na propriedade “Code”, coloque o código responsável por mudar o relatório em Ícone.

Veja o resultado final:

Neste artigo, vimos como criar um menu de ícones que pode ser uma solução fácil e com rápido desenvolvimento para colocar em sua aplicação.

Para acessar aplicação demo da nossa série de artigos utilize o link abaixo:

http://apex.oracle.com/pls/apex/f?p=30361

Usuário: DEMO

Senha: imasters