Template / Layout

Olá, hoje quero trazer aqui sobre a customização de template da sua aplicação. Trouxe o exemplo de uma região de resumo de uma parte do processo, é um relatório clássico do Apex, mas se customizar pode-se ter o resultado da segunda imagem, sendo ele mais elegante e compacto.

Imagem 1

 

Imagem 2

 

Como chagar a esse resultado?

Coloque o CSS abaixo no arquivo (.css) e referencie na aplicação, ou pode ser colocado no campo CSS inline dentro da página, mas isso se for apenas para testar. O ideal é colocar no arquivo para que toda a aplicação possa usar.

 

#cabecalho {

 -webkit-box-shadow: 0px 2px 0px 0px rgba(228,225,221,0.98);

 -moz-box-shadow: 0px 2px 0px 0px rgba(228,225,221,0.98);

  box-shadow: 0px 1px 0px 0px rgba(228,225,221,0.98);

}

 

 

.t-AVPList {

  margin: 0px;

  padding: 0px 5px 0px;

  list-style: none;

  background-color: #ffffff;

}

 

.T-List {

  padding: 2px 6px;

  border-radius: 4px;

  background-color: #ffffff;

  margin: 2px;

  text-align: center;

  display: inline-block;

  color: #606060;

  font-size: 0.7rem;

}

 

.t-TList-label {

  font-weight: 700;

 }

 

Bom, próximo passo é ir nos componentes compartilhados > user interface > templates.

Depois localize um template do tipo Report e nome Standard.

Copie, eu coloquei o nome de "relatorio cabecalho". Edite para realizar a customização. Em Before row adicione:

<dl class="t-AVPList #COMPONENT_CSS_CLASSES#" #REPORT_ATTRIBUTES# data-region-id="#REGION_STATIC_ID#">

E column template adicione:

 <div class="T-List">

    <span class="t-TList-label">

    #COLUMN_HEADER#:

    </span>

    <span class="t-TList-value">

    #COLUMN_VALUE#

    </span>

</div>

E por fim na região do resumo indicar esse novo template, na aba dos atributos > aparência > template.

E então, vamos customizar nossas aplicações? Se precisar de ajuda, deixe nos comentários ou entre em contato por email.

Um abraço,

Daia

APEX Brings Gen AI to Developers - Novidades

 Olá.

Já viram as novidades do Apex?

Assista ao vídeo

Inativar botão de ação no report

Oi, parece que mil anos se passaram desde a última postagem, vou voltar a postar aos poucos e tentar manter. 

 Bom, vamos lá. Eu tinha uma coluna para inativar o registro, porém em registros onde já estavam inativas eu quero inativar o botão. 

 Primeiro passo: Incluir uma coluna no select para identificar se é para desabilitar o botão ou não.

(decode na query)

Segundo passo: No botão que vai receber a ação, coloquei a coluna que vai ter a informação se desabilita ou não.

(<button type ="button" &STATUS.  .....)

Na visualização, o botão vai ficar apagadinho, sem ação...

(Ativo > Não, penúltima linha)

APEX 5.1 Early Adopter Está disponível

Antes de cada versão principal do Oracle Application Express, é realizado um "Early Adopter" hospedado da APEX. Isso é semelhante a um programa beta hospedado, e todos são bem-vindos para participar e fornecer seus comentários. Esta é uma oportunidade para a comunidade participar antes do lançamento. O URL para acessar a versão Early Adopter da APEX está em:

https://apexea.oracle.com

Na página Login, você verá um link para "Problemas Conhecidos" e também para fornecer comentários.

Existem alguns novos recursos interessantes nesta versão, incluindo:

• Grade interativa
• Integração com gráficos Oracle JET
• Muito melhor suporte RTL no Universal Theme
• Capacidade de ter várias páginas abertas ao mesmo aplicativo APEX e isolar o estado da sessão
• e muito mais...

Algumas coisas a ter em mente:

Isso está hospedado apenas. Não é disponibilizado lançamentos antecipados do Application Express para instalação no local. 

Tudo o que você faz nas instâncias do Early Adopter da APEX deve ser considerado descartável. Não há garantia de que os aplicativos APEX que você criar na instância do Early Adopter sejam instaláveis ​​na versão de produção do Oracle Application Express. 

Normalmente, é realizado 2 ou 3 lançamentos antecipados antes da produção. No momento em que escrevemos este artigo, está no Early Adopter 1. À medida que o conjunto de recursos e a qualidade da versão do APEX se estabilizar, será derrubado a instância do Early Adopter 1 e a substituido pelo Early Adopter 2. Não haverá atualização no local . Você precisará se inscrever para um espaço de trabalho tudo de novo.

Se você está lendo este post depois que o  Application Express 5.1 estiver lançado, o endereço https://apexea.oracle.com não estará mais disponível.

Texto de: joelkallman-Oracle 

Feliz Natal!

Faça você mesmo o Natal acontecer, empregando as maiores ferramentas do ser humano em desuso – AMOR E PAZ.

(Erasmo Shallkytton)

Exportando do Forms para Apex

Oi, o assunto hoje é sobre exportar as páginas em Forms para o Apex. Existem algumas empresas que já estão iniciando a migração, por isso vou fazer um post sobre isso.

Observação: O apex deve estar no mesmo lugar onde esta o banco e o forms.

Passo 1: É necessário que seja transformado o forms em XML, na instalação do Oracle tem dentro do Oracle Developer Suit o FORMS2XML que é quem faz a conversão.

No comando cmd da máquina, entre na pasta onde você mantém o .fmb e informe o comando frmf2xml <<nome_do_FMB.fmb>> depois é só dar um enter, que na mesma pasta onde tinha o fmb, vai estar o .XML, que este será importado para o Apex.

Obs. onde mostra na imagem abaixo [options] são alguns parâmetros de configuração, não lembro agora.

Veja o exemplo.

Passo 2: Entre no Apex, Application Builder.

Na barra de opções, clique em Application Builder e quando abrir a lista de opções clique em Migrar. (Veja no exemplo abaixo)

Passo 3: Na etapa de Migração de aplicações crie um novo projeto.

  

Passo 4: Fazer Upload: lembrando que todos a serem importados devem ser os que foram transformados em XML.

 

Clique em Upload de Arquivo.

Para o tipo de arquivo deixe a opção : Módulo do Forms fmb XML, e abaixo informe o arquivo, e depois clique em fazer upload, conforme mostra na imagem abaixo. 

 Depois de importar clique em Criar. (Veja na imagem abaixo)

Passo 5: Quando clicar em Criar, vai ficar listado as telas que foram importadas, e podem agora fazer parte de uma aplicação. Então nete passo clique em Criar Aplicação.
Obs. Não dá de importar já dentro da sua aplicação.

Passo 6: Defina o nome da Aplicação  e a interface com o usuário e deixe marcado a opçãocriar aplicação baseado no projeto de migração, em seguida clique em próximo.

Passo 7: Adicione páginas a aplicação caso necessário e em seguida clique em próximo.

Passo 8: Defina um tema para a aplicação, clique em próximo.

 

Passo 9: Por fim clique em criar como mostra a imagem abaixo. 

Passo final: Executar a aplicação e fvisualizar como a tela Forms ficou no Apex.

Bom é isso, caso tenha ficado alguma dúvida entre em contato.

Abraços.

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