Announcement

Collapse
No announcement yet.

Optionale Attribute in inline CSS umwandeln?

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Optionale Attribute in inline CSS umwandeln?

    Hallo!

    Ich möchte XML-Dokumente in HTML umwandeln, in denen verschiedene Elemente mehrere optionale Attribute besitzen.

    Das funktioniert prinzipiell, indem ich pro Element entsprechendes Inline-CSS erzeuge. Leider habe ich es noch nicht geschafft den Code in ein Attribut-Set o.ä. umzuwandeln, so dass er für jedes Element wiederholt wird. Auch wird zur Zeit nicht berücksichtigt, dass die Attribute optional sind. Der Browser muss die ungültigen CSS-Elemente entfernen.

    Wie lässt sich der Code verbessern?
    Vielen Dank von einem XSLT-Anfänger, Jens


    mypage.xml :

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="mytranform.xsl"?>

<Page title="Test Title">
  <FixedLabel row="1" col="1" text="Label 1" />
  <FixedLabel row="2" col="1" text="Label2" foreColor="White" backColor="Blue" />
  <DynamicLabel row="1" col="10" param="time" align="left" />
  <DynamicLabel row="2" col="10" param="space" foreColor="White" backColor="Blue" />
</Page>
    mytranform.xsl
    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  
  <xsl:template match="/Page">
    <html>
      <head>
        <title>
          <xsl:value-of select="@title" />
        </title>
      </head>
      <body>
        <div>
          <xsl:apply-templates/>
         </div>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="FixedLabel">
    <div class="label" style="top: {@row*11}pt; left: {@col*9}pt; color: {@foreColor}; background-color: {@backColor}">
      <xsl:value-of select="@text" />
    </div>
  </xsl:template>

  <xsl:template match="DynamicLabel">
    <div class="parameter" style="top: {@row*11}pt; left: {@col*9}pt; width: {@len}em; text-align: {@align}; color: {@foreColor}; background-color: {@backColor}">
      <span id="{@param}">---</span>
    </div>
  </xsl:template>
  
</xsl:stylesheet>
    Tags: inline css, optionale attribute, xslt
  • #2
    Ansatz:
    Code:
    <xsl:template match="FixedLabel">
  <div class="label">
    <xsl:attribute name="style">
      <xsl:if test="@row"><xsl:text>top: </xsl:text><xsl:value-of select="@row*11"/><xsl:text>pt; </xsl:text></xsl:if>
      <xsl:if test="@col"><xsl:text>left: </xsl:text><xsl:value-of select="@col*9"/><xsl:text>pt; </xsl:text></xsl:if>
      <xsl:if test="@foreColor"><xsl:text>color: </xsl:text><xsl:value-of select="@foreColor"/><xsl:text>; </xsl:text></xsl:if>
      <xsl:if test="@backColor"><xsl:text>background-color: </xsl:text><xsl:value-of select="@backColor"/><xsl:text>;</xsl:text></xsl:if>
    </xsl:attribute>
    <xsl:value-of select="@text"/>
  </div>
</xsl:template>

    Comment

    • #3
      Code:
      <?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="mytranform.xsl"?>

<Page title="Test Title">
  <FixedLabel row="1" col="1" text="Label 1" />
  <FixedLabel row="2" col="1" text="Label2" foreColor="White" backColor="Blue" />
  <DynamicLabel row="1" col="10" param="time" align="left" />
  <DynamicLabel row="2" col="10" param="space" foreColor="White" backColor="Blue" />
</Page>
      Code:
      <?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" method="html"/>
	<xsl:template match="/">
		<xsl:apply-templates select="Page"/>
	</xsl:template>


	<xsl:template match="Page">
		<html>
			<head>
				<title>
					<xsl:value-of select="@title"/>
				</title>
			</head>
			<body>
				<div>
					<xsl:apply-templates/>
				</div>
			</body>
		</html>
	</xsl:template>


	<xsl:template match="FixedLabel">
		<xsl:element name="div">
			<xsl:attribute name="class">label</xsl:attribute>
			<xsl:attribute name="style">
				<xsl:value-of select="concat('top: ', @row*11 ,'pt;left: ',@col*9,'pt;')"/>
				<xsl:if test="@foreColor">
					<xsl:value-of select="concat(' color: ', @foreColor ,';')"/>
				</xsl:if>
				<xsl:if test="@backColor">
					<xsl:value-of select="concat(' background-color: ', @backColor ,';')"/>
				</xsl:if>
			</xsl:attribute>
		</xsl:element>
	</xsl:template>

	<xsl:template match="DynamicLabel">
		<xsl:element name="div">
			<xsl:attribute name="class">parameter</xsl:attribute>

			<xsl:attribute name="style">
				<xsl:value-of select="concat('top: ', @row*11 ,'pt; left: ',@col*9,'pt;')"/>
				<xsl:if test="@len">
					<xsl:value-of select="concat(' width: ', @len ,'em;')"/>
				</xsl:if>
				<xsl:if test="@align">
					<xsl:value-of select="concat(' text-align: ', @align ,';')"/>
				</xsl:if>
				<xsl:if test="@foreColor">
					<xsl:value-of select="concat(' color: ', @foreColor ,';')"/>
				</xsl:if>
				<xsl:if test="@backColor">
					<xsl:value-of select="concat(' background-color: ', @backColor ,';')"/>
				</xsl:if>
			</xsl:attribute>
		</xsl:element>
	</xsl:template>
</xsl:stylesheet>

      Code:
      
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html">
    <title>Test Title</title>
  </head>
  <body>
    <div>
  
      <div class="label" style="top: 11pt;left: 9pt;"></div>
  
      <div class="label" style="top: 22pt;left: 9pt; color: White; background-color: Blue;"></div>
  
      <div class="parameter" style="top: 11pt; left: 90pt; text-align: left;"></div>
  
      <div class="parameter" style="top: 22pt; left: 90pt; color: White; background-color: Blue;"></div>

    </div>
  </body>
</html>

      Comment

      • #4
        xsl:element und xsl:attribute sollten nur verwendet werden, um dynamische Namen bzw. Inhalte zu erzeugen (hier etwa das style-Attribut).

        Der Vergleich von

        Code:
        <xsl:element name="div">
  <xsl:attribute name="class">label</xsl:attribute>
    <!-- ... -->
  </xsl:attribute>
</xsl:element>
        vs.

        Code:
        <div class="label">
  <!-- ... -->
</div>
        zeigt, was zu bevorzugen ist. Gerade bei komplexen Stylesheets leiden Lesbarkeit und Performanz stark. Leider laden halbgare Bücher zu genau dieser ungünstigen Schreibweise ein, deshalb weise ich nochmal darauf hin. Ich sah es erst kürzlich wieder massiv in einer Diplomarbeit :-(.

        Mein Fazit: Schreibe literal, wann immer es geht!

        Comment

        • #5
          Danke

          Damit ich den Code nicht für jedes der Elemente (es gibt noch mehr davon) wiederholen muss, habe ich die Style-Transformation in ein attribute-set mit einem Element verschoben. Dieses enthält dann die Vereinigungsmenge aller für die Darstelleung relevanten Attribute.

          Noch eleganter wäre es die Standardattribute im attribute-set zu behandeln und den CSS-Code für Spezialattribute im jeweiligen Template zu erweitern. Ich weiss nicht, ob es dafür eine einfache Lösung gibt. Der aktuelle Code löst das Problem aber bereits in angemessener Form.


          Vielen Dank für die Antworten,
          Jens

          Comment

          Previous template Next
          Working...
          X