Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

What can you use XML for... Here are some ideas ;-)

Status
Not open for further replies.
CubeE101

CubeE101

Programmer
Nov 19, 2002
1,492
US
This is intended for anyone wondering what XML can be used for...
This is just 1 of many uses, yet it exposes many posibilities of the power of XML + DOM + XSL

I just designed a new layout for my site...


It uses 1 very simple html file that functions as a shell for all the content for the page...
Code: 
<script language="vbscript" type="text/vbscript" src="[b]index.vbs[/b]"></script>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="[b]index.css[/b]" />
    <title>Cube-E 101</title>
  </head>
  <body onload="LoadIndex">
    <center>
      <table class="main">
        <tr><td colspan="2" align="center"><img src="img/logo1.gif" width="100%" /></td></tr>
        <tr><td class="cap2" colspan="2" align="center">[b]<div id="title"/>[/b]</td></tr>
        <tr>
          <td valign="top">[b]<div id="menu" />[/b]</td>
          <td valign="top">[b]<div id="content" />[/b]</td>
        </tr>
      </table>
    </center>
  </body>
</html>

Note the 3 empty div tags with IDs assigned to them, we will fill these with content using script...

The style of the page is controlled by a CSS page (index.css)

I then have a vbscript (index.vbs) file that contains functions to swap out the data...
Code: 
Function [b]LoadIndex()[/b]
  With CreateObject("MSXML.DomDocument")
    .async = False
    .Load "index.xml"
    [COLOR=blue]MenuData = "<table class='menu'>"
    For Each e In .selectNodes("//item")
      xLink = e.Attributes.getNamedItem("link").Text
      xTran = e.Attributes.getNamedItem("tran").Text
      xName = e.Attributes.getNamedItem("name").Text
      MenuData = MenuData & "<tr><td class='m'><a href='' language='javascript' onclick='changeContent(""" & xLink & """,""" & xTran & """); return false;'>" & xName & "</a></td></tr>"
    Next
    MenuData = MenuData & "</table>"[/color]
    Set e = .selectSingleNode("//init")
    xLink = e.Attributes.getNamedItem("link").Text
    xTran = e.Attributes.getNamedItem("tran").Text
    [b]Menu.innerhtml = MenuData[/b]
    [b]changeContent xLink, xTran[/b]
  End With
End Function

Function [b]changeContent(xmlFile, xslFile)[/b]
  Set Dom1 = CreateObject("MSXML.DomDocument")
  Set Dom2 = CreateObject("MSXML.DomDocument")
  Dom1.async = False
  Dom2.async = False
  Dom1.Load xmlFile
  Dom2.Load xslFile
  [b]title.innertext = Dom1.documentElement.selectSingleNode("title").Text[/b]
  [b]content.innerhtml = Dom1.transformNode(Dom2)[/b]
End Function

*Note: I used strings to build the Menu html tags above...
You could have, just as easily, used XSL to get the same results...

After the page loads, the LoadIndex function is called from <body onload="LoadIndex">

This loads and proccess the index.xml file which contains the menu and default page content:
Code: 
<index>
  <item link="xml/news.xml" tran="index.xsl" name="Home" />
  <item link="xml/qbasic.xml" tran="index.xsl" name="QBasic" />
  <item link="xml/vb.xml" tran="index.xsl" name="Visual Basic" />
  <item link="xml/vcpp.xml" tran="index.xsl" name="Visual C++" />
  <item link="xml/pascal.xml" tran="index.xsl" name="Pascal" />
  <item link="xml/asm.xml" tran="index.xsl" name="ASM" />
  <item link="xml/cs.xml" tran="index.xsl" name="C#" />
  <item link="xml/tutor.xml" tran="index.xsl" name="Tutorials" />
  <item link="xml/links.xml" tran="index.xsl" name="Links" />
  <item link="xml/blender.xml" tran="index.xsl" name="Blender" />
  <init link="xml/news.xml" tran="index.xsl" />
</index>

After the menu is loaded, the default content is loaded with the changeContent function, which has an input for both an XML document and an XSL style sheet...
I am currently using 1 single XSL for all transformations, but if a case arises where I need to use additional XSL files, it is already set up ;-)

The XSL file I use that controls all the transformations has a catch all system, so that it can handle multiple XML files, with different types of content:
Code: 
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[URL unfurl="true"]http://www.w3.org/1999/XSL/Transform">[/URL]

<xsl:template match="/">
 [b]<xsl:if test="//page">[/b]
   <xsl:copy-of select="//page"/>
 </xsl:if>
 [b]<xsl:if test="//Site">[/b]
   <table class="view">
     <tr>
       <th>Category</th>
       <th>Site</th>
       <th>Description</th>
     </tr>
     <xsl:for-each select="//Site">
     <tr>
       <td class="f"><xsl:value-of select="Category"/></td>
       <td class="f">
         <a href="{Link}"><xsl:value-of select="Name"/></a>
       </td>
       <td class="n"><xsl:value-of select="Desc"/></td>
     </tr>
   </xsl:for-each>
   </table>
 </xsl:if>
 [b]<xsl:if test="//Article">[/b]
  <table class="view">
    <tr>
      <th>Caption</th>
      <th>Author</th>
      <th>Date</th>
      <xsl:if test="//Text"><th>Text</th></xsl:if>
      <xsl:if test="//Desc"><th>Description</th></xsl:if>
    </tr>
    <xsl:for-each select="//Article">
    <tr>
      <td class="n">
        <xsl:if test="Removed"><div style="color:red"><b>REMOVED</b></div></xsl:if>
        <xsl:if test="//Name"><xsl:value-of select="Name"/></xsl:if>
        <xsl:if test="//Category"><xsl:value-of select="Category"/></xsl:if>
      </td>
      <td class="f"><xsl:value-of select="Auth"/></td>
      <td class="f"><xsl:value-of select="Date"/></td>
      <td class="n">
        <xsl:if test="//Text"><xsl:value-of select="Text"/></xsl:if>
        <xsl:if test="//Desc"><a href="#" language="javascript" onclick="changeContent('{Link}','index.xsl')"><xsl:value-of select="Desc"/></a></xsl:if>
      </td>
    </tr>
    </xsl:for-each>
  </table>
 </xsl:if>
 [b]<xsl:if test="//File">[/b]
  <table class="view">
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Description</th>
      <th>Screen Shot</th>
    </tr>
    <xsl:for-each select="//File">
    <tr>
      <td class="f">
<xsl:if test="Link"><a href="{Link}"><xsl:value-of select="Name"/></a></xsl:if>
<xsl:if test="not(Link)"><xsl:value-of select="Name"/></xsl:if>
      </td>
      <td class="f">
<xsl:if test="ALink"><a href="{ALink}"><xsl:value-of select="Auth"/></a></xsl:if>
<xsl:if test="not(ALink)"><xsl:value-of select="Auth"/></xsl:if>
      </td>
      <td class="n"><xsl:value-of select="Desc"/></td>
      <td class="s">
         <img src="{Pic}" width="160" language="javascript" alt="Click To Enlarge Image Below" onclick="scrsht.src = this.src;scrsht.width = 640" />
      </td>
    </tr>
    </xsl:for-each>
    <tr align="center">
      <td colspan="4" class="cap">Screen Shot<BR /><img id="scrsht" src="img/blank.gif"/></td>
    </tr>
  </table>
 </xsl:if>
</xsl:template>
</xsl:stylesheet>

The <xsl:if> tags control which transformation to use depending on the content, as well as allow the pages to contain multiple types of content...

*Note: Since I am currently using vbScript for the scripting language, this will *probably* only work for IE browsers...
I will eventually use javascript instead, but I have been coding in BASIC for years and years, so I like to protype with it fist...

Hopefully, you might have learned a few new tricks with this Tip...
In any case, I enjoyed writing it, so thats what matters right?

It would also be interesting to see what tricks others are using, that they would like to share with the rest of us...

Happy Coding ;-)
-Josh Stribling

Visit My Site
PROGRAMMER: (n) Red-eyed, mumbling mammal capable of conversing with inanimate objects.
 
This approach has some major downsides:

- There is no way to navigate through your site.

- Accessibility is terrible.

- Its IE only, and only later versions.

- You should avoid using scripting unless absolutely necessary.

- Its cumbersome.

- Hard to maintain.

Doing the transforms server-side would solve some of these issues.

The strength of XML is for interoperability between systems that could not normally do so.



Jon

"There are 10 types of people in the world... those who understand binary and those who don't.
 
Fun stuff there, thanks for sharing.

:) -TAG

alien.gif

[Signature modified by admin request]
-TAG
anongod@hotmail.com
'Drawing on my fine command of language, I said nothing.'
 
BTW...

I finally converted all the vbscript to javascript over the weekend... (well Friday Night)

And downloaded Firefox to test on there...

It turns out that Firefox does not support ActiveX objects (such as MSXML::DOMDocument)

Sooo....
I merged the index.html, menu.xsl, and index.xsl into one master.xsl, that all of the XML files now default to...
Code: 
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[URL unfurl="true"]http://www.w3.org/1999/XSL/Transform">[/URL]
<xsl:template match="/">
[b]<html>
  <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title>Cube-E 101</title>
    <script type="text/javascript" language="javascript" src="index.js"></script>
  </head>
  <body>
    <center>
      <table class="main">
        <tr><td colspan="2" align="center"><img src="img/logo1.gif" width="100%" /></td></tr>
        <tr>
          <td valign="top">
[COLOR=blue]  <table class='menu'>
    <xsl:for-each select="document('index.xml')/index/item">
      <tr>
        <td class="m"><a href="{@link}"><xsl:value-of select="@name"/></a></td>
      </tr>
    </xsl:for-each>
    <tr><td class="m"><a href="[URL unfurl="true"]http://www.microsoft.com/windows/ie/downloads/default.asp"[/URL] target="blank"><img alt="Get Internet Explorer!" src="img/ie6.gif" /></a></td></tr>
    <tr><td class="m"><a href="[URL unfurl="true"]http://www.mozilla.org/products/firefox/"[/URL] target="blank"><img alt="Get Firefox!" src="img/firefox.gif" /></a></td></tr>
  </table>[/color]
          </td>
          <td valign="top">
[COLOR=red] <xsl:if test="//title">
   <table width="100%">
     <tr>
       <td align="center"><a class="cap2" name="toplnk" id="toplnk"><xsl:value-of select="//title" /></a></td>
     </tr>
   </table>
 </xsl:if>
 <xsl:if test="//page">
   <xsl:copy-of select="//page"/>
 </xsl:if>
 <xsl:if test="//Site">
   <table class="view">
     <tr>
       <th>Category</th>
       <th>Site</th>
       <th>Description</th>
     </tr>
     <xsl:for-each select="//Site">
     <tr>
       <td class="f"><xsl:value-of select="Category"/></td>
       <td class="f">
         <a href="{Link}" target="blank"><xsl:value-of select="Name"/></a>
       </td>
       <td class="n"><xsl:value-of select="Desc"/></td>
     </tr>
   </xsl:for-each>
   </table>
 </xsl:if>
 <xsl:if test="//Article">
  <table class="view">
    <tr>
      <th>Caption</th>
      <th>Author</th>
      <th>Date</th>
      <xsl:if test="//Text"><th>Text</th></xsl:if>
      <xsl:if test="//Desc"><th>Description</th></xsl:if>
    </tr>
    <xsl:for-each select="//Article">
    <tr>
      <td class="n">
        <xsl:if test="Removed"><div style="color:red"><b>REMOVED</b></div></xsl:if>
        <xsl:if test="//Name"><xsl:value-of select="Name"/></xsl:if>
        <xsl:if test="//Category"><xsl:value-of select="Category"/></xsl:if>
      </td>
      <td class="f"><xsl:value-of select="Auth"/></td>
      <td class="f"><xsl:value-of select="Date"/></td>
      <td class="n">
        <xsl:if test="//Text"><xsl:value-of select="Text"/></xsl:if>
        <xsl:if test="//Desc"><a href="{Link}"><xsl:value-of select="Desc"/></a></xsl:if>
      </td>
    </tr>
    </xsl:for-each>
  </table>
 </xsl:if>
 <xsl:if test="//File">
  <table class="view">
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Description</th>
      <th>Screen Shot</th>
    </tr>
    <xsl:for-each select="//File">
    <tr>
      <td class="f"><xsl:if test="Link"><a href="{Link}"><xsl:value-of select="Name"/></a></xsl:if><xsl:if test="not(Link)"><xsl:value-of select="Name"/></xsl:if></td>
      <td class="f"><xsl:if test="ALink"><a href="{ALink}"><xsl:value-of select="Auth"/></a></xsl:if><xsl:if test="not(ALink)"><xsl:value-of select="Auth"/></xsl:if></td>
      <td class="n"><xsl:value-of select="Desc"/></td>
      <td class="s"><img src="{Pic}" width="160" language="javascript" alt="Click To Enlarge Image Below" onclick="document.getElementById('sspane').style.display=''; document.getElementById('scrsht').src = this.src; document.getElementById('scrlnk').href = this.src; document.getElementById('scrlnk').scrollIntoView(true);" /></td>
    </tr>
    </xsl:for-each>
    <tr align="center">
      <td colspan="4" class="cap">
<div style="display: none;" id="sspane">Screen Shot<BR /><a id="scrlnk" href="img/blank.gif" target="blank"><img width="640" id="scrsht" src="img/blank.gif" alt="Click to view full size in new window" /></a><br/><a class="normal" href="" language="javascript" onclick="return ToTop();">Back To Top</a></div>
      </td>
    </tr>
  </table>
 </xsl:if>[/color]
          </td>
        </tr>
        <tr>
          <td align="center" colspan="2"><a href='index.html'>CLICK HERE to access the default page</a></td>
        </tr>
      </table>
    </center>
  </body>
</html>[/b]
</xsl:template>
</xsl:stylesheet>

Though, all the .xsl files had to be switched to .xml files because of Firefox's Mime type issue, and topcities not having xsl listed as an xml Mime Type... (blah)

So if you can't view the single document interface, then you can just open the XML files directly, and have them rendered the same way...
(There is a link at the bottom of the page to switch back and forth between the display methods)

*Note: If you have Netscape 8, there is a BUG that prevents you from viewing XML files in Internet Explorer (I seriously wonder if this is not intentional...)
Anyway, if you Netscape installed, read this:
(In short, just use IE or FireFox, forget NetScape)

The only major difference is I removed the counter from the XML/XSL version, to avoid getting a hit every time someone clicks something...

I will probably make a "site dump" XSL to create a "Catch All" HTML file for the site, so that search engines will catch it...

Using the index file, I can loop through all the files, and dump everything to a single page, with a link back to the Main page...

I'll see how that works out ;-)

Jon,
- There is no way to navigate through your site.
Can you explain what you mean by this?

- Accessibility is terrible.
...And this?

- Its IE only, and only later versions.
(Fixed)

- You should avoid using scripting unless absolutely necessary.
WHY? It makes it more interesting...
(It is a hobby programming site after all)

- Its cumbersome.
How So?

- Hard to maintain.
On the contrary, it is EXTREMELY easy to maintain...

XML is much easier to modify than digging data out of HTML and modifying it...

Doing the transforms server-side would solve some of these issues.
As far as server side, TopCities does not support server side (unless you want to pay for it, and I don't)

The strength of XML is for interoperability between systems that could not normally do so.
That is one of the strengths...
XML has many, including the one I showed above...
Keeping your data seperate from the rendering engine...
Without a full database system...


Visit My Site
PROGRAMMER: (n) Red-eyed, mumbling mammal capable of conversing with inanimate objects.
 
CubeE101, can I offer without being invited an opinion on the posting? I would suggest leaving out blanket bold-tag inside the code-tag would be more than good. Adding the bold-tag is just an anti-climax for reading good script. - tsuji
 
tsuji,
I know what you mean, the intent of the Bold/Colors was to show placement of the 3 files merged into the single XSL file, to provide a secodary way to view the XML...

The same basic code (with the exception of the menu.xsl) can be read normally in the original post...

Normally, I do not blanket Code Text with the Bold Tag, unless it is a case like this...
But, I will keep your suggestion in mind for the future...

Thanks,
-Josh

Visit My Site
PROGRAMMER: (n) Red-eyed, mumbling mammal capable of conversing with inanimate objects.
 
Status
Not open for further replies.

Similar threads

smak1
  • Locked
  • Question
add structure to XML
Replies
0
Views
700
smak1
smak1
Bijan Borazjani
  • Locked
  • Question
XML to PDF
Replies
0
Views
797
Bijan Borazjani
Bijan Borazjani
P
  • Locked
  • Question
How to re-use a recursive template
Replies
1
Views
788
pdrapeau
P
cdr_greg
  • Locked
  • Question
Display XML Line Breaks in Microsoft Word Content Controls
Replies
0
Views
1K
cdr_greg
cdr_greg
developer11
  • Locked
  • Question
thread426-1595399 Can anyone giv
Replies
0
Views
646
developer11
developer11

Part and Inventory Search

Sponsor

Back
Top