IBM Rational Application Developer Versão 7.5 - Kit de ferramentas do portal: Parte 4. Agregação de página estática

Opções de documento PDF - Ajusta-se a A4 e Carta 860KB (39 páginas) Obtenha o Adobe® Reader® Opções de documento que necessitam de JavaScript não são exibidas Classificar esta página Ajude-nos a melhorar este conteúdo

Nível: Introdutório

Jatin K. Varshney, Associate Software Engineer, IBM

02/Jul/2009

Com a agregação da página estática, você pode criar páginas de portal a partir de layouts ou modelos HTML estáticos em um projeto IBM® WebSphere® Portal Versão 6.1. Este artigo o guiará, passo a passo, pelo processo de criar, realizar o design, customizar e agregar os layouts estáticos usando o IBM® Rational® Application Developer Versão 7.5, tendo em vista o ambiente de tempo de execução do servidor do portal. Não é necessário saber muito sobre as APIs básicas do portal para seguir os passos descritos neste artigo.

Requisitos de sistema

O autor presume que você tem o IBM® Rational® Application Developer Verão 7.5 instalado em seu sistema local, assim como um servidor IBM® WebSphere® Portal Versão 6.1 instalado em um sistema local ou remoto sobre o qual você possui direitos administrativos.

Voltar para parte superior

As vantagens de usar páginas estáticas

Até agora, os designers de Web site usavam tecnologias simples de Web, como HTML, CSS (cascading style sheets) e JavaScript para fazer o design do aspecto geral de um Web site, mas os portlets normalmente eram criados por desenvolvedores Java ou JSP™ (Java™Server Page ™). Agora, você pode usar a agregação de página estática (SPA) para explorar o poder dos portlets, agregando-os às páginas estáticas da Web. É possível fazer isso usando marcação HTML simples em suas páginas estáticas da Web para criar um site de portal completo.

O uso de tecnologias simples da Web permite realizar o layout do site usando suas ferramentas de desenvolvimento de Web favoritas, como Page Designer no Rational Application Developer ou editores de texto simples. Isso lhe oferece mais controle sobre o layout da página do que usar o modelo de layout do portal.

É possível incluir portlets como elementos dinâmicos e contêineres como marcadores para os portlets em suas páginas. É possível exibir esses portlets usando agregação do lado do servidor, Ajax ou um elemento IFrame. Também é possível usar comunicação de portlet em uma página estática, por exemplo, com fios.

A agregação de página estática não é apenas simples e fácil de usar, mas também muito poderosa na exploração das capacidades dos portlets junto com tecnologias de Web mais simples, como CSS e JavaScript. Este artigo explica primeiro os conceitos de SPA e depois o guia pelos passos seguintes sobre o uso de SPA com o Rational Application Developer V7.5:

1. Primeiro, crie um projeto de portal e depois as páginas do portal com layouts estáticos.
2. Em seguida, crie um projeto de portlet e o adicione à sua página estática.
3. Então, crie uma página de portal com um layout estático (página estática).
4. Em seguida, edite essa página estática para adicionar tema, contêineres e janelas de portlet.
5. Então, publique seu projeto para ver os resultados das quatro primeiras operações simples listadas acima.
6. Depois, crie temas para os layouts estáticos e aparências para os portlets nas páginas estáticas.
7. Em seguida, use as capacidades dinâmicas dos portlets para gerar automaticamente a navegação para o seu site.
8. Depois disso, use a internacionalização para tornar sua página estática disponível em diferentes locais ao redor do mundo.
9. Então, use o mesmo arquivo archive de recurso de layout estático para criar páginas adicionais e editar a página estática que criou anteriormente.
10. Finalmente, publique seu site de portal da Web completo contendo páginas estáticas.

Voltar para parte superior

Termos chave

layout estático
O layout de uma página baseada em uma página HTML simples e que pode conter referências a portlets. Em contrate, um layout dinâmico de página de portal é definido estruturalmente em um banco de dados no servidor e gerenciado por um customizador de página.

página estática
Uma página do portal que faz referência a um layout estático. Uma página estática pode ser parte da topologia da página do portal em qualquer lugar (consulte o conteúdo SPI e o modelo de navegação). Além da renderização, ela se comporta como uma página de portal padrão, como, por exemplo, para controle de acesso.

layout dinâmico
O layout padrão do portal, que consiste de linhas ou colunas, continua na base de dados.

página estática integrada
Uma página estática que é renderizada na área de conteúdo do portal. O mecanismo do portal renderiza o banner, rodapé e navegação, mas o conteúdo é renderizado exclusivamente pelo layout estático.

página estática independente
Uma página estática que renderiza o conteúdo completo do navegador. Ele é servido pelo servlet do portal, mas tem controle exclusivo sobre a página completa.

Voltar para parte superior

Crie um projeto de portal

É possível criar um projeto de portal no Rational Application Developer usando o assistente de Novo Projeto de Portal, ou um projeto a partir do WebSphere Portal Server Versão 6.1 com o assistente Importar Projeto e depois customizá-lo. Um benefício de importar um projeto é que ele lista todas as definições dos portlets que já estão implementados no servidor, de modo que estes estão disponíveis para serem usados em qualquer página de portal do projeto. As definições, é claro, incluem os portlets de navegação SPA, que são tratados como portlets de utilitários em páginas estáticas.

Para criar um novo projeto de portal:

1. No Rational Application Developer Versão 7.5, selecioneArquivo > Novo > Outro.
2. Selecione todas as caixas de opção de Mostrar todos os assistentes.
3. Na categoria portal, selecione Projeto de portal e, em seguida, clique em Avançar.
4. Clique em OK para habilitar as capacidades de desenvolvimento do portal e abrir o assistente de Novo Projeto de Portal (veja a Figura 2).

5. Digite o nome do projeto, como, por exemplo, FirstPortalProject.
6. Selecione a versão 6.1 como servidor do Portal e clique em Avançar.
7. Selecione um tema e clique em Avançar.
8. Selecione uma aparência e clique em Concluir.

A Figura 3 mostra o novo projeto de portal aberto no Portal Designer para edição.

A configuração padrão do novo projeto de portal lista três portlets. É possível usar qualquer um desses portlets, assim como seus portlets customizados recém-criados na mesma área de trabalho, em qualquer página do projeto do portal.

9. Para ver quais portlets estão disponíveis na configuração do portal, vá para a visualização Estrutura de Tópicos e expanda Elementos > Portlets.

Na Figura 4, é possível ver os três portlets:

• Login
• Editar Meu Perfil
• Pesquisar Mapa do Site

Importar um projeto de portal do servidor

Em vez de criar um novo projeto de portal a partir do zero, é possível importar a configuração e outros arquivos de tema e aparência do servidor:

1. No Rational Application Developer, selecione Arquivo > Importar.
2. Expanda a categoria portal, selecione Portal e clique em Avançar.
3. Defina um novo servidor WebSphere Portal Versão 6.1
   1. Especifique um servidor local localhost ou um servidor remoto, fornecendo o endereço IP.
   2. Certifique-se de que o servidor está ligado e de que você possui direitos administrativos.
   3. Digite as credenciais e clique em Concluir.
4. Selecione o servidor recém-criado.
5. Digite o nome do projeto, como, por exemplo SecondPortalProject, e clique em Concluir.

O projeto do portal é criado na mesma área de trabalho com o nome especificado e contém todos os arquivos requeridos e a configuração de portal importados do servidor. Esse projeto pode ter muito mais portlets que o FirstPortalProject, pois a configuração contém todos os portlets que estão implementados no servidor. Esses portlets estão disponíveis para uso no seu projeto de portal.

Voltar para parte superior

Criar um projeto de portlet

A próxima etapa é criar um novo projeto de portlet customizado (digamos, por exemplo, um portlet JSR168 padrão com suporte JavaServer Faces). Você verá como absorver esse portlet em uma de suas páginas estáticas no projeto de portal.

Para criar um projeto de portlet:

1. Selecione Arquivo > Novo > Outro.
2. Selecione todas as caixas de opção de Mostrar todos os assistentes.
3. Na categoria portal, selecione Projeto de portlet e clique em Avançar para abrir o assistente de Novo Projeto de Portlet (consulte a Figura 5).

4. Digite o nome do projeto, como, por exemplo, MyWorkspacePortlet. Selecione WebSphere Portal v6.1 como ambiente de destino de tempo de execução.
5. Para o Portlet API, selecione o Portlet JSR168, e para tipo de Portlet, selecione Portlet Faces.
6. Clique duas vezes em Avançar e depois clique em Concluir.
7. Quando o projeto de portlet é criado, o arquivo MyWorkspacePortletView.jsp é aberto para edição. Substitua o texto "Insira o conteúdo aqui" por This is my simple JSR168 Faces portlet.
8. Salve o arquivo e feche o editor.

Voltar para parte superior

Criar uma página

A página do portal é um dos elementos do modelo de conteúdo de portal. Uma página em um projeto de portal pode ser definida usando layout dinâmico ou estático. Páginas que usam layout dinâmico são chamadas de páginas normais de portal, e as páginas que usam layout estático são chamadas de páginas estáticas. As páginas estáticas podem ser renderizadas somente na área de conteúdo do portal (usando banner, navegação e rodapé fornecidos pelo portal), ou elas podem ser totalmente renderizados na área do navegador.

Com base nesse comportamento de renderização, as páginas estáticas são categorizadas como páginas estáticas integradas ou páginas estáticas independentes. Comece criando uma página estática integrada, seguida de uma página estática independente.

Criar uma página estática

Se você quer uma página de portal para usar o layout do arquivo HTML estático que você já criou ou se você quer criar um layout novo, é necessário usar o assistente de criação de página estática no Rational Application Developer V7.5.

Para criar uma página estática integrada:

1. No Portal Designer, selecione uma das opções: Página, Rótulo ou URL.
2. Clique com o botão direito e selecione Inserir Página Estática e depois selecione uma das opções: Antes, Depois, Como filho. Obs.: Se estiver usando um nó URL, ele não pode ter uma página de nível filho.
3. Quando o assistente de criação de página estática abrir (Figura 6), digite o título da página como MyStaticPage.

4. Mantenha os valores padrão das opções de exibição de janela para Marcação, Nome do arquivo e Portlet e clique em Concluir.

A MyStaticPage é adicionada à configuração do portal e o arquivo de layout estático index.html abre para edição no Page Designer.

Os pontos a seguir ajudam a entender as partes do assistente:

• Caixa de seleção de marcação: A marcação suportada na qual o layout estático pode ser fornecido para a página do portal. A especificação SPA atual permite apenas marcação HTML.
• Título: O título da página do portal. Se a página for uma página estática integrada, o título aparece na barra de navegação.
• Nome do arquivo: O nome do novo arquivo de layout estático que será aberto no Page Designer para edição posterior e que funcionará como arquivo de layout da página de portal MyStaticPage. Importante: Esse arquivo deve ter uma extensão .html ou .htm.

• Caixas e campos de seleção de "Criar usando ZIP ou página HTML existente": Servem para especificar o local do archive que contém o arquivo de layout estático HTML e recursos relacionados na caixa de texto e para selecionar o arquivo de layout dentro do archive na caixa suspensa. Ou é possível usar o campo "Local do arquivo ZIP ou HTML" e o menu associado para especificar diretamente o local do arquivo de layout estático HTML ou HTM existente, em vez de um archive. Ele seria copiado para a área de trabalho e usado como layout estático da página do portal, em vez do arquivo index.html especificado anteriormente.
• Opção de exibição da janela de Portlet: Especifica o parâmetro de metadados para a página, que é usado para renderizar os portlets enquanto a página é exibida:
  • Marcação incluída: Os portlets são renderizados de modo sequencial, ao mesmo tempo em que a página estática.
  • Ajax: O conteúdo do portlet é renderizado de modo assíncrono e depois os fragmentos de portlet são integrados à página estática.
  • IFrame: A página estática contém IFrames que renderizam os portlets.

Agora que você conhece as partes do assistente, podemos explorar um pouco mais a operação de criação de página estática.

Depois que a página estática é criada, o arquivo index.html abre no Page Designer para edição. Esse arquivo fica no projeto de portal, dentro da pasta Configuração de Portal/Layout Estático do projeto de portal, em uma pasta chamada página.uniquename, sendo que uniquename é um nome interno para a página estática, como page.ae354734c1, por exemplo.

Você pode criar a estrutura de diretório para o layout estático e outros recursos, como imagens e estilos, dentro dessa pasta, mas manter o local do arquivo de layout estático intacto. Se você alterá-lo, é necessário re-especificar o local do layout estático usando a visualização de Propriedades da página estática.

O conteúdo inicial da página parece o código da Lista 1.

<table>
	<tr>
		<td> <div class="portlet-container" name="layoutcontainer1"></div> </td>
		<td> <div class="portlet-container" name="layoutcontainer2"></div> </td>
	</tr>
</table>

Como vê, esse arquivo não contém a tag <html>. Isso é o que torna a página uma página estática integrada. Se escrever os conteúdos do layout estático contendo a tag <html> e suas tags aninhadas, como <body>, como se fosse uma página HTML normal, você obterá uma página estática independente.

Agora veja as mudanças na configuração do portal. A página chamada MyStaticPage agora está visível na hierarquia de navegação, e você pode visualizá-la no portal Designer e no modo Estrutura de tópicos (Figura 7). Você aprenderá a configurá-la para portlets e contêineres um pouco mais adiante neste artigo.

Voltar para parte superior

Editar o layout estático

Agora você precisa editar os conteúdos da página. Se você fechou o arquivo de layout HTML para uma página estática, pode reabri-lo clicando com o botão direito na página no Portal Designer e selecionando Editar Layout (consulte a Figura 8).

Em um arquivo de layout estático (como o index.html), remova todos os conteúdos e depois salve o arquivo.

Crie o conteúdo e marque

Agora é possível estruturar seu site com o layout móvel CSS (cascading style sheet).
A Figura 10 mostra uma estrutura básica de site com um cabeçalho, navegação lateral, área de conteúdo e rodapé.

Para criar um layout básico como este, adicione o conteúdo mostrado na Lista 2 ao arquivo index.html.

<div id="wrapper">
	<div id="header">
		<h1>Static page aggregation</h1>
	</div>
	<div id="left">The side navigation area</div>
	<div id="right">
           The content area <br> 
	</div>
	<div id="footer">IBM</div>
</div>

Obs.:
Para manter tudo simples, esse código HTML usa apenas tags <div> . Você pode fazer experiências com as tags ou criar um layout mais completo que seja adequado às suas necessidades.

Adicione a folha de estilo para o tema

Agora, para dar às tags <div> a estrutura do layout mostrado na Figura 10, você pode incluir a CSS externa ou criar uma definição de classe CSS na tag <style> no topo da página index.html, ou ainda usar a CSS sequencial. Para esse propósito, use a CSS externa.

Para adicionar a folha de estilo:

1. Crie uma pasta de "tema" dentro da pasta page.uniquename do >Layout Estático> no PortalContent, que contém o arquivo de layout estático index.html.
2. Então, crie um novo arquivo CSS dentro dessa pasta de tema.
3. Selecione o projeto e depois Arquivo > Novo > CSS.
4. Procure a pasta de tema e digite o nome do arquivo CSS como tema.
5. Clique em Avançar e Concluir.

O arquivo CSS é aberto para edição no editor CSS. Agora você pode criar os estilos CSS no painel de origem do editor CSS.

6. Clique com o botão direito no painel de origem e depois em Novo.
7. No assistente, selecione a tag e o conteúdo HTML (opções padrão) e clique em OK.
8. No assistente de Novo Estilo, selecione a fonte. Procure Verdana na caixa de listagem de fontes e clique em Adicionar para adicioná-la à caixa de listagem.
9. Na categoria layout, selecione margem e tipo 0. Depois selecione preenchimento e tipo 0 e clique em OK.

O estilo é inserido no arquivo theme.css, como mostra a Lista 3.

BODY {
	margin: 0px;
	padding: 0px;
	font-family: Verdana
}

10. De modo semelhante, você pode adicionar outros estilos para as classes div à esquerda, direita, rodapé e assim por diante, como mostra a Lista 4.

div#wrapper{
	width: 100%;
	height: 100%
}

div#header {
	clear: both;
	height: 50px;
	background-color: #e3dffd;
	padding: 15px;
	text-align: center;
}

div#left {
	float: left;
	width: 20%;
	height: 100%;
	background-color: #e9fed3;	
}

div#right {
	float: right;
	width: 80%;
	height: 100%;
	background-color: #fffce1;
}

div#footer {
	clear: both;
	background-color: #ffebdf;
	text-align: center;
}

11. Por fim, adicione o link do arquivo theme.css ao index.html:
    <link rel="stylesheet" href="theme/theme.css" type="text/css">

O tema agora está aplicado à página index.html e você pode vê-lo no Page Designer.

Adicionar contêiner e janela do portlet

As páginas estáticas podem conter os portlets e contêineres de portlet como páginas normais de portal. Para usar os portlets ou contêineres em uma página estática inclua os valores de atributo de classe descritos nas especificações SPA com tags <div>. Esses valores de atributo de classe caracterizam as tags <div> com um significado especial, tanto de contêineres de portlet como de uma janela de portlet particular.

Adicionar um contêiner de portlet

É possível adicionar um contêiner no layout estático usando a tag <div> com o valor de atributo de classe de portlet-container. Por exemplo:

<div class="portlet-container" name="container_0"></div>

Esta tag <div> requer mais um atributo: nome. Esse é o nome de um contêiner, que precisa ser único na página. Esse atributo diferencia instâncias do contêiner na mesma página (mas é possível usar o mesmo nome em diferentes páginas do portal).

Para criar um contêiner no layout estático na página index.html:

1. Abra a Palheta no Page Designer.
2. Abra a gaveta do portal.
3. Serão encontradas duas entradas para o contêiner de página estática e o portlet de página estática (consulte a Figura 10):
   
   • Contêiner de Página Estática
   • Portlet de Página Estática

4. Arraste e solte o contêiner de página estática no arquivo de layout estático, dentro da tag <div> da área de conteúdo, logo depois da tag <br>:

<div id="right">
	The content area <br> 
</div>

5. Na janela de contêiner de página estática (Figura 11), mantenha ou altere o nome do contêiner padrão único e clique em OK. (Também é possível abrir a caixa de diálogo selecionando Inserir > Portal > Contêiner de página estática).

6. Salve o arquivo.

A tag "container_0" é inserida no layout estático, conforme mostrado aqui:

<div class="portlet-container" name="container_0"></div>

Agora, veja a configuração do portal na visualização Estrutura de tópicos no Portal Designer. A Figura 12 mostra a configuração do arquivo MyStaticPage no diretório Layout.

A primeira coluna da MyStaticPage é o contêiner raiz padrão. Um dos filhos do contêiner raiz é o contêiner Linha. Esse contêiner linha é o contêiner estático que você adicionou ao layout estático usando a tag <div>. Uma linha será criada dentro do contêiner de coluna raiz para cada tag <div> que puser em seu arquivo de layout estático.

Importante:
Não aninhe as tags <div> de contêiner, conforme mostrado na Lista 5, já que os contêineres aninhados não são suportados para páginas estáticas. Se tentar fazer isso, você obterá seus efeitos somente no contêiner superior (container_0 neste exemplo), e todos os outros contêineres serão ignorados.

<div class="portlet-container" name="container_0">
	<div class="portlet-container" name="container_1"></div>
</div>

Outro filho padrão do contêiner raiz, que é também o primeiro filho e um contêiner de coluna, é considerado um contêiner oculto. Ele se mantém na configuração de uma página estática mesmo se você não definir nenhuma tag <div> de contêiner no layout estático. Esse contêiner contém todos os portlets que você adicionou no layout estático que não possuem contêineres parentes. Alguns portlets órfãos são adotados por esse contêiner oculto.

Adicionar uma janela de portlet

Um portlet é adicionado no layout estático usando a tag <div> com o valor de atributo de classe de portlet-window, como mostrado na Lista 6.

<div class="portlet-window" name="portlet-window_0"
	style="portlet-definition: 'wps.p.Login'"></div>

Essa tag <div> para a janela de portlet ainda precisa de mais dois atributos para ficar completa:

• nome: O nome da instância de portlet, que é única pela página (embora não pelas diferentes páginas no portal). Ele distingue as diferentes instâncias do mesmo tipo de portlet da página.
• estilo: A definição de portlet ou o tipo de portlet que deseja ilustrar na sua página estática. O valor do atributo de estilo contém o valor do atributo portlet-definition.

Para inserir uma tag <div> de portlet na página de layout estático:

1. Arraste o portlet de página estática da gaveta do portal na visualização de Palheta para o layout estático dentro do contêiner.
2. Na janela de portlet da página estática, selecione um portlet na tabela de portlets, como MyWorkspacePortlet, por exemplo. (Consulte a Figura 13.)

3. Edite ou mantenha o nome padrão da janela de portlet, pois que ele toma conta automaticamente da sua condição de único na página. Clique em OK para concluir.

O código de portlet é inserido no layout estático, como mostrado na Lista 7.

<div class="portlet-window" name="portlet-window_1" 
        style="portlet-definition: 'com.ibm.faces.portlet.FacesPortlet.ae95c684c1'"></div>

As etapas que acabou de seguir completaram estas tarefas:

• Geraram o nome único do portlet no contexto do portal (você pode editar esse nome único na visualização de Propriedades, selecionando o portlet na visualização de Estrutura de tópico do Portal Designer em Elementos > Portlets)

Obs.: Se o nome único do portlet for alterado na visualização de Propriedades, você deve alterar todas as suas referências nos arquivos de layout estático para manter o portlet intacto na página estática.

• Geraram o valor único para o atributo de nome da tag <div> do portlet
• Adicionaram a tag <div> contendo essa definição de portlet para o layout estático
• Registraram a entrada relacionada a esse portlet na configuração do portal (se ainda não registrada)
• Adicionaram o projeto como projeto de referência no projeto do portal

Importante:
Ao trabalhar com a tag <div> de portlet diretamente no layout estático no editor de texto, observe que o portlet já deve estar registrado na configuração de portal. Se não estiver, o portlet não está inserido na configuração de portal e, ao salvar o layout estático, volta uma mensagem de erro sobre a indisponibilidade do portlet. Portanto, a melhor escolha é usar o assistente de portlet, já que ele realiza todas as tarefas relacionadas.

Voltar para parte superior

Publicar o projeto de portal com a página estática

Agora que foi criado um projeto de portal consistindo de uma página estática básica com um portlet nela, você pode saber como ele funciona, publicando-o em um local ou instância remota de um servidor WebSphere Portal Versão 6.1. Mas antes de poder publicar o projeto do portal, é necessário criar um novo servidor na visualização Servidor.

1. Clique no projeto de portal com o botão direito e selecione Executar como > Executar no Servidor (veja Figura 14).

2. No assistente Executar no Servidor, clique em Avançar.
3. Selecione Remover todos (se você já realizou a operação Executar no Servidor na mesma área de trabalho).
4. Clique em Avançar e depois em Concluir.

Quando o projeto é publicado, o navegador abre o projeto de portal e você pode navegar pelas páginas estáticas (veja Figura 15).

Voltar para parte superior

Adicionar navegação do portal

Se a página estática foi criada como uma página estática integrada, é possível navegar facilmente pelas diferentes páginas do portal enquanto sua página é executada em um servidor, pois a navegação já é fornecida pelo portal. Mas se a página estática foi adicionada como página estática independente no seu projeto de portal, pode ser preciso uma forma de navegar para outras páginas no projeto de portal.

O servidor padrão do WebSphere Portal Versão 6.1 fornece vários portlets utilitários para o objetivo único de navegação. É possível incluí-los facilmente no layout estático usando seus nomes únicos. Se está trabalhando com um projeto de portal importado de um servidor, é possível inserir esses portlets no layout estático usando a mesma operação de arrastar e soltar usada para os outros portlets.

É possível usar qualquer um destes portlets de navegação:

<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaNavigataion'"></div>

Use o portlet de Navegação para adicionar uma navegação dinâmica do portal para uma página estática. Esse portlet usa o modelo de navegação de portal para gerar os links de navegação para as páginas estáticas.

<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaBreadCrumbTrail'"></div>

Use o portlet Breadcrumb Trail para adicionar o caminho de navegação às suas páginas estáticas. O breadcrumb trail começa na raiz de conteúdo e vai até a página estática selecionada.

<div class="portlet-window" name="portlet-window_0" 
        style="portlet-definition: 'wps.p.SpaResourceList'"></div>

Use o portlet de Lista de Página para adicionar uma lista de links dinamicamente computada dos recursos do portal a uma página estática. Essa lista é produzida dinamicamente com uma POCURI (Porção de Conteúdo URI).

Voltar para parte superior

Customizar a aparência e navegação do portlet

Conforme já mostrado, as tags <div> em locais específicos do arquivo de layout estático podem se referir a portlets, contêineres ou navegação. Quando a página é renderizada, o servidor substitui essas tags <div> pelo conteúdo — possivelmente dinâmico — do portlet e por um microformato que define os metadados para esses portlets

Para isso, o portal fornece os seguintes microformatos:

• microformato de portlet: Define as janelas e ações do portlet, como Editar configurações padrão, Configurar, Maximizar, Minimizar, Personalizar e Excluir.
• microformato de contêiner: Define os contêineres de portlet como marcadores para portlets.
  Para ações de arrastar e soltar, o microformato de portlet pode fornecer a fonte da ação de arrastar, e o microformato de contêiner pode fornecer o alvo da ação de soltar.
• microformato de navegação: Define a navegação se sua página estática está renderizada como página independente da Web.

Os microformatos de janela e contêiner de portlet podem conter IDs de objeto, que o servidor pode manipular dinamicamente. Ao criar a página estática, é possível usar técnicas de CSS ou JavaScript que usam os microformatos para produzir e renderizar uma interface de usuário fácil e simples.

Agora veja esses microformatos em mais detalhes para saber como implementá-los em seu código.

Microformato de portlet

A Figura 16 mostra a marcação do portlet que é retornada pelo servidor para uma tag <div> de portlet, definida em uma página estática. Para ver essa marcação, use qualquer ferramenta de inspeção de marcação no seu navegador (como o Firebug no Mozilla Firefox) quando a página estática com seu portlet for renderizada no navegador.

Algumas das tags HTML nessa amostra estão intencionalmente reduzidas, pois contêm as referências de ID de objeto que são manipuladas pelo servidor. Você descobrirá que as tags <div>, as tags <ul> e as tags <li> possuem certos valores de atributo de classe. Essas tags com valores de atributo de classe especificados previamente definem a estrutura completa da marcação de portlet. Veja a seção a seguir para obter as definições desses atributos de classe:

Atributos de classe

portlet-windowO mesmo valor fornecido ao definir o portlet no layout estático. Todos os valores de outros atributos da tag <div> contendo essa classe são os mesmos de antes, exceto o atributo de ID que é adicionado pelo servidor para o ID de objeto da janela.

xoxo
Significa que uma lista de itens vem a seguir.

portlet-info
Introduz a seção de metadados do portlet. Todos os metadados são condensados nesse contêiner para que possam ser ocultos pela CSS. A classe xoxo significa, ainda, que esta contém uma lista de itens.

portlet-title
Representa o título localizado do portlet. O atributo de linguagem (lang=en) identifica o local.

portlet-actions
Lista as ações ou operações do portlet que podem ser invocadas na janela do portlet. Obs.: Essas operações não são necessariamente ações com significado de HTTP. Ao contrário, algumas ações são interações seguras, embora outras possam ser inseguras, já que modificam o servidor. Na lista de ações, cada interação é representada como um link para designar uma interação segura ou como um formulário para designar uma interação insegura (como a operação Excluir, por exemplo).

portlet-action
Descreve as ações ou operações existentes. Essas ações que resultariam em uma operação existente são representadas pelo atributo selecionado. Além disso, cada ação é classificada por um atributo específico de ação para usar CSS para nomear essas ações (adicionando ícones específicos de ação, por exemplo). A lista de ações possíveis é computada no servidor com o Feed de Operações. Esse feed é expansível, portanto, novas operações podem ser adicionadas com o tempo.

portlet-window-body
Significa o corpo do portlet.

selected
Identifica um item selecionado, que pode ser um portlet ou uma ação. Se ele aparecer na tag <div> para a janela de portlet, o portlet era o destino da interação que produziu a página

portal-drag-source
(Opcional) Significa que a janela de portlet pode ser arrastada pela tela pelos usuários. Esse atributo é válido apenas se a janela de portlet for parte de um contêiner de portlet modificável, e se o usuário possui os direitos para modificar a página e o contêiner não estiver bloqueado. Veja o microformato de contêiner para saber como um destino da ação de arrastar é representado e como a operação arrastar e soltar pode ser realizada. Obs.: Uma ação de arrastar e soltar é acionada a partir do lado do cliente, mas é executada no servidor.

Adicionar os estilos para aparência

Ao ver uma página estática que contém um portlet operando no servidor (Figura 15), perceberá que os portlets são mostrados sem nenhuma formatação e que as ações de portlet são mostradas simplesmente em uma lista, bem acima do corpo do portlet. Portanto, pode ser preciso designá-los usando seus valores de atributo de classe de microformato, conforme descrito anteriormente.

1. Agora adicione um arquivo CSS na pasta de aparência à pasta page.uniquename da página estática
2. Dê um nome a elaskin.css.
3. Adicione os valores de classe a seguir, mostrados na lista, ao arquivo skin.css, usando o assistente de novo estilo ou diretamente através do editor de texto.

.xoxo{
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.xoxo ul{
	margin:0px;
	padding-left:0px;
	font-weight: bold;
	color: #FF9966;
	background-color: #F5F4EF;
	list-style-type: none;
	display: none;
}

.portlet-title{
	margin: 5;
	font-weight: bold;
	color: #85C329;
	background-color: #FAFBF7;
	border-top: 10px solid #CDCDCD;
	list-style-type: none;
	border-top-width: 5px;
}
.portlet-actions{
	margin:1;
	padding-left:10px;
	font-weight: bold;
	color: #FF9966;
	background-color: #F5F4EF;
	list-style-type: none;
	border-bottom: 3px solid #CDCDCD;
	cursor: pointer;
	padding-left: 10px;
}
.portlet-actions li{
	margin: 1;
	font-weight: bold;
	color: #FF9966;
	background-color: ##F5F4EF;
	list-style-type: none;
	text-align: left;
	cursor:auto
}

.portlet-window-body{
	border-bottom: 6px solid #CDCDCD;
	margin-left:10px;
}

Observe que a propriedade de display da classe .xoxo ul é none. Esse é o primeiro elemento UL dentro da tag <div> com a classe xoxo , e nada mais é do que a tag <ul> com o atributo de classeportlet-actions.Com esse valor, as ações do portlet não são exibidas no navegador (no estado reduzido) até que um usuário clique nos sinais de menos reduzidos para expandi-las. Você fornecerá um simples mecanismo de expandir e reduzir usando JavaScrip para renderizar as ações do portlet como parte da aparência do portlet.

4. Agora adicione o link do skin.css aos arquivos de layout estático:

	<link rel="stylesheet" href="skin/skin.css" type="text/css">

A próxima etapa é adicionar o JavaScript para tornar essa aparência reduzível.

Adicionar JavaScrip para tornar a aparência reduzível

É possível ver que, no estado inicial do portlet, as ações do portlet não serão mostradas, pois você usou a propriedade exibir estilo de none. Para tornar as ações de aparência do portlet reduzíveis, é necessário adicionar JavaScript. Nessa tarefa, você criou um novo arquivo JavaScrip chamado skin.js na pasta de aparência da página.uniquename do layout estático.

Para criar um novo arquivo JavaScrip:

1. Clique em Arquivo > Novo > Outro.
2. Na caixa de diálogo, expanda a seção JavaScript e selecione o arquivo de origem JavaScript.
3. Clique em Avançar.
4. Digite o nome como skin.js.
5. Navegue para a pasta na qual é preciso criar o arquivo JavaScript. Clique em Concluir para abrir o arquivo skin.js no editor de JavaScript.
6. O Rational Application Developer Versão 7.5 fornece suporte para edição de JavaScript, usando um editor de uma espécie de Java.
7. Adicione o seguinte código mostrado na Lista X ao arquivo skin.js.

/**
 * Registers the onclick event of the document
 */
document.onclick = function(e) {
	if (!e) e = window.event; // Now e is available to be used in all browsers
	var elem = getEventTarget(e);
	/* test if the element is a UL tag (case insensitive) */
	if (/UL/i.test(elem.tagName)) return;
	else elem = getAncestorElement(elem, 'tagName', /li/i);
	if (elem) {
		/*
		 * if xoxo is not prepended to className 'portlet-actions' i.e.
		 * portlet-actions is not a list, hence return
		 */
		if (!/\bportlet-actions\b/i.test(elem.className)) return;
		/*
		 * get the first UL child of the portlet-actions since it contains all
		 * the actions
		 */
		var ulStyle = elem.getElementsByTagName('ul')[0].style;
		/* toggle between the style of UL from block to normal */
		ulStyle.display = (!ulStyle.display) ? 'block' : '';
	}
};

/**
 * Returns the element node where the mouse was clicked
 */
function getEventTarget(e) {
	var eventTarget;
	if (e.target)
		eventTarget = e.target; // for W3C standards and Netscape
	else if (e.srcElement)
		eventTarget = e.srcElement; // IE
	/* If node type of eventTarget is not ELEMENT return its parent */
	return eventTarget.nodeType == 1 ? eventTarget : eventTarget.parentNode;
}

/**
 * Returns the ancestor element of the node elem whose prop value is equal to
 * regexVal
 */
function getAncestorElement(elem, prop, regexVal) {
	while (elem) {
		if (regexVal.test(elem[prop]))
			return elem;
		elem = elem.parentNode;
	}
	return undefined;
}

O código JavaScript contém três funções:

• A função document.onclick processa todos os eventos em clique no documento e é responsável pela ação de redução da tag <ul class="xoxo portlet-actions"> , que define todas as ações.
• A função getEventTarget retorna o nó do elemento no documento que foi clicado. A função document.onclick precisa desse nó de elemento para ter certeza de que o usuário realmente clicou na tag <div> que contém Ações.
• A função getAncestorElement retorna a tag <li> (conforme exigido pela função document.onclick), que é a mesma ou uma antecessora da tag <div> clicada.

O microformato de contêiner

A Figura 17 mostra a marcação do contêiner que é retornado pelo servidor para a página estática que define a tag <div> de contêiner em seu layout estático.

O contêiner fornece os seguintes valores para os atributos de classe:

portlet-container
Um nome para o contêiner, que é único no escopo da página de hosting, e que é o mesmo valor fornecido para o contêiner de portlet no layout estático. O atributo de ID contém a ID de objeto da janela.

portal-drop-target
Um contêiner modificável que é o destino da ação de arrastar de uma operação de arrastar e soltar

portal-drop-handler
O formulário que representa o manipulador de retorno para as operações de arrastar e soltar. A ação contém uma URL que identifica de forma única o destino da ação de arrastar. É possível adicionar dicas e origens da ação de arrastar de forma dinâmica ao formulário, usando JavaScript. Para a origem da ação de arrastar, use o atributo do microformato de portlet ao definir o portlet.

O microformato de navegação

A Figura 18 mostra a marcação do portlet de navegação que é retornado pelo servidor para a página estática que define a tag <div> do portlet de navegação em seu layout estático. Por ser um portlet, o microformato de portlet para a estrutura geral ainda é válido aqui.

Observe que apenas a tag <div> com a classe portlet-window-body define a marcação extra com certos valores de atributo de classe para manipular os diferentes estados de navegação. Estes são os valores de atributo de classe:

primeiro
O primeiro filho de uma lista, necessário para a modelagem da CSS.

último
O último filho de uma lista, necessário para a modelagem da CSS.

expandido
Um nó expandido. Um nó só pode ser expandido se possuir filhos e se seu estado navegacional estiver definido como expandido

reduzido
Um nó reduzido. Um nó só pode ser reduzido se possui filhos e se seu estado navegacional estiver definido como reduzido.

page-actions
Uma lista das ações disponíveis na página, normalmente as ações usadas para expandir ou reduzir os nós de navegação. Para uma página que está selecionada no momento na navegação, essa lista também contém as ações disponíveis para essa página.

selecionada
A página que está selecionada no momento na navegação.

pageoperation-expand
Atributo que expande um nó reduzido.

pageoperation-collapse
Atributo que reduz um nó expandido.

Assim como é possível aplicar técnicas CSS e JavaScript à aparência, também é possível tornar o contêiner e navegação na sua página estática em uma interface de usuário fácil e simples.

Voltar para parte superior

Opções

Adicionar arquivos localizados

Se deseja que a sua página estática suporte diferentes idiomas ou locais, é possível fazer isso facilmente com a cortesia da tecnologia de agregação de página estática. Ela suporta localização sem muito esforço. Tudo o que necessário fazer é dar nomes aos diferentes arquivos seguindo a convenção de nome do arquivo de base. Esses arquivos podem ser HTML, gráfico (JPG, GIF e outros), CSS, JavaScript (.js), e assim por diante.

Convenção de nomes para arquivos localizados

Se o nome do seu arquivo de base é base_file_name.extension , é necessário nomear a versão localizada do arquivo base_file_name_locale.extension.

Por exemplo, para um arquivo de base chamado my_page.html, a versão em inglês do arquivo émy_page_en.html e a versão em inglês norte-americano do arquivo é my_page_en_us.html. Esses arquivos precisam ser colocados no mesmo diretório do arquivo de base, my_page.html. Embora esses arquivos possuam diferentes nomes de arquivo, eles logicamente representam o mesmo recurso e são chamados pelos seus nomes de base. O portal serve a versão localizada do recurso, quando apropriado.

Criar um arquivo para usar em múltiplas páginas

Agora que você criou a página estática com um layout estático que faz referência a folhas de estilo, JavaScript, imagens e possivelmente outros recursos, é possível criar um arquivo .zip com todos esses recursos e reutilizar o mesmo trabalho para as diferentes páginas estáticas no projeto de portal.

Para criar uma nova página estática, usando o arquivo de layout existente:

1. Selecione um nó (página, rótulo ou URL) no Portal Designer.
2. Selecione Inserir página estática > Antes ou Depois ou Como filho (lembre-se de que a URL não pode ter um atributo de nível de filho).
3. Quando a nova página com a caixa de diálogo do layout estático abrir, como visto anteriormente, digite o título da página estática: MyStaticPage2.
4. Selecione a caixa de seleção "Criar usando página ZIP ou HTML existente" para selecionar o layout existente.
5. Clique em Procurar para localizar o arquivo .zip ou o arquivo de layout HTM ou HTML autocontido e depois clique em OK.
6. Se escolher o arquivo .zip, selecione um arquivo HTM ou HTML do menu suspenso "Selecionar o arquivo de layout".
7. Mantenha os valores padrão para todas as outras opções ou modifique-os de acordo com as suas necessidades e clique em Concluir.
8. A página estática é criada com o arquivo de layout estático no arquivo .zip, e esse arquivo de layout estático é agora aberto para edição. Salve a configuração do portal.

Essa operação importa todo o conteúdo do arquivo archive .zip para uma pasta sob a pasta page.uniquename. Ela fica sob a pasta StaticLayout > PortalConfiguration no seu projeto de portal, sendo que uniquename é seu nome único interno da página estática que é usado pelo Portal Designer.

Editar as propriedades de página do portal com layout estático

Se você não gosta do layout estático definido para sua página estático, é possível substituí-lo por um outro arquivo de layout da sua pasta .zip ou até mesmo de uma pasta .zip diferente. Também é possível alterar como a janela de portlet é exibida. Selecione a página estática no Portal Designer e depois realize as etapas requeridas na aba Página Estática na visualização de Propriedades (veja Figura 19).

Para atualizar o layout estático da página estática para um arquivo de layout diferente do mesmo arquivo .zip:

1. Selecione o menu suspenso Atualizar arquivo de layout e selecione o arquivo de layout que deseja usar
2. A página estática é atualizada para o arquivo de layout estático que acabou de ser selecionado, o que faz o arquivo de layout abrir para edição. Salve a configuração do portal.

Para atualizar o layout estático da página estática para um arquivo de layout de um arquivo .zip diferente ou para um layout estático novo:

1. Clique em Novo para abrir a janela "Substituir arquivo de layout estático (veja Figura 20).
   1. Para criar um novo arquivo de layout para MyStaticPage, clique em Concluir.
   2. Selecione a caixa de seleção Criar usando página ZIP ou HTML existente para selecionar um layout existente.
   3. Procure o local do arquivo e clique em Concluir.

2. A página estática é atualizada para usar o arquivo de layout estático selecionado, e esse arquivo de layout abre para edição.
3. Salve a configuração do portal.
4. Para alterar a opção de exibição da janela do portlet, na visualização de Propriedade selecione a opção Exibição de janela de portlet e atualize-a com o valor desejado.
5. Salve a configuração do portal novamente.

Publicar o projeto de portal com a página estática

Agora que foi criado um projeto de portal consistindo de páginas estáticas, é possível publicá-lo em um servidor local ou remoto WebSphere Portal V6.1.

Se não necessitar de temas e aparências customizados para o portal (como no caso de páginas estáticas independentes), é possível usar a opção Implementar somente configuração do portal para implementar as páginas estáticas completamente. Esse método é mais rápido do que implementar um projeto de portal completo com temas e aparências.

Outras opções

Este artigo explicou a agregação de página estática e o guiou através do processo de implementação usando o Rational Application Developer V7.5. Mas há muito mais para se fazer com as suas páginas estáticas. Você pode incluir portlets cooperativos em uma página estática e ligá-los usando o Portal Designer, criar URLs fáceis para suas páginas estáticas para torná-las fáceis de serem encontradas e marcadas pelo usuário.

Recursos

• Saiba mais sobre agregação de página estática no Centro de Informações do IBM WebSphere Portal.
  
  
• Verifique a página do Rational Application Developer para WebSphere Software no IBM® developerWorks® para links de documentação de produto, artigos, tutoriais, cursos, downloads e outras áreas úteis.
  
  
• Leia a página O que há de novo no IBM Rational Application Developer Versão 7.5 no IBM® developerWorks® para links de documentação de produto, artigos, tutoriais, cursos, downloads e outras áreas úteis.
  
  
• Navegue pelos tópicos no WebSphere Portal da visão geral do Modelo SPI
  
  
• Explore o Centro de Informações do IBM Rational Application Developer para orientação técnica.
  
  
• Aprenda sobre outros aplicativos na IBM Rational Software Delivery Platform, incluindo ferramentas de colaboração para desenvolvimento paralelo e equipes geograficamente dispersas, além de software especializado para gerenciamento de arquitetura, gerenciamento de ativos, gerenciamento de mudança e release, gerenciamento de requisitos integrados, gerenciamento de processo e portfólio, e gerenciamento de qualidade.
  
  
• Visite a Área de software Rational em developerWorks para obter os recursos técnicos e melhores práticas para produtos Rational Software Delivery Plafform.
  
  
• Explore Cursos on-line de Rational baseados em computador, baseados na Web e conduzidos por instrutor. Aprimore suas habilidades e aprenda mais sobre as ferramentas Rational com esses cursos, que vão de introdutório a avançado. Os cursos desse catálogo estão disponíveis para compra de treinamento baseado em computador ou baseado na Web. Além disso, alguns cursos de "Introdução" estão disponíveis sem custo.
  
  
• Assine a newsletter Rational Edge para receber artigos sobre os conceitos por trás do desenvolvimento eficiente de software.
  
  
• Assine a newsletter IBM developerWorks, atualizada semanalmente para receber os melhores tutoriais, artigos, downloads, atividades de comunidade, webcasts e eventos sobre developerWorks.
  
  
• Navegue até a livraria de tecnologia para ver livros sobre estes e outros tópicos técnicos.
  
  

• Faça o download das versões de teste do Rational Application Developer.
  
  
• Faça o download das versões de teste do software IBM Rational.
  
  
• Baixe essas versões de avaliação de produtos IBM e use as ferramentas de desenvolvimento de aplicativos e produtos middleware a partir do DB2®, Lotus®, Tivoli®, e WebSphere®.

• Verifique os fóruns do Rational Development Tools e faça parte da comunidade do developerWorks.
  
  
• Verifique os blogs de developerWorks e faça parte da comunidade do developerWorks.
  
  

Sobre o autor

		Jatin Varshney é engenheiro de software dos Laboratórios de Software da IBM da Índia, em Delhi. Ele trabalha nos recursos Portal Designer e Web 2.0 do componente Portal Tools do IBM Rational Application Developer.

Avalie esta página

Reserve um instante para completar este formulário para nos ajudar a servi-lo melhor. As informações o ajudaram a alcançar seu objetivo? Sim Não Não sei   Faça comentários para ajudar a melhorar esta página:   Quão úteis são as informações? 1 2 3 4 5 Não são úteis Extremamente úteis