Observação:

a interface de usuário foi simplificada no Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das opções descritas neste artigo no Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo (em inglês).

Usar XML e XSL com páginas da Web

A linguagem de markup extensível (XML) é uma linguagem que permite estruturar informações. Como o HTML, o XML permite estruturar informações com tags, mas as tags XML não são predefinidas como as tags HTML. Em vez disso, o XML permite criar tags que definem melhor sua estrutura de dados (esquema). As tags são aninhadas em outras para criar um esquema de tags pai e filho. Como a maioria das tags HTML, todas as tags de um esquema XML têm uma tag de abertura e uma de fechamento.

O exemplo a seguir mostra a estrutura básica de um arquivo XML:

<?xml version=“1.0”> 
<mybooks> 
    <book bookid=“1”> 
        <pubdate>03/01/2004</pubdate> 
        <title>Displaying XML Data with Adobe Dreamweaver</title> 
        <author>Charles Brown</author> 
    </book> 
    <book bookid=“2”> 
        <pubdate>04/08/2004</pubdate> 
        <title>Understanding XML</title> 
        <author>John Thompson</author> 
    </book> 
</mybooks>

Nesse exemplo, cada tag <book> pai contém três tags filho: <pubdate>, <title> e <author>. No entanto, cada tag <book> também é uma tag filho da tag <mybooks>, que é a tag no maior nível do esquema. Você pode nomear e estruturar as tags XML de qualquer maneira, contanto que as tags sejam aninhadas corretamente em outras e que cada tag de abertura seja atribuída a uma tag de fechamento correspondente.

Os documentos XML não contêm nenhuma formatação: são apenas recipientes de informações estruturadas. Depois de criar um esquema XML, você pode usar a linguagem de folha de estilos extensível (XSL) para exibir as informações. Assim como as folhas de estilos em cascata (CSS) permitem formatar o HTML, o XSL permite formatar dados XML. Você pode definir estilos, elementos de página, layout e outros itens em um arquivo XSL e anexá-lo a um arquivo XML para que, quando um usuário exibe os dados XML em um navegador, os dados sejam formatados de acordo com o que foi definido no arquivo XSL. O conteúdo (os dados XML) e a apresentação (definida pelo arquivo XSL) são totalmente separados, fornecendo a você maior controle sobre a exibição das informações em uma página da Web. Em síntese, XSL é uma tecnologia de apresentação do XML, onde a saída principal é uma página HTML.

As transformações de linguagem de folha de estilos extensível (XSLT) é uma linguagem de subconjunto de XSL que, na realidade, permite exibir dados XML em uma página da Web e "transformá-los", junto com estilos XSL, em informações legíveis e com estilo em forma de HTML. Você pode usar o Dreamweaver para criar páginas XSLT que permitem executar transformações XSL usando um servidor de aplicativo em um navegador. Em uma transformação XSL do servidor, o servidor transforma o XML e o XSL e os exibe na página. Em uma transformação do cliente, um navegador (como o Internet Explorer) faz esse trabalho.

A abordagem adotada (transformações do servidor ou do cliente) depende do que você está tentando atingir como resultado final, das tecnologias disponíveis no seu caso, do nível de acesso a arquivos de origem XML e de outros fatores. As duas abordagens têm suas vantagens e desvantagens. Por exemplo, as transformações do servidor funcionam em todos os navegadores, enquanto as transformações do cliente estão restritas somente a navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). As transformações do servidor permitem exibir dados XML dinamicamente a partir do seu próprio servidor ou de qualquer outro lugar da Web, enquanto as transformações do cliente devem usar dados XML que estão hospedados localmente no seu próprio servidor da Web. Finalmente, as transformações do servidor exigem a implantação das páginas em um servidor de aplicativo configurado, enquanto as transformações do cliente precisam somente do acesso a um servidor da Web.

Para assistir a um tutorial e saber mais sobre XML, consulte www.adobe.com/go/vid0165_br.

Transformações XSL do servidor

O Dreamweaver fornece métodos de criação de páginas XSLT que permitem executar transformações XSL do servidor. Quando um servidor de aplicativo executa a transformação XSL, o arquivo que contém os dados XML pode residir no seu próprio servidor ou em qualquer outro lugar da Web. Além disso, qualquer navegador pode exibir os dados transformados. No entanto, a implantação de páginas para transformações do servidor é um pouco complexa e requer o acesso a um servidor de aplicativo.

Ao trabalhar com transformações XSL do servidor, você pode usar o Dreamweaver para criar páginas XSLT que geram documentos HTML completos (páginas XSLT inteiras) ou fragmentos XSLT que geram uma parte de um documento HTML. Uma página XSLT inteira é similar a uma página HTML normal. Ela contém uma tag <body> e uma tag <head> e permite exibir uma combinação de dados HTML e XML na página. Um fragmento XSLT é uma parte do código, usado por um documento separado, que exibe dados XML formatados. Diferente de uma página XSLT inteira, esse fragmento é um arquivo independente que não contém nenhuma tag <body> ou <head>. Se desejar exibir dados XML em uma página sua, crie uma página XSLT inteira e associe seus dados XML a essa página. Se, por outro lado, você desejar exibir dados XML em uma seção específica de uma página dinâmica existente (por exemplo, uma página inicial dinâmica para uma loja de artigos de esporte, com placares de um feed RSS exibidos em uma lateral da página), crie um fragmento XSLT e insira uma referência a ele na página dinâmica. A criação de fragmentos XSLT e seu uso em conjunto com outras páginas dinâmicas para exibir dados XML é o cenário mais comum.

A primeira etapa da criação desses tipos de páginas é criar o fragmento XSLT. O fragmento é um arquivo separado que contém o layout, a formatação e outras informações dos dados XML que você eventualmente pode exibir na página dinâmica. Depois de criar o fragmento XSLT, insira uma referência a ele em sua página dinâmica (por exemplo, uma página PHP ou ColdFusion). A referência inserida ao fragmento funciona de modo semelhante a uma inclusão do servidor (SSI); os dados XML formatados (o fragmento) residem em um arquivo separado, enquanto a Visualização de design exibe um alocador de espaço para o fragmento na página dinâmica propriamente dita. Quando um navegador solicita a página dinâmica que contém a referência ao fragmento, o servidor processa a instrução incluída e cria um novo documento no qual o conteúdo formatado do documento (e não o alocador de espaço) é exibido.

Transformações XSL do servidor
A. Navegador solicita a página dinâmica. B. Servidor Web localiza e passa a página para o servidor de aplicativo. C. Servidor de aplicativo rastreia a página em busca de instruções e obtém fragmento do XSLT. D. Servidor de aplicativo executa transformação (lê o fragmento do XSLT, obtém e formata os dados xml). E. Servidor de aplicativo insere o fragmento transformado na página e a passa de volta para o servidor Web. F. Servidor Web envia a página concluída para o navegador. 

Use o comportamento Transformação XSL do servidor para inserir a referência a um fragmento XSLT em uma página dinâmica. Quando a referência é inserida, o Dreamweaver gera uma pasta includes/MM_XSLTransform/ na pasta raiz do site que contém um arquivo de biblioteca de runtime. O servidor de aplicativo usa as funções definidas nesse arquivo ao transformar os dados XML especificados. O arquivo é responsável por procurar os dados XML e os fragmentos XSLT, executar a transformação XSL e exibir os resultados na página da Web.

O arquivo que contém o fragmento XSLT, o arquivo XML que contém seus dados e o arquivo de biblioteca gerado em runtime devem estar no servidor da sua página para serem exibidos corretamente. (Se você selecionar um arquivo XML remoto como fonte de dados, de um feed RSS, por exemplo, esse arquivo obviamente deve residir em qualquer outro lugar da Internet.)

Você também pode usar o Dreamweaver para criar páginas XSLT inteiras para serem usadas com transformações do servidor. Uma página XSLT inteira funciona exatamente como um fragmento XSLT; somente ao inserir a referência à página XSLT inteira usando o comportamento Transformação XSL do servidor você está inserindo o conteúdo completo de uma página HTML. Desse modo, todo o HTML da página dinâmica (a página .cfm, .php ou .asp que age como a página de recipiente) deve ser removido antes de inserir a referência.

O Dreamweaver suporta transformações XSL para páginas ColdFusion, ASP e PHP.

Observação:

seu servidor deve ser configurado corretamente para executar transformações do servidor. Para obter mais informações, entre em contato com o administrador do servidor.

Transformações XSL do cliente

Você pode executar transformações XSL no cliente sem usar um servidor de aplicativo. Você pode usar o Dreamweaver para criar uma página XSLT inteira que fará isso; no entanto, as transformações do cliente requerem a manipulação do arquivo XML que contém os dados que deseja exibir. Além disso, as transformações do cliente funcionam somente em navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). Para obter mais informações sobre os navegadores que suportam ou não as transformações XSL, consulte www.w3schools.com/xsl/xsl_intro.asp.

Primeiro, crie uma página XSLT inteira e anexe uma fonte de dados XML. (O Dreamweaver solicita que a fonte de dados seja anexada quando a nova página é criada.) Você pode criar uma página XSLT totalmente nova ou converter uma página HTML existente em uma página XSLT. Ao converter uma página HTML existente em uma página XSLT, você deve anexar uma fonte de dados XML usando o painel Ligações (Janela > Ligações).

Depois de criar a página XSLT, você deve vinculá-la ao arquivo XML que contém os dados XML inserindo uma referência à página XSLT no próprio arquivo XML (assim como você insere uma referência a uma folha de estilos CSS externa na seção <head> de uma página HTML). Os visitantes do seu site devem exibir o arquivo XML (não a página XSLT) em um navegador. Quando os visitantes acessam a página, o navegador executa a transformação XSL e exibe os dados XML formatados pela página XSLT vinculada.

A relação entre as páginas XML e XSLT vinculadas é conceitualmente similar, embora seja diferente do modelo CSS externo/página HTML. Quando houver uma página HTML que contém o conteúdo (como texto), use uma folha de estilos externa para formatar esse conteúdo. A página HTML determina o conteúdo e o código CSS externo, que o usuário nunca vê, determina a apresentação. Com XSLT e XML, a situação é inversa. O arquivo XML (que o usuário nunca vê na forma bruta) determina o conteúdo, enquanto a página XSLT determina a apresentação. A página XSLT contém as tabelas, o layout, os gráficos e outros itens que o HTML normalmente contém. Quando um usuário visualiza o arquivo XML em um navegador, a página XSLT formata o conteúdo.

Transformações XSL do cliente
A. Navegador solicita arquivo XML. B. Servidor responde enviando arquivo XML ao navegador. C. Navegador lê a diretiva XML e chama o arquivo XSLT. D. Servidor envia arquivo XSLT ao navegador. E. Navegador transforma e exibe os dados XML no navegador. 

Quando você usa o Dreamweaver para vincular uma página XSLT a uma página XML, o Dreamweaver insere o código apropriado na parte superior da página XML. Se você possuir a página XML que está sendo vinculada (isto é, se o arquivo XML residir exclusivamente no seu servidor da Web), basta usar o Dreamweaver para inserir o código apropriado que vincula as duas páginas. Quando você possui o arquivo XML, as transformações XSL executadas pelo cliente são totalmente dinâmicas. Desse modo, sempre que você atualiza os dados no arquivo XML, qualquer saída HTML que usa a página XSLT vinculada será atualizada automaticamente com as novas informações.

Observação:

os arquivos XML e XSL usados para as transformações do cliente devem residir no mesmo diretório. Caso contrário, o navegador lerá o arquivo XML e encontrará a página XSLT da transformação, mas não encontrará os ativos (folhas de estilos, imagens, etc.) definidos pelos links relativos na página XSLT.

Se você não possuir a página XML que está sendo vinculada (por exemplo, se desejar usar os dados XML de um feed RSS de algum outro lugar da Web), o fluxo de trabalho será um pouco mais complicado. Para executar transformações do cliente usando dados XML de uma fonte externa, primeiro faça download do arquivo de origem XML no mesmo diretório onde reside a página XSLT. Quando a página XML estiver no seu site local, você poderá usar o Dreamweaver para adicionar o código apropriado que vincula a página XML à página XSLT e postar as duas páginas (o arquivo XML baixado e a página XSLT vinculada) no seu servidor da Web. Quando o usuário visualiza a página XML em um navegador, a página XSLT formata o conteúdo, assim como no exemplo anterior.

A desvantagem de executar transformações XSL do cliente nos dados XML provenientes de uma fonte externa é o fato de os dados XML serem apenas parcialmente “dinâmicos”. O arquivo XML baixado e alterado é simplesmente um “instantâneo” do arquivo que reside em algum outro lugar da Web. Se o arquivo XML original for alterado na Web, você deve baixar o arquivo novamente, vinculá-lo à página XSLT e postar o arquivo XML novamente no seu servidor da Web. O navegador processa somente os dados recebidos do arquivo XML no servidor da Web, não os dados contidos no arquivo XML de origem.

Dados XML e elementos repetitivos

O objeto XSLT de região repetitiva permite exibir elementos repetidos de um arquivo XML em uma página. Qualquer região que contém um alocador de espaço de dados XML pode ser transformada em uma região repetitiva. No entanto, as regiões mais comuns são tabelas, linhas de tabelas ou uma série de linhas de tabelas.

O exemplo a seguir mostra como o objeto XSLT de região repetitiva é aplicado em uma linha da tabela que exibe informações sobre o cardápio de um restaurante. A linha inicial exibe três elementos diferentes do esquema XML: item, descrição e preço. Quando o objeto XSLT de região repetitiva é aplicado na linha da tabela e a página é processada por um servidor de aplicativo ou por um navegador, a tabela é repetida com dados exclusivos inseridos em cada nova linha da tabela.

O objeto XSLT de região repetitiva é aplicado

Quando um objeto XSLT de região repetitiva é aplicado em um elemento na janela Documento, um fino contorno cinza com abas é exibido ao redor da região repetida. Ao visualizar seu trabalho em um navegador (Arquivo > Visualizar no navegador), o contorno cinza desaparece e a seleção é expandida para exibir os elementos repetitivos especificados no arquivo XML, assim como na ilustração anterior.

Ao adicionar o objeto XSLT de região repetitiva à página, o comprimento do alocador de espaço de dados XML é truncado na janela Documento. Isso acontece porque o Dreamweaver atualiza a expressão XPath (Linguagem de caminho XML) do alocador de espaço de dados XML de modo que haja relação com o caminho do elemento repetitivo.

Por exemplo, o código a seguir é referente a uma tabela que contém dois alocadores de espaço dinâmicos, sem um objeto XSLT de região repetitiva aplicado:

<table width="500" border="1"> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/title"/></td> 
    </tr> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/description"/></td> 
    </tr> 
</table>

O código a seguir é referente à mesma tabela com o objeto XSLT de região repetitiva aplicado:

<xsl:for-each select="rss/channel/item"> 
    <table width="500" border="1"> 
        <tr> 
            <td><xsl:value-of select="title"/></td> 
        </tr> 
        <tr> 
            <td><xsl:value-of select="description"/></td> 
        </tr> 
    </table> 
</xsl:for-each>

No exemplo anterior, o Dreamweaver atualizou o XPath dos itens que estão na Região repetitiva (título e descrição) para relacioná-los com o XPath das tags <xsl:for-each> delimitadoras e não ao documento completo.

O Dreamweaver gera expressões XPath relativas ao contexto em outros casos também. Por exemplo, se você arrastar um alocador de espaço de dados XML para uma tabela que já tenha um objeto XSLT de região repetitiva aplicado, o Dreamweaver exibirá automaticamente o XPath relativo ao XPath existente nas tags <xsl:for-each> delimitadoras.

Visualizar dados XML

Ao usar a opção Visualizar no navegador (Arquivo > Visualizar no navegador) para visualizar os dados XML inseridos em um fragmento XSLT ou em uma página XSLT inteira, o mecanismo que executa a transformação XSL varia de acordo com a situação. Para páginas dinâmicas que contêm fragmentos XSLT, o servidor de aplicativo sempre executa a transformação. Em outras situações, o Dreamweaver ou o navegador pode executar a transformação.

A tabela a seguir resume as situações em que a opção Visualizar no navegador é usada e os mecanismos que executam as respectivas transformações:

Tipo de página visualizada no navegador Transformação dos dados executada por
Página dinâmica que contém um fragmento XSLT Servidor de aplicativo
Fragmento XSLT ou página XSLT inteira Dreamweaver
Arquivo XML vinculado a uma página XSLT inteira Navegador

Os tópicos a seguir fornecem diretrizes para ajudar você a determinar os métodos de visualização adequados, de acordo com suas necessidades.

Visualização de páginas para transformações do servidor

No caso das transformações do servidor, o conteúdo que o visitante do site vê é transformado pelo servidor de aplicativo. Ao criar páginas XSLT e páginas dinâmicas para serem usadas com transformações do servidor, é recomendado visualizar sempre a página dinâmica que contém o fragmento XSLT em vez do próprio fragmento. No primeiro cenário, use o servidor de aplicativo, que garante a consistência da sua visualização com o que os visitantes do site verão ao acessarem sua página. No último cenário, o Dreamweaver executa a transformação e pode fornecer resultados ligeiramente inconsistentes. Você pode usar o Dreamweaver para visualizar o fragmento XSLT durante o processo de criação, mas verá os resultados mais precisos do processamentos dos dados se usar o servidor de aplicativo para visualizar a página dinâmica depois de inserir o fragmento XSLT.

Visualização de páginas para transformações do cliente

No caso das transformações do cliente, o conteúdo que o visitante do site vê é transformado por um navegador. Para tal, adicione um link do arquivo XML à página XSLT. Se você abrir o arquivo XML no Dreamweaver e visualizá-lo em um navegador, forçará o navegador a carregar o arquivo XML e executar a transformação. Desse modo, você tem a mesma experiência do visitante do site.

No entanto, essa abordagem dificulta a depuração da página porque o navegador transforma o XML e gera o HTML internamente. Se selecionar a opção Exibir fonte do navegador para depurar o HTML gerado, você verá somente o XML original recebido pelo navegador, não o HTML completo (tags, estilos, etc.) responsável pelo processamento da página. Para ver o HTML completo ao visualizar o código-fonte, você deve visualizar a página XSLT em um navegador.

Visualização de páginas XSLT inteiras e de fragmentos XSLT

Ao criar páginas XSLT inteiras e fragmentos XSLT, visualize seu trabalho para verificar se os dados estão sendo exibidos corretamente. Se a opção Visualizar no navegador for usada para exibir uma página XSLT inteira ou um fragmento XSLT, o Dreamweaver executará a transformação usando um mecanismo interno. Esse método gera resultados rápidos e facilita a criação e a depuração incremental da página. Ele também permite exibir o HTML completo (tags, estilos, etc.) por meio da seleção da opção Exibir fonte no navegador.

Observação:

esse método de visualização normalmente é usado quando você começa a criar páginas XSLT, independentemente do uso do cliente ou do servidor para transformar os dados.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online