Roteiro de Auxílio para as Atividades Práticas de Sistemas de Informação A linguagem XML no contexto do curso de Sistemas de Informação é utilizada principalmente para o armazenamento e a manipulação de dados. No teste prático, que será usado neste roteiro, se pedia que fosse criado um documento XML para o armazenamento de dados de máquinas elétricas ou automóveis. No roteiro será reutilizado o caso dos automóveis. A seguir se apresenta passo-a-passo o que poderia ter sido feito para a resolução do teste prático. 1. Para manipulação de arquivos XML se deve utilizar preferencialmente o programa XMLPad (http://www.wmhelp.com/xmlpad3.htm). O HTML-Kit é mais aconselhável para edição de documentos HTML. Após lançar o programa XMLPad se deve selecionar no menu a opção File/New. A janela apresentada a seguir é mostrada pelo programa. Nesta janela se deve selecionar XML Document e clicar em OK. O software apresenta então a janela mostrada a seguir. 1/10
Nesta janela se deve indicar em Root Tag o nome do elemento raiz do documento XML, que para os automóveis pode ser automoveis (nomes de marcadores não podem ter espaços nem acentos). Após clicar em OK se terá acesso a janela para edição do documento; esta janela é apresentada a seguir. 2/10
Nesta janela se pode então criar o documento. Como se trata de automóveis se deve criar um nó para a representação de cada automóvel. A este nó se pode, por exemplo, dar o nome de auto. Um único nó deve ser utilizado para a representação de todos os automóveis, ou seja, todos os automóveis serão representados usando o mesmo elemento auto. Dentro de cada elemento auto se deve então criar nós que permitam que se represente os dados que se deseja manter para os automóveis que são: Fabricante, Modelo, Número de Portas, Ano e Cor. Um documento XML vazio para a representação de um único automóvel é descrito a seguir. <?xml version = "1.0" encoding = "utf-8"?> <automoveis> <auto> <fabricante></fabricante> <modelo></modelo> <nportas></nportas> <ano></ano> <cor></cor> </auto> </automoveis> Para finalizar a criação do documento XML se deve inserir os dados de cada um dos automóveis que se pediu que fossem representados. Na seqüência se deve salva o documento com a extensão.xml (neste roteiro se utilizou autos.xml). A figura apresentada a seguir mostra a janela do XMLPad com os dados de cada automóvel. 3/10
Um documento XML é visualizado como uma árvore. Ao se clicar sobre a aba Preview se tem acesso a visualização do documento criado. A seguir se apresenta o resultado. 4/10
2. No teste foi solicitado que se criasse uma folha de estilos CSS para a apresentação do documento XML. Conforme explicado, documentos XML não contêm nenhuma informação de formatação (na figura imediatamente acima se pode observar sua apresentação padrão como uma árvore). Para que os mesmos possam ser apresentados segundo uma formatação qualquer, folhas de estilo devem ser usadas. Cada um dos elementos do documento XML deve ter sua formatação declarada na folhas de estilos. Assim, se deve declarar o formato dos elementos automoveis, auto, fabricante, modelo, nportas, ano e cor. Para a declaração da formatação as propriedades apresentadas na aula sobre CSS devem ser usadas. Deve-se usar as propriedades para declarar os formatos solicitados, como por exemplo as cores das fontes ou seus tamanhos. Para a mudança de linhas se deve ter conhecimento do Modelo de Caixas (transparência 9 da aula XML-CSS). A partir da declaração da propriedade display se pode definir se um elemento será apresentado na mesma linha (display: inline) ou em linhas diferentes (display: block). A propriedade border pode ser usada para se desenhar uma borda ao redor do elemento. A seguir se apresenta uma possível solução para a apresentação do documento XML sobre automóveis. Uma folha de estilos deve ser salva com a extensão.css (neste roteiro a folha de estilos que contém a declaração abaixo foi salva como autos.css). autos { background-color: #ffff99; border:solid 1px #A3A3A3; padding:10px; font-family: arial; tautos { font-size: 18pt; color: blue; font-weight: bold; line-height: 2 5/10
auto { display: block; background-color: #ccffcc; margin-bottom: 30pt; margin-left: 0; border:solid 1px #A3A3A3; padding:10px; fabricante, modelo, nportas, ano, cor { display: block; color: #0000FF; font-size: 16pt; fabricante:before { font-weight:bold; text-transform:uppercase; content:"fabricante: "; modelo:before { font-weight:bold; text-transform:uppercase; content:"modelo: "; nportas:before { font-weight:bold; text-transform:uppercase; content:"número de Portas: "; ano:before { font-weight:bold; text-transform:uppercase; content:"ano: "; cor:before { font-weight:bold; text-transform:uppercase; content:"cor: "; 6/10
Conforme se pode observar acima, cada um dos elementos do documento XML teve sua formatação declarada. Pode-se inclusive utilizar a mesma formatação para um conjunto de elementos e neste caso o nome de todos os elementos deve preceder a declaração da formatação. O pseudo elemento :before é utilizado para declarar um título para cada um dos elementos. Para que o documento XML seja apresentado com a formatação declarada na folha de estilos, é necessário incluir a declaração da folha de estilos no documento. Isto é feito através da inclusão após o prólogo XML (a primeira linha do documento XML apresentado) da seguinte declaração: <?xml-stylesheet type="text/css" href="autos.css"?> O documento autos.css deve estar no mesmo diretório do documento XML. Caso se deseje colocar a folha de estilos em outro diretório, o caminho deve ser declarado em href. Após esta declaração o documento XML pode ser visualizado com a formatação definida na folha de estilos. O pseudo elemento só é visível no navegador Firefox, e por esta razão a figura a seguir apresenta o resultado da aplicação da folhas de estilos CSS ao documento XML neste navegador (para a correta apresentação dos acentos, no prólogo se utilizou <?xml version="1.0" encoding="iso-8859-1"?>). 7/10
3. A parte final do exercício solicitava que se transformasse o documento XML e um documento HTML. Para tanto uma folha de estilos XSL deve ser utilizada. Uma folha de estilos XSL quando declarada em um documento XML faz com que o navegador que lê o documento XML transforme o conteúdo do documento XML, neste caso específico em um documento HTML. De outro maneira se pode dizer que ao ler o documento XML o navegador irá interpretar os comandos da folha de estilos XSL e criar, a partir do conteúdo declarado no documento XML um segundo documento em outro formato qualquer (neste caso HTML). A utilização de uma folha de estilos XSL deve ser declarada do mesmo modo que foi declarada a utilização da folha CSS (as duas não são usadas juntas, ou se utiliza uma ou outra). Assim as duas primeiras linhas do documento XML devem ser: <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet href="autos.xsl" type="text/xsl"?> As transparências 10,11,12 e 13 da aula XML-XSTL detalham os passos básicos que devem ser seguidos. Na transparência 10 se pode ver a transformação mais básica onde nada é importado do documento XML, sendo que somente conteúdo HTML é criado na saída. Desta transparência o elemento mais importante é o <xsl:template match="/"> que indica que a transformação será aplicada ao documento inteiro. Através do atributo match se pode indicar a qual elemento se pretende aplicar uma transformação. Na transparência 11 se apresenta como se pode recuperar um elemento qualquer em um documento XML. Deve-se utilizar <xsl:value-of select="catalog/cd/title"/> para recuperar, neste caso, o valor do título de um CD. Conforme se pode observar o atributo select deve indicar a posição do elemento na árvore que representa o documento XML. Neste exemplo a raiz do documento é catalog que tem como filho cd que tem como filho title. Nesta transparência se pode observar que somente um elemento do documento XML é apresentado. 8/10
A transparência 12 apresenta a utilização do elemento for-each. Este elemento deve ser utilizado para que se itere sobre o documento XML de modo a recuperar cada um dos nós que representam os CDs. Um elemento <xsl:for-each select="catalog/cd"> deve portanto ser utilizado (o elemento como qualquer elemento XML deve ser fechado através da instrução </xsl:for-each>). Deste modo para cada um dos elementos se irá criar uma linha da tabela (o par <tr> </tr>) com as colunas onde são apresentados os dados (o número de colunas interna ao for-each deve ser idêntico ao número declarado para os títulos das colunas através dos elementos th). Na transparência 13 se apresenta o resultado final. A folha de estilos XSL completa usada é apresentada a seguir. <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:template match="/"> <html> <head> <title>lista de automóveis</title> </head> <body> <h2>lista de automóveis</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>fabricante</th> <th>modelo</th> <th>número de Portas</th> <th>ano</th> <th>cor</th> </tr> <xsl:for-each select="autos/auto"> <tr> <td align="center"><xsl:value-of select="fabricante"/></td> <td align="center"><xsl:value-of select="modelo"/></td> <td align="center"><xsl:value-of select="nportas"/></td> <td align="center"><xsl:value-of select="ano"/></td> <td align="center"><xsl:value-of select="cor"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> 9/10
O resultado da aplicação da folhas XSL ao documento XML é apresentado (novamente utilizando o navegador Firefox) a seguir. 10/10