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