Movendo seu tema do WebSphere Portal para dispositivo móvel, Parte 1: Torne seu tema do WebSphere Portal 6.1.x ou 7.x modular

Como converter um tema para a arquitetura modular apresentada no WebSphere Portal 8.0

O IBM WebSphere® Portal 8.0 apresentou uma arquitetura modular que facilita o desenvolvimento de temas. Depois que a migração para o Portal 8.0 é concluída, modularizar seus temas personalizados é, geralmente, a primeira tarefa na inclusão de novos recursos ao seu site do Portal. Este artigo aborda as etapas para converter um tema do Portal 6.1.5 para a arquitetura modular. Para ajudá-lo a planejar sua conversão de tema, também estão incluídas dicas e estimativas de tempo.

David Nixon, Chief Programmer Workplace Services Express and WebSphere Portal Express, IBM

author photo - david nixonDavid Nixon é Chief Programmer do WebSphere Portal 8.0.0.1. David trabalhou no Portal e no Portal Express por diversos anos e contribuiu em diversas áreas, incluindo desenvolvimento de tema, recursos de portal virtual e cenários de implementação.



01/Nov/2013

Introdução

Ao migrar de uma versão do Portal para outra, uma melhor prática é separar a migração do Portal da inclusão dos novos recursos do Portal em seu tema. O objetivo é migrar seu tema personalizado da versão anterior do Portal para a versão atual no estado em que se encontra, para que nada seja adicionado ao tema durante a migração.Como muitos dos recursos do Portal são evidenciados pelo tema do Portal 8.0, a inclusão de recursos é geralmente uma atividade de desenvolvimento de temas que ocorre após a conclusão bem-sucedida da migração geral.

Usuários diferentes incluem recursos ao tema de maneiras distintas:

  • Uma opção é adicionar recursos individuais ao tema customizado. Por exemplo, é possível incluir a marcação/classificação expondo o widget de marcação/classificação Dojo em sua superfície de tema existente.
  • Outra maneira é começar do zero, usando o tema do Portal 8.0.0.1 como ponto de partida. Alguns usuários escolhem essa opção se querem dar ao site uma aparência totalmente nova.
  • Um meio-termo entre essas duas abordagem é realizar a modularização em seu tema customizado existente. A vantagem dessa abordagem é o fato de que, com o mínimo de esforço, é possível incluir recursos ao mesmo tempo que mantém a aparência básica de seu site existente. Este artigo irá abordar esta abordagem.

Pré-requisitos

IBM WebSphere Portal
Este artigo baseia-se no WebSphere Portal versão 8.0, e o fixpack 8.0.0.1 é obrigatório. Após migrar para o 8.0.0.1, você deverá habilitar os novos recursos usando a tarefa de configuração "enable-new-8001-features". Consulte a documentação do WebSphere Portal para obter as instruções de instalação. Além disso, consulte o Leia-me para obter instruções sobre como executar a tarefa "enable-new-8001-features".

Navegador da web
Recomenda-se o uso da versão mais recente do Mozilla Firefox com a extensão Firebug instalada. No entanto, qualquer navegador com suporte a CSS3 funcionará. A maior parte dos navegadores atuais agora acompanham suas próprias ferramentas de desenvolvimento integradas, mas os exemplos neste artigo fazem referência especificamente à Firebug.

Cliente WebDAV
Para atualizar o tema do WebSphere Portal, é necessário um cliente WebDAV. Nós utilizamos o davfs2 no Linux. É possível usar qualquer cliente WebDAV suportado pelo WebSphere Portal. Consulte Connecting to the Portal WebDAV with 8.0 para obter detalhes.

Linux
O desenvolvimento de temas pode ser feito em qualquer plataforma, mas este artigo faz referência a ferramentas encontradas na maior parte das distribuições Linux. Ferramentas semelhantes também podem ser encontradas no Windows e em outros sistemas operacionais.


Introdução

O Centro de Informações do Portal discute as vantagens da estrutura modular de tema e seu funcionamento. Ele dissocia a ativação do recurso da codificação do tema. É possível desenvolver temas com mais facilidade, com pouco conhecimento sobre os detalhes de como o código subjacente de um recurso funciona. Os pontos lógicos são fornecidos nos casos em que os módulos podem contribuir com dados em um tema no tempo de execução. É possível otimizar essas contribuições combinando-as sempre que possível. É possível combinar diversas fontes remotas distintas em uma única solicitação, para obter maior desempenho.

É possível começar com qualquer tema, porém, para este artigo, o tema "Tab Menu – Page Builder" foi utilizado como exemplo. (Este tema também é chamado de tema "Enhanced", pois é o nome do arquivo EAR no qual ele é desenvolvido.) É possível fazer o download da versão modularizada desse tema no final deste artigo.


1. Copiar o tema Portal 8.0.0.1

Para concluir esta etapa, siga as instruções no Centro de Informações ("Create a copy of the theme"). Esta cópia do tema 8.0.0.1 é nosso ponto de partida para o tema "Modular Tab Menu".

Para esta etapa, é necessário:

  1. Copiar os recursos estáticos para seu tema
  2. Copiar os recursos estáticos para sua aparência
  3. Copiar os recursos dinâmicos para seu tema
  4. Vincular os recursos estáticos aos recursos dinâmicos para seu tema
  5. Modificar as referências de recurso dinâmicas para seu tema
  6. Modificar as referências de recurso dinâmicas para sua aparência

1a. Copiar os recursos estáticos para seu tema

Siga as instruções para copiar o recurso de tema 8.0.0.1 da lista de temas do WebDAV. Em nosso exemplo, a lista de temas foi montada da seguinte maneira:

Lista 1. Montar a lisa de temas com WebDAV
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/themelist/ /mnt/portal/dav/themelist

De acordo com as instruções no Centro de Informações, use o método que preferir para editar os arquivos _en.properties. Como há diversos arquivos de idiomas, utilizamos um script sed para fazer isso.

Lista 2. Definir o nome do tema com sed
cd /tmp/ModularTabMenu/metadata
find . -name "localized_*.properties" | xargs -n 1 sed -i "s/title=.*\$/title=Modular Tab Menu/g"

Isso fará com que o nome do tema seja "Modular Tab Menu," independentemente da configuração do código de idioma do navegador. Em geral, esse nome é visualizado apenas por administradores do Portal, porém, se a tradução for necessária, ela pode ser incluída no arquivo de propriedade localizado. Por exemplo, é possível definir o título em localized_fr.properties como "Modulaire Menu Tab".

DICA: alguns editores e ferramentas criam arquivos temporários no WebDAV que não são excluídos adequadamente. Limpe esses arquivos vazios.
Lista 3. Limpar arquivos temporários do WebDAV com o find
find /mnt/portal/dav/themelist/ModularTabMenu -type f -size 0 -delete
DICA: verifique se a cópia de seu sistema local para o WebDAV foi concluída com êxito.
Lista 4. Verificar o conteúdo de WebDAV com diff
diff -rq /tmp/ModularTabMenu /mnt/portal/dav/themelist/ModularTabMenu

Verifique e corrija quaisquer diferenças reportadas.

1b. Copiar os recursos estáticos para sua aparência

Siga as instruções para copiar a aparência "Hidden" do 8.0.0.1 na lista de aparências do WebDAV. Em nosso exemplo, a lista de temas foi aparências da seguinte maneira:

Lista 5. Montar a lisa de aparências com WebDAV
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/skinlist/  /mnt/portal/dav/skinlist

Em nosso exemplo, "ModularTabMenuStandard" foi usado como o nome do diretório criado no diretório da lista de aparências. De maneira semelhante ao que fizemos acima, um script sed foi usado para editar os arquivos localized*.properties e definir o título como "Modular Tab Menu Standard". Verifique os arquivos que foram copiados ao WebDAV.

1c. Copiar os recursos dinâmicos para seu tema

Para concluir esta etapa, siga as instruções no Centro de Informações ("Copy the dynamic resources for your theme").

Na seção Download deste artigo, há um arquivo EAR para esta etapa.

DICA: o aplicativo da web no arquivo EAR e os exemplos abaixo usam a raiz de contexto de "/wps/ModularTabMenu". No entanto, é possível usar qualquer raiz de contexto que seja adequada para seu contexto. Por exemplo, é possível usar uma raiz de contexto "/yourco/ModularTabMenu", "/yourco/theme" ou de apenas "/theme".

Para concluir esta etapa, siga as instruções no Centro de Informações ("Binding your theme to the context root of the web app").

Na seção Download deste artigo, há um arquivo xslt que simplifica a etapa de edição de output.xml.

Lista 6. Cortar o arquivo output.xml
xsltproc CustomOnly.xslt output.xml > bindTheme.xml

O arquivo bindTheme.xml resultante é consideravelmente menor e mais claro do que o original output.xml.

Lista 7. bindTheme.xml de amostra

Clique aqui para ver lista de códigos

Lista 7. bindTheme.xml de amostra

<?xml version="1.0" encoding="utf-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" build="wp8001CF05_001_18" type="update" version="8.0.0.1"
xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
  <portal action="locate">
    <skin context-root="/wps/defaultTheme80" uniquename="YOUR-UNIQUENAME-HERE" objectid="ZK_J15213K0J0EPD0IVLFLIDO1SG0"
    resourceroot="Hidden" action="update" active="true" default="false" domain="rel" type="default">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the resourceroot to the directory name of your skin-->
      <!--Use the skin OID ZK_J15213K0J0EPD0IVLFLIDO1SG0 in the allowed-skin tag in your theme-->
    </skin>
    <theme context-root="/wps/defaultTheme80" uniquename="YOUR-UNIQUENAME-HERE" action="update" active="true" default="false" 
    domain="rel" objectid="ZJ_J15213K0J0EPD0IVLFLIDO10G7" resourceroot="dynamicSpots">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the allowed skin to your new custom skin!-->
      <allowed-skin skin="YOUR-SKIN-OID-HERE" update="set"/>
    </theme>
  </portal>
</request>
Lista 8. bindTheme.xml de amostra após editar o tema Modular Tab Menu

Clique aqui para ver lista de códigos

Lista 8. bindTheme.xml de amostra após editar o tema Modular Tab Menu

<?xml version="1.0" encoding="utf-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" build="wp8001CF05_001_18" type="update" version="8.0.0.1"
xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
  <portal action="locate">
    <skin context-root="/wps/ModularTabMenu" uniquename="com.ibm.skin.modtabmenu.standard" objectid="ZK_J15213K0J0EPD0IVLFLIDO1SG0"
    resourceroot="ModularTabMenuStandard" action="update" active="true" default="false" domain="rel" type="default">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the resourceroot to the directory name of your skin-->
      <!--Use the skin OID ZK_J15213K0J0EPD0IVLFLIDO1SG0 in the allowed-skin tag in your theme-->
    </skin>
    <theme context-root="/wps/ModularTabMenu" uniquename="com.ibm.theme.modtabmenu" action="update" active="true" default="false"
    domain="rel" objectid="ZJ_J15213K0J0EPD0IVLFLIDO10G7" resourceroot="dynamicSpots">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the allowed skin to your new custom skin!-->
      <allowed-skin skin="ZK_J15213K0J0EPD0IVLFLIDO1SG0" update="set"/>
    </theme>
  </portal>
</request>

1e. Modificar as referências de recurso dinâmicas para seu tema

Para concluir esta etapa, siga as instruções no Centro de Informações ("Modifying the dynamic resource references for your theme").

Em nosso exemplo, a tarefa ConfigEngine foi usada para simplificar a criação das propriedades customizadas para o WP DynamicContentSpotMappings REP.

Lista 9. Criar propriedades customizadas
ConfigEngine.sh modify-theme-dynamic-resource-references-80
 -DCustomThemePrefixName=modularTabMenu
 -DCustomThemeContext=/wps/ModularTabMenu

A tarefa modify-theme-dynamic-resource-references-80 está disponível na correção acumulativa 7 ou posterior do Portal 8.0.0.1.

Observação: a tarefa usa valores padrão para todas as propriedades customizadas, por isso, se a raiz de contexto do Portal não for /wps, será necessário atualizar as referências de /wps/themeModules para o valor adequado no sistema.

Para atualizar os arquivos theme*.html, montamos o diretório fs-type1 e utilizamos um script sed para atualizá-los.

Lista 10. Montar o fs-type1 com WebDAV
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/fs-type1/ /mnt/portal/dav/fs-type1
Lista 11. sed script to update custom properties references
find . -name "theme*.html" | xargs -n 1 sed -i "s/80theme_/modularTabMenu_/g"

1f. Modificar as referências de recurso dinâmicas para sua aparência

Para concluir esta etapa, siga as instruções no Centro de Informações ("Modifying the dynamic resource references for your skin").

Novamente, um script sed foi usado para editar o arquivo skin*.html.

Lista 12. Script sed para atualizar as referências de propriedades customizadas
find . -name "skin*.html" | xargs -n 1 sed -i "s/80theme_/modularTabMenu_/g"

2. Incluir recursos ao seu tema

Agora que o novo tema é funcional, crie uma página e aplique o novo tema "Modular Tab Menu" a ela. Nesse momento, o tema tem a aparência idêntica ao tema do Portal 8.0.0.1. Agora é o momento em que o trabalho de verdade começa.

Foram necessárias quatro horas de trabalho para chegar até esse ponto, sem contar o tempo necessário para gravar o xslt ou a nova tarefa ConfigEngine. Continuarei indicando o tempo necessário, para ajudá-lo a calcular os custos de desenvolvimento estimados para seu próprio tema customizado.

Ativar o modo de desenvolvimento

Agora é um bom momento para ativar o modo de desenvolvedor de temas. Esse modo permite visualizar as mudanças mais rapidamente, pois evita as reinicializações de servidor para a limpeza dos caches do lado do servidor.

É possível ativar o modo de desenvolvimento definindo a propriedade resourceaggregation.development.mode como verdadeira no provedor de ambiente de recursos (REP) WP ConfigService. O REP WP ConfigService pode ser encontrado no console WAS, em: Resources > Resource Environment > Resource Environment Providers.

Dividir seu tema customizado em partes

O tema "Tab Menu – Page Builder" original tinha grande parte de seu código no Default.jsp, por isso, esse é um bom local para começar. Meu objetivo é usar o máximo possível o tema Portal 8.0.0.1, mas modificando seu estilo, para ajustá-lo ao tema antigo. Busquei no Default.jsp as três partes básicas a serem fatiadas e definidas como módulos.

Em primeiro lugar, busquei as partes jsp. Sã o partes implementadas no tema 8.0.0.1 como um jsp. Itens como a navegação e o cabeçalho e rodapé do tema são definidos como jsp. No tema "Tab Menu – Page Builder" original, essas partes estavam todas no Default.jsp. Porém, no tema 8.0.0.1, essas peças estão separadas, e são muito mais lógicas e fáceis de serem mantidas. Essas partes lógicas são referenciadas como pontos de conteúdo dinâmico na documentação do Portal e são muito mais flexíveis do que partes jsp simples. Leia uma descrição completa dos pontos de conteúdo dinâmico.

Em seguida, eu busquei partes JavaScript. O tema original fazia referência a arquivos JavaScript externos e o JavaScript sequencial no próprio Default.jsp.

Por fim, busquei arquivos css que eram necessários no novo tema.

Os arquivos jsp

A maior mudança necessária foi na navegação. O tema original tinha uma navegação repleta de Dojo, com menus suspensos para as páginas-filho. O tema 8.0.0.1 não usa Dojo no módulo de visualização, por isso, também foi necessário incluir os módulos Dojo ao tema, mas isso será abordado em detalhes posteriormente. Encontrei a fatia do Default.jsp que lidava com as “ações comuns”, como login, logout ou ajuda. Movi essa fatia do jsp para "commonActions_pb.jsp" que, em conjunto com o restante do tema, está disponível na seção Download deste artigo. Para fazer com que o ícone de lápis do tema original funcionasse, eu ajustei o pageModeToggle.jsp.

Figura 1 mostra as partes Home, Administration, Applications etc., que formam a navegação superior. As partes Welcome, Getting Started etc. fazem parte da navegação principal. Na extrema direita, há as ações comuns e o ícone de lápis, que alterna a página entre os modos de visualização e edição. Além disso, nessa figura, há a caixa de entrada de procura, a qual eu não tentei copiar do tema original. A caixa de procura no tema original era muito semelhante à nova caixa no tema 8.0.0.1, por isso, eu mantive a nova caixa.

Figura 1. Partes do tema

Os arquivos jsp de navegação

O tema Portal 8.0.0.1 tinha um navigation.jsp bastante claro e fácil de usar, mas não foi possível reutilizá-lo totalmente. Eu criei dois novos arquivos jsp para lidar com a navegação superior e com a navegação principal. Copiei o código e o estilo do Default.jsp original para criar o topNav.jsp e o primaryNav.jsp.

Modifiquei os pontos de conteúdo dinâmico correspondente para esses novos arquivos jsp. Consulte a Tabela 1 para obter mais detalhes.

Tablela 1. Novos pontos dinâmicos
Ponto dinâmico Novo mapeamento
modularTabMenu_topNav mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/topNav.jsp,smartphone@,tablet@
modularTabMenu_primaryNav mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/primaryNav.jsp?startLevel=1,smartphone@,tablet@
modularTabMenu_commonActions mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/commonActions_pb.jsp,smartphone/tablet@res:/wps/ModulaTabMenu/themes/html/dynamicSpots/commonActions.jsp

Saiba mais sobre os pontos de conteúdo dinâmico.

Você poderá notar nos pontos de conteúdo dinâmico e em outras áreas que há referências a smartphones e tablets. Um artigo futuro desta série abrangerá esses tópicos e mostrará como você pode tornar esse tema responsivo.

Depois que todos os pontos de conteúdo dinâmico são definidos, é hora de analisar o theme_en.html no novo tema. Eu editei este arquivo para definir o tema e correspondê-lo com o tema original. Por exemplo, no tema original, o ícone de lápis está próximo à barra de pesquisa. Ajustei o html para arrumar o layout geral, o que não levou muito tempo. No entanto, nesse ponto, o novo tema não funciona muito bem e nem tem uma boa aparência, pois o JavaScript e o css ainda estão ausentes.

As partes de JavaScript

Encontrar os arquivos JavaScript relevantes no tema original foi, sem dúvidas, a parte mais entediante e sujeita a erros de todo o processo. Alguns arquivos JavaScript foram incluídos no arquivo jsp e alguns bits eram sequenciais em um dos arquivos jsp. Eu usei a aba Network no Firebug para ver todos os arquivos JavaScript que foram carregados pelo tema original, mas ignorei tudo que se relacionava ao Dojo. Não tentei usar a versão antiga do Dojo do tema original. O tema Portal 8.0.0.1 usa o Dojo 1.7.2, por isso, eu também o utilizei no novo tema.

Há quatro novos arquivos JavaScript no novo tema. Eu copiei dois arquivos diretamente do tema original. Um dos arquivos foi criado com base no JavaScript sequencial no tema original. O outro foi uma versão modificada de um arquivo fornecido pela IBM. Consulte a Tabela 2 para obter mais detalhes.

Tablela 2. Novos arquivos JavaScript
Arquivo Detalhes
menu_service.js Copiado do wp_profile/installedApps/CELLNAME/wps.ear/wps.war/menu/menu_service.js do Portal 6.1.5 para o local do WebDAV para o novo tema.
PageBuilderTheme.js Copiado do wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/js/PageBuilderTheme.js para o local do WebDAV para o novo tema.
ibmPortalEnhancedTheme-nodojo.js Versão modificada de ibmPortalEnhancedTheme.js, encontrado no Portal 8.0.0.1 emPortalServer/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/com/ibmPortalEnhancedTheme.js
modularTabMenu.js Isso mantém o JavaScript sequencial encontrado no tema original.

Defini um módulo para todos os arquivos JavaScript e os coloquei no WebDAV na pasta de contribuições do tema.

Lista 13. modularTabMenu.json – Contribuições de JavaScript
{
  "modules":[
  {
    "id":"wp_modular_tabmenu",
    "contributions":[{
      "type":"config",
      "sub-contributions":[
      {
        "type":"js",
        "uris":[{
          "value":"/js/menu_service.js"
        },
        {
          "value":"/js/menu_service.js.uncompressed.js",
          "type":"debug"
        }]
      },
      {
        "type":"js",
        "uris":[
        {
          "value":"/js/ibmPortalEnhancedTheme-nodojo.js"
        },
        {
          "value":"/js/ibmPortalEnhancedTheme-nodojo.js.uncompressed.js",
          "type":"debug"
        }]
      },
      {
        "type":"js",
        "uris":[{
          "value":"/js/modularTabMenu.js"
        },
        {
          "value":"/js/modularTabMenu.js.uncompressed.js",
          "type":"debug"
        }]
      },
      {
        "type":"js",
        "uris":[{
          "value":"/js/PageBuilderTheme.js"
        },
        {
          "value":"/js/PageBuilderTheme.js.uncompressed.js",
          "type":"debug"
        }]
      }]
    }]
  }]
}

Em seguida, incluí o novo módulo ao novo perfil. O novo perfil é uma cópia de profile_full.json, com apenas o módulo adicional sendo exibido e um novo nome de perfil.

Ele também precisa ser definido como o perfil padrão para o tema. Edite o themelist/ModularTabMenu/metadata.properties do WebDAV e defina resourceaggregation.profile no novo perfil.

Lista 14. Definir o perfil padrão
resourceaggregation.profile=profiles/profile_modulartabmenu.json

As partes de CSS

Ajustar o estilo foi a segunda parte mais demorada desse trabalho. Passei muito tempo no Firebug alternando entre uma janela de navegador com o tema original e uma janela com o novo tema, analisando as diferenças e corrigindo-as. Minha estratégia geral foi evitar alterar os estilos provenientes do Portal 8.0.0.1. Em vez disso, eu incluí estilos que substituíssem aqueles do 8.0.0.1. Copiei quatro arquivos css diretamente do tema original e criei um novo css.

Tablela 3. Novos arquivos CSS
Arquivo Detalhes
base.css Versão modificada do wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/base/framework/base.css do Portal 6.1.5 para o local do WebDAV para o novo tema.
layoutTheme.css Copiado dewp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/defaultTheme/framework/layoutTheme.css para o local do WebDAV para o novo tema.
default.css Versão modificada do wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/defaultTheme/defaultTheme.css do Portal 6.1.5
modpb.css Novo arquivo. Ele contém substituições variadas para chegar à melhor aparência para o tema.

Iterar… JavaScript, CSS, theme.html

Eu passei muito tempo no Firebug, atualizando e recarregando sem parar. Agora é o momento de preparar uma dose de cafeína e treinar suas habilidades de alternar entre as teclas Alt e Tab. Gastei quase 6 dias de trabalho nisso. Também passei muito tempo com uma régua de pixels na tela, tentando deixar o cabeçalho e outros elementos com o tamanho certo.

Enquanto você faz a iteração, é útil ativar o rastreio de depuração para ver as solicitações individuais.

Lista 15. Sequência de rastreio da depuração
com.ibm.wps.resourceaggregator.CombinerDataSource.RemoteDebug=all

Com o rastreio ativado, é possível ver os arquivos JavaScript e css individuais no Firebug. É possível configurar essa cadeia de caractere em Administration > Portal Analysis > Enable Tracing. Configure a cadeia de caractere em "Append these trace settings" e clique no ícone "+". Como alternativa, é possível configurar essa cadeia de caractere no console de administração do WebSphere Application Server em Logging and tracing > WebSphere_Portal > Diagnostic trace service.

Project menu

Um dos novos recursos no Portal 8 é a habilidade de agrupar um conjunto de mudanças em um projeto. O projeto pode ter diversas mudanças diferentes, incluindo mudanças ao gerenciamento de conteúdo da web e às páginas do Portal. Esse recurso é apresentado na área do cabeçalho do tema Portal 8, por isso, ele foi incluído ao novo tema, mas eu alterei seu estilo para se adequar esteticamente ao tema Modular Tab Menu.

A marcação do Project Menu é inserida na página por meio de um ponto de conteúdo dinâmico nos arquivos theme*.html. No arquivo theme_en.html (consulte a seção Download ), esse ponto está incluído. O ponto é o mesmo no tema original 8.0.0.1, mas foi ligeiramente alterado para esse tema.

Lista 16. Ponto de conteúdo dinâmico do Project Menu em theme_en.html
<!-- displays the state of the current page -->
<div class="wpthemeRight modpbPageTools">
<arel="dynamic-content"href="dyn-cs:id:modularTabMenu_projectMenu"></a>
</div>

O Project Menu (Figura 2) permite que os autores do site alternem a visualização entre o site publicado atualmente e o site com um conjunto específico de mudanças aplicadas.

Figura 2. Project Menu

Modo de edição

O tema original tinha seu próprio modo de edição, o que permitiu definir os estilos e alterar os layouts. Eu não tentei converter esse modo. Em vez disso, minha estratégia foi usar o modo de edição do novo tema. O novo modo de edição tem todos os recursos do Portal 8.0.0.1 integrados, então, é a maneira perfeita de disponibilizá-lo. Diferente do ocorrido no Project Menu, eu não tentei estilizar o menu para se adequar esteticamente ao tema original. Como este é um modo de edição, e não um modo que pode ser visualizado pelos visitantes do site, não considero que seja importante que o menu seja idêntico ao do tema original.

Como no Project Menu acima, o modo de edição é um ponto de conteúdo dinâmico presente no tema 8.0.0.1 original.

Lista 17. Ponto de conteúdo dinâmico do modo de edição (barra de ferramentas universal) no theme_en.html
<!-- inserts the universal toolbar -->
<a rel="dynamic-content" href="dyn-cs:id:modularTabMenu_toolbar"></a>

Figura 3 mostra como o modo de edição no tema Portal 8.0.0.1 se abre entre a navegação superior e a navegação principal. Para o tema Modular Tab Menu, quero fazer algo semelhante.

Figura 3. Modo de edição no tema Portal 8.0.0.1

O menu do Modo de edição tem o mesmo estilo em cinza que no tema Portal 8.0.0.1. Eu fiz pequenos ajustes de espaçamento para que o menu fosse ajustado corretamente, como exibido na Figura 4.

Figura 4. Modo de edição no tema Modular Tab Menu

Também é possível customizar facilmente o conteúdo das guias do Modo de edição. Por exemplo, a guia de estilo do tema original contém uma lista de cores diferentes daquela presente no tema Portal 8.0.0.1. Eu atualizei o system/styles.json para que correspondesse às cores presentes no tema original.

Saiba mais sobre Creating a theme style.


3. Finalizar

Assim que o tema estava funcionando de acordo com o esperado, eu passei um dia inteiro trabalhando em tarefas diversas para finalizar tudo. Usei o Dojo ShrinkSafe para compactar qualquer JavaScript que fosse necessário. Também compactei os arquivos css que foram adicionados. Atualizei todos os arquivos theme_*.html com base na versão concluída do theme_en.html. Usei uma ferramenta de comparação para mesclar as alterações feitas no theme_en.html nas versões de outros idiomas, tomando cuidado para não sobrescrever as partes específicas de cada idioma. Também desativei o rastreio de depuração e executei meu suíte de testes novamente.


Listagem completa de mudanças

Tablela 4. WebDAV – comparando o WebDAV/fs-type1/themes/Portal8.0 ao WebDAV/fs-type1/themes/ModularTabMenu
FILE Altere
ModularTabMenu/contributions/modularTabMenu.json Novo módulo, definindo as contribuições de JavaScript
ModularTabMenu/css Diversas pastas removidas (preta, azul, dourada, verde, laranja, púrpura e branca)
ModularTabMenu/css Diversas pastas incluídas. Copiadas do wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/css/ do Portal 6.1.5
(blueTheme, greenTheme, greyTheme, lightGreenTheme, lightGreyTheme, orangeTheme, pinkTheme, purpleTheme)
ModularTabMenu/css/default/default.css* Estilos de corpo removidos
/ModularTabMenu/css/default/icon.gif Alterado para corresponder ao tema original
ModularTabMenu/css/default/modpb_mobile.css* Caractere de preenchimento
ModularTabMenu/css/images Diversas imagens copiadas do Portal 6.1.5
ModularTabMenu/css/pagebuilder Novos arquivos css. Alguns foram copiados/ajustados do Portal 6.1.5
ModularTabMenu/css/widgets
ModularTabMenu/css/master.css* Inclui referências ao novo JavaScript
ModularTabMenu/images/favicon.ico Usa o favicon do tema original
ModularTabMenu/js/ibmPortalEnhancedTheme-nodojo.js* Versão modificada do PortalServer/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/com/ibmPortalEnhancedTheme.js do Portal 8.0.0.1 com as referências ao Dojo removidas.
ModularTabMenu/js/menu_service.js* Copiado do Portal 6.1.5
ModularTabMenu/js/PageBuilderTheme.js* Copiado do Portal 6.1.5
ModularTabMenu/js/modularTabMenu.js* Derivado de Portal 6.1.5 Default.jsp
ModularTabMenu/nls/sidenav/* Referências a pontos dinâmicos atualizadas
ModularTabMenu/profiles/profile_modulartabmenu.json Novo perfil padrão para o tema. Copiado do profile_full.json e renomeado.
ModularTabMenu/system/styles.json Guia de estilo do modo de edição atualizada para corresponder ao tema original
ModularTabMenu/nls/theme_*.html Html modificado para corresponder ao tema original.
Tablela 5. EAR – comparando o ModularTabMenu.ear ao PortalServer/theme/wp.theme.themes/default80/installedApps/DefaultTheme80.ear
FILE Altere
themes/html/dynamicSpots/commonActions.jsp Não é usado no novo tema
themes/html/dynamicSpots/commonActions_pb.jsp Implementa ações comuns
themes/html/dynamicSpots/crumbTrail.jsp Ajustes desinteressantes para escapar do nome de classe
themes/html/dynamicSpots/mobileNavigation.jsp Não é usado no novo tema, mas foi ajustado para remover as referências a blank.gif
themes/html/dynamicSpots/pageBuilderModularConfig.jsp Novo jsp para reter a lógica necessária para inicializar o tema. Copiado de partes do Default.jsp original.
themes/html/dynamicSpots/pageModeToggle.jsp Ajustado para exibir o ícone de lápis
themes/html/dynamicSpots/primaryNav.jsp Novo jsp para gerar a navegação primária. Copiado de partes do Default.jsp original.
themes/html/dynamicSpots/status.jsp Referências a blank.gif removidas
themes/html/dynamicSpots/topNav.jsp Novo jsp para gerar a navegação superior. Copiado de partes do Default.jsp original.
themes/html/bootstrap.jspf Incluiu uma variável necessária para a navegação.

Comparação de desempenho

Não fiz uma comparação de desempenho completa entre o tema original e o tema modularizado. Porém, comparei os tamanhos de solicitações e download dos dois temas quando aplicados a uma página em branco.

Tablela 6. Comparação parcial de desempenho
Tema original no Portal 6.1.5 Tema Modularized Tab Menu
Solicitações 38 25
Total de bytes 2,5 MB 1,5 MB

ModularThemeExploit.zip

Há três arquivos no zip disponibilizado na seção Download . Usei uma ferramenta de comparação gráfica (Beyond Compare ou meld, ambas funcionam) para comparar o conteúdo do zip com o conteúdo no WebDAV.

Lista 18. Comparando o WebDAV com o conteúdo do ModularTabMenu-webdav.zip

Clique aqui para ver lista de códigos

Lista 18. Comparando o WebDAV com o conteúdo do ModularTabMenu-webdav.zip

unzip ModularTabMenu-webdav.zip -d /tmp/ModularTabMenu
bcompare /mnt/portal/dav/themelist/ModularTabMenu/ /tmp/ModularTabMenu/themelist/ModularTabMenu/
bcompare /mnt/portal/dav/skinlist/ModularTabMenuStandard/ /tmp/ModularTabMenu/skinlist/ModularTabMenuStandard/
bcompare /mnt/portal/dav/fs-type1/themes/ModularTabMenu/ /tmp/ModularTabMenu/fs-type1/themes/ModularTabMenu/

Resolva quaisquer diferenças importantes que forem encontradas.


Resumo

Foram necessários 9,5 dias de trabalho para essa tarefa. Nesse período, consegui modularizar o tema Portal 6.1.5 e aproveitar os novos recursos do Portal 8, enquanto mantinha a aparência do tema original. E, o melhor: meu tema é menor e faz menos solicitações para o servidor do que o original.


Download

DescriçãoNomeTamanho
Modularized version of our sample themeModularThemeExploit.zip3310KB

Recursos

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Desenvolvimento móvel, WebSphere
ArticleID=951302
ArticleTitle=Movendo seu tema do WebSphere Portal para dispositivo móvel, Parte 1: Torne seu tema do WebSphere Portal 6.1.x ou 7.x modular
publish-date=11012013