segunda-feira, 2 de dezembro de 2013

Slide Show no APEX

Objetivo: Criar um slide show com gráficos.

- Criar uma página em branco, ou com uma região html.

- Editar a página e incluir os arquivos javascript e de CSS;
 Inclua no campo JavaScript > File URLs os arquivos:
#APP_IMAGES#bootstrap.min.js
#APP_IMAGES#holder.js
#APP_IMAGES#carousel.js
#APP_IMAGES#bootstrap.js

 Inclua nos campos CSS > File URLs os arquivos:
#APP_IMAGES#bootstrap.css
#APP_IMAGES#bootstrap.min.css
#APP_IMAGES#carousel.css

Obs. Coloquei na frente dos arquivos #APP_IMAGES#, pois adicionei-os ao APEX na parte de componentes compartilhados> Imagens, assim o APEX saberá onde está os arquivos.

E no campo HTML Header incluir:
<link href="#APP_IMAGES#bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="#APP_IMAGES#html5shiv.js"></script>
<script src="#APP_IMAGES#respond.min.js"></script>
 <![endif]-->

(veja nas imagens abaixo, a estrutura da página e local para colocar os arquivos na edição)


- Criar as regiões que deseja apresentar no slide, no meu caso seriam gráficos, então criei mais 4 regiões com gráficos. Nestes gráficos eu informei que a região Mãe seria a do HTML que eu chamei de Slide.

 - Na região principal a de HTML, tem o seguinte código:
   <li data-target="#carousel-example-generic" data-slide-to="4"></li>
Deve ser acrescentado caso deseje um novo slide. (veja na imagem abaixo)





* Nas regiões de gráfico deve ser inserido no Header and Footeras informações:
No primeiro gráfico, ou na primeira região que deverá ser apresentada no slide:
Region Header:
<div class="item  active" align="center">

Demais regiões:
 Region Header:
<div class="item" align="center">

Region Footer:
</div>

Na última região do gráfico inclui além do fechamento do div, o seguinte:
 </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
O resultado do slide dentro do APEX será o seguinte...


Todos os direitos a get Bootstrap. http://getbootstrap.com/
Os arquivos estão disponíveis para downoad na página do Bootstrap.

Abraços

quarta-feira, 6 de novembro de 2013

Abrir link em nova aba


Oi, hoje o post é curtinho,  o assunto é abrir o link em uma nova aba, pode ser usado javascript entro outros, mas a solução interna do Apex é simples e o mais importante, Funciona!

segunda-feira, 7 de outubro de 2013

Imagens diferentes no link

Hoje o post é sobre uma solução para colocar duas imagens diferentes no link de edição do registro do relatório.
Vamos lá...

Na região da origem do relatório a consulta SQL, incluí uma coluna chamada IMG_STS, quando o Status for igual a 1 será o nome da imagem que desejo que apareça quando estiver ativo, e a outra será o nome da imagem para quando estiver inativo. Veja no exemplo abaixo.

Edite a coluna que conter o link da região.

Na parte das propriedades da coluna de link, vamos substituir o nome da imagem que aparece de sugestão e colocar o nome da coluna que contém o nome da imagem entre #, Exemplo: #IMG_STS#

Originalmente neste campo vinha #IMAGE_PREFIX#, mas alterei para #APP_IMAGES#, pois adicionei a minha imagem no repositório de imagem dos componentes compartilhados.


É isso aí...
Qualquer dúvida, entre em contato.

Abraços!


quinta-feira, 3 de outubro de 2013

Incluir um banner na aplicação Apex

Incluir banner na aplicação...





Primeiro passo para incluir uma imagem/banner no cabeçalho da aplicação é cadastrar a imagem.

      1. Cadastrar imagem
Entre em aplication builder > aplicação no qual será inserida a imagem, item Componentes compartilhados, conforme mostra na ilustração abaixo.

Aplication Builder > Aplicação> Componentes compartilhados.
Na página de componentes compartilhados vê a região de arquivos.

Nesse item escolha a opção imagem.

Irá redirecionar para a página contendo todas as imagens cadastradas para a aplicação selecionada, para adicionar mais um clique em criar.

Informe na primeira opção a aplicação no qual deseja associar a imagem, no segundo item escolha  o arquivo, caso tenha alguma observação a ser feita,preencha o campo com as informações a serem acrescentadas em seguida clique em Fazer Upload.

       2. Incluir imagem na aplicação.
Ainda no item de componentes compartilhados escolha a opção Editar definição.

Clique na aba Interface do usuário, conforme mostrar a imagem abaixo.

Na área de logotipo, informe que deseja mostrar a imagem  e no campo de logotipo deve colocar as informações de onde a imagem está.

Obs.:
Para saber as propriedades e valores a serem informados neste campo  tem na ferramenta a opção de localizar na barra do caminho detalhado, veja abaixo, se assemelha a uma lanterna.

Quando abrir vá até a aba Imagem, no campo Mostrar indique Itens  da Aplicação e clique em Definir.
Ao aparecer as imagens clique sobre a que será utilizada, copie a referência estática, conforme mostra na imagem abaixo.


Então é isso!
Abraços

sexta-feira, 13 de setembro de 2013

P/ programador

Feliz dia do programador.

P.S: Essa não sou eu não... achei essa imagem no google image.

domingo, 1 de setembro de 2013

Inserindo Menu na aplicação

Hoje o post é sobre como criar um menu na aplicação. O objetivo é Criar a árvore do menu, alterar o modelo e aplicar a região. Segue abaixo os passos.

Dentro da sua aplicação, crie uma nova página.


Na lista de opções que o APEX traz escolha a opção Página Global, tudo que conter nesta página será visualizado nas outras, por exemplo o menu, vamos cria-lo e coloca-lo, na coluna 1, nas demais páginas vamos colocar o conteúdo na coluna dois, para que fique ao lado do menu.


O número da página pode ser mantido 0, e em seguida clique em concluir.


Edite a página zero e clique no símbolo de adição no bloco  de regiões.

Escolha a opção de região do tipo árvore.


Só lembrando para quem quiser fazer mais dinâmico deve ter uma tabela (abaixo falo mais sobre isso) .
Etapa de Atributos de Execução: Defina o Título da região, e clique em Próximo.
                            

Etapa de Modelo de Árvore: Define nesta etapa qual o modelo desejado, no repositório só existe os três que aparecem na imagem abaixo. Em seguida clique em próximo.

Etapa de Definição da Tabela. Criei uma tabela para armazenar a código de menu, descrição, código do parente, caso tenha módulos e tenha registros filhos, e a página que deverá abrir. Clique em próximo.
                          

TABELA CRIADA:
                         

Etapa de Consulta: Defina nas opções do menu conforme as colunas da tabela criada que contém as informações (veja na imagem a seguir). Clique em próximo. 



Etapa de Where e Order by: Caso tenha alguma cláusula de restrição ou ordenação deve ser informada nesta etapa, caso não tenha deixe em branco e clique em próximo.

Etapa de Atributos da Árvore: Nesse momento não defini nenhum atributo, pois depois de terminar de criar a região vou editar e alterar manualmente. Clique em próximo.

Etapa de Exibição: Caso o menu tenha alguma restrição de exibição deve ser informado nesta etapa. Depois de informar clique em Criar Região.

Criado a região vamos editar o link do menu. Na hora de criar o menu ou a árvore, não informei nada, então vou editar  e informar. Na página vá até a parte de regiões, clique em Árvore.


Na parte onde aparece a consulta que foi montada para apresentar a região altere a linha onde tem a opção "as link" veja na imagem abaixo.
Ficou 'f?p='||:APP_ID||':'||PAG_MENU||':'||APP_SESSION||'::::' as link, onde o Apex vai pegar  o ID da aplicação com o valor cadastrado na coluna PAG_MENU na tabela do select do menu e vai colocar o valor do estado da sessão.

Agora, devemos reposicionar as regiões do nosso modelo, na região de componentes compartilhados  na parte dos modelos clique na opção referente a página.(veja na imagem abaixo).


Quando abrir a página, vá até a opção de Corpo do Texto, onde indica a posição das regiões, na imagem. No meu modelo criei uma tabela em HTML e coloquei a referencia das posições uma ao lado da outra, assim todas as regiões 2 ficarão ao lado do menu.

Em seguida vá à região de Interface com o usuário, no item Ponto de Exibição clique na lanterna, aparecerá uma guia mostrando onde está localizado cada posição escolha a posição da região 1, assim o menu ficará nesta região em todas as páginas. (Veja na imagem abaixo)
Nas páginas a serem criadas deve  ser colocado as regiões na posição da região 2, Assim ficarão lado a lado.
Veja no meu exemplo.
Menu - Região 1
Consultar...  - Região 2
* Agora só ajustar para ter um espaço entre as regiões... mas isso fica pra outra hora.

quarta-feira, 26 de junho de 2013

Criar e Alterar Temas

Oi Pessoal, hoje trouxe um post para falar de temas.
Quando é criada a aplicação, é permitido escolher um layout/tema, mas quando não fica a gosto, pode ser alterado, abaixo os passos para alterar o tema.


      No ambiente inicial do Apex, escolha a opção Application Express > ‘Aplicação com o tema a ser alterado’ > Componentes compartilhados, irá aparecer na sua tela, uma estrutura semelhante à imagem abaixo. No bloco Interface do Usuário escolha a opção Temas.


No ambiente de temas, vai constar o que está sendo utilizado na sua aplicação, para incluir um novo tema clique em Criar. (Exemplo imagem abaixo)   
O  Apex vai montar um o processo em etapas, como pode ser visualizado na imagem são 4 etapas, a primeira, definir o método. No caso deste exemplo vou utilizar uma já existente no repositório do Apex, mas pode ser uma nova ou de uma exportação. (Exemplo imagem abaixo) 

Escolha a opção e clique em Próximo >
Interface com o usuário, opção Desktop, clique em próximo. (Exemplo imagem abaixo) 

Identificar tema, por omissão no campo de Tipo de Tema vem com a informação Temas padrão, mas ali tem outras opções, veja por exemplo  a opção Temas do Legado, tem 20 opções de escolha. Selecione a desejada e clique em próximo. (Exemplo imagem abaixo)


Confirme  o tema, e o Apex irá direcionar para o repositório com os temas utilizados  na sua aplicação, que neste momento terá duas opções.
Para trocar de tema clique no botão Alterar Tema. (Exemplo imagem abaixo) 

Etapa 1, deve ser identificado o tema, no tema atual, deve constar o tema que a aplicação está utilizando e no Alterar para tema deve estar a opção no qual  deseja aplicar para a apresentação, a seguir clique em Próximo.(Exemplo imagem abaixo) 

Etapa 2, Verificação de compatibilidade. Irá mostrar as especificações do tema para cada tipo de modelo, em seguida clique em Próximo.(Exemplo imagem abaixo)   

Clique em Alterar tema para efetivar a mudança.(Exemplo imagem abaixo)
 

Pronto! Todas as páginas da sua aplicação serão alteradas para este novo tema.