Exercício 2.2: Personalizando o Site de Portal
Antes de começar, você deve concluir o Exercício 2.1: Criar um Novo Portal para Exibir o Aplicativo de Portlet.
Criar um Novo Tema
No processo de criação de um aplicativo de portal, você pode optar por criar um tema totalmente novo no Portal Designer. Os temas fornecem a aparência e o comportamento geral de seu aplicativo de portal e incorporam muitos elementos de design do portal, incluindo imagens, navegação, barras de ferramentas e efeitos visuais no nível de página. Siga estas etapas para criar um novo tema para o site de portal que desenvolvemos neste tutorial:
- Selecione Arquivo > Novo > Tema na barra de menus.
- Digite Leilão no campo Título.
- Role e selecione o tema Corporação como o tema de origem. É muito mais fácil basear um novo tema em um já existente, para que não seja necessário criar todos os elementos necessários do tema a partir do início.
- Clique em Avançar.
- Selecione a capa Shadow na lista de capas disponíveis e clique em Definir como Capa Padrão para tornar Shadow a capa padrão para o novo tema Leilão.
Uma capa é a moldura em torno de cada portlet em uma página do portal. Diferentes dos temas, que aplicam-se à aparência e ao comportamento geral do portal, as capas são limitadas à aparência e ao comportamento de cada portlet inserido em seu aplicativo de portal. Por padrão, apenas uma seleção limitada de capas está disponível para cada tema.
- Clique em Concluir.
- Expanda Elementos > Temas na visualização Esboço e selecione Leilão.
- Na visualização Propriedades, selecione a caixa de opções Padrão para aplicar o novo tema ao aplicativo de portal.
A alteração será aplicada imediatamente à Configuração do Portal:

- Salve a Configuração do Portal.
Nesta parte do exercício, você atualizará estilos, temas e capas no aplicativo de portal Leilão, utilizando o CSS Designer e o Page Designer.
Alterar a Imagem de Banner do Tema Atual
Para substituir a imagem de banner no tema padrão para o portal Leilão, siga estas etapas:
- Primeiro, você importará uma nova imagem de banner para o projeto:
- Na barra de menus, selecione Arquivo > Importar. O diálogo Importar é exibido.
- Em Selecionar uma Origem de Importação, clique em Sistema de Arquivo.
- Clique em Avançar.
- Como os diferentes produtos Rational utilizam locais de destino de instalação diferentes, você deve sair da interface com o usuário do produto para localizar o plug-in que contém a imagem do novo banner. Utilize uma ferramenta de procura em arquivos para localizar a pasta plug-in com.ibm.etools.portal.examples.application_6.0.0.1 no caminho da instalação do produto em seu sistema de arquivos local.
- Retorne para o assistente de Importação e clique em Procurar próximo ao campo A partir do diretório. Navegue para o seguinte diretório:
x:\com.ibm.etools.portal.examples.application_6.0.0.1\samples
em que x: é o caminho que contém o plug-in com.ibm.etools.portal.examples.application_6.0.0.1 em seu computador.
- Selecione auction.gif como o destino da importação e clique em OK.
- Clique em Procurar próximo ao campo Na Pasta e especifique AuctionPortal/PortalContent/themes/html/Auction.
- Clique em Concluir.
O assistente importa o arquivo para seu espaço de trabalho.
- Com o arquivo de Configuração do Portal para o projeto AuctionPortal aberto, selecione Editar Estilo no menu pop-up do Portal Designer. Isso abrirá o arquivo Styles.css no CSS Designer. O Styles.css é a folha de estilo padrão para o tema padrão no aplicativo.
O CSS Designer fornece duas visualizações dos estilos definidos para os arquivos CSS: a Visualização (no lado esquerdo), que fornece exemplos visualizados das regras de estilo como elas aparecem em um processamento do navegador de um recurso da Web e a visualização Origem (no lado direito), que exibe uma versão de texto do arquivo CSS. Você pode editar os estilos utilizando uma dessas visualizações.
- Role e selecione o ícone Segundo Plano do Banner na Visualização.
- Selecione Editar Regra de Estilo [.wpsToolbarBannerBackground] no menu pop-up.
- Clique na propriedade Segundo Plano no lado esquerdo do diálogo Definir Propriedades do Estilo.
- Digite ../../auction.gif no campo Imagem.

- Clique em OK.
- Salve o arquivo CSS e feche o CSS Designer. Observe que a nova imagem do banner é aplicada à página aberta no Portal Designer.

- Salve e feche o arquivo Configuração do Portal.
É possível fazer inúmeras alterações em um tema, como o layout de uma barra de ferramentas na área de cabeçalho, utilizando o Page Designer. Você pode editar o layout (e estilo) de um tema e suas capas associadas. As alterações são armazenadas no arquivo default.jsp do tema, nos arquivos control.jsp das capas associadas e em outros arquivos JSP relacionados. Além disso, quaisquer alterações que você fizer no editor serão aplicadas a todas as utilizações desse tema em seu aplicativo de portal.
Agora você está pronto para começar o Exercício 2.3: Executar o Aplicativo de Portal no Ambiente de Teste do WebSphere Portal.