Embed XML as converted HTML using XSL into an HTML page

Question

I generated palette files (xcp) using GIMP and I want to see them on a web page. For that, I created a stylesheet transformation file (xsl) and a simple stylesheet (css).

When I open the XCP palette file with my browser, it automatically generates an HTML file. Here is a rendering:

What I'd like is to embed several palette files in a single page. I tried getting them from jQuery but I get an XMLDocument that I can't add directly to the page.

How to get the transformed html parts into the main html page?

Note: No iframes please

Check my gist or see below code: https://gist.github.com/sinsedrix/a14c131a3ef39ad79924eaa87accc434

Output palette in an XCP file:

<?xml version="1.0"?>
<?xml-stylesheet href="palette.xsl" type="text/xsl"?>
<Palette Name="Orange">
  <PaletteEntry Color="#F29400" Color2="#F29400" />
  <PaletteEntry Color="#F39F1A" Color2="#F39F1A" />
  <PaletteEntry Color="#F5A933" Color2="#F5A933" />
  <PaletteEntry Color="#F6B44D" Color2="#F6B44D" />
  <PaletteEntry Color="#F7BF66" Color2="#F7BF66" />
  <PaletteEntry Color="#F9C980" Color2="#F9C980" />
  <PaletteEntry Color="#FAD499" Color2="#FAD499" />
  <PaletteEntry Color="#FBDFB2" Color2="#FBDFB2" />
  <PaletteEntry Color="#FCEACC" Color2="#FCEACC" />
  <PaletteEntry Color="#FEF4E5" Color2="#FEF4E5" />
</Palette>

Transformation style XSL file:

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="Palette">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Palette "<xsl:value-of select="@Name" />"</title>
        <link rel="stylesheet" href="palette.css" type="text/css"/>
    </head>
    <body>
        <div class="palette">
            <xsl:apply-templates/>
        </div>
    </body>
</html>
</xsl:template>

<xsl:template match="PaletteEntry">
    <div class="palette-entry" style="background-color: {@Color}; border: 2px solid {@Color2};">
        <xsl:value-of select="@Color" />
        <br/>
        <xsl:value-of select="@Color2" />
    </div>
</xsl:template>

</xsl:stylesheet>

$(function() {

    $.get('orange.xcp', function(data) {
      $('#palette1').append(data); // here data is an XMLDocument
    });

    $('#palette2').load('orange.xcp');
  });

.palette-entry {
  width: 80px;
  margin: 2px;
  float: left;
  font: 14px Consolas;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="palette1"></div>
<div id="palette2"></div>

Just for my understanding: Where would you expect the transformation to take place? Server side or client side? — friedemann_bach
– friedemann_bach, Commented Dec 23, 2017 at 17:37
@friedemann_bach I'd prefer it to be client side but I wish the browser do the job without an additional js library. Is the iframe the only solution? — sinsedrix
– sinsedrix, Commented Dec 25, 2017 at 2:22
I was inclined to say no, but I gave it a second thought. See my answer below. — friedemann_bach
– friedemann_bach, Commented Dec 26, 2017 at 13:49

friedemann_bach · Accepted Answer · 2017-12-26 13:48:05Z

1

I built a solution without any javascript, which works in the browser with XSLT only and no additional libraries required. The idea is to include the XCP files by XSLT instead of jquery. I assume a base HTML code like this:

<?xml version="1.0"?>
<?xml-stylesheet href="palette.xsl" type="text/xsl"?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="palette.css" type="text/css"/>
    </head>
    <body>
        <h1>Hello world</h1>
        <p>Lorem ipsum ...</p>
        <div data-filename="palette.xcp" class="palette"/>
    </body>
</html>

The XSL specified in line 2 would look like this:

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="node() | @*">
        <xsl:copy>
            <xsl:apply-templates select="node() | @*"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="div[@class = 'palette']">
        <xsl:variable name="Palette" select="document(@data-filename)/Palette"/>
        <xsl:apply-templates select="$Palette"/>
    </xsl:template>

    <xsl:template match="Palette">
        <h2>Palette "<xsl:value-of select="@Name"/>"</h2>
        <div class="palette">
            <xsl:apply-templates/>
        </div>
    </xsl:template>

    <xsl:template match="PaletteEntry">
        <div class="palette-entry" style="background-color: {@Color}; border: 2px solid {@Color2};">
            <xsl:value-of select="@Color"/>
            <br/>
            <xsl:value-of select="@Color2"/>
        </div>
    </xsl:template>

</xsl:stylesheet>

This performs a complete identity transform for your HTML. On a div classed "palette", it includes the data from the file given in palette.xcp and transforms it according to your scripts. CSS and XCP files are the same as given in your question.

This creates the code as desired, without any extensions or iframes required.

answered Dec 26, 2017 at 13:48

friedemann_bach

1,46615 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sinsedrix Over a year ago

It seems to be a good idea. It also mean to have 2 xsl files with duplicated code, can't the single palette be included/embeded in the global one?

friedemann_bach Over a year ago

No, you just need one XSL. And of course the palettes are included, that's the whole point of my code. Did you try it yet?

sinsedrix Over a year ago

I need to visualize each palette individually and grouped on a page, that's why I'm thinking about 2 xsl files. I'll try your solution after holidays :-)

friedemann_bach Over a year ago

I see. Sure, within one XSL file you can include XSL code from another file, if that helps. But maybe it will not be necessary. You can use <div data-filename="palette_name.xcp" class="palette"/> as many times as you want, it will produce an individual palette visualization for each div, based on the respective XCP given in @filename.

Collectives™ on Stack Overflow

Embed XML as converted HTML using XSL into an HTML page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related