Subject: RE: [xsl] Documenting XML -and- viewing an XML tree in IE From: "bryan" <bry@xxxxxxxxxx> Date: Mon, 17 Mar 2003 17:39:43 +0100 |
Oops sorry, I sent you a version I was using for building an online xml editor. In that version the root template just outputs a couple of divisions. <xsl:template match="/"> <div class="bodycontent"> <div class="st"> <xsl:apply-templates /></div> </div> </xsl:template> when it should be outputting something like this: <xsl:template match="/"> <HTML> <HEAD> <STYLE> BODY {font-family:Verdana,Tahoma, arial,helvetica; margin-right:1em;background-color:#D8C0B1 ;} <!-- container for expanding/collapsing content --> .c {cursor:hand;} <!-- button - contains +/-/nbsp --> .b {font-family:Verdana,Tahoma, arial;text-decoration:none} <!-- element container --> .e {margin-left:3em; text-indent:-1.5em; margin-top:1px; margin-right:1em} <!-- comment or cdata --> .k {margin-left:1em; text-indent:-1em; margin-right:1em} <!-- tag --> .t {color:white} <!-- tag in xsl namespace --> .xt {color:dark;} <!-- attribute in xml or xmlns namespace --> .ns {color:#E8E8CD;} <!-- attribute in dt namespace --> .dt {color:green} <!-- markup characters --> .m {color:#2D599E} <!-- text node --> .tx {font-weight:bold;} <!-- multi-line (block) cdata --> .db {text-indent:0px; margin-left:1em; margin-top:0px; margin-bottom:0px; padding-left:.3em; border-left:1px solid #CCCCCC; font:small Courier} <!-- single-line (inline) cdata --> .di {font:small Courier} <!-- DOCTYPE declaration --> .d {color:#2D599E} <!-- pi --> .pi {color:#2D599E} <!-- multi-line (block) comment --> .cb {text-indent:0px; margin-left:1em; margin-top:0px; margin-bottom:0px; padding-left:.3em; font:small Courier; color:#888888} <!-- single-line (inline) comment --> .ci {font:small Courier; color:#888888} PRE {margin:0px; display:inline} </STYLE> <SCRIPT> <xsl:comment><![CDATA[ // Detect and switch the display of CDATA and comments from an inline view // to a block view if the comment or CDATA is multi-line. function f(e) { // if this element is an inline comment, and contains more than a single // line, turn it into a block comment. if (e.className == "ci") { if (e.children(0).innerText.indexOf("\n") > 0) fix(e, "cb"); } // if this element is an inline cdata, and contains more than a single // line, turn it into a block cdata. if (e.className == "di") { if (e.children(0).innerText.indexOf("\n") > 0) fix(e, "db"); } // remove the id since we only used it for cleanup e.id = ""; } // Fix up the element as a "block" display and enable expand/collapse on it function fix(e, cl) { // change the class name and display value e.className = cl; e.style.display = "block"; // mark the comment or cdata display as a expandable container j = e.parentElement.children(0); j.className = "c"; // find the +/- symbol and make it visible - the dummy link enables tabbing k = j.children(0); k.style.visibility = "visible"; k.href = "#"; } // Change the +/- symbol and hide the children. This function works on "element" // displays function ch(e) { // find the +/- symbol mark = e.children(0).children(0); // if it is already collapsed, expand it by showing the children if (mark.innerText == "+") { mark.innerText = "-"; for (var i = 1; i < e.children.length; i++) e.children(i).style.display = "block"; } // if it is expanded, collapse it by hiding the children else if (mark.innerText == "-") { mark.innerText = "+"; for (var i = 1; i < e.children.length; i++) e.children(i).style.display="none"; } } // Change the +/- symbol and hide the children. This function work on "comment" // and "cdata" displays function ch2(e) { // find the +/- symbol, and the "PRE" element that contains the content mark = e.children(0).children(0); contents = e.children(1); // if it is already collapsed, expand it by showing the children if (mark.innerText == "+") { mark.innerText = "-"; // restore the correct "block"/"inline" display type to the PRE if (contents.className == "db" || contents.className == "cb") contents.style.display = "block"; else contents.style.display = "inline"; } // if it is expanded, collapse it by hiding the children else if (mark.innerText == "-") { mark.innerText = "+"; contents.style.display = "none"; } } // Handle a mouse click function cl() { e = window.event.srcElement; // make sure we are handling clicks upon expandable container elements if (e.className != "c") { e = e.parentElement; if (e.className != "c") { return; } } e = e.parentElement; // call the correct funtion to change the collapse/expand state and display if (e.className == "e") ch(e); if (e.className == "k") ch2(e); } // Dummy function for expand/collapse link navigation - trap onclick events instead function ex() {} // Erase bogus link info from the status window function h() { window.status=" "; } // Set the onclick handler document.onclick = cl; ]]></xsl:comment> </SCRIPT> </HEAD> <BODY class="st"> <xsl:apply-templates/> </BODY> </HTML> </xsl:template> so just copy this template into place of the other one and it should work, at any rate it's working on mine. -----Original Message----- From: owner-xsl-list@xxxxxxxxxxxxxxxxxxxxxx [mailto:owner-xsl-list@xxxxxxxxxxxxxxxxxxxxxx] On Behalf Of Graham Hannington Sent: Monday, March 17, 2003 5:14 PM To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx Subject: RE: [xsl] Documenting XML -and- viewing an XML tree in IE Bryan, Thanks! I've saved that IE stylesheet you sent me to an xmldoc.xsl file, and I've added the following line to an existing XML file (that displayed okay using IE's default stylesheet, before I added this line): <?xml-stylesheet type="text/xsl" href="xmldoc.xsl"?> However, now when I open the XML file, IE displays: <?xml-stylesheet type="text/xsl" href="xmldoc.xsl"?> +<Level Name =" level 1 " > with the + symbol shoved beyond the left margin, so that it's only partially visible. (And it looks like it all needs a little CSS attention. Where does this stylesheet expect to get its CSS from? I don't see any CSS definitions in the XSL-T.) When I click the (underlined) "+" character, IE reports an error on the page: Line 4, Char 1: Object expected. Any ideas? (My plan - if I can get this stylesheet to work - is to add, say, a <description> tag inside each element in the XML file (where the <description> tag itself contains XHTML), and add code to the XSL-T to allow the <description> contents to "pass thru"... the idea being that I can have XHTML descriptions of the XML tags appearing in this expandable/collapsible view... does this make sense?) XSL-List info and archive: http://www.mulberrytech.com/xsl/xsl-list XSL-List info and archive: http://www.mulberrytech.com/xsl/xsl-list
Current Thread |
---|
|
<- Previous | Index | Next -> |
---|---|---|
RE: [xsl] Documenting XML -and- vie, Graham Hannington | Thread | RE: [xsl] Documenting XML -and- vie, bryan |
Re: [xsl] Re: Identifying Existence, Dimitre Novatchev | Date | RE: [xsl] Documenting XML -and- vie, bryan |
Month |