Teacher is very picky, document must have all these things Sean has a new project for you to work on. In addition to digital games, the Harpe Gaming Store also sells board games. Sean is working on a page describing a few sample board games. He has created an XML document named games.xml that contains the description of two games, as well as scores the store has given the games on a 1 to 10 scale in seven categories. Sean also has an XML document named game_reviews.xml containing reviews written up in other gaming websites and an XML document named reviewers.xml that describes those websites. Sean wants all of this information collected and displayed using a customized style sheet. He would like the style sheet to calculate the average score given to the selected board game and wants all numeric values and dates to be nicely formatted. Figure 6-46 shows a preview of the completed project. 1. Using your editor, open the gamestxt.xml and gamestxt.xsl .Enter your name and the date in the comment section of each ?le and save them as games.xml and games.xsl , respectively. 2. Go the games.xml ?le in your editor. Take some time to review the contents of the ?le and then link the games.xsl style sheet file to the file. Close the games.xml file, saving your changes. 3. View the contents of the game_reviews.xml and reviewers.xml ?le in your editor, taking note of the structure and content of each document. Close the files. You do not have to save any changes to these documents. 4. Sean also has created a library of functions youll use in this project. Open the hgfunctions.xsl ?le in your editor and study the contents. The document has two templates. One template matching the releaseDate element is used to convert date values from the mm/dd/yyyy format to the Month Day, Year format. The second template, named imageRow, is used to create a row of inline images. The imageRow template has two parameters: the imgFile parameter speci?es the name of the image ?le, and the imgCount parameter speci?es the number of images to be displayed. After studying the ?les, close the document. You dont have to save any changes. 5. Go to the games.xsl ?le in your editor. Directly after the opening tag, use the include element to include the contents of the hgfunctions.xsl style sheet. 6. Directly after the include element, create the following global parameters and variables: a. The gameID parameter with a default value of bg210. This parameter will be used to select different board games to display in the web page. b. The currentGame variable containing the /games/game[@gid=$gameID] node set. This variable will be used to select the game to display in the report. c. The externalReviews variable containing the /reviews/review[@gid=$gameID] node set from the game_reviews.xml ?le. ( Hint : Use the document() function.) This variable will be used to access customer reviews for the current game. d. The externalReviewers variable containing the /reviewers node set from the reviewers.xml ?le. This variable will be used to access the list of reviewers for the report. 7. Go to the root template and make the following style changes so that the report displays information for the current game selected by the user: a. Go to the tag within the head section of the HTML ?le and change the node set for the value-of element to $currentGame/title in order to display the title of the current game. b. Go to the gameSummary section and change the select attribute of the apply-templates element so that it applies the template for the currentGame variable. 8. Go to the game template and make the following style changes: a. Locate the table cell in the List Price row that displays the value of the price element and format the price value so that it appears in the $#,##0.00 format. b. Change the table cell in the Release Date row that displays the value of the releaseDate element so that it applies the template for the releaseDate element found in the hgfunctions.xsl ?le. 9. Next, within the game template, you need to display the summary information on the game taken from the summary element in the games.xml file. Below the summaryTable web table
tag in the game template, use the copy-of element to copy the node-set summary/* into the result document. 10. Sean wants the report to display the score for each game. Directly after the copy-of element you just created within the game template, create a variable named avgScore that returns the average scores contained in the scores/score node set. ( Hint : Divide the sum of the values in the scores/score node set by the count of values in that node set.) 11. Finally, within the game template, insert the following web table structure for a web table that displays the scores from each gaming category and a ?nal row that displays the average score from all gaming categories:
| OVERALL (avgScore / 10) | row of token images |
|---|
where score template applies the template for the scores/score node set to display scores from each gaming category and avgScore is the value of the avgScore variable displayed with the 0.00 number format. Create the row of token images by calling the imageRow template from the hgfunctions.xsl ?le using the token.png ?le for the imgFile parameter and the value of the avgScore variable rounded to the nearest integer for the imgCount parameter. 12. Directly below the game template, create a template for the score element. The template will display a table
row for each category of gaming score by writing the following HTML code:
where category is the value of category attribute, current score is the value returned by the current() function, and row of token images is created by calling the imageRow template using token.png for the imgFile parameter and the value returned by the current() function for the imgCount parameter. 13 Scroll up to the game template and, directly below the tag, insert a command to apply the template to the externalReviews variable you created in Step 6. 14. Go back to the bottom of the style sheet to the review template used to display external reviews of the current game. This template has two local variables: the reviewerTitle variable contains the title of the review, and the reviewerURL variable contains the URL of the reviewers website. Add the following HTML code to the template:
reviewerTitle
(reviewerURL)
where summary nodes is a copy of the summary/* node set using the copy-of element, reviewerTitle is the value of the reviewerTitle variable, and reviewerURL is the value of the reviewerURL variable. 15. Save your changes to the style sheet. 16. Generate a result document using bg210 and bg211 for the values of the gameID parameter, storing the results in ?les named bg210.html and bg211.html , respectively. hgstyles.css/* New Perspectives on XML, 3rd Edition Tutorial 6 Review Assignment Harpe Gaming Store style sheet Filename: hgstyles.css Supporting Files: none */ /* Default styles */ * { margin: 0px;} header, section, article { display: block;} /* Body styles */body { font-family: Verdana, Geneva, sans-serif; background-color: rgb(121, 211, 121);} div#wrap { background-color: white; margin: 0px auto; width: 1200px; border-left: 2px solid rgb(151, 151, 151); border-right: 2px solid rgb(151, 151, 151); box-shadow: rgb(51, 51, 51) 10px 0px 30px, rgb(51, 51, 51) -10px 0px 30px; padding-bottom: 50px;} header { background: -o-linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); background: -ms-linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); background: -moz-linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); background: -webkit-linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); background: linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); } div#wrap > header > h1 { font-size: 3.6em; letter-spacing: 0.12em; font-weight: normal; color: rgb(151, 151, 151); text-shadow: black 3px 3px 8px, white 0px -2px 0px; margin-left: 100px; padding: 15px 0px; font-family: Century Gothic, sans-serif;} #gameSummary { margin: 0px 100px 30px 100px;} #gameSummary > h1 { margin: 20px 0px 2px 325px; font-weight: normal; font-size: 1.8em; letter-spacing: 0.07em; color: rgb(222, 112, 182);} #gameSummary > h2 { margin: 0px 0px 0px 325px; font-weight: normal; font-size: 0.85em; border-bottom: 1px solid rgb(211, 211, 211);} #gameSummary > h2 em { color: rgb(116, 158, 242); font-weight: normal; font-style: normal;} #gameSummary > h3 { font-size: 1.05em; font-weight: normal; color: rgb(204, 34, 142); margin-left: 325px;} #gameSummary > img { float: left; margin: 20px 0px 0px 0px;} #gameSummary > p { margin: 0px 20px 30px 325px; font-size: 0.9em;} table#summaryTable { margin-left: 325px; font-size: 0.85em; margin-top: 10px; margin-bottom: 30px;} table#summaryTable th { text-align: right; padding-right: 8px; font-weight: normal;} table#summaryTable td { color: rgb(131, 91, 91);} table#scoreTable { border-collapse: collapse; margin: 10px 0px 30px 325px; border: 1px solid rgb(151, 151, 151); width: 520px;} table#scoreTable th { font-weight: normal; font-size: 0.85em; text-align: left; padding: 0px 10px; height: 20px; vertical-align: bottom; border-bottom: 1px solid rgb(151, 151, 151); border-right: 1px solid rgb(151, 151, 151);} table#scoreTable td { padding: 0px; height: 20px; border-bottom: 1px solid rgb(151, 151, 151);} table#scoreTable tr:last-of-type { background-color: rgb(159, 236, 128);} section.review { border: 1px dotted rgb(151, 151, 151); background-color: rgb(235, 235, 235); margin: 10px 0px 10px 0px; width: 295px; clear: left; float: left;} section.review h3 { font-weight: normal; color: rgb(54, 121, 78); font-size: 0.9em; text-align: center; margin: 10px;} section.review p { font-size: 0.7em; margin: 10px;} section.review ul { font-size: 0.7em;} footer { clear: left; padding-top: 30px; font-size: 0.1em; border-bottom: 1px solid rgb(211, 211, 211); } gamestxt.xml Why You Should Hire Me