RE: [xsl] Documenting XML -and- viewing an XML tree in IE

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