show XML in HTML with inline stylesheet

问题

It's not an duplicate, the problem ist not show an xml in html, rather to show xml with occasional stylesheets for single lines.

i'm looking since hourse for an solution to show xml in a html page with inline css. Background: Input data is an xml file, what will be compared with another xml file in java. The comparison is processed by org.custommonkey.xmlunit. Now i like to transform the xml via xslt and the xpathes from the comparison result of xunit.

Input XML (Multilevel, but for this example very simplified, the Field changed by is exemplary for all other fields)

<ROOT>    
      <MATDETAIL>
            <OUTPUT>
                  <GENERAL>
                        <CREATED_ON/>
                        <CREATED_BY>ORIGINAL USER</CREATED_BY>
                        <LAST_CHNGE/>
                        <CHANGED_BY>NEW USER</CHANGED_BY>
                  </GENERAL>
                  <RETURN>
                        <TYPE>S</TYPE>
                        <MESSAGE/>
                        <LOG_NO/>
                        <LOG_MSG_NO>000000</LOG_MSG_NO>
                  </RETURN>
            </OUTPUT>
      </MATDETAIL>  
</ROOT>

XUnit Diff Result XPath /ROOT[1]/MATDETAIL[1]/OUTPUT[1]/GENERAL[1]/CHANGED_BY[1]/text()[1]

now i will be perfom an translation via xslt (already existing)

my xsl shows like that

<xsl:template match="node() | @*">
<xsl:copy>
<xsl:apply-templates select="node() | @*" mode="unescape"/>
</xsl:copy>
</xsl:template>
<xsl:template match="/ROOT[1]/MATDETAIL[1]/OUTPUT[1]/GENERAL[1]/CHANGED_BY[1]">

    <xsl:element name = "span">
        <xsl:attribute name="style">font-weight:bold; color:red </xsl:attribute>
        <xsl:copy>
            <xsl:value-of select = "current()" />
        </xsl:copy>
        <xsl:text>&lt;== Expected: dasda</xsl:text>
    </xsl:element>
</xsl:template>
</xsl:stylesheet>

that will give me this result

<ROOT>    
      <MATDETAIL>
            <OUTPUT>
                  <GENERAL>
                        <CREATED_ON/>
                        <CREATED_BY>ORIGINAL USER</CREATED_BY>
                        <LAST_CHNGE/>
                        <span style="font-weight:bold; color:red "><CHANGED_BY>NEW USER</CHANGED_BY>&lt;== Expected: ORIGINAL USER</span>
                  </GENERAL>
                  <RETURN>
                        <TYPE>S</TYPE>
                        <MESSAGE/>
                        <LOG_NO/>
                        <LOG_MSG_NO>000000</LOG_MSG_NO>
                  </RETURN>
            </OUTPUT>
      </MATDETAIL>  
</ROOT>

But i'm not able to show this xml in html correctly (with stylesheets). Either i get no tags, so to see the xml strcuture is very complicated also i get the xml structure but without stylesheets.

I like to show the result, from comparison with xunit of the two files, in a webservice and this also colored, so you can easy see which elements have change or are incorrectly.

The Problem is to show the full xml + and that seems to be the real problem to color the entries with stylesheets. I can show the xml, but without inline stylesheets, or i can show the styled text but not both.

I already tried to replace lt and gt inside xslt but failed. I tried to replace lt and gt in the rseult via example java. so every lt and gt are html coded tags. but the result shows very ugly. My colleague has meant that we can not use it in any way. I tried to style the xml via css > definiton per tag. But the the structure and fields are full dynamicly, so i cant define css for every tag or field. On the other hand every field can be correct or wrong, depends also on the xml file like to compare. So the field changedby is at the first comparison correct, but on an other comparison its wrong

Unfortunately, alternative implementations are not an option. I have to do this somehow with the means available to me. (Java, XML & XSL, JS, HTML, CSS).

I hope to get good ideas to solute this.

I would like to thank you in advance.

回答1:

You could use XSLT to transform the xml to HTML so you can display it in a browser. Or build a JS clientside that parses the XML from the server and displays it. This would be something like angularjs.