Generate layout from xml using xsl

Dear all,
using this xml
<layout>
	<item>
		<id>7</id>
		<name>Logo</name>
		<x>1</x>
		<y>1</y>
		<width>3</width>
		<height>1</height>
	</item>
	<item>
		<id>2</id>
		<name>Ads top</name>
		<x>4</x>
		<y>1</y>
		<width>4</width>
		<height>1</height>
	</item>
	<item>
		<id>13</id>
		<name>Ads small</name>
		<x>1</x>
		<y>2</y>
		<width>4</width>
		<height>1</height>
	</item>
	<item>
		<id>5</id>
		<name>Ads right</name>
		<x>5</x>
		<y>2</y>
		<width>3</width>
		<height>3</height>
	</item>
	<item>
		<id>1</id>
		<name>Main</name>
		<x>1</x>
		<y>3</y>
		<width>4</width>
		<height>2</height>
	</item>
	<item>
		<id>6</id>
		<name>User photos</name>
		<x>1</x>
		<y>5</y>
		<width>4</width>
		<height>3</height>
	</item>
	<item>
		<id>3</id>
		<name>Feed</name>
		<x>5</x>
		<y>5</y>
		<width>3</width>
		<height>3</height>
	</item>
	<item>
		<id>8</id>
		<name>Ads middle</name>
		<x>8</x>
		<y>7</y>
		<width>5</width>
		<height>1</height>
	</item>
	<item>
		<id>form1</id>
		<name>form1</name>
		<x>8</x>
		<y>1</y>
		<width>5</width>
		<height>6</height>
	</item>
	<item>
		<id>form1</id>
		<name>form1</name>
		<x>1</x>
		<y>8</y>
		<width>7</width>
		<height>1</height>
	</item>
</layout>

Open in new window


Need to generate the html to represent the layout.
Sample HTML :
			<div class="section group">
				<div class="col span_1_of_3">1 of 3</div>
				<div class="col span_1_of_3">1 of 3</div>
				<div class="col span_1_of_3">1 of 3</div>
			</div>
			
			<div class="section group">
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
			</div>

			<div class="section group">
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
			</div>

Open in new window


Layout design
ethar1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Geert BormansInformation ArchitectCommented:
I am not sure what you are getting at,

But if this is what you want to achieve

<?xml version="1.0" encoding="UTF-8"?>
<table border="1">
   <tr>
      <td colspan="3" rowspan="1">Logo</td>
      <td colspan="4" rowspan="1">Ads top</td>
      <td colspan="5" rowspan="6">form1</td>
   </tr>
   <tr>
      <td colspan="4" rowspan="1">Ads small</td>
      <td colspan="3" rowspan="3">Ads right</td>
   </tr>
   <tr>
      <td colspan="4" rowspan="2">Main</td>
   </tr>
   <tr>
      <td colspan="4" rowspan="3">User photos</td>
      <td colspan="3" rowspan="3">Feed</td>
   </tr>
   <tr>
      <td colspan="5" rowspan="1">Ads middle</td>
   </tr>
   <tr>
      <td colspan="7" rowspan="1">form1</td>
   </tr>
</table>

Open in new window


This XSLT can help you

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="2.0">
    
    <xsl:output indent="yes"></xsl:output>
    
    <xsl:template match="layout">
        <table border="1">
            <xsl:for-each-group select="item" group-by="y">
                <xsl:sort order="ascending" select="y" data-type="number"/>
                <tr>
                    <xsl:for-each-group select="current-group()" group-by="x">
                        <xsl:sort order="ascending" select="x" data-type="number"/>
                        <td colspan="{width}" rowspan="{height}">
                            <xsl:value-of select="name"/>
                        </td>
                    </xsl:for-each-group>
                </tr>
            </xsl:for-each-group>
        </table>
    </xsl:template>
</xsl:stylesheet>

Open in new window

0
ethar1Author Commented:
thanks Gertone,
the xsl you provide generate <table>s , I need to generate <div>s as in this code:
 
			<div class="section group">
				<div class="col span_1_of_3">1 of 3</div>
				<div class="col span_1_of_3">1 of 3</div>
				<div class="col span_1_of_3">1 of 3</div>
			</div>
			
			<div class="section group">
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
			</div>

			<div class="section group">
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
			</div>

Open in new window

0
Geert BormansInformation ArchitectCommented:
you should explain the relation between the layout xml and the div structure then.

I don't understand how you think the div should be constructed,
but I assumed that you could easily translate the table example into the div example

if not, you need to tell me what the div thing is all about
0
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

ethar1Author Commented:
you may ignore my xml and assume your xml to generate div's of layout appears in below.
Layout
0
Geert BormansInformation ArchitectCommented:
what is your question now exactly?
- how do I model the divs to get the above layout?
=> answer: I have no clue, depends on how you have your CSS
- what is the XSLT that generates the above layout using divs?
=> answer: I can do that but please show an result example
it currently feels I need to shoot in the dark
0
ethar1Author Commented:
I just realize now its very complicated,
anyway , I am after generating html from layout designer like this: http://gridster.net

do u have any idea?
0
Geert BormansInformation ArchitectCommented:
Ah OK, that means that all you need to do is dump your XML in a HTML like this?

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
 
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
 
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
 
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
 
        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

Open in new window

0
ethar1Author Commented:
no
0
Geert BormansInformation ArchitectCommented:
jquery gridster would pick that up I assumed

at this point I am lost... I am not sure what your question is.
it does not seem complex at all... only, I have no clue what exactly you are asking
0
ethar1Author Commented:
that code you post is used for http://gridster.net .

what I need is:
After user design his own layout ( using http://gridster.net  ) we will generate the div or ( even table ) to represent his custom design.
0
Geert BormansInformation ArchitectCommented:
correct, I got that from gridster, since I am trying to find out what your question is.

I read "what you need" and I don't understand that line your write, sorry, you want an XSLT but I simply don't see what the XSLT needs to do. Can you hand create the output XML from that above input XML, so I have something I can base my work on
0
ethar1Author Commented:
I need html output from ( xml + xsl )
0
ethar1Author Commented:
			<div class="section group">
				<div class="col span_1_of_3">1 of 3</div>
				<div class="col span_1_of_3">1 of 3</div>
				<div class="col span_1_of_3">1 of 3</div>
			</div>
			
			<div class="section group">
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
				<div class="col span_1_of_4">1 of 4</div>
			</div>

			<div class="section group">
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
				<div class="col span_1_of_5">1 of 5</div>
			</div>

Open in new window

0
Geert BormansInformation ArchitectCommented:
I don't see the words "1 of 3" in your source XML.
So, I don't understand the mapping

Can you hand make the real XML you want out of the source you posted, not a mockup
and explain teh mapping?
0
ethar1Author Commented:
lets start from scratch , After my user design his layout as in gridster.net  can we convert it to html?
0
Geert BormansInformation ArchitectCommented:
no problem, as long as you can define how the html needs to look like

tables seemed the most natural way to deal with it, hence my first proposal
other options are canvas, svg or floating divs
if you want the floating divs approach, the bulk of the work will be in the CSS
0
ethar1Author Commented:
I tried your past xsl and it generate :screen
0
Geert BormansInformation ArchitectCommented:
well, seems I missed the fact that not every row necessarily has a used starting point
this one will be better

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="2.0">
    
    <xsl:key name="item-by-y" match="item" use="xs:integer(y)" />
    
    <xsl:output indent="yes"></xsl:output>
    
    <xsl:template match="layout">
        <xsl:variable name="layout" select="."/>
        <table border="1">
             <xsl:for-each select="for $i in xs:integer(1) to xs:integer(max($layout/item/y)) return $i">
                <xsl:variable name="i" select="."/>
                <tr value="{$i}">
                    <xsl:for-each select="key('item-by-y', $i, $layout)">
                        <xsl:sort order="ascending" select="x" data-type="number"/>
                        <td colspan="{width}" rowspan="{height}">
                            <xsl:value-of select="name"/>
                        </td>
                    </xsl:for-each>
                </tr>
            </xsl:for-each>
        </table>
    </xsl:template>
</xsl:stylesheet>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
XML

From novice to tech pro — start learning today.