Advanced Web Engineering - PowerPoint PPT Presentation

1 / 42
About This Presentation
Title:

Advanced Web Engineering

Description:

It is designed for distributing structured documents over the web ... WML (for use with WAP-enabled mobile devices) University of Sunderland ... – PowerPoint PPT presentation

Number of Views:55
Avg rating:3.0/5.0
Slides: 43
Provided by: lizg9
Category:

less

Transcript and Presenter's Notes

Title: Advanced Web Engineering


1
Advanced Web Engineering
  • Week 11 XML

2
XML What is it?
  • XML (Extensible Markup Language) was created by
    the W3C as a standard for creating markup
    languages.
  • It is designed for distributing structured
    documents over the web
  • XML is a lot more powerful than HTML
  • It is designed for managing information rather
    than simply displaying it
  • It allows users to
  • It is possible to search, sort, manipulate and
    render XML using Extensible Markup Language (XSL)
  • It is highly portable

3
What can users dowith XML?
  • Extract data from a document
  • Define their own tags and attributes
  • Define data structures and nest document
    structures to any level of complexity
  • Write applications that validate a documents
    structure. An XML document can contain an
    optional description of its grammar for use by
    applications that perform structural validation

4
XML Tags
  • XML is a meta-language
  • With HTML, markup is static and elements are
    tightly integrated into the HTML standard and
    cannot be changed or extended.
  • XML allows you to create and configure your own
    markup tags
  • Example of XML markup
  • ltnamegt
  • ltfirstnamegtLizlt/firstnamegt
  • ltsurnamegtGandylt/surnamegt
  • lt/namegt
  • XML elements can be defined through user defined
    document type definitions (DTD) and applied to
    one or more XML documents.
  • StyleSheets can be used to determine formatting
  • There are no correct tags for an XML document,
    except those defined by the author (via the DTD)

5
XML applications
  • XML permits document authors to create markup for
    virtually any type of information.
  • Authors can create entirely new markup languages
    for describing specific types of data, including
    mathematical formulas, chemical molecular
    structures, music, recipes etc.
  • Some examples are
  • XHTML (the XML replacement for HTML)
  • VoiceXML (for speech)
  • MathML (for mathematics)
  • SMIL (the Synchronous Multimedia Integration
    Language, for multimedia presentations)
  • CML (Chemical Markup Language, for chemistry)
  • XBRL (Extensible Business Reporting Language, for
    financial data exchange)
  • WML (for use with WAP-enabled mobile devices)

6
DTD/Schema
  • An XML document can optionally reference a
    document that defines its structure.
  • This document is either a Document Type
    Definition (DTD) or a schema.
  • The DTD/schema is a syntactic specification used
    as a model for XML documents.
  • It contains definitions of the elements and their
    attached attributes.
  • When an XML document references a DTD or schema,
    some parsers can read it to check that the XML
    document follows the structure that the
    DTD/schema defines.
  • These are known as validating parsers
  • If the XML document conforms to the DTD/schema it
    is said to be valid.
  • If the parser can process the XML document
    successfully it is said to be well-formed
    (syntactically correct).
  • By definition, a valid document is well-formed.

7
Structuring Data
  • Element types
  • Can be declared to describe data structure
  • XML elements
  • Root element
  • Must be exactly one per XML document
  • Contains all other elements in document
  • Lines preceding the root element are called the
    prolog
  • Container element
  • Contains sub-elements (children)
  • Empty element
  • No matching end tag
  • Terminate with forward slash (/)
  • In XHTML, ltIMG/gt is an empty element

8
DTD/schema Format
  • Specify list of element types, attributes and
    their relationship to each other
  • Optional, but recommended for program conformity
  • Can be placed at the top of the XML file or in a
    separate file
  • !Element
  • Element type declaration defines the rules for
    an element
  • Plus sign () one or more occurrences
  • Asterisk () any number of occurrences
  • Question mark (?) either zero or exactly one
    occurrence
  • Omitted operator exactly one occurrence
  • PCDATA
  • The element can store parsed character data

9
Demonstration
  • classlist1.xml
  • classlist2.xml/classlist.dtd

10
Formatting XML
  • XML documents can be given basic formatting using
    stylesheets
  • The stylesheet can be added to the top of the XML
    document
  • Or it can be loaded from a separate file
  • This latter approach means that the same
    stylesheet can be attached to other XML documents
    with the same DTD/schema
  • The stylesheet is loaded using the following
    syntax
  • lt?xml-stylesheet type"text/css"
    href"classlist.css"?gt

11
Demonstration
  • classlist3.xml / classlist.css

12
Fruit Stall example
  • We will use xml to implement a fruit stall
    similar to that in Unit 5
  • The data will be written in XML and placed in a
    separate file fruit.xml.
  • We will use special facilities within XHTML and
    JavaScript to display this data.
  • In the most basic example one item of fruit is
    displayed on each page
  • The user clicks the page to move to the next
    item.

13
Fruitstall DTD
  • For this example we will add the DTD to the top
    of the XML file
  • lt?xml version"1.0" encoding"ISO-8859-1"?gt
  • lt!-- Edited with XML Spy v4.2 --gt
  • lt!DOCTYPE fruitstall
  • lt!ELEMENT fruitstall (fruit)gt
  • lt!ELEMENT fruit (description, price)gt
  • lt!ELEMENT description (PCDATA)gt
  • lt!ELEMENT price (PCDATA)gt
  • gt

14
XML Data
  • fruit.xml has the following data (2 records only
    shown)
  • ltfruitstallgt
  • ltfruitgt
  • ltdescriptiongtAppleslt/descriptiongt
  • ltpricegt32lt/pricegt
  • lt/fruitgt
  • ltfruitgt
  • ltdescriptiongtBananaslt/descriptiongt
  • ltpricegt50lt/pricegt
  • lt/fruitgt
  • lt/fruitstallgt

15
Accessing XML filefrom XHTML
  • The ltxmlgt tag is used to load an external XML
    file into the document
  • A number of attributes are necessary
  • src (the external XML file to load)
  • id (the identifier by which the XML data will be
    accessed throughout the document)
  • async (this attribute should be set to false if
    you wish the complete XML file to be loaded
    before processing continues)
  • To load the fruit stall XML file we will use
  • ltxml src"fruit.xml" id"xmlfruit
  • async"false"gtlt/xmlgt

16
Binding Data
  • ltpgt
  • Description
  • ltspan datasrc"xmlfruit" datafld"Description"gt
  • lt/spangtltbr /gt
  • Price per kg
  • ltspan datasrc"xmlfruit" datafld"Price"gt
  • lt/spangt
  • lt/pgt

17
Traversing Data
  • ltscript type "text/javascript"gt
  • lt!--
  • function forward()
  • var x document.getElementById("xmlfruit").rec
    ordset
  • if (!x.EOF)
  • x.movenext()
  • // --gt
  • lt/scriptgt
  • __________________________________________________
    __________________________________________________
    ______
  • ltbody onclick "forward()"gt

18
Demonstration
  • databind1.htm

19
Version 2
  • Version 1 does nothing when the end of data is
    reached.
  • It would be preferred if the user is informed
    when there are no more records.
  • The bound data item can be replaced with text via
    JavaScript.
  • We do this by setting the id attribute of the
    ltspangt tag
  • To modify XHTML content we have so far used the
    innerHTML property
  • To modify the textual content of a tag only we
    can use the innerText property.
  • The style is also modified to set the colour to
    red.

20
Setting Text
  • function forward()
  • var x document.getElementById("xmlfruit").rec
    ordset
  • var desc document.getElementById("Description
    ")
  • if (!x.EOF)
  • x.movenext()
  • if (x.EOF)
  • desc.style.color "red"
  • desc.innerText "No more items"

21
Demonstration
  • databind2.htm

22
Version 3
  • In this example, form elements are added to move
    through the data.
  • Each button calls a function which moves the data
    in the appropriate direction.
  • We use the following recordset methods
  • movenext()
  • moveprevious()
  • movefirst()
  • movelast()
  • We also use the following recordset properties
  • EOF (end of file)
  • BOF (beginning of file)

23
Subset of code
  • function moveToPrevious()
  • var x document.getElementById("xmlfruit").recor
    dset
  • var desc document.getElementById("Description")
  • var price document.getElementById("Price")
  • if (!x.BOF)
  • x.moveprevious()
  • desc.style.color "black"
  • if (x.BOF)
  • desc.style.color "red"
  • desc.innerText "No more items"
  • price.innerText ""
  • __________________________________________________
    __________________________________________________
    ______
  • ltinput type"button" value"Previous"
    onclick"moveToPrevious()" /gtgt

24
Demonstration
  • databind3.htm

25
Version 4
  • Having successfully displayed all data elements
    the fruit stall is now expanded.
  • An edit field is added to allow the user to enter
    the quantity of fruit they require.
  • A button is provided to calculate the cost of
    fruit.
  • Data is obtained from the input box using the
    value property.
  • Data is obtained from the data source using the
    bound ltspangt tags innerText property.
  • The result is written back to a non-bound ltspangt
    element using its id attribute and the innerText
    property.
  • No error checking is provided so correct input
    data is assumed.

26
New HTML elements
  • ltpgtEnter Quantity ltinput type"text"
    name"quantity" value"0" size"4"gtlt/pgt
  • ltpgtltinput type"button" value"Calculate"
    onclick"getTotal(this.form)"gtlt/pgt
  • ltpgtCost of order
  • ltspan id"OrderCost"gtlt/spangtlt/pgt

27
New functions
  • function getTotal(objForm)
  • var x document.getElementById("xmlfruit").rec
    ordset
  • if (!x.BOF !x.EOF)
  • document.getElementById("OrderCost").innerTe
    xt
  • ""
  • round((objForm.quantity.value
    x("price")) / 100)
  • function round(val)
  • return Math.round(val100) / 100

28
Tidying output
  • Additional code is required in move functions to
    ensure fields are cleared as appropriate when
    data is moved
  • The move functions must also have the form data
    passed as a parameter
  • function moveToPrevious(objForm)
  • ...
  • // code to move to appropriate data item
  • ...
  • document.getElementById("OrderCost").innerText
    ""
  • objForm.quantity.value "0"

29
Demonstration
  • databind4.htm

30
Binding to a table
  • Data can be bound directly to an HTML table.
  • The data source is bound within the lttablegt tag.
  • The data fields are bound to one row of the
    lttbodygt of the table using the lttrgt and lttdgt
    tags.
  • When displayed the table will be expanded to show
    one row for each data record.
  • If the table requires additional non-bound rows
    at the top or bottom then these should be added
    using lttheadgt and/or lttfootgt tags.

31
Fruit stall version 5
  • Before completing the fruit stall a simplified
    table version has been produced.
  • This displays the data records in a two-column
    table.
  • A header is provided to include table headings.
  • Data is bound to this table but no functionality
    is provided.

32
Table definition
  • lttable datasrc"xmlfruit" border"1"gt
  • ltthead style"background-color66FF99"gt
  • lttrgt
  • ltthgtDescriptionlt/thgt
  • ltthgtPrice per kglt/thgt
  • lt/trgt
  • lt/theadgt
  • lttbody style"background-colorFFFF99"gt
  • lttrgt
  • lttdgtltspan datafld"description"gtlt/spangtlt/tdgt
  • lttdgtltspan datafld"price"gtlt/spangtlt/tdgt
  • lttrgt
  • lt/tbodygt
  • lt/tablegt

33
Demonstration
  • databind5.htm

34
The final version
  • This version takes the simple bound table and
    adds functionality.
  • An additional column is provided for the user to
    enter the required quantity.
  • Buttons are provided to calculate the total cost
    of the fruit order and to clear all values
  • As before no error checking is provided.

35
HTML Table
  • lttable datasrc "xmlfruit" border"1"gt
  • ltthead style"background-color66FF99"gt
  • lttrgt
  • ltthgtDescriptionlt/thgt
  • ltthgtPrice per kglt/thgt
  • ltthgtEnter Quantitylt/thgt
  • lt/trgt
  • lt/theadgt
  • lttbody style"background-colorFFFF99"gt
  • lttrgt
  • lttdgtltspan datafld "description"gtlt/spangtlt/tdgt
  • lttdgtltspan datafld "price"gtlt/spangtlt/tdgt
  • lttdgtltinput type"text" name"quantity" value"0"
    size"14"gtlt/tdgt
  • lttrgt
  • lt/tbodygt
  • lt/tablegt

36
Accessing table data
  • In order to calculate the total cost all rows of
    the table must be accessed.
  • The HTML code specifies only a single row of the
    table.
  • The input form element in this row is given a
    name e.g. quantity
  • The separate data rows of the table are accessed
    via array elements e.g. objForm.quantityi.value
  • Remember that the array index starts at 0.

37
Accessing XML datawithin JavaScript
  • The price of each fruit can be obtained directly
    from the XML recordset
  • We can traverse the XML file from within
    JavaScript
  • Note that a recordset starts from 1 not 0!
  • To set the recordset to the first item we use
  • x.absoluteposition 1
  • To obtain the value of a particular field in the
    record we either take it directly from the
    recordset
  • var priceVal
  • document.getElementById("xmlfruit").records
    et("price")
  • Or we store the recordset in a variable and
    access that
  • var x document.getElementById("xmlfruit").rec
    ordset
  • var priceVal x("price")
  • We the move forward through the recordset using
    x.movenext()

38
Calculation
  • function count(objForm)
  • var i
  • var total 0
  • var x document.getElementById("xmlfruit").recor
    dset
  • x.absoluteposition 1
  • for (i0 i lt x.recordcount i)
  • total total (objForm.quantityi.value
    x("price"))
  • x.movenext()
  • document.getElementById("OrderCost").innerHTML
    "" round(total / 100)
  • __________________________________________________
    __________________________________________________
    ______
  • ltinput type"button" value"Calculate"
    onClick"count(this.form)"gt

39
Demonstration
  • databind6.htm

40
XML Hierarchy
  • XML data can contain multiple levels of elements
  • These are determined by the DTD/schema
  • The classlist.dtd and classlist.xml files are
    such an example
  • One of the elements of classlist is student
  • This element contains four child elements
  • firstname
  • middlename
  • Surname
  • result
  • When using such data in XHTML tables using data
    binding both the datasrc and datafld attributes
    must be set in the lttablegt
  • The datafld attribute of the ltspangt tag must then
    include the parent element path

41
Demonstration
  • classlist.htm

42
Acknowledgements/Resources
  • Material for this lecture was obtained from
  • www.w3schools.com
Write a Comment
User Comments (0)
About PowerShow.com