p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   XSLT (http://p2p.wrox.com/forumdisplay.php?f=86)
-   -   Clickable images Using xml and xsl(Urgent) (http://p2p.wrox.com/showthread.php?t=58618)

Akriti June 1st, 2007 01:23 AM

Clickable images Using xml and xsl(Urgent)
 
i want to make clickable image.on click of repeat image i want to open a new html page.also i am having problem when i click image it is expanding and collapsing the sub childs.Kindly reply
XML used is :
<tree>
<group id="GRP4">
            <name>GRP4</name>
            <next>100</next>
             <repeat>images/repeat.gif</repeat>
            <plus>images/plus.gif</plus>
            <minus>images/minus.gif</minus>
            <contents>
                <group id="GRP21">
                <name>GRP21</name>
                <next>101</next>
                <plus>images/plus.gif</plus>
                <repeat>images/repeat.gif</repeat>
                <nextS>102</nextS>
                <icon>images/next.gif</icon>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
                <group id="GRP69">
                <name>GRP69</name>
                <plus>images/plus.gif</plus>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
            </contents>
            </group>
                  </tree>

XSL used is :

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">

<xsl:template match="tree">
   <xsl:apply-templates select="group"/>
 </xsl:template>
 <xsl:template match="group">
  <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false" ondragstart="return false">
  <xsl:attribute name="plus"><xsl:value-of select="plus"/></xsl:attribute>
  <xsl:attribute name="minus"><xsl:value-of select="minus"/></xsl:attribute>
  <xsl:attribute name="nextS"><xsl:value-of select="nextS"/></xsl:attribute>
  <xsl:attribute name="icon"><xsl:value-of select="icon"/></xsl:attribute>
  <xsl:attribute name="repeat"><xsl:value-of select="repeat"/></xsl:attribute>
  <xsl:attribute name="next"><xsl:value-of select="next"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="id">f<xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="STYLE">
    padding-left: 20px;
    cursor: hand;
    <xsl:if expr="depth(this) > 2">
      display: none;
    </xsl:if>
  </xsl:attribute>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="middle">
          <img border="0" id="plus">
            <xsl:attribute name="SRC">
              <xsl:value-of select="plus"/>
            </xsl:attribute>
          </img>
        </td>
        <td valign="middle" nowrap="true">
        <xsl:attribute name="STYLE">
          padding-left: 7px;
          font-family: Verdana;
          font-size: 11px;
          font-color: black;
        </xsl:attribute>
        <xsl:value-of select="name"/></td>
        </tr>
        <tr valign="middle" nowrap="false">
        <xsl:attribute name="STYLE">
              padding-left: 7px;
              font-family: Verdana;
              font-size: 11px;
              font-color: black;
        </xsl:attribute>
        <xsl:value-of select="next"/>
        <xsl:if test="next">
        <img border="0" id="repeat">
         <xsl:attribute name="SRC">
         <xsl:value-of select="repeat"/>
        </xsl:attribute>
       </img>
         </xsl:if>
     </tr>
         <tr valign="middle" nowrap="false">
     <xsl:attribute name="STYLE">
          padding-left: 7px;
          font-family: Verdana;
          font-size: 11px;
          font-color: black;
     </xsl:attribute>
      <xsl:value-of select="nextS"/>
      <xsl:if test="nextS">
        <img border="0" id="icon">
         <xsl:attribute name="SRC">
         <xsl:value-of select="icon"/>
         </xsl:attribute>
       </img>
      </xsl:if>
         </tr>

     </table>
  <xsl:apply-templates select="contents/group"/>
 </xsl:template>
</xsl:stylesheet>


JS used is :function clickOnEntity(group) {
  if(group.open == "false" ) {
    expand(group, true)
  }
  else {
    collapse(group)
  }
  window.event.cancelBubble = true
}

function expand(group) {
  var oImage

  oImage = group.childNodes(0).all["plus"]
  oImage.src = group.minus
  for(i=0; i < group.childNodes.length; i++) {
    if(group.childNodes(i).tagName == "DIV") {
      group.childNodes(i).style.display = "block"
    }
  }
  group.open = "true"
}

Thanks




joefawcett June 1st, 2007 01:30 AM

If you want a clickable image then show the HTML that you need, after testing a static version to make sure it works in the browser. Once you have that it should be easier to repair your XSLT.

--

Joe (Microsoft MVP - XML)

Akriti June 1st, 2007 01:33 AM

This is the HTML:


<HTML>
<HEAD>
<LINK REL="stylesheet" type="text/css" href="css/tree.css"/>
<SCRIPT LANGUAGE="Javascript" SRC="tree/tree.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="common/css.js"></SCRIPT>
</HEAD>
<BODY ONLOAD="initialize()" ONSELECTSTART="return false" TOPMARGIN="0" LEFTMARGIN="0">

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <TR STYLE="background-color: #5389bc;">
    <TD><DIV CLASS="bOut" ONMOUSEOVER="swapClass(this, 'bOver')" ONMOUSEOUT="swapClass(this, 'bOut')" ONCLICK="expandAll(folderTree)">Expand</DIV></TD>
    <TD><DIV CLASS="bOut" ONMOUSEOVER="swapClass(this, 'bOver')" ONMOUSEOUT="swapClass(this, 'bOut')" ONCLICK="collapse(folderTree)">Minimize</DIV></TD>
    <TD WIDTH="100%"></TD>
  </TR>
</TABLE>


<DIV id="folderTree" STYLE="padding-top: 8px;"></DIV>

</BODY>
</HTML>


mhkay June 1st, 2007 03:49 AM

So, you know what HTML you want to generate. Which part of it are you having difficulty generating? How does your actual generated HTML differ from the HTML you want to generate?

Incidentally, you don't seem to have discovered attribute value templates. Things like this:

<img border="0" id="plus">
            <xsl:attribute name="SRC">
              <xsl:value-of select="plus"/>
            </xsl:attribute>
          </img>

can be written much more concisely as

<img border="0" id="plus" SRC="{plus}"/>

I've no idea what this code is doing:

  <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false" ondragstart="return false">
  <xsl:attribute name="plus"><xsl:value-of select="plus"/></xsl:attribute>
  <xsl:attribute name="minus"><xsl:value-of select="minus"/></xsl:attribute>
  <xsl:attribute name="nextS"><xsl:value-of select="nextS"/></xsl:attribute>
  <xsl:attribute name="icon"><xsl:value-of select="icon"/></xsl:attribute>
  <xsl:attribute name="repeat"><xsl:value-of select="repeat"/></xsl:attribute>
  <xsl:attribute name="next"><xsl:value-of select="next"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="id">f<xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="STYLE">
    padding-left: 20px;
    cursor: hand;
    <xsl:if expr="depth(this) > 2">
      display: none;
    </xsl:if>
  </xsl:attribute>

it seems to generate lots of attributes that aren't defined in HTML and that bear no relation to anything in your desired output. It even generates some attributes twice!

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

mhkay June 1st, 2007 03:51 AM

One other point, I just noticed this:

<xsl:if expr="depth(this) > 2">

That suggests you aren't using XSLT at all, but rather the obsolete 1998 WD-xsl language invented by Microsoft as a short-term expedient while XSLT was still being standardised.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

Akriti June 1st, 2007 06:27 AM

actually we are trying to display tree hierarchy using xml and xsl .
i want to have xsl which renders the xml i have already mentioned.also we need img icons in front of groups on click of which we want to call another html page.Those attributes were defined to enable the expand and collapse functionality provided as functions in js.
If anybody can sujjest the XSL so that things work out the right way .
XML :
<tree>
<group id="GRP2">
    <name>GRP2</name>
    <plus>images/plus.gif</plus>
    <minus>images/minus.gif</minus>
    <contents>
        <group id="GRP3">
        <name>GRP3</name>
        <plus>images/plus.gif</plus>
        <minus>images/minus.gif</minus>
        <contents>
            <group id="GRP4">
            <name>GRP4</name>
            <plus>images/plus.gif</plus>
            <minus>images/minus.gif</minus>
            <contents>
                <group id="GRP21">
                <name>GRP21</name>
                <plus>images/plus.gif</plus>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
                <group id="GRP69">
                <name>GRP69</name>
                <plus>images/plus.gif</plus>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
            </contents>
            </group>
            <group id="GRP68">
            <name>GRP68</name>
            <plus>images/plus.gif</plus>
            <minus>images/minus.gif</minus>
            <contents></contents>
            </group>
        </contents>
        </group>
        <group id="JJJ">
        <name>JJJ</name>
        <plus>images/plus.gif</plus>
        <minus>images/minus.gif</minus>
        <contents></contents>
        </group>
    </contents>
    </group>
</tree>








joefawcett June 1st, 2007 08:15 AM

Well, as Michael says, you're not using XSLT but WD-XSL as shown by the namespace xmlns:xsl="http://www.w3.org/TR/WD-xsl. No-one uses this nowadays, it was, as its name suggests, a working draft. It's not supported or clearly documented. Can you move to using XSLT?

--

Joe (Microsoft MVP - XML)

Akriti June 2nd, 2007 07:25 AM

yes we can move move to XSLT .but how to implement my Query of displaying tree using the XML we have.


joefawcett June 4th, 2007 01:46 AM

So you need a template that matches each group element and outputs a list or a div element. You then need to examine the elements that dictate the images and then process any contents/group element in the same way.

--

Joe (Microsoft MVP - XML)

Akriti June 4th, 2007 03:36 AM

yes..and also based on the value of name node i should be able to show some image in front of it dynamically.
i.e. if the node is name then show image1.gif in front of it and if the node is name1 then show image2.gif .
Is there solution ?
What wud be the XSLT as we are new to xslt so not able to frame it




All times are GMT -4. The time now is 01:30 PM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.