Intranet Systems Development

concepcionsockSoftware and s/w Development

Aug 15, 2012 (4 years and 11 months ago)

252 views

Intranet Systems
Development

assessed lab

structure


Thursday 27
th

November 09:00
-
11:00


In Labs C27
-
28


Individual computer
-
based assessment


30% of overall grade


“open book”


lecture notes


lab solutions


internet resources


Tomorrow’s lab


last year’s assessment

Requirements


Resource


1 well
-
formed XML data file


Create a DTD and amend the structure


Amend and validate the XML wrt the DTD


Write an XSLT to transform XML to HTML


Use JavaScript DOM to manipulate the
XML data


Build a web tool to interact with the data

Requirements


Files submitted via Moodle at end of lab


keep a copy in your H drive


submit the following


XML data file


DTD


XSLT file


HTML page(s)

well
-
formed XML


Lab1: Q3, Q5
-
8


defining XML structures


different structures possible


check well
-
formedness in NetBeans


<?xml version = "1.0"?>

<!DOCTYPE fellowship SYSTEM
"fellowshipDTD.dtd">

<fellowship>


<member



name = "Aragorn"



age = "80"



height = "2.5m"



country = "Arnor"


/>


<member



name = "Gandalf"



age = "2063"



height = "3m"



country = "Aman"


/>

<?xml version = "1.0"?>

<fellowship>


<member>



<name>Aragorn</name>



<age>80</age>



<height>2.5m</height>



<country>Arnor</country>


</member>


<member>



<name>Gandalf</name>



<age>2063</age>



<height>3m</height>



<country>Aman</country>


</member>

create a DTD and amend the
structure


Lab2: Q3
-
5, Q10, Q11


use NetBeans to create a DTD from the
XML data


link the XML to the DTD using a
DOCTYPE declaration


add new structure to the DTD


re
-
validate in NetBeans (a very important
step!!!)

<?xml version='1.0' encoding='UTF
-
8'?>


<!
--


An example how to use this DTD from your XML
document:



<?xml version="1.0"?>



<!DOCTYPE fridge SYSTEM "fridgeML.dtd">



<fridge>


...


</fridge>

--
>

<!ELEMENT door (smallShelf|milktray|cheesebox|eggrack)*>

<!
---

Put your DTDDoc comment here.
--
>

<!ELEMENT bottom (item)*>

<!
---

Put your DTDDoc comment here.
--
>

<!ELEMENT middle (item)*>

<!
---

Put your DTDDoc comment here.
--
>

<!ELEMENT item (#PCDATA)>

<!ATTLIST item


age
-
in
-
days CDATA #IMPLIED


quantity CDATA #IMPLIED


description CDATA #REQUIRED


>

<!
---

Definition of the temperature element.
--
>


<!ELEMENT temperature EMPTY>

<!ATTLIST temperature fridge
-
temperature NMTOKEN
#REQUIRED>


<!
---

Here I have specified where the newly
-
defined
temperature element should occur in the structure.
--
>


<!ELEMENT fridge
(temperature,(freezerbox|vegetabletray|door|shelf)*)>

amend and validate the XML


edit the XML file to conform to the new
structure


check URL reference to DTD carefully in
NetBeans


work in small steps


don’t introduce well
-
formedness errors


read the validation errors carefully

write an XSLT


Lab3: Q6, Q7.


NetBeans’ default XSLT provides the
basic structure


divide the processing into templates for
different elements


locate the elements using XPath


define template content using (well
-
formed!) HTML and XSLT expressions

<?xml version="1.0" encoding="UTF
-
8" ?>


<!
--


Document : fellowNames.xsl


Created on : 8 October 2003, 20:59


Author : Default


Description:


Purpose of transformation follows.

--
>


<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>


<xsl:output method="html"/>

standard XSLT boilerplate


<xsl:template match="fellowship">


<html>


<head>


<title>The Fellowship of the Ring</title>


</head>


<body>


<h1>The Fellowship of the Ring</h1>


<ul>


<xsl:apply
-
templates select = "member" />


</ul>


</body>


</html>


</xsl:template>

<xsl:template match = "member">


<li><xsl:value
-
of select = "name" /></li>

</xsl:template>

<xsl:template match = "member">


<tr>


<td class = "shaded">


<xsl:value
-
of select = "name" /></td>


<td><xsl:value
-
of select = "age" /></td>


<td class = "shaded">


<xsl:value
-
of select = "height" /></td>


<td><xsl:value
-
of select = "country" /></td>


</tr>

</xsl:template>

write an XSLT


Lab4: Q2
-
8


extract content or attributes


iterate through a set of elements


branching logic


use special XPath functions


sort


use of variables

<xsl:template match="/fridge">


<html>


<head>


<title>stylesheet.xsl</title>


</head>


<body>


<h1>fridge temperature</h1>


<hr />


<xsl:apply
-
templates select = "temperature" />


<hr />


</body></html>

</xsl:template>


<xsl:template match = "temperature">


<xsl:value
-
of select = "@fridge
-
temperature" />

</xsl:template>

refine templates stepwise

<xsl:template match = "temperature">


<xsl:choose>


<xsl:when test = "@fridge
-
temperature &lt; 4" >


<p style = "font
-
size:xx
-
large; color: blue;">


<xsl:value
-
of select = "@fridge
-
temperature" />


</p>


<p style = "color: blue;">cool !</p>


</xsl:when>


<xsl:otherwise>


<p style = "font
-
size:xx
-
large; color: red;">


<xsl:value
-
of select = "@fridge
-
temperature" />


</p>


<p style = "color: red;">Warning: fridge overheating !


</p>


</xsl:otherwise>


</xsl:choose>

</xsl:template>

<xsl:template match="/">


<html>


<head>


<title>Fridge Contents</title>


</head>


<body>


<h1>Fridge Contents</h1>


<hr />


<ul>


<xsl:apply
-
templates select = "//item" />


</ul>


</body>


</html>

</xsl:template>

<xsl:template match = "item">


<li>


<xsl:value
-
of select = "@description" /></li>

</xsl:template>

<xsl:template match="/">


<html>


<head>


<title>Fridge Contents</title>


<style type = "text/css" rel = "stylesheet">


table {align:center; background: yellow; border: black
inset}


th,td {border: black inset; text
-
align: center;}


</style>


</head>


<body>


<h1>Fridge Contents</h1>


<hr />


<table>


<tr>


<th>Description</th>


<th>Quantity</th>


<th>Age in Days</th>


</tr>


<xsl:apply
-
templates select = "//item" />


</table>

<hr /></body></html></xsl:template>

<xsl:template match = "item">


<tr>


<xsl:for
-
each select = "@*">


<td><xsl:value
-
of select = "." /></td>


</xsl:for
-
each>


</tr>

</xsl:template>

building a table row by row

<xsl:template match="/">

<!
--
previous content here
--
>

<table>


<tr>


<th>Description</th>


<th>Quantity</th>


<th>Age in Days</th>


</tr>


<xsl:for
-
each select = "//item" >


<xsl:sort select = "@age
-
in
-
days“



data
-
type = "number" order = "descending"/>


<xsl:sort select = "@description"/>


<xsl:apply
-
templates select = "." />


</xsl:for
-
each>

</table>

<hr />

</body>

</html>

</xsl:template>

<xsl:template match = "item">



<xsl:variable name = "color">


<xsl:if test = "@age
-
in
-
days&gt;=20">


<xsl:text>red</xsl:text>


</xsl:if>


</xsl:variable>



<tr bgcolor = "{$color}">


<xsl:for
-
each select = "@*">


<td><xsl:value
-
of select = "." /></td>


</xsl:for
-
each>


</tr>


</xsl:template>

refine templates stepwise

<xsl:template match = "item">


<xsl:variable name = "color">


<xsl:if test = "@age
-
in
-
days&gt;=20">


<xsl:text>red</xsl:text>


</xsl:if>


</xsl:variable>


<tr bgcolor = "{$color}">


<xsl:for
-
each select = "@*">


<td><xsl:value
-
of select = "." /></td>


</xsl:for
-
each>


<td><xsl:value
-
of select = "name(..)"/></td>


</tr>

</xsl:template>

refine templates stepwise

Use JavaScript DOM


Lab5: Q2,Q5


load the XML data from file into an ActiveX
DOM Object


manipulate the object using the DOM
interface


other programming in general JavaScript


see Lectures H and I

build a web tool


Lab3:Q10, Lab5:Q6
-
8


use JavaScript to manipulate windows


use buttons, text fields and functions


separation of concerns


DOM to alter content


XSLT to handle presentation

the web tool