Tutorial 2: XML

1. Tutorial 2: XML Working with Namespaces

2. Section 2.1 Combining XML Vocabularies in a Compound Document

3. Tree Structure of the Parts Vocabulary parts The partselement must contain at least one part + part title description instock The parts vocabulary includes the title of each part, the part description, and the number of each part currently in stock (instock)

4. parts.xml parts.css rendered Web page

5. Tree Structure of the ModelVocabulary The model vocabulary contains elements for a model’s title, description, type, the number of models that need to be assembled (ordered), and the parts required for the assembly model title description type ordered parts

6. model.css model.xml rendered Web page

7. Proposed report page combines several vocabularies Web page elements from the XHTML vocabulary elements from the model vocabulary elements from the parts vocabulary

8. Tree Structure of the order.xml document model title description type ordered parts parts + part title description instock

9. style of the model.xml content style of the parts.xml content style of the combined document Rendered order.xml Web page

10. model title description type ordered parts parts + part title An Example of Name Collision description instock

11. Name Collision • Name collision occurs when elements from two or more documents share the same name. • Name collision will keep a document from being validated. • Name collisions are often unavoidable.

12. Using Namespacesto avoid Name Collision • A namespace is a defined collection of element and attribute names. • For example: the model namespace and the parts namespace • Names that belong to the same namespace must be unique. Elements can share the same name if they reside in different namespaces. • Namespaces must be declared before they can be used

13. Working with Namespaces Applying a namespace to an XML document involves two steps: • Declaring the namespace • Identifying the elements and attributes within the document that belong to that namespace

14. Declaring a Namespace To declare a namespace, add the following:xmlns:prefix=“uri” • prefix is the namespace prefix and uri (used as an id) that uniquely identifies a resource • The namespace is applied to the element containing the xmlns attribute, as well as to its descendant elements. Namespaces can be declared in document’s root element<model xmlns:mod=“http://jacksonelect.com/models”>

15. Applying a Namespace to Elements • After declaring the namespace, identify the elements and attributes that belong to that namespace: <prefix:element> . . . </prefix:element> • Examples: <mod:title>Laser4c (pr205)</mod:title> <mod:model xmlns:mod=“http://jacksonelect.com/models”>

16. Applying the models namespace prefix

17. Applying the parts namespace prefix

18. Applying a Default Namespace • Declare a default namespace by omitting the prefix in the namespace declaration. • <elementxmlns = "uri"> ... </element> <model xmlns = "http://jacksonelect.com/models"> <title>Laser4C (PR205)</title> <description>Entry level color laser printer</description> <type>color laser</type> <ordered>320</ordered> <parts list = "chx201,fa100-5,eng005-2,cbx-450V4,tn01-53" /></model>

19. Working with Attributes • To apply a namespace to an attribute, add:<element prefix:attribute=“value”> Example: <mod:model xmlns:mod=“. . ” mod:id=“pr205”> • There is no default namespace for attribute names. An attribute name without a prefix is assumed to belong to the namespace as the element that contains it. <mod:model xmlns:mod=“. . ” id=“pr205”>

20. Section 2.2 Adding a namespace to a style sheet

21. Declaring a Namespace in a Style Sheet Add the following rule:@namespace prefix url(uri); • Both the prefix and uri must match the prefix and uri used in the XML document • Example: @namespace mod url(http: . . .); • Any @namespace rule must come after all @import and @charset rules and before any style declarations

22. Applying a Namespace to a Selector prefix|selector {attribute1:value1; attribute2:value2; . . .} prefix\:selector {attribute1:value1; attribute2:value2; . . .} • Examples: • mod|title {width: 150px} • mod|* {font-size: 12pt} • mod\:title {width: 150px} For Internet browsers

23. Applying the models namespace to the style sheet

24. Applying the partsnamespace to the style sheet

25. Web page combining styles from both namespaces styles applied from the models namespace styles applied from the parts namespace

26. Namespace URIs for standard vocabularies

27. Combining Standard Vocabularies • The standard vocabularies can also be combined within single documents. • For example, Firefox, using a built-in style sheet, is able to display the documents that combine both the XHTML and MathML language. • The elements of almost any XML document can be displayed in a Web browser if you design style sheets to work with the elements of the XML vocabulary.

28. XML document with XHTML and MathML elements Document rendered by Firefox A compound XHTML and MathML document

29. Adding XML to an HTML document Leave the html elements in the default namespace, and provide namespace prefixes for all of the non-HTML elements • Convert a HTML file into an XHTML file • adding an xml declaration • setting the default namespace of the document to the XHTML vocabulary <?xml version="1.0" encoding = “utf-8" standalone = "yes" ?> <html xmlns=http://www.w3.org/1999/xhtml>

30. Converting the html file to an XHML file <?xml version=“1.0” encoding=“utf-8” standalone=“yes” ?> . <html xmlns=“http://www.w3.org/1999/xhtml” xmlns:pa=“http://jacksonelect.com/parts”> <head> . <link rel=“stylesheet” href=“parts.css” type=“text/css” /> <body> . <h2>Parts List</h2> <pa:parts> . </pa:parts> . </html> Every element that lacks a namespace prefix is considered part of the XHTML vocabulary

31. Adding descriptive text to each of the bulleted items

33. Completed compound report page