Dependendo dos seus requisitos, você pode adicionar CSS a:
- Nível de página – os estilos mencionados no arquivo CSS serão restritos a uma página específica
- Modelo de página – CSS estará disponível para todas as páginas que usam esse modelo de página específico
- Interface do usuário – CSS as regras serão aplicadas a todo o aplicativo - Componente individual - aplica estilos a componentes individuais em uma página do aplicativo
- Botão icônico - Usando uma imagem de lixeira substituindo o texto de exclusão do botão de exclusão
- Estilo de cabeçalhos de coluna IR - Usando cores de primeiro plano e de fundo aos títulos das colunas de um relatório interativo.
Para testar os três primeiros casos, você fará upload de um arquivo CSS personalizado para definir o estilo da página de login do aplicativo de banco de dados de exemplo. Você pode instalar este aplicativo na App Gallery | Aplicativos de amostra . O arquivo CSS é denominado main.css no meu cenário e contém as seguintes regras. A primeira regra será usada para criar uma borda arredondada e colocar uma sombra inserida em torno das regiões da página. O segundo adiciona uma cor de fundo coral a todas as páginas do aplicativo. As duas regras finais serão usadas para colorir os títulos das colunas do relatório interativo.
CSS permite que você especifique seus próprios seletores chamados “id” e “class”. O seletor de id é usado para especificar um estilo para um elemento único e exclusivo. Ele usa o atributo id do elemento HTML e é definido com um identificador "#". O seletor de classe , por outro lado, é usado para especificar um estilo para um grupo de elementos. Isso significa que você pode definir um estilo específico para muitos elementos HTML da mesma classe. Ele usa o atributo de classe HTML e é definido com um "." identificador. No cenário atual, estamos usando uma classe chamada região .
Execute as seguintes etapas para fazer upload do arquivo CSS:
1. Vá para a página Componentes Compartilhados e clique em Arquivos de Aplicativos Estáticos na seção Arquivos .
2. Clique no botão Carregar arquivo .
3. Na caixa de diálogo Carregar arquivo(s) de aplicativo estático , clique em Escolher arquivos , selecione o arquivo main.css no código-fonte do livro e clique em Carregar . O arquivo CSS será adicionado à listagem de arquivos estáticos do aplicativo. Copie a entrada de Referência que aparece nesta página para sua área de transferência selecionando o texto (#APP_IMAGES #main.css ) e pressionando Ctrl+C . A string de substituição APP_IMAGES é usada para fazer referência a imagens carregadas, JavaScript e folhas de estilo em cascata que são específicas de um determinado aplicativo e não são compartilhadas por muitos aplicativos.
Nível da página
Conforme mencionado anteriormente, a opção Nível de página permite aplicar estilos mencionados em seu arquivo CSS a componentes de uma página específica. Neste exercício, você aplicará a regra (mencionada no arquivo main.css) a uma região na página de login do aplicativo de banco de dados de exemplo adicionando a referência do arquivo CSS à definição da página.
1. Abra a página Login (Página 101) no Page Designer e clique no nó raiz – Página 101: Login .
2. Role para baixo até a seção CSS e insira #APP_IMAGES#main.css na propriedade URLs do arquivo . A propriedade File URLs aceita URLs de arquivos Cascading Style Sheet (CSS) carregados nesta página. Os URLs de arquivo inseridos aqui substituem a string de substituição #PAGE_CSS# no modelo de página. Você pode adicionar várias referências de arquivo a esta propriedade adicionando URLs em novas linhas.
3. Agora, clique na região Conteúdo estático do aplicativo de banco de dados de exemplo abaixo. Role para baixo até a seção Aparência e insira região (a classe definida no arquivo main.css) para a propriedade Classes CSS .
4. Salve seu trabalho e execute o aplicativo. A página de login deve ser semelhante à captura de tela a seguir.
Nível do modelo de página
Neste exercício, você disponibilizará o CSS para todas as páginas do aplicativo usando um Page Template específico .
1. Vá para Componentes Compartilhados | Modelos .
2. Clique no ícone Copiar modelo (na coluna Copiar) que representa o modelo de página Padrão, conforme mostrado na figura a seguir, para fazer uma cópia deste modelo.
3. Na página Copiar modelo , insira um nome para o novo modelo – por exemplo, Cópia padrão . Clique no botão Copiar para concluir o processo. O novo modelo de página (cópia padrão) aparecerá logo abaixo do modelo de origem na página Modelos.
4. Clique no nome do novo modelo de página para modificar suas definições na página Editar modelo de página . Role para baixo até a seção Cabeçalho e digite <link href="#APP_IMAGES#main.css" rel="stylesheet" type="text/css"> na substituição #HEAD#, conforme ilustrado na captura de tela a seguir. Clique em Aplicar alterações .
5. Vá para Componentes Compartilhados | Temas para tornar o novo modelo de Cópia Padrão o modelo de página padrão do seu tema.
6. Clique no nome do tema atual – no meu caso, é Tema Universal - 42 .
7. Na página Criar/Editar Tema , clique na guia Padrões do Componente , defina o atributo da Página como Cópia Padrão e aplique a alteração. A ação define o modelo Cópia Padrão como modelo de página padrão para seu aplicativo. Se um desenvolvedor não escolher explicitamente um modelo (no Page Designer), o mecanismo Application Express usará o modelo especificado aqui. Se você acessar a página Modelos em Componentes Compartilhados neste estágio, verá que o modelo da página Cópia Padrão foi marcado como modelo padrão, conforme mostrado na figura a seguir. Após essa configuração, cada página adicionada a este aplicativo usará a Cópia Padrão (mostrada como Tema Padrão ) como Modelo de Página no Designer de Página.
8. Abra a Página 1: Exemplo de Aplicativo de Banco de Dados, clique em seu nó raiz e altere o Modelo de Página de Padrão para Cópia Padrão (ou Tema Padrão ). Você terá que executar esta etapa para todas as páginas do aplicativo existentes (que ainda não estejam marcadas como Tema Padrão) para usar o novo modelo.
9. Clique na região Conteúdo estático do aplicativo de banco de dados de exemplo e insira a região para a propriedade Classes CSS . Repita esta etapa também para a região da lista de emblemas do painel.
10. Salve e execute a página. As duas regiões da página serão transformadas conforme mostrado na seção Após a figura a seguir.
Na etapa 9, você especificou explicitamente a classe ( região do arquivo CSS) que deseja aplicar às duas regiões. Suponha que você queira que o APEX aplique automaticamente uma cor de fundo específica ou uma imagem de fundo a todas as páginas do aplicativo sem definir explicitamente essa cor ou imagem em cada página. Sem problemas! Aqui está a solução simples:
11. Vá para Componentes Compartilhados | Modelos e clique no modelo de página Cópia padrão .
12. Clique na guia Folha de estilos em cascata .
13. Na seção Inline , digite .t-Body {background-color : coral} e clique no botão Aplicar alterações .
Execute o aplicativo e teste seu trabalho. Todas as páginas marcadas como Tema Padrão ou Cópia Padrão serão mostradas com a cor de fundo especificada. Para evitar duplicação e aproveitar o cache de arquivos estáticos do navegador, você pode colocar esse código em seu arquivo CSS externo.
Interface de usuário
Neste exercício, demonstrarei como aplicar CSS no nível da interface do usuário, que fornece um mecanismo centralizado para aplicar suas regras CSS personalizadas a um aplicativo inteiro.
1. Abra a página P3 (produtos) e defina o modelo de página como padrão . Execute esta página e observe que ela não possui nenhuma cor de fundo.
2. Vá para Componentes Compartilhados e clique em Atributos da Interface do Usuário .
3. Clique no ícone Editar Área de Trabalho (simbolizado por um pequeno lápis). Clique na guia Cascading Style Sheets e anexe #APP_IMAGES#main.css ao texto existente na caixa File URLs, conforme ilustrado na captura de tela a seguir. Desta forma, o arquivo CSS (main.css) será carregado em todas as páginas da aplicação. Clique em Aplicar alterações .
Estilizando componente de página individual
3. No Page Designer, na mesma página Detalhes do Cliente, clique no botão DELETE e defina o atributo Label deste botão como <img src="#APP_IMAGES#delete.png " height="25" width="25"> para exibir um ícone de exclusão, conforme mostrado na figura a seguir. A etapa pressupõe que você já carregou o arquivo de ícone delete.png.
No breve exercício a seguir, mostrarei como aplicar cores de primeiro e segundo plano aos títulos de coluna de um relatório interativo.
1. Abra o aplicativo de banco de dados de exemplo e clique no menu Produtos para acessar o relatório interativo Produtos.
2. Clique com o botão direito no cabeçalho da coluna Nome e selecione Inspecionar no menu de contexto. Uma nova janela será aberta à direita deste relatório (conforme mostrado na Figura 9) exibindo o id desta coluna na tag HTML do cabeçalho da tabela (th).
3. O APEX gera IDs exclusivos para colunas IR, conforme destacado na Figura 9, que precisamos substituir por alguns nomes significativos. Portanto, abra o código-fonte desta página no Page Designer. Expanda o nó Colunas na região Produtos e clique na coluna PRODUCT_NAME . No painel de propriedades, role para baixo até a seção Avançado e insira hColor para a propriedade Static ID . Salve e execute a página. Inspecione a coluna Nome novamente, que agora deve exibir id="hColor" para o cabeçalho da tabela da coluna.
4. Adicione o seguinte código ao arquivo main.css ou insira-o na propriedade Inline CSS da página:
Aplique essas regras de coloração a outras colunas IR definindo o atributo Static ID como hColor . Salve e execute a página para ver o reflexo.
Nenhum comentário:
Postar um comentário