Bai Giang XML
Transcript of Bai Giang XML
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 1/106
ðI HC ðÀ NNGTRUNG TÂM PHÁT TRIN PHN MM
XML Tutorial
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 2/106
I/ What is XML?
• XML is a markup language for documentscontaining structured information.
. words, pictures, etc.
. some indication of what role that content plays. For
example : content in a section heading has a differentmeaning from content in a footnote, which means somethingdifferent than content in a figure caption or content in adatabase table, etc.
• Structured information contains both content :
• A markup language is a mechanism to identifystructures in a document. The XML specificationdefines a standard way to add markup todocuments.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 3/106
An example XML documentA simple XML document : <?xml version="1.0"?> <Root>
<Person> <FirstName>Janet</FirstName> <Middle>Q</Middle> <LastName>Leverling</LastName> <Address>
<Address1>123 Elm</Address1> <Address2>bis</Address2> <City>Pleasantville</City> <State>MA</State>
<Zip>12345</Zip> </Address> </Person> …
</Root>
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 4/106
So XML is Just Like HTML?• No. In HTML, both the tag semantics and the tag
set are fixed.Ex : An <h1> is always a first level heading and the tag<ati.product.code> is meaningless.
• XML specifies neither semantics nor a tag set.In fact XML is really a meta-language for describing markuplanguages. In other words, XML provides a facility to define
tags and the structural relationships between them. Sincethere's no predefined tag set, there can't be any preconceivedsemantics.
• All of the semantics of an XML document will either
be defined by the applications that process them orby stylesheets.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 5/106
So XML is Just Like SGML?• No. XML is defined as an application profile of
SGML.
• SGML is the Standard Generalized Markup
Language defined by ISO 8879.
• SGML is not well suited to serving documents overthe web
• Defining XML as an application profile of SGMLmeans that any fully conformant SGML system willbe able to read XML documents.
• Using and understanding XML documents does not require a system that is capable of understandingthe full generality of SGML.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 6/106
Why XML?• XML was created so that richly structured
documents could be used over the web.
• HTML, as we've already discussed, comes bound
with a set of semantics and does not providearbitrary structure.
• SGML provides arbitrary structure, but is too
difficult to implement just for a web browser.• In many organizations, filtering SGML to XML will
be the standard procedure for web delivery.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 7/106
XML development goals?1. It shall be straightforward to use XML over the
Internet. Users must be able to view XMLdocuments as quickly and easily as HTML
documents.2. XML shall support a wide variety of applications.
Ex : authoring, browsing, content analysis, etc.
3. XML shall be compatible with SGML.
4. It shall be easy to write programs that processXML documents.
5. The number of optional features in XML is to bekept to an absolute minimum, ideally zero.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 8/106
XML development goals?
6. XML documents should be human-legible andreasonably clear.
7. The XML design should be prepared quickly.8. The design of XML shall be formal and concise.
9. XML documents shall be easy to create.10. Terseness in XML markup is of minimal
importance. Several SGML language features were
designed to minimize the amount of typingrequired to manually key in SGML documents.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 9/106
How is XML defined?• Extensible Markup Language (XML)
Defines the syntax of XML.
• XML Pointer Language (XPointer) and XML
Linking Language (XLink)Defines a standard way to represent links between resources.
• Extensible Style Language (XSL)
Defines the standard stylesheet language for XML.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 10/106
XML documents consist of • XML documents are composed of markup and
content.
• There are six kinds of markup that can occur in an
XML document:• elements
• entity references
• comments
• processing instructions
• marked sections
• document type declarations
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 11/106
Elements• Elements are the most common form of markup.• Delimited by angle brackets <>
<Person> <FirstName>Janet</FirstName>
<Middle>Q</Middle> <LastName>Leverling</LastName> <Address>
<Address1>123 Elm</Address1> <Address2></Address2>
<City>Pleasantville</City> <State>MA</State> <Zip>12345</Zip>
</Address> </Person>
• Empty elements have a modified syntax <Person> </Person>
or <Person/>
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 12/106
Attributes
• Attributes are name-value pairs that occur insidestart-tags after the element name.
• In XML, all attribute values must be quoted “”.
<Person ID=“0001”>
<FirstName>Janet</FirstName> <Middle>Q</Middle> <LastName>Leverling</LastName> <Address>
<Address1>123 Elm</Address1>
<Address2></Address2> <City>Pleasantville</City> <State>MA</State> <Zip>12345</Zip>
</Address>
</Person>
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 13/106
Entity References
• Entities are used to represent these specialcharacters.
• It can be used to insert arbitrary Unicodecharacters into your document, ex : ℚ
• < produces the left angle bracket, <
• > produces the right angle bracket, >• & produces the ampersand, &• ' produces a single quote character (anapostrophe), '• " produces a double quote character, "
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 14/106
Comments
• Comments begin with <!-- and end with -->.
• Comments can contain any data except the literalstring --.
Example :
<!-- This is a comment -->
• Comments are not part of the textual content of anXML document.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 15/106
Processing Instructions
• Processing instructions (PIs) are an escape hatch toprovide information to an application.
• Like comments, they are not textually part of the
XML document, but the XML processor is requiredto pass them to an application.
Example :
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
• Processing instructions have the form:
<?name pidata?>.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 16/106
CDATA Sections
• In a document, a CDATA section instructs theparser to ignore most markup characters.
• Consider a source code listing in an XML
document.
<![CDATA[*p = &q;
b = (i <= 3);]]>
• Between the start of the section, <![CDATA[ andthe end of the section, ]]>, all character data ispassed directly to the application, withoutinterpretation.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 17/106
Document Type Declarations
• Declarations allow a document to communicatemeta-information to the parser about its content.
• Meta-information includes the allowed sequence
and nesting of tags, attribute values and their typesand defaults, the names of external files that may bereferenced and whether or not they contain XML,the formats of some external (non-XML) data thatmay be referenced, and the entities that may beencountered.
• element type declarations,
• attribute list declarations,
• entity declarations,
• and notation declarations
• There are four kinds of declarations in XML:
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 18/106
Element Type Declarations
• Element type declarations identify the names of elements and the nature of their content.
• A typical element type declaration looks like this:
<!ELEMENT oldjoke (burns+, allen, applause?)>
<!ELEMENT oldjoke (burns+, allen, applause?)> <!ELEMENT burns (#PCDATA | quote)*>
<!ELEMENT allen (#PCDATA | quote)*> <!ELEMENT quote (#PCDATA)*> <!ELEMENT applause EMPTY>
• Element Declarations for Old Jokes
<?xml version="1.0"?>
<oldjoke> <burns>Say <quote>goodnight</quote>,Gracie.</burns> <allen><quote>Goodnight,Gracie.</quote></allen> <applause/>
</oldjoke>
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 19/106
Attribute List Declarations (I)
• Attribute list declarations identify which elementsmay have attributes, what attributes they may have,what values the attributes may hold, and what value
is the default.
• Typical attribute list declaration looks like this:<!ATTLIST oldjoke
nameID
#REQUIRED
label
CDATA
#IMPLIED
status ( funny | notfunny ) 'funny'>
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 20/106
Attribute List Declarations (II)• There are six possible attribute types:
• CDATA : attributes are strings, any text is allowed.
• ID : the value of an ID attribute must be a name. All of the ID
values used in a document must be different.
• IDREF or IDREFS : an IDREF attribute's value must be the valueof a single ID attribute on some element in the document.
• ENTITY or ENTITIES : An ENTITY attribute's value must be
the name of a single entity.
• NMTOKEN or NMTOKENS : Name token attributes are arestricted form of string attribute. In general, an NMTOKEN
attribute must consist of a single word, but there are no additional
constraints on the word, it doesn't have to match another attribute
or declaration.
• A list of names : You can specify that the value of an attributemust be taken from a specific list of names. This is frequently
called an enumerated type because each of the possible values is
explicitly enumerated in the declaration.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 21/106
Attribute List Declarations (III)• There are four possible default values:
• #REQUIRED : The attribute must have an explicitly specified
value on every occurrence of the element in the document.
• #IMPLIED : The attribute value is not required, and no default
value is provided. If a value is not specified, the XML processor must proceed without one.
• "value" : An attribute can be given any legal value as a default.
The attribute value is not required on each element in the
document, and if it is not present, it will appear to be thespecified default.
• #FIXED "value" : An attribute declaration may specify that an
attribute has a fixed value. In this case, the attribute is not
required, but if it occurs, it must have the specified value. If it
is not present, it will appear to be the specified default. Oneuse for fixed attributes is to associate semantics with an
element. A complete discussion is beyond the scope of this
lesson, but you can find several examples of fixed attributes in
the XLink specification.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 22/106
Entity Declarations (1)• There are three kinds of entities:• Internal Entities : Internal entities associate a name with a
string of literal text.
<!ENTITY
ATI
"ArborText, Inc.">
Using &ATI; anywhere in the document will insert ArborText,
Inc. at that location. Internal entities allow you to define
shortcuts for frequently typed text or text that is expected to
change, such as the revision status of a document.• External Entities : External entities associate a name with the
content of another file. External entities allow an XML
document to refer to the contents of another file. External
entities contain either text or binary data.<!ENTITY boilerplate SYSTEM
"/standard/legalnotice.xml">
Using &boilerplate; will have insert the contents of the file
/standard/legalnotice.xml at the location of the entity
reference.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 23/106
Entity Declarations (2)• Parameter entities : can only occur in the document type
declaration. A parameter entity declaration is identified by
placing % (percent-space) in front of its name in the
declaration. The percent sign is also used in references to
parameter entities, instead of the ampersand. Parameter entityreferences are immediately expanded in the document type
declaration and their replacement text is part of the declaration,
whereas normal entity references are not expanded. Parameter
entities are not recognized in the body of a document.
<!ELEMENT burns (#PCDATA | quote)*>
<!ELEMENT allen (#PCDATA | quote)*>
<!ENTITY % personcontent "#PCDATA | quote">
<!ELEMENT burns (%personcontent;)*>
<!ELEMENT allen (%personcontent;)*>
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 24/106
Notation Declarations
• Notation declarations identify specific types of external binary data. This information is passed tothe processing application, which may make
whatever use of it it wishes.<!NOTATION GIF87A SYSTEM "GIF">
<?XML version="1.0" standalone="no"?>
<!DOCTYPE chapter SYSTEM "dbook.dtd" [
<!ENTITY %ulink.module "IGNORE">
<!ELEMENT ulink (#PCDATA)*>
<!ATTLIST ulink
xml:link CDATA #FIXED
"SIMPLE"
xml-attributes CDATA #FIXED "HREF
URL"
URL CDATA #REQUIRED>
]>
<chapter>...</chapter>
• Including a Document Type Declaration
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 25/106
Validity
• Given the preceding discussion of typedeclarations, it follows that some documents arevalid and some are not. There are two categories of
XML documents: well-formed and valid.• Well-formed Documents : A document can only be well-
formed if it obeys the syntax of XML. A document thatincludes sequences of markup characters that cannot be
parsed or are invalid cannot be well-formed. If adocument is not well-formed, it is not XML.• Valid Documents : A well-formed document is valid only
if it contains a proper document type declaration and if the document obeys the constraints of that declaration(element sequence and nesting is valid, requiredattributes are provided, attribute values are of thecorrect type, etc.).
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 26/106
Validity• It must meet all of the following conditions1. The document instance must conform to the grammar of
XML documents.2. The replacement text for all parameter entities referenced
inside a markup declaration consists of zero or more
complete markup declarations.3. No attribute may appear more than once on the same start-
tag.4. String attribute values cannot contain references to
external entities.5. Non-empty tags must be properly nested.6. Parameter entities must be declared before they are used.7. All entities except the following: amp, lt, gt, apos, and quot
must be declared.8. A binary entity cannot be referenced in the flow of content,
it can only be used in an attribute declared as ENTITY orENTITIES.
9. Neither text nor parameter entities are allowed to be
recursive, directly or indirectly.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 27/106
XLink • XLink introduce a standard linking model for
XML.• A link expresses a relationship between resources.
• A resource is any location (an element, or itscontent, or some part of its content, for example)that is addressed in a link.
• The exact nature of the relationship betweenresources depends on both the application thatprocesses the link and semantic informationsupplied.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 28/106
Some highlights of XLink • XLink gives you control over the semantics of the
link.• XLink introduces Extended Links. Extended Links
can involve more than two resources.
• XPointer introduces Extended Pointers(XPointers). XPointers provide a sophisticatedmethod of locating resources. In particular,
XPointers allow you to locate arbitrary resourcesin a document, without requiring that the resourcebe identified with an ID attribute.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 29/106
Simple Links
<link xml:link="simple" href="locator">Link Text</link>
• A Simple Link identifies a link between two
resources, one of which is the content of the linkingelement itself. This is an in-line link.
• The locator identifies the other resource. The
locator may be a URL, a query, or an ExtendedPointer.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 30/106
Extended Links
<elink xml:link="extended" role="annotation"> <locator xml:link="locator"
href="text.loc">The Text </locator> <locator xml:link="locator"
href="annot1.loc">Annotations </locator>
<locator xml:link="locator"href="annot2.loc">
More Annotations</locator> <locator xml:link="locator"
href="litcrit.loc"> Literary Criticism</locator>
</elink>
• Extended Links allow you to express relationshipsbetween more than two resources:
This example shows how the relationships between a literary work,
annotations, and literary criticism of that work might be expressed.
Note that this link is separate from all of the resources involved.
i i 2003
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 31/106
XML Mappings in Excel 2003• Microsoft Office Excel 2003 improves support forusing native XML by enabling you to add your
own XML Schema Definition (XSD) to aworkbook.
• This creates an XML map that you can use tomake data more meaningful upon importing orexporting data.
1. Create a map between an Excel spreadsheet and an XMLstructure
2. Use that map to import subsequent XML data to that samestructure
3. Use that map to export XML data from the spreadsheet,that conforms to that XML schema4. Persist and reuse that map for subsequent import and
export operations
M i
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 32/106
Mapping process• Adding an XSD file to an Excel workbook • Once you add the XSD file, Excel creates an XML
map in the XML Source task pane
• Excel also uses this map to manage the relationshipbetween those mapped ranges and the elements inthe XML schema.
• Excel also uses this map to manage the relationshipbetween those mapped ranges and the elements inthe XML schema. A workbook can contain many XML maps where each map is an
independent entity. Likewise, you can also have multiple maps refer to the same schema. When you import or export XML data, Excel
uses the map to relate the contents of a mapped range to elements in
the schema.
Addi XML M W kb k
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 33/106
Adding an XML Map to a Workbook
• On the View menu, click Task Pane to display theXML Source task pane.
–OR-
On the Data menu, point to XML, and then click XML Source.
• Click XML Maps and then Add.
• Go to the schema file, click Open, and then click OK .
E l
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 34/106
Example
M i ith th XML S T k
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 35/106
Mapping with the XML Source Task
• The XML Source task pane displays the XMLschemas in the workbook in a tree view.
• You can map elements by dragging them onto the
worksheet, or you can right-click each element andchoose Map element.• You can select non-adjacent elements by clicking
one element, holding down the CTRL key, and
clicking additional elements. Once you select theelements, drag them to the worksheet locationwhere you want them to appear. If the element is arepeating element, Excel creates an XML List in
the cell where you added the element.
I ti D t i t M d R
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 36/106
Importing Data into a Mapped Range
1. Select a cell in the mapped range into which youwant to import XML data.
2. On the Data menu, point to XML, and then click
Import.3. In the Look in list, click the drive, folder, or
Internet location that contains the XML data file
you want to import.4. In the folder list, locate and open the folder that
contains the file.
5. Click the file, and then click Import.
XML Mapping Scenarios
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 37/106
XML Mapping Scenarios
1. Copy and paste the XML and XSD listings intoseparate files using a text editor such as Notepad.
2. Import the XSD data into the XML Source task pane to create a map.
3. Drag and drop the designated element(s) of themap onto the worksheet cell.
4. Import the data from the XML file.
XML Mapping Scenarios
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 38/106
XML Mapping Scenarios
1. Copy and paste the XML and XSD listings intoseparate files using a text editor such as Notepad.
2. Import the XSD data into the XML Source task pane to create a map.
3. Drag and drop the designated element(s) of themap onto the worksheet cell.
4. Import the data from the XML file.
XML Mapping Scenarios
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 39/106
XML Mapping Scenarios
1. Copy and paste the XML and XSD listings intoseparate files using a text editor such as Notepad.
2. Import the XSD data into the XML Source task pane to create a map.
3. Drag and drop the designated element(s) of themap onto the worksheet cell.
4. Import the data from the XML file.
CSS What is CSS?
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 40/106
CSS - What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets• Styles were added to HTML 4.0
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one
Styles Solve a Common Problem
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 41/106
Styles Solve a Common Problem
• HTML tags were originally designed to define thecontent of a document. They were supposed to say"This is a header", "This is a paragraph", "This is
a table", by using tags like <h1>, <p>, <table>, andso on. The layout of the document was supposed tobe taken care of by the browser, without using anyformatting tags.
• Netscape and Internet Explorer - continued to addnew HTML tags and attributes (like the <font> tagand the color attribute) to the original HTML
specification, it became more and more difficult tocreate Web sites
• Both Netscape 4.0 and Internet Explorer 4.0support Cascading Style Sheets.
Cascading Order
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 42/106
Cascading Order
• What style will be used when there is more thanone style specified for an HTML element?
• Generally speaking we can say that all the styles
will "cascade" into a new "virtual" Style Sheet bythe following rules, where number four has thehighest priority:
• Browser default• External Style Sheet
• Internal Style Sheet (inside the <head> tag)
• Inline Style (inside HTML element)
Syntax
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 43/106
Syntax
• The CSS syntax is made up of three parts: aselector, a property and a value:
selector {property: value}
• The property and value are separated by a colonand surrounded by curly braces:body {color: black}
• If the value is multiple words, put quotes around
the value:
p {font-family: "sans serif"}
• If you wish to specify more than one property, youmust separate each property with a semi-colon.p {text-align:center;color:red}
Syntax (2)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 44/106
Syntax (2)
• To make the style definitions more readable, youcan describe one property on each line, like this:
P
{text-align: center;color: black;font-family: arial}
• You can group selectors :
h1,h2,h3,h4,h5,h6
{color: green}
Syntax (3)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 45/106
Syntax (3)
<p class="right">This paragraph will be right-aligned.</p><p class="center">
This paragraph will be center-aligned.</p>
• The class Selector : With the class selector you candefine different styles for the same type of HTMLelement.
p.right {text-align: right}
p.center {text-align: center}
CSS Comments
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 46/106
CSS Comments
• You can insert comments in CSS to explain yourcode, which can help you when you edit the sourcecode at a later date. A comment will be ignored bythe browser. A CSS comment begins with "/*", and
ends with "*/", like this:/* This is a comment */p{text-align: center;/* This is another comment */color: black;font-family: arial
}
Example 1 with HTML
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 47/106
Example 1 with HTML
• Example-1.html :<html><head><link rel="stylesheet" type="text/css" href="example-1.css" /></head><body><h1>This header is 36 pt</h1><h2>This header is blue</h2><p>This paragraph has a left margin of 50 pixels</p>
</body></html>
• Example-1.css:h1 {font-size: 36pt}
h2 {color: blue}p {margin-left: 50px}
Example 2 with XML
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 48/106
p e w
• xml-ex-1.xml :<?xml version='1.0'?><?xml-stylesheet type="text/css" href="css-ex-1.css"?><CATALOG xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<CD>
<TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.9</PRICE>
<YEAR>1985</YEAR></CD><CD>
<TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.9</PRICE><YEAR>1988</YEAR>
</CD>
</CATALOG>
Example 2 with XML
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 49/106
p• css-ex-1.css :
TITLE{magin-top : 7in;magin-bottom :7in;magin-left : 1.5in;magin-right : 1in;background-color:white;display:block }ARTIST{font-family: Arial, Helvetica, sans-serif;font-size:32pt;width: 30em;color:red}COUNTRY{font-family: Arial, Helvetica, sans-serif;color:blue}
CSS Background Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 50/106
g p• CSS Background properties define the background
effects of an element.
Repeat, repeat-x, repeat-y, no-
repeat
Sets if/how a background image
will be repeated
background-
repeat
top left, top center, top right,
center left, center center, center right, bottom left, bottom center,
bottom right, x-% y-% , x-pos y-
pos
Sets the starting position of a
background image
background-
position
url , noneSets an image as the backgroundbackground-
image
color-rgb, color-hex, color-name,
transparent
Sets the background color of an
element
background-
color
scroll
fixed
Sets whether a background
image is fixed or scrolls with the
rest of the page
background-
attachment
background-color, background-
image, background-repeat
background-attachment,
background-position
A shorthand property for setting
all background properties in one
declaration
background
ValuesValuesValuesValuesDescriptionDescriptionDescriptionDescriptionPropertyPropertyPropertyProperty
CSS Background Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 51/106
g p ( p )
<html> <head> <style type="text/css"> h1 {background-color: #00ff00}h2 {background-color: transparent}
body {background-image: url('C:\Documents and Settings\My Documents\My Pictures\Logo-Datic.bmp')}
p {background-color: rgb(250,0,255)} </style> </head>
<body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body>
</html>
CSS Text Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 52/106
p• CSS Text properties define the appearance of text.
Normal, lengthIncrease or decrease thespace between words
word-spacing
Normal, pre, nowrapSets how white space insidean element is handled
white-space
Normal, embed, bidi-override
unicode-bidi
None, capitalize,uppercase, lowercase
Controls the letters in anelement
text-transform
None, color , lengthtext-shadow
Length, %Indents the first line of texttext-indent
None, underline, overline,line-through, blink
Adds decoration to texttext-decoration
Left, right, center, justifyAligns the text in an elem.text-align
normal
length
Increase or decrease the
space between characters
letter-spacing
Ltr, rtlSets the text directiondirection
color Sets the color of a textcolor
Possible ValuesDescriptionProperty
CSS Text Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 53/106
<html> <head>
<style type="text/css"> h1 {color: #00ff00}
h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style>
</head>
<body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>
CSS Font Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 54/106
• CSS Font properties define the font in text.
Normal, bold, bolder, lighter, 100,
200, 300, 400, 500, 600, 700, 800,900
Sets the
weight of afont
font-weight
Normal, small-capsfont-variant
Normal, italic, obliqueSets the stylefont-style
Normal, wider, narrower, ultra-condensed, extra-condensed,condensed, semi-condensed, semi-
expanded, expanded, extra-expanded
Condenses orexpands thecurrent font-
family
font-stretch
None, number aspect valuefont-size-adjust
xx-small, x-small, small, medium,large, x-large, xx-large, smaller,larger , length
Sets the sizeof a font
font-size
family-name, generic-family A prioritizedlist of
font-family
font-style, font-variant, font-weight,font-size/line-height, font-family,caption, icon, menu, message-box,small-caption, status-bar
A shorthandproperty forsetting all of the properties
font
ValuesDescriptionProperty
CSS Font Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 55/106
<html> <head> <style type="text/css"> h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif} </style> </head>
<body>
<h3>This is header 3</h3> <p> This is a paragraph</p>
<p class="sansserif"> This is a paragraph</p>
</body> </html>
CSS Border Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 56/106
• CSS Border properties define the borders an element.
border-top-width, border-styleA shorthand property for setting all of theborder-top
None, hidden, dotted, dashed,solid, double, groove, ridge
Sets the style of the four borders, canhave from one to four styles
border-style
Thin, medium, thick, lengthSets the width of the right borderborder-right-width
border-styleSets the style of the right borderborder-right-style
border-color Sets the color of the right borderborder-right-color
border-right-width, border-style,border-color
A shorthand property for setting all of theproperties for the right border
border-right
Thin, medium, thick, lengthSets the width of the left borderborder-left-width
border-styleSets the style of the left borderborder-left-style
border-color Sets the color of the left borderborder-left-color
border-left-width, border-style,
border-color
A shorthand property for setting all of the
properties for the left border
border-left
Color Sets the color of the four bordersborder-color
Thin, medium, thick, lengthSets the width of the bottom borderborder-bottom-width
border-styleSets the style of the bottom borderborder-bottom-style
border-color Sets the color of the bottom borderborder-bottom-color
border-bottom-width, border-style, border-color
A shorthand property for setting all of theproperties for the bottom border
border-bottom
border-width, border-style,border-color
A shorthand property for setting all of theproperties for the four borders in onedeclaration
border
ValuesDescriptionProperty
CSS Border Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 57/106
<html> <head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} </style> </head> <body> <p>The "border-style" property is not recognized by Netscape 4.</p> <p>Netscape 6 supports all border styles.</p> <p>Internet Explorer 5.5 supports all border styles.Internet Explorer 4.0 - 5.0 do not support the"dotted" and "dashed" values</p>
<p class="dotted"> A dotted border</p> <p class="dashed"> A dashed border</p> </body> </html>
CSS Margin Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 58/106
• define the space around elements.
autolength%
Sets the top margin of anelement
margin-top
autolength
%
Sets the right margin of an element
margin-right
autolength%
Sets the left margin of anelement
margin-left
autolength%
Sets the bottom marginof an element
margin-bottom
margin-topmargin-right
margin-bottommargin-left
A shorthand property forsetting the margin
properties in onedeclaration
margin
ValuesDescriptionProperty
CSS Margin Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 59/106
<html> <head> <style type="text/css"> p.margin {margin-left: 2cm} </style> </head>
<body> <p> This is a paragraph This is a paragraphThis is a paragraph This is a paragraph
</p>
<p class="margin"> This is a paragraph with a left marginThis is a paragraph with a left margin
</p>
</body> </html>
CSS Padding Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 60/106
• define the space between the element border and theelement content.
length
%
Sets the top padding of
an element
padding-top
length%
Sets the right padding of an element
padding-right
length%
Sets the left padding of an element
padding-left
length%
Sets the bottom paddingof an element
padding-bottom
padding-top
padding-right padding-bottom padding-left
A shorthand property for
setting all of thepadding properties inone declaration
padding
ValuesDescriptionProperty
CSS Padding Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 61/106
<html> <head>
<style type="text/css"> td {padding-left: 2cm}
</style>
</head>
<body>
<table border="1"> <tr> <td> This is a tablecell with a left padding
</td> </tr> </table>
</body>
</html>
CSS List Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 62/106
• allow you to change between different list-item markers,set an image as a list-item marker, and set where to placea list-item marker.
Auto, len thmarker-offset
None, disc, circle,square, decimal,decimal-leading-zero,
lower-roman, upper-roman, lower-alpha,upper-alpha, lower-greek, lower-latin,upper-latin, hebrewarmenian
Sets the type of the list-itemmarker
list-style-type
insideoutside
Places the list-item marker inthe list
list-style-position
noneurl
Sets an image as the list-itemmarker
list-style-image
list-style-typelist-style-positionlist-style-image
A shorthand property forsetting all of the properties fora list in one declaration
list-style
ValuesDescriptionProperty
CSS List Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 63/106
<body> <ul class="disc"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>
<ul class="circle"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>
<ul class="square"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="none">
<li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body>
</html>
<html> <head> <style type="text/css"> ul.disc{list-style-type: disc
}ul.circle{list-style-type: circle}
ul.square{list-style-type: square}ul.none{
list-style-type: none}
</style> </head>
CSS Dimension Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 64/106
• The Dimension properties allow you to control the heightand width of an element. It also allows you to increasethe space between two lines.
Auto, %, lengthSets the width of an elementwidthLength, %Sets the minimum width of an elementmin-width
Length, %Sets the minimum height of an elementmin-height
None, length, %Sets the maximum width of an elementmax-width
None, length, %Sets the maximum height of an elementmax-height
Normal, number,length, %
Sets the distance between linesline-height
Auto , length, %Sets the height of an elementheight
ValuesDescriptionProperty
CSS Dimension Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 65/106
<body>
<p><b>Note:</b> Netscape 4 does notsupport the "height" property, and the "width"
property does not work onimages.</p>
<img class="normal" src="back.gif"width="72" height="40">
<br><br>
<img class="big" src="back.gif"width="72" height="40">
<br><br>
<img class="small" src="back.gif"width="72" height="40">
</body>
</html>
<html>
<head>
<style type="text/css">
img.normal
{
height: auto;width: auto
}
img.big
{
height: 80px;width: 100px
}
img.small
{
height: 30px;
width: 50px
}
</style>
</head>
CSS Classification Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 66/106
• The Classification properties allow you to control how todisplay an element, set where an image will appear inanother element, position an element relative to itsnormal position, position an element using an absolute
value, and how to control the visibility of an element.
Visible, hidden, collapseSets if an element should bevisible or invisible
visibility
Static, relative, absolute, fixedPlaces an element in a static,relative or fixed position
position
Left, right, noneSets where an image or a textwill appear in another element
float
None,inline, block, list-item, run-in, compact,marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row,table-column-group, table-column, table-cell,
table-caption
Sets how/if an element isdisplayed
display
url , auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize,sw-resize, s-resize, w-resize, text, wait, help
Specifies the type of cursor to bedisplayed
cursor
Left, right, both, noneSets the sides of an elementwhere other floating elementsare not allowed
clear
ValuesDescriptionProperty
CSS Classification Properties (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 67/106
<html> <head> <style type="text/css"> div {display: none}
p {display: inline}
</style> </head> <body> <div> The div section is invisible
</div> <p> With the value of "inline" there should be </p>
<p> no distance between the two paragraphs.
</p> </body> </html>
CSS Positioning Properties
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 68/106
• define the position of an element.
Auto, number Sets the stack order of an elementz-index
Baseline, sub, super,top, text-top, middle,bottom, text-bottom,length, %
Sets the vertical alignment of anelement
vertical-align
Auto, %, lengthSets how far the top edge of anelement is above/below the top edge
of the parent element
top
Auto, %, lengthSpecifies the right edge of anelement
right
Static, relative,
absolute, fixed
Places an element in a static,
relative, absolute or fixed position
position
Visible, hidden,scroll, auto
Sets what happens if the content of an element overflow its area
overflow
Auto, %, lengthSpecifies the left edge of an elementleft
Shape, autoSets the shape of an elementclip
Auto, %, lengthSpecifies the bottom edge of anelement
bottom
ValuesDescriptionProperty
CSS Positioning Properties (example)<ht l>
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 69/106
<html>
<head> <style type="text/css"> img{
position:absolute;
clip:rect(0px 50px 200px 0px)}
</style> </head>
<body> <p><b>Note:</b> Netscape 4 does not support the"clip" property.</p>
<p>Note that this property is cutting the image. Thewidth and the height properties (or attributes)
decreases the image.</p> <p><img border="0" src="bookasp20.gif" width="120"height="151"></p>
</body> </html>
CSS Pseudo-classes
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 70/106
• Pseudo-classes are used in CSS to add different effects tosome selectors, or to a part of some selectors.
Allows the author to specify a languageto use in a specified element
CSS2:lang
Adds special style to an element that isthe first child of some other element
CSS27.0:first-child
Adds special style to a visited linkCSS13.04.0visited
Adds special style to an unvisited linkCSS13.04.0link
Adds special style to a link when youmouse over it
CSS14.07.1hover
Adds special style to a selected linkCSS14.0active
PurposeW3CIENNPseudo-classes
CSS Pseudo-classes (example)
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 71/106
<html> <head>
<style type="text/css"> a:link {color: #FF0000}
a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}
</style> </head>
<body> <p><b><a href="default.asp" target="_blank">This isa link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective!!</p> <p><b>Note:</b> a:active MUST come after a:hover inthe CSS definition in order to be effective!!</p>
</body> </html>
XSL
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 72/106
• XSL stands for eXtensible Stylesheet Language.• The World Wide Web Consortium (W3C) started
to develop XSL because there was a need for an
XML based Stylesheet Language.• CSS - HTML Style Sheets :
• HTML uses predefined tags and the meanings of tags are
well understood.• The <table> element defines a table and a browser knows
how to display it.
• Adding styles to HTML elements is also simple. Telling a
browser to display an element in a special font or color, iseasily done with CSS.
XSL
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 73/106
• XSL stands for eXtensible Stylesheet Language.• The World Wide Web Consortium (W3C) started
to develop XSL because there was a need for an
XML based Stylesheet Language.• CSS - HTML Style Sheets :
• HTML uses predefined tags and the meanings of tags are
well understood.• The <table> element defines a table and a browser knows
how to display it.
• Adding styles to HTML elements is also simple. Telling a
browser to display an element in a special font or color, iseasily done with CSS.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 74/106
Data in XMLData in XML
Layout in HTMLLayout in HTML
StyleSheetsStyleSheets
XML and HTML
XSL Transformations
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 75/106
XSL Transformation
XML
WML
HTMLSGML
Plain TextXML
XML Deployment
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 76/106
• System to System
• Application to Application
• Client to Server
Technology Leaders Driving XML
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 77/106
ContentManagement
ApplicationIntegration
e-Commerce
Native XMLApplications
e-Commerce
Native XMLApplications
ContentManagement
ApplicationIntegration
XSL - XML Style Sheets
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 78/106
• XML does not use predefined tags (we can use anytags we like) and the meanings of these tags are notwell understood.
• The <table> could mean an HTML table or a pieceof furniture, and a browser does not know how todisplay it.
• There must be something in addition to the XMLdocument that describes how the document shouldbe displayed; and that is XSL!
Input XML
document
Input XML
document
XSLT
Transformation
Formatting
Process
Resultant
Document
XSL - More Than a Style Sheet Language
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 79/106
• XSL consists of three parts:• XSLT is a language for transforming XML documents
• XPath is a language for defining parts of an XMLdocument
• XSL-FO is a language for formatting XML documents
• XSL as a set of languages that can :
• transform XML into XHTML,• filter and sort XML data,
• define parts of an XML document,
• format XML data based on the data value, like displayingnegative numbers in red,
• and output XML data to different media, like screens,paper, or voice.
XSLT - XSL Transformations
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 80/106
• XSLT is the most important part of the XSLStandards. It is the part of XSL that is used totransform an XML document into another XMLdocument, or another type of document that is
recognized by a browser, like HTML and XHTML.
• XSLT can also add new elements into the outputfile, or remove elements. It can rearrange and sort
elements, and test and make decisions about whichelements to display, and a lot more.
• A common way to describe the transformation
process is to say that XSLT transforms an XMLsource tree into an XML result tree.
How does it Work?
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 81/106
• In the transformation process, XSLT uses XPath todefine parts of the source document that match oneor more predefined templates.
• When a match is found, XSLT will transform thematching part of the source document into theresult document.
• The parts of the source document that do notmatch a template will end up unmodified in theresult document.
• Not all Internet browsers have full support for
XSLT.
Support for XSLT
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 82/106
• Internet Explorer 5 is Bad• Internet Explorer 6 is Better
• Netscape 6 isn't fully supporting the official W3C
XSLT Recommendation. However, most of theexamples in this tutorial will also work in Netscape6.
• Netscape 7 supports the official W3C XSLTRecommendation.
• Internet Explorer MSXML Parser : MSXML Parser3.0 is the XML parser that is shipped with IE 6.0 andWindows XP.
Correct Style Sheet Declaration
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 83/106
• The root element that declares the document to bean XSL style sheet is <xsl:stylesheet> or<xsl:transform>.
• Example : <xsl:stylesheet version="1.0"xmlns:xsl=
"http://www.w3.org/1999/XSL/Transform">
<xsl:transform version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
• Or :
Start with your XML Document
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 84/106
• We want to transform the following XMLdocument ("cdcatalog.xml") into XHTML:
<?xml version="1.0" encoding="ISO-8859-1"?> <catalog>
<cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company>
<price>10.90</price> <year>1985</year>
</cd> ..
. </catalog>
Create an XSL Style Sheet ("cdcatalog.xsl") <?xml version="1.0" encoding="ISO-8859-1"?>
"
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 85/106
<xsl:stylesheet version="1.0xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body>
<h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">Title</th> <th align="left">Artist</th>
</tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>
</tr> </xsl:for-each> </table>
</body> </html> </xsl:template>
</xsl:stylesheet> (“http://www.w3.org/TR/WD-xsl”)
Link the XSL Style Sheet to the XML Document
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 86/106
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl"
href="cdcatalog.xsl"?> <catalog>
<cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year>
</cd> ...
</catalog>
• Finally, add an XSL Style Sheet reference to yourXML document ("cdcatalog.xml"):
XSLT uses Templates• The <xsl:template> element contains rules to apply
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 87/106
when a specified node is matched.• The match attribute is used to associate the
template with an XML element.
My CD Collection
..
ArtistTitle
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/"> <html> <body> <h2>My CD Collection</h2>
<table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>
</tr> <tr> <td>.</td> <td>.</td>
</tr> </table> </body>
</html> </xsl:template> </xsl:stylesheet>
XSLT uses Templates
• Since the style sheet is an XML document itself, the
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 88/106
document begins with an xml declaration: <?xmlversion="1.0" encoding="ISO-8859-1"?>.
• The <xsl:stylesheet> tag defines the start of the
style sheet.
• The <xsl:template> tag defines the start of atemplate. The match="/" attribute associates
(matches) the template to the root (/) of the XMLsource document.
• The rest of the document contains the template
itself, except for the last two lines that defines theend of the template and the end of the style sheet.
The <xsl:value-of> Element
• The <xsl:value-of> element can be used to select
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 89/106
the value of an XML element and add it to theoutput stream of the transformation:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1">
<tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>
</tr> <tr> <td><xsl:value-of Select="catalog/cd/title"/></td> <td><xsl:value-of select="catalog/cd/artist"/></td>
</tr> </table>
</body> </html>
</xsl:template> </xsl:stylesheet>
The <xsl:for-each> Element
• The XSL <xsl:for-each> element can be used to
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 90/106
select every XML element of a specified node set: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>
</tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>
</tr> </xsl:for-each>
</table> </body> </html>
</xsl:template> </xsl:stylesheet>
Filtering the Output
• We can filter the output from an XML file byddi i i h l ib i h
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 91/106
adding a criterion to the select attribute in the<xsl:for-each> element.
<xsl:for-each select="catalog/cd[artist='Bob Dylan']">
• Legal filter operators are:
• = (equal)
• != (not equal)• < less than
• > greater than
The <xsl:for-each> Element (example)
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1 0"
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 92/106
<xsl:stylesheet version= 1.0xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/"> <html> <body>
<h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32">
<th>Title</th> <th>Artist</th>
</tr> <xsl:for-each select="catalog/cd[artist='Bob Dylan']"> <tr>
<td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each> </table>
</body> </html>
</xsl:template> </xsl:stylesheet>
The <xsl:sort> element is used to sort the output.
• To output the XML file as an XHTML file, and
t it t th ti i l dd t l t
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 93/106
sort it at the same time, simply add a sort elementinside the for-each element in your XSL file:
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>
</tr> <xsl:for-each select="catalog/cd"> <xsl:sort select="artist"/> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>
</tr> </xsl:for-each>
</table> </body> </html>
</xsl:template> </xsl:stylesheet>
The <xsl:if> element• To put a conditional if test against the content of
th fil i l dd < l if> l t t
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 94/106
the file, simply add an <xsl:if> element to yourXSL document like this:
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th>
<th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:if test="price > 10"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>
</tr> </xsl:if> </xsl:for-each>
</table> </body> </html>
</xsl:template> </xsl:stylesheet>
The <xsl:choose> element
• To insert a conditional choose test against thef h XML fil i l dd h
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 95/106
• To insert a conditional choose test against thecontent of the XML file, simply add the<xsl:choose>, <xsl:when>, and <xsl:otherwise>elements to your XSL document like this:
<xsl:choose>
<xsl:when test="price > 10">
... some code ...
</xsl:when>
<xsl:otherwise>
... some code ....
</xsl:otherwise>
</xsl:choose>
The <xsl:choose> element (example)
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"xmlns:xsl="http://www w3 org/1999/XSL/Transform">
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 96/106
<xsl:stylesheet version 1.0xmlns:xsl= http://www.w3.org/1999/XSL/Transform > <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1">
<tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>
</tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td>
<xsl:choose> <xsl:when test="price > 10"> <td bgcolor="#ff00ff"> <xsl:value-of select="artist"/></td>
</xsl:when> <xsl:otherwise> <td><xsl:value-of select="artist"/></td>
</xsl:otherwise> </xsl:choose> </tr> </xsl:for-each>
</table> </body></html>
</xsl:template></xsl:stylesheet>
The <xsl:apply-templates> Element
<?xml version="1 0" encoding="ISO-8859-1"?>
• The <xsl:apply-templates> element applies a template rule tothe current element or to the current element's child nodes.
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 97/106
<?xml version= 1.0 encoding= ISO 8859 1 ?> <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/"> <html> <body>
<h2>My CD Collection</h2> <xsl:apply-templates/> </body> </html> </xsl:template> <xsl:template match="cd"> <p>
<xsl:apply-templates select="title"/> <xsl:apply-templates select="artist"/> </p> </xsl:template> <xsl:template match="title"> Title: <span style="color:#ff0000">
<xsl:value-of select="."/></span>
<br /> </xsl:template> <xsl:template match="artist"> Artist: <span style="color:#00ff00"> <xsl:value-of select="."/></span> <br /> </xsl:template>
</xsl:stylesheet>
A JavaScript Solution
• A more versatile solution would be to use a JavaScript to do
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 98/106
A more versatile solution would be to use a JavaScript to dothe XML to XHTML transformation.
• By using JavaScript, we can:
• do browser-specific testing• use different style sheets according to browser and user
needs
• One of the design goals for XSLT was to make it possible totransform data from one format to another, supportingdifferent browsers and different user needs.
A JavaScript Solution (Example - 1)
• Take a new look at the XML document that you saw in theprevious chapters:
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 99/106
<?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year>
</cd> ...
</catalog>
previous chapters:
A JavaScript Solution (Example - 2)
<?xml version="1.0" encoding="ISO-8859-1"?>
• And the accompanying XSL style sheet :
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 100/106
g <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/"> <html>
<body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">Title</th> <th align="left">Artist</th>
</tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="artist" /></td>
</tr>
</xsl:for-each> </table> </body> </html>
</xsl:template> </xsl:stylesheet>
A JavaScript Solution (Example - 3)
• Here is the source code needed to transform the XML file to
XHTML on the client:
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 101/106
<html> <body> <script type="text/javascript"> // Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")xml.async = falsexml.load("cdcatalog.xml")
// Load XSL var xsl = new ActiveXObject("Microsoft.XMLDOM")xsl.async = falsexsl.load("cdcatalog.xsl")
// Transform document.write(xml.transformNode(xsl))
</script> </body> </html>
A JavaScript Solution (Example - 4)
• Here is the source code needed to transform the XML file to
XHTML on the server:
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 102/106
<%'Load XMLset xml = Server.CreateObject("Microsoft.XMLDOM")xml.async = false
xml.load(Server.MapPath("cdcatalog.xml"))
'Load XSLset xsl = Server.CreateObject("Microsoft.XMLDOM")xsl.async = falsexsl.load(Server.MapPath("cdcatalog.xsl"))
'Transform fileResponse.Write(xml.transformNode(xsl))%>
XSLT Elements (1)
6.0Applies a template rule from an imported style sheetapply-i t
NNIEDescriptionElement
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 103/106
6.05.0Creates an element node in the output documentelement
6.0Defines the characters and symbols to be used whenconverting numbers into strings, with the format-number()function
decimal-format
6.06.0Creates a copy of the current node (with child nodes and
attributes)
copy-of
6.05.0Creates a copy of the current node (without child nodes andattributes)
copy
6.05.0Creates a comment node in the result treecomment
6.05.0Used in conjunction with <when> and <otherwise> to
express multiple conditional tests
choose
6.06.0Calls a named templatecall-template
6.06.0Defines a named set of attributesattribute-set
6.05.0Adds an attributeattribute
6.05.0Applies a template rule to the current element or to thecurrent element's child nodes
apply-templates
imports
XSLT Elements (2)
6.0Specifies an alternate code to run if the processor does notsupport an XSLT element
fallback
NNIEDescriptionElement
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 104/106
6.06.0Defines the format of the output documentoutput
6.05.0Specifies a default action for the <choose> elementotherwise
6.06.0Determines the integer position of the current node andformats a number
number
6.0Replaces a namespace in the style sheet to a differentnamespace in the output
namespace-alias
6.06.0Writes a message to the output (used to report errors)message
6.06.0Declares a named key that can be used in the style sheetwith the key() function
key
6.06.0Includes the contents of one style sheet into another.Note: An included style sheet has the same precedence asthe including style sheet
include
6.06.0Imports the contents of one style sheet into another. Note:An imported style sheet has lower precedence than theimporting style sheet
import
6.05.0Contains a template that will be applied only if a specifiedcondition is true
if
6.05.0Loops through each node in a specified node setfor-each
support an XSLT element
XSLT Elements (3)
6 06 0Declares a local or global parameterparam
NNIEDescriptionElement
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 105/106
6.06.0Defines the value of a parameter to be passed into atemplate
with-param
6.05.0Specifies an action for the <choose> elementwhen
6.06.0Declares a local or global variablevariable
6.05.0Extracts the value of a selected nodevalue-of
6.06.0Defines the root element of a style sheettransform
6.05.0Writes literal text to the outputtext
6.05.0Rules to apply when a specified node is matchedtemplate
6.05.0Defines the root element of a style sheetstylesheet
6.06.0Defines the elements for which white space should beremoved
strip-space
6.06.0Sorts the outputsort
6.05.0Writes a processing instruction to the outputprocessing-
instruction
6.06.0Defines the elements for which white space should bepreserved
preserve-space
6.06.0Declares a local or global parameterparam
XSLT Functions
• Here is the source code needed to transform the XML file to
XHTML on the server:
8/3/2019 Bai Giang XML
http://slidepdf.com/reader/full/bai-giang-xml 106/106
Returns the URI of an unparsed entityunparsed-entity-uri()
Returns the value of the system propertiessystem-property()
Returns a node-set using the index specified by an
<xsl:key> element
key()
Returns a string value that uniquely identifies a specifiednode
generate-id()
Tests whether the function specified is supported by theXSLT processor
function-available()
Converts a number into a stringformat-number()
Tests whether the element specified is supported by theXSLT processor
element-available()
Used to access the nodes in an external XML documentdocument()
Returns the current nodecurrent()
DescriptionName