< Anterior | Próximo >

Lição 1.4: Criar e Editar uma Folha de Estilo XSL

Folhas de estilo são arquivos que podem ser utilizados para transformar documentos XML em outros tipos de documentos e formatar a saída. Neste exercício, você vai criar uma folha de estilo XSL simples para formatar os dados do arquivo XML em uma tabela em um arquivo HTML.
Antes de começar, será necessário concluir Lição 1.3: Criar e Editar seu Arquivo XML

Criar a Folha de Estilo

Siga estas etapas para criar uma nova folha de estilo vazia:
  1. Selecione Arquivo > Novo > Outros. Na janela Novo, selecione XML > XSL. Clique em Avançar.
  2. Selecione o diretório MyProject.
  3. No campo Nome do Arquivo, digite CDTitle.xsl e clique em Avançar.
  4. Na página Selecionar Arquivo XML, selecione o arquivo CDTitle.xml. Isso associa o arquivo CDTitle.xml ao arquivo CDTitle.xsl.
  5. Clique em Concluir.
O arquivo CDTitle.xsl é criado e aberto automaticamente no editor XSL.

Editar a Folha de Estilo

O editor XSL fornece inúmeros assistentes para ajudá-lo a criar conteúdo em sua folha de estilo.
  1. Para criar um documento HTML, você vai incluir um modelo para gerar informações do cabeçalho HTML e definir o método de saída para o documento.
    1. No editor XSL, posicione o cursor em uma linha vazia após o elemento <xsl:stylesheet> no arquivo CDTitle.xsl.
    2. Clique na visualização Fragmentos e abra o grupo XSL. Se a visualização Fragmentos não for exibida, ela pode ser aberta com um clique em Janela > Mostrar Visualização > Outros > Geral > Fragmentos.
    3. Dê um clique duplo em Cabeçalho HTML Padrão. Isso cria um elemento <xsl:output> que emitirá os resultados da transformação (ou seja, aplicando CDTitle.xsl a CDTitle.xml) em HTML, e um modelo que produzirá um cabeçalho HTML com uma regra <xsl:apply templates> para processar todos os filhos imediatos no arquivo CDTitle.xml.
  2. Crie um modelo que produzirá uma tabela HTML:
    1. Posicione o cursor em uma linha vazia após a tag de finalização </xsl:template> que foi gerada na Etapa 1 acima.
    2. No grupo XSL, dê um clique duplo em Tabela HTML em XSL.
    3. Selecione o primeiro elemento CD como nó de contexto para construir a tabela HTML.
    4. Clique na caixa de opção Agrupar Tabela em um Modelo. Isso indica que você quer agrupar essa tabela em um novo modelo.
    5. Clique na caixa de opção Incluir Cabeçalho para indicar que você quer incluir um cabeçalho nesta tabela. Clique em Avançar.
    6. No campo de espaçamento Célula, digite 20. Isso ajudará a tabela a ter uma aparência melhor aumentando a quantidade de espaço entre as células em sua tabela.
    7. Clique em Concluir. Isso cria um novo modelo que produzirá uma tabela HTML no arquivo CDTitle.xsl.
  3. Clique em Arquivo > Salvar para salvar seu arquivo.

Transformar o Arquivo XML em HTML

  1. Na visualização Navegador, mantenha pressionada a tecla Ctrl e selecione CDTitle.xml e CDTitle.xsl.
  2. Clique com o botão direito do mouse e selecione Executar como > Transformação XSL.
  3. O nome do arquivo resultante será _CDTitle_transform.html. Ele é automaticamente aberto no Designer de Página e tem o conteúdo do arquivo XML em uma tabela.
  4. Para ver a tabela como ela aparecerá em um navegador da Web, feche o arquivo _CDTitle_transform.html, clique nele com o botão direito do mouse na visualização Navegador e selecione Abrir com > Navegador da Web.
Ela deverá aparecer conforme mostrado abaixo:

Navegador da Web

Ponto de Verificação da Lição

O editor XSL fornece inúmeros assistentes para ajudá-lo a criar uma folha de estilo com conteúdo. Ele também fornece um método para criar uma tabela HTML baseada nessa folha de estilo
Agora que concluiu esta lição, você deverá estar apto a:
  • Criar uma folha de estilo XSL.
  • Preencher a folha de estilo com conteúdo que gerará uma tabela HTML.
  • Transformar um arquivo XML em HTML.
< Anterior | Próximo >

Feedback