Alterando a Aparência do Site com Temas

É possível alterar a aparência do aplicativo da webIBM® Rational Asset Manager ao criar folhas de estilo em cascata customizadas e fornecer imagens customizadas.

Antes de Iniciar

Se os arquivos padrão forem modificados para customizar seu tema para uma liberação anterior do Rational Asset Manager, antes de atualizar para a versão 7.5.2.3, faça download do tema atual. O tema atual é sobrescrito durante uma atualização pelo tema padrão para a versão. Após concluir a atualização do Rational Asset Manager para o servidor, reaplique o tema para uma instalação de teste para identificar problemas de versões anteriores.

Sobre Esta Tarefa

Um administrador de repositório pode fazer download de um archive que contém as imagens e as folhas de estilo em cascata que definem a aparência do aplicativo da web. Após a customização desses arquivos, o administrador de repositório fará upload do archive atualizado para implementar a mudança.

Procedimento

  1. Efetue login no Web client do como um administrador de repositório.
  2. Clique em Administração.
  3. Na barra lateral de Administração do Repositório, clique em Ferramentas.
  4. Na página Ferramentas, localize a seção Gerenciar Temas.
  5. Clique em Fazer Download do Tema Atual.
  6. Salve o archive currentTheme.zip no seu computador local. Esse archive contém folhas de estilo em cascata (CSS), JavaServer Pages (JSP) e arquivos de imagem.
  7. Extraia o archive. Mantenha a estrutura de pasta.
  8. Crie um ou mais arquivos CSS e salve-os no diretório theme/custom/css.
  9. Revise as folhas de estilo padrão que foram instaladas com o Rational Asset Manager. Para quaisquer estilos que deseja alterar, copie as regras de estilo no seu arquivo CSS e edite os estilos. As mudanças feitas nos arquivos CSS novos substituem as regras de estilo nas folhas de estilo padrão.
    Importante: Não modifique as folhas de estilo padrão no archive de tema. Essas folhas de estilo são alteradas de liberação para liberação e são sobrescritas quando é feito upgrade do Rational Asset Manager.
  10. Inclua suas folhas de estilo customizadas para theme/custom/cssIncludes.jspf como links. Exemplo:

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/${applicationScope.themePath}/custom/css/jkeEnterprises.css" />

  11. Crie uma pasta images no diretório customizado e salve os arquivos de imagens usados no seu tema dentro dele. Exemplo: theme/custom/images-jke-enterprises
  12. Crie um archive que contenha os arquivos atualizados. É possível customizar o nome do archive, mas a pasta nomeada "theme" deve ser a pasta raiz do archive. Esses arquivos devem ser incluídos no archive de tema além dos arquivos CSS customizados criados, mesmo se nenhuma mudança for feita:
    • theme/custom/header.jspf: contém a imagem de logotipo, o nome do usuário conectado e os links de Login, Logout, Ajuda e Extensões
    • theme/custom/cssIncludes.jspf: contém as tags <link> para seus arquivos CSS customizados.
    • theme/custom/homeContent.jspf: contém a área de conteúdo da página inicial
    • theme/custom/jspHeader.jspf: contém detalhes adicionais do banner
    • theme/custom/requestAccess.jspf: Este arquivo é exibido abaixo do formulário de conexão na página de conexão. No tema padrão, não há nada neste fragmento, porém, você pode desejar incluir links, como "Esqueci a senha" ou "Registrar", que são comuns para os aplicativos da Web.
    • theme/custom/requestAccessForm.jspf: Este arquivo é exibido na página inicial, abaixo do formulário de conexão. No tema padrão, não há nada neste fragmento, porém, você pode desejar incluir links, como "Esqueci a senha" ou "Registrar", que são comuns para os aplicativos da Web.
    • theme/custom/css/advanced.css: folha de estilo em cascata avançada para dimensionamento e posicionamento
    • theme/custom/css/basic.css: folha de estilo em cascata básica para imagens, planos de fundo e estilos
    • theme/custom/css/hideRightColumn.css: folha de estilo em cascata para páginas que não possuem uma coluna direita
    • theme/custom/css/pageLayout.css: folha de estilo em cascata para o layout de página geral
    • theme/custom/css/showLeftColumn.css: folha de estilo em cascata para páginas que possuem uma coluna esquerda
  13. Na página Ferramentas, na seção Gerenciar Tema, clique em Navegar.
  14. Localize o archive atualizado.
  15. Clique em Upload.

Resultados

O novo tema é aplicado. Se as mudanças não forem visualizadas, clique no botão atualizar ou recarregar no navegador. Você talvez tenha também de limpar o cache do seu navegador da Web. Não é necessário reiniciar o aplicativo da Web. Para verificar se o tema foi aplicado corretamente, visualize várias páginas do aplicativo da Web. Se ocorrerem resultados inesperados, modifique os arquivos CSS customizados e faça upload do tema novamente.

O que Fazer Depois

Salve uma cópia de seu archive de tema. Se tiver que restaurar o tema original, clique em Restaurar o tema padrão.

Se o aplicativo da Web for reimplementado ou atualizado para uma nova versão, o tema padrão será aplicado e você deverá fazer upload do tema customizado.


Feedback