Diretrizes: Construindo Interfaces com o Usuário da WebTópicosIntrodução
O ambiente de desenvolvimento da Web no RAD 6.0 fornece um conjunto abrangente de ferramentas para construir rapidamente interfaces com o usuário da Web. Ele inclui o Web Site Designer e o Page Designer e vários assistentes para simplificar a criação de páginas complexas da Web. Este documento fornece diretrizes sobre como utilizar essas ferramentas de modo eficiente para construir interfaces com o usuário da Web, descrevendo uma abordagem de desenvolvimento, identificando os tipos de página suportados e realçando os recursos que facilitam a criação de uma página da Web. Abordagem de Desenvolvimento
Embora seja possível utilizar imediatamente o Page Designer para construir cada página da Web individual na interface com o usuário, o RAD 6.0 promove uma abordagem de desenvolvimento descendente utilizando o Web Site Designer como ponto de partida. Seu editor de Navegação permite que você:
Inicie construindo um diagrama hierárquico que represente a estrutura do Web site. Uma gaveta Site está disponível na visualização Paleta para permitir que você arraste e solte páginas e projetos existentes no diagrama e organize-os em grupos. O editor permite incluir, excluir e reorganizar facilmente as páginas de um modo visual. A criação de um diagrama de navegação permite que o Web Site Designer identifique e mantenha controle automaticamente dos links de navegação entre as páginas da Web e gere um mapa de site. Posteriormente, ao compor uma página individual utilizando o Page Designer, é possível incluir elementos de navegação nela, como barra de navegação ou menu, que podem ser personalizados para mostrar apenas os links apropriados com base na estrutura do site (por exemplo, você pode mostrar apenas os links para Topo, Pai, Irmão e Primeiro Filho). Um gabarito de página define os elementos visuais e o layout comuns para todas as páginas e permite aplicar uma aparência e um comportamento consistentes ao seu Web site. Você pode criar um utilizando um assistente durante a criação de seu projeto da Web ou separadamente depois disso. O editor de Navegação permite aplicar facilmente um gabarito às páginas selecionadas ou a todas as páginas do diagrama. Uma boa prática sugerida é incluir seus elementos de navegação no gabarito e aplicá-lo a todas as páginas a fim de obter controles de navegação consistentes em todo o Web site. Dê um clique duplo em uma página para ativar o assistente de Criar uma Página. Isso permitirá que você escolha um dos tipos de páginas suportadas (consulte Seleção de Tipo de Página), especifique propriedades iniciais da página e abra-a no editor do Page Designer. Agora você pode compor e editar o conteúdo da página da Web. Observe que uma gaveta Navegação do Web Site fica automaticamente disponível na visualização Paleta para permitir que você arraste e solte elementos de navegação na página. Seleção de Tipo de Página
O RAD 6.0 suporta a construção de interfaces com o usuário utilizando tecnologia HTML, JSP e Faces JSP. Cada um representa uma opção de implementação que aborda os requisitos de diferentes tipos de aplicativos da Web. Cada tecnologia também define um tipo de página que suporta diferentes recursos da interface com o usuário da Web. Ao construir uma interface com o usuário da Web, é importante, portanto, entender os recursos que cada tipo de página suporta e saber se é adequado para o tipo de aplicativo da Web sendo desenvolvido. As seções a seguir identificam os recursos da interface com o usuário suportados pelos diferentes tipos de página no RAD 6.0 e especifica quais tipos de página podem ser utilizados na estrutura estática, dinâmica, Struts e JSF (JavaServer Faces) com base nos aplicativos da Web. Recursos Suportados da Interface com o Usuário![]() Os diferentes tipos de página oferecidos pelo RAD 6.0 para implementar as interfaces com o usuário da Web podem ser agrupados em três categorias: HTML, JSP e Faces JSP. O tipo de página JSP distingue entre um arquivo JSP simples e uma página Struts JSP. Desse modo, um tipo de página Faces JSP pode ser um Faces JSP básico ou um Faces JSP com armazenamento em cache do lado cliente. Os diferentes tipos de página são descritos a seguir. HTML Este tipo de página permite construir uma página HTML básica e também suporta outras linguagens de marcações (consulte a Tabela 1 - Recursos de Tipo de Página). Os recursos HTML típicos como Frameset, Folha de Estilo em Cascata e geração de script em JavaScript também são suportados. Além disso, a ferramenta permite a definição e utilização de gabaritos de página para suportar a criação de uma aparência e um comportamento consistentes em páginas da Web. JSP O tipo de página JSP tem como objetivo suportar as interfaces com o usuário implementadas utilizando a tecnologia JSP (o RAD 6.0 suporta o padrão JSP 2.0). Todos os recursos de uma página HTML básica estão disponíveis e são complementadas pela geração de script JSP (Java Scriptlet) e tecnologia (Tag de Personalização) de ação. A ferramenta permite a definição de um Fragmento JSP para fatorar partes comuns de uma página em um arquivo separado que pode ser incluído conforme apropriado em outras páginas JSP. O acesso de dados de backend utilizando tecnologia SDO (Service Data Object) também é suportado (consulte Conceitos: Estruturas de Aplicativo da Web para obter uma descrição de SDOs). Struts JSP Uma página Struts JSP estende um JSP simples incluindo automaticamente suporte para elementos específicos de Struts (consulte Conceitos: Estruturas de Aplicativo da Web para obter uma descrição de Struts). O objetivo é utilizá-lo para desenvolver interfaces com o usuário da Web para os aplicativos implementados utilizando a estrutura Struts. Especificamente, a ferramenta automaticamente inclui o acesso às bibliotecas de tag de Struts HTML (struts-html.tld) e Bean (struts-bean.tld) e permite a inclusão de campos a partir do bean de ActionForm diretamente na página. Ela também fornecerá a opção para incluir outras bibliotecas de Struts. Faces JSP O tipo de página Faces JSP é uma página JSP especificamente projetada para interfaces com o usuário da Web implementadas utilizando tecnologia JSF (consulte Conceitos: Estruturas de Aplicativo da Web para obter uma descrição de JSF). Fornece acesso à biblioteca de tag de núcleo JSF e componentes da interface com o usuário predefinidos (Componentes do Faces) que podem ser arrastados e soltos na página. Além disso, um Faces JSP suporta a geração de scripts utilizando trechos Java, por exemplo, para especificar a manipulação dos eventos do componente da interface com o usuário. Faces JSP com Armazenamento em Cache do Lado Cliente Este tipo de página estende o Faces JSP, fornecendo componentes da interface com o usuário cujos dados podem ser armazenados em cache no lado cliente. Especificamente, o cache do lado cliente permite ligar um componente à variáveis JavaScript contrapondo-se aos dados do lado do servidor. Isso permite construir páginas da Web com melhor desempenho porque o número de idas e voltas entre o cliente e o servidor é reduzido. O componentes do cliente Faces incluem:
A tabela a seguir resume os recursos suportados por cada tipo de página e pode ser utilizada como um guia para determinar o tipo que melhor atende aos requisitos da interface com o usuário do aplicativo da Web.
* Acesso aos Dados SDO requer WAS v5.1 como destino de implementação Tabela 1 - Recursos do Tipo de Página
Aplicabilidade do Aplicativo da Web
Tabela 2 - Aplicabilidade do Tipo de Página
Edição de Página
Page Designer é a ferramenta no RAD 6.0 utilizada para editar uma página da Web. Ela fornece uma visualização central do editor que permite criar uma página em um código fonte textual ou WYSIWYG visual com base no modo. A ferramenta funciona em conjunto com outras visualizações para suportar o desenvolvimento em diferentes tipos de página da Web. Em particular, as seguintes visualizações facilitam muito a edição de página: Visualização Paleta A visualização Paleta fornece um rico conjunto de componentes de UI prontos para uso que você pode arrastar e soltar em uma página. Ela os organiza em gavetas que agrupam os componentes com relação à funcionalidade. Por exemplo, elementos padrão de formulário HTML, como botões, campos de texto, caixas drop-down, são grupados em uma gaveta Tags de Formulário. A lista de gavetas exibida na visualização Paleta varia dependendo do tipo de página editada. A Tabela 3 lista as gavetas padrão mostradas para cada tipo de página suportada. Você pode personalizar a Paleta e a maioria das gavetas, incluindo, excluindo, ocultando ou exibindo gavetas e componentes, respectivamente. Para uma descrição de cada gaveta e seu conteúdo padrão, consulte a documentação do produto.
Tabela 3 - Gavetas Padrão de Paleta por Tipo de Página
Visualização Edição Rápida Esta visualização permite incluir rapidamente trechos de código JavaScript em sua página. Quando você seleciona um componente em sua página, uma lista de eventos possíveis apropriados para esse componente é exibida na área de janela da visualização Edição Rápida. Você pode selecionar um evento e incluir um script para ele de uma das seguintes maneiras:
Recursos
Para obter informações detalhadas sobre o Web Site Designer e o Page Designer, consulte a documentação do produto:
|
Rational Unified Process
|