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 File (Arquivo) > New (Novo) > Theme (Tema) na barra de menus.
- Digite Leilão no campo Title (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 Next (Avançar).
- Selecione a capa Shadow na lista de capas disponíveis e clique em Set as Default Skin (Definir como Capa Padrão) para tornar Shadow a capa padrão para o novo tema Auction (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 Finish (Concluir).
- Expanda Elements (Elementos) > Themes (Temas) na visualização Outline (Esboço) e selecione Auction (Leilão).
- Na visualização Propriedades, selecione a caixa de opções Default (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 Auction (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 Auction (Leilão), siga estas etapas:
- Primeiro, você importará uma nova imagem de banner para o projeto:
- Na barra de menus, selecione File (Arquivo) > Import (Importar). O diálogo Importar é exibido.
- Em Select an import source (Selecionar uma Origem de Importação), clique em File System (Sistema de Arquivo).
- Clique em Next (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 Browse (Procurar) próximo ao campo From directory (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 Browser (Procurar) próximo ao campo Into folder (Na Pasta) e especifique AuctionPortal/PortalContent/themes/html/Auction.
- Clique em Finish (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 Edit Style (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 Banner Background (Segundo Plano do Banner) na Visualização.
- Selecione Edit Style Rule (Editar Regra de Estilo) [.wpsToolbarBannerBackground] no menu pop-up.
- Clique na propriedade Background (Segundo Plano) no lado esquerdo do diálogo Set Style Properties (Definir Propriedades do Estilo).
- Digite ../../auction.gif no campo Image (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.