Editando um Estilo do Web Site

O estilo do Web Site pode ser selecionado durante a criação do projeto, se você escolher Ativar o Web Site Designer na página Escolher um Estilo da Web do assistente de criação do projeto. Uma vez que você tenha selecionado o estilo do Web Site, um gabarito de amostra é aplicado em suas páginas do WebFacing que é consistente com os gabaritos disponíveis para seleção utilizando as ferramentas do Web Site Designer. Para obter informações adicionais, consulte a documentação do Web Site Designer.

O estilo do Web Site deve ser utilizado se houver outros aplicativos da Web utilizando o Web Site Designer para aplicar gabaritos e organizar a navegação do seu Web site. O gabarito de amostra fornecido com o estilo do Web Site não inclui nenhuma barra de navegação ou mapa do site. Você não deve inclui-los até que o suporte para execução de diversos Projetos Webfacing em uma única sessão do navegador esteja disponível. O projeto do WebFacing, no entanto, pode ser incluído na navegação de seus projetos da Web e pode ser modificado com a mesma aparência e comportamento do seu Web site.
Nota: Se o seu aplicativo exige uma URL relativa, o estilo do Web Site Designer pode não ser adequado.

Para ver a estrutura de diretórios na qual um estilo está armazenado para seu projeto, selecione a guia Navigator. Na visualização Navegador, os caminhos para os diretórios de estilos para um projeto são: <project_name>/WebContent/webfacing/styles e <project_name>/WebContent/theme.

Se você desejar editar o estilo que é utilizado para a área do aplicativo e os elementos da tecla de comando, edite o arquivo apparea.css no diretório \apparea utilizando as páginas de propriedades de Estilo ou diretamente utilizando as ferramentas fornecidas no IDE. As páginas de propriedades de Estilo facilitam a visualização das modificações que estão sendo feitas e mostram como essas alterações são aplicadas nos elementos DDS, como janela e registros de subarquivos. As alterações feitas através das páginas de propriedades de Estilo são então aplicadas aos nomes de classe de estilo correspondentes no arquivo apparea.css. Para utilizar o editor CSS do IDE, clique com o botão direito no arquivo que deseja editar e escolha Abrir com > CSS Designer.

Se deseja editar o layout e o quadro em torno da área do aplicativo e das teclas de comando, edite os arquivos definidos pelo usuário utilizando o Web Site Designer ou diretamente, selecionando os arquivos no sistema de arquivos dentro dos diretórios \theme e \webfacing\styles\chome.

Para editar os arquivos no diretório \theme utilizando o editor CSS do IDE, clique com o botão direito no arquivo CSS que deseja editar e selecione Abrir com > CSS Designer. Para editar o layout e o quadro, clique com o botão direito no arquivo WFB_blue.jtpl e selecione Abrir com > Page Designer para Modelo. Para editar o arquivo PageBuilder.jsp ao qual o estilo e os arquivos de gabarito serão aplicados, clique com o botão direito no arquivo PageBuilder.jsp no diretório \webfacing\styles\chrome e selecione Abrir com Page Designer. Para editar o arquivo de gabarito associado ao PageBuilder.jsp a partir do Page Designer, na visualização Design, clique com o botão direito em Abrir Modelo de Página com > Page Designer para Modelo. Isso é o mesmo que abrir o arquivo WFB_blue.jtpl diretamente utilizando o Page Designer para Modelo. Para editar o arquivo de estilo CSS associado ao modelo a partir do Page Designer para Modelo, no grupo de guias Estilos, escolha a exibição Estilos e clique com o botão direito em blue.css > Editar. Isso é o mesmo que abrir o arquivo CSS diretamente utilizando o CSS Designer.

Para editar os arquivos para o layout e estrutura utilizando o Web Site Designer, ative a visualização Projetos WebFacing e expanda seu projeto, em seguida, expanda as pastas Estilo > Web Site. Clique com o botão direito do mouse no arquivo .website-config e selecione Abrir Com > Web Site Designer Para editar o gabarito, clique como botão direito no ícone PageBuilder e selecione Modelo de Página > Abrir Modelo de Página Com > Page Designer para Modelo. Para editar o estilo CSS, clique com o botão direito no ícone PageBuilder e selecione Estilo > Editar CSS e, em seguida, selecione ../../theme/blue.css. Observe que os ícones Índice, INV1 e INV2 na navegação são fornecidos como arquivos de amostra que podem ser incluídos nos projetos do WebFacing. Para obter informações adicionais, consulte o tópico relacionado ao exemplo de estilo do Web Site Designer.

As propriedades de estilos são armazenadas em dois diretórios separados da pasta estilos, dentro do projeto do WebFacing:
Arquivos que podem ser editados para alterações de estilo Diretório em que os arquivos são armazenados Parte da página da Web em que se aplicam Editável utilizando páginas de propriedade?
apparea.css \styles\apparea
  • área do aplicativo
  • teclas de comando
Sim
  • PageBuilder.jsp
  • Arquivos .css definidos pelo usuário
\chrome e \chrome\html
  • estrutura
  • layout
Não
Nota: Não é necessário converter novamente seus arquivos fonte para efetivar as alterações de estilo.
Referências relacionadas
Considerações sobre Configurações da Web
Informações relacionadas
Customizando seus Aplicativos do WebFacing

Feedback