Pair projects due Thursday I do not anticipate giving any extensions for this assignment. 3/2/ Larry Snyder, CSE 1

Transcription

1 Pair projects due Thursday I do not anticipate giving any extensions for this assignment 3/2/ Larry Snyder, CSE 1

2 XML is essential for huge corporate systems. and for us Lawrence Snyder University of Washington, Seattle Lawrence Snyder 2004

3 Recall that XML is the land of tags that let us record our data and say what its properties are: <weight units="lbs">6</weight> Three types of tags Identity Affinity Collection 3/2/ Larry Snyder, CSE 3

4 We ll explain how you can create personal XML software for a simple task of interest to you we ll use a travelogue as an example +? = 3/2/ Larry Snyder, CSE 4

5 Keeping the data as XML saves all of the important content that s smart Easy to add new content to XML file Looking at XML is terrible for humans We want a better display HTML is our friend We may not want to display all of the info, just parts We will certainly change our mind about how we want to see the data So solving XML +? = HTML becomes powerful 3/2/ Larry Snyder, CSE 5

6 An example is a travel record Kinds of info: State name What we did A flag adds some interest Also need a title 3/2/ Larry Snyder, CSE 6

7 Tagging the information by what it is 3/2/ Larry Snyder, CSE 7

8 Tagging the information by what it is The task is to convert this XML into the Web page shown earlier 3/2/ Larry Snyder, CSE 8

9 Here are the players in this application XML file Firefox Browser Diary Page XSL file 3/2/ Larry Snyder, CSE 9

10 FF combines 2 files, makes HTML, displays it Final HTML 3/2/ Larry Snyder, CSE 10

11 XML Input Final HTML 3/2/ Larry Snyder, CSE 11

12 For each XML tag, we write an XSL template XML Input XSL Input 3/2/ Larry Snyder, CSE 12

13 For this application, processing the files means creating HTML from XML guided by XSL Here s how For each XML tag, we say what HTML we want, using XSL Put those definitions into a file (they re called templates) Put directions at the top of the XML definition telling it where to find the definitions file Run the XML in Firefox (you use Firefox, right?) it does all the rest! 3/2/ Larry Snyder, CSE 13

14 XSL is a markup language for XML and (of course) its written in XML Let s take a look 3/2/ Larry Snyder, CSE 14

15 This is the remainder of the Travel Log XSL XSL is all tags because it has its own tags like <xsl:template > plus all of the HTML tags it will output, like <h3>. But if it s an XSL tag, it says so 3/2/ Larry Snyder, CSE 15

16 Look closely at the XSL mixing its own tags with HTML tags Standard header text must be first in XSL file Here s how to say what XML tag this definition is for HTML in here Important tag, to be explained next 3/2/ Larry Snyder, CSE 16

17 So, we build the skeleton of the XSL with our text editor standard header - copy apply- templates tag says style inner stuff Say how to style each XML tag All that s left is HTML 3/2/ Larry Snyder, CSE 17

18 The root tag needs to style the main page style inner stuff 3/2/ Larry Snyder, CSE 18

19 Look closely at the XSL mixing its own tags with HTML tags 3/2/ Larry Snyder, CSE 19

20 3/2/ Larry Snyder, CSE 20

21 When we have an attribute like <action flag="wash.gif"> we grab the value using a very odd syntax <img src="{@flag}" 3/2/ Larry Snyder, CSE 21

22 To make this all happen, we go to the XML and link it to the XSL file Add two boiler plate encoding lines (just copy) Make href point to the XSL file 3/2/ Larry Snyder, CSE 22

23 We have a page! open XML file with Firefox 3/2/ Larry Snyder, CSE 23

24 The Travel Log page is done; we don t expect to write more XSL, except to restyle something Just add to XML file 3/2/ Larry Snyder, CSE 24

25 What about the pictures??? Add an XML picture tag like HTML, it will be self- terminating; needs styling XSL, too <pic name="im/mtrainier.jpg" /> goes in XML <xsl:template match="pic"> goes in XSL <img alt="travel pic" width="500"/> </xsl:template> Place <pic> tags inside of <action> tags 3/2/ Larry Snyder, CSE 25

26 Suppose our travels take us to Chicago we have two options: Treat Chicago like any state sight it has a flag, for example Add a new kind of visit, maybe a <tour> that is similar to <action> but is used for cities; it can have different attributes, like sports_team="cubs Additional XML means more XSL is needed at the start 3/2/ Larry Snyder, CSE 26

27 We always think we can improve the look of our pages OK, just tweak (or rewrite) XSL 3/2/ Larry Snyder, CSE 27