BC463Chapter 57Application: Transforming XML Dataactual sales. The goal is to present the data in table form with a structure similarly shown inFigure 57-1. Not only is the raw data presented, but numerous calculations are also made onthe results, such as the percentage of quota attained for each reporting period, plus totalsalong each axis of the spreadsheet-like table. Just above the table are two selectelements. These controls labels indicate that the table sdata can be sorted by a number of criteria and the results of each sort can be ordered in dif- ferent ways. Sorting in the example offers the following possibilities: Representative s NameSales RegionQ1 ForecastQ1 ActualQ1 Performance[the last three also for Q2, Q3, Q4] Total ForecastTotal ActualTotal PerformanceOrdering of the sorted results is a choice between Low to High or High to Low. Whileordering of most sort categories is obviously based on numeric value, the sorting of the rep- resentatives names is based on the alphabetical order of the last names. One other pointabout the user interface is that the design needs to signify via table cell background colorthe sales region of each representative. The colors aren t easily distinguishable in Figure57-1, but if you open the actual example listing in WinIE5+ or NN7+/Moz on your computer, you will see the coloration. Figure 57-1:One view of the XML data output.

BC462Part VIBonus ChaptersApplication OverviewUnderstanding the data is a good place to start in describing this application. The scenario is asmall American company (despite its grandiose name: GiantCo) that has divided the countryinto three sales regions. Two of the regions have two sales representatives, while the thirdregion has three reps. The time is at the end of a fiscal year, at which point the managementwants to review and present the performance of each salesperson. An XML report (salesrpt. xml) delivers the sales forecast and actual sales per quarter for each sales rep. An HTML andJavaScript page is charged with not only loading the XML data displaying the raw tabular data, but also allowing for a variety of views and sorting possibilities so that management can ana- lyze performance by sales rep and region, as well as by quarter. A server-based searching and reporting program collects the requested data and outputseach sales rep s record in an XML structure, such as the following one excerpted from thesalesrpt.xmlfile: 12345 Brenda Smith brendas@giantco.com
312-555-9923 312-555-9901 02934 Alistair Renfield Central
Q1_2000 300000 316050 Q2_2000 280000 285922 Q3_2000 423000 432930 Q4_2000 390000 399200 As you can see, the data consists of several larger blocks, such as contact information, apointer to the rep s manager, and then the details of each quarterly period s forecast and

Application: Transforming XML DataChapter 52 ends with an example of an interactive outliner whosedata arrives from an external XML file, a feature supported bythe Windows versions of IE5 or later and Mozilla-based browsers. Theapplication described in this chapter picks up from there. As you recall from the Chapter 52 outline, the node structure of theXML data was used as a guide to the structure for a one-time renderingof HTML elements. There was a one-to-one correlation between XMLelement nesting and the HTML element nesting. Adjusting stylesheetproperties for displaying or hiding elements controlled all interactivity. What you re about to see here is a case for converting XML intoJavaScript objects that can be used multiple times as a convenientdata source for HTML that is displayed in any number of formats. Inparticular, you see how JavaScript s array sorting prowess suppliesXML-supplied data with extraordinary flexibility in presentation. You will see a lot of code in this chapter. The code is presented hereas a way to demonstrate the potential for rich data handling. At thesame time, the code may provide ideas for server-side processing ofXML data being output to the client. If a server program can convertthe XML data into the shortcut object and array notation of version 4browsers or later, suddenly a broader range of browsers is capable ofdealing with data stored as XML on the server. 5757CHAPTER …In This ChapterMapping XML data objectsComplex JavaScriptdata structuresAdvanced array sortingDynamic tables …

BC459Chapter 56Application: Cross-Browser DHTML Map PuzzleBut without a doubt the biggest lesson you learn from working on a project like this is howimportant it is to test an application on as many browsers and operating systems as possible. Designing a cross-platform application on one browser and having it run flawlessly on theother the first time is nearly impossible. Be prepared to go back and forth among multiplebrowsers, breaking and repairing existing working code along the way until you eventuallyreach a version that works on every browser that you can test. …

BC458Part VIBonus ChaptersFor NN4, the page uses the tag and loads the content of the object from a separateHTML file (instrux.htm). One advantage I had with the tag was that I could assignan initial horizontal position of the help object with a JavaScript entity. The entity reachesinto the window.innerWidthproperty to set the leftattribute of the layer. This page has a lot of code to digest in one reading. Run the application, study the structureof the source code listing file, and re-read the previous explanations. It may take several read- ings for a mental picture of the application to form. Lessons LearnedAs soon as the external cross-platform API was in place, it helped frame a lot of the othercode in the main program. The APIs provided great comfort in that they encouraged me toreference a complex object fully in the main code as a platform-shared value (for example, the selectedObjand selectedStateLabelglobal variables). At the same time, I could refer- ence top-level elements (that is, non-nested objects) simply by their names when passingthem to API functions. In many respects, the harder task was defining the stylesheet attributes and syntax that bothbrowsers would treat similarly. In the case of the label objects, I couldn t reach complete par- ity in a cross-platform environment (the labels look different in NN4), and in the case of thehelpobject, I had to code the HTML separately for each platform. Therefore, when approach- ing this kind of project, work first with the HTML and CSS syntax to build the look that worksbest for all platforms. Then start connecting the scripted wires. You may have to adjust theCSS code if you find odd behavior in one platform or the other with your scripting, but start- ing with a good layout is still easier.

BC457Chapter 56Application: Cross-Browser DHTML Map Puzzle

Lower 48 U.S. Map Puzzle 

---

Next come tags for all of the divelements. The styleattribute for the bgmapdivlets scriptsread the positioned values to assist in calculating positions in the onTarget()function, asshown previously. The bgmaplayer also contains all labels so that if the design calls for mov- ing the map to another part of the page, the labels follow automatically. Notice how the low- ercase state abbreviations are part of the names of both the label and map layers. As you sawin a few functions shown previously, a systematic approach to object naming can offer power- ful shortcuts in determining references to elements.

In developing this application, I encountered an unfriendly NN4 bug. When defining the helppanel as a positioned divelement in NN4, the browser exhibited unwanted behavior after theinstruction panel was shown and flown into place under script control. Even after hiding thehelp layer, the page no longer received mouse events, making it impossible to pick up a statemap after the instructions appeared. The problem did not surface, however, if the help objectwas defined in the document with a tag. Therefore, I did what I don t like to do unless absolutely necessary: I created branches inthecontent that used document.write()to create the same content with different HTMLsyntax, depending on the browser. For non-layerbrowsers, the page creates the same kindof block (with the