Webdesign profitiert stark von der Transformation von XML und XSLT. Mit XML- und XSLT-Transformationen können Sie dynamische Ausdrücke und Website-Inhalte in einer Datenbank speichern. Sie können die Datenbank in XML übertragen und anschließend per XSLT-Transformation in ein HTML-Skript konvertieren.
In den Anfängen der Netzwerkentwicklung wurde Kohärenz auf der Serverseite erreicht, dies erforderte jedoch viel manuelle Dateiverwaltung. Glücklicherweise entwickeln sich mit zunehmender Reife des Webs auch die Webentwicklungstools weiter. Unter dem .NET-Framework können Sie beispielsweise verschiedene Websteuerelemente erstellen, um das Design zu vereinheitlichen.
Wie erreicht man beim Entwerfen von Benutzer-/Dateninteraktionsfunktionen vollständige Datenintegrität, Benutzeroberflächenfunktionalität und Geschäftsregeln? Dieser Artikel stellt ein Beispiel einer Website bereit und erklärt, wie XML und XSLT Ihr Website-Design nahtlos gestalten können.
Hier ein Zitat:
<html>
<Kopf>
</head>
<Körper>
<form method="POST" name="thisForm" id="thisForm" action="somepage.php">
<input type="text" name="txtText" id="txtText" size="25"><br>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
</form>
</body>
</html>
Der obige Codeausschnitt vervollständigt die Hauptfunktion, muss jedoch mit XML und XSLT verschönert werden.
In XML verfügt Code über öffnende und schließende Tags, in HTML dagegen nicht. INPUT- und BR-Tags sind Sonderfälle, sie erfordern kein nachgestelltes Tag. Durch das Hinzufügen eines Schrägstrichs vor dem schließenden Tag-Tag „>“ wird jedoch sichergestellt, dass der HTML-Code der XML-Spezifikation entspricht. Wenn Sie beim Schreiben von HTML-Skripten darauf achten, diese Spezifikationen zu befolgen, können Sie XML/HTML (auch bekannt als XHTML) in gute HTML-Seiten konvertieren.
Hier ein Zitat:
<form method="POST" name="thisForm" id="thisForm" action="somepage.php">
<input type="text" name="txtText" id="txtText" size="25" transform="blueText"/>
<br/>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"
transform="bigButton"/>
</form> Führen Sie den folgenden Code aus, um die XSLT-Konvertierung abzuschließen:
<?xml version="1.0"?>
<xsl:stylesheet
xmlns:xsl=" http://www.w3.org/1999/XSL/Transform " version="1.0"
>
<xsl:output method="html"/>
<xsl:template match="/">
<table width="100%" cellpadding="0" cellpacing="0">
<tr><td align="center">Dies ist der definierte Header</td></tr>
<tr><td><xsl:apply-templates select="//form"/></td></tr>
<tr><td align="center">Dies ist die definierte Fußzeile</td></tr>
</table>
</xsl:template>
<xsl:template match="form">
<xsl:element name="form">
<xsl:attribute name="method"><xsl:value-of
select="@method"/></xsl:attribute>
<xsl:attribute name="action"><xsl:value-of
select="@action"/></xsl:attribute>
<xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute>
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
<xsl:apply-templates select="*"/>
</xsl:element>
</xsl:template><xsl:template match="*">
<xsl:choose>
<xsl:when test="@transform='blueText'"><xsl:element name="input">
<xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute>
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="type">text</xsl:attribute>
<xsl:attribute name="style">Farbe:blau</xsl:attribute>
<xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of
select="@value"/></xsl:attribute></xsl:if>
</xsl:element>
</xsl:when>
<xsl:when test="@transform='redText'"><xsl:element name="input">
<xsl:attribute name="name"><xsl:value-of
select="@name"/></xsl:attribute>
<xsl:attribute name="id"><xsl:value-of
select="@id"/></xsl:attribute>
<xsl:attribute name="type">text</xsl:attribute>
<xsl:attribute name="style">Farbe:rot</xsl:attribute>
<xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of
select="@value"/></xsl:attribute></xsl:if>
</xsl:element>
</xsl:when>
<xsl:when test="@transform='bigButton'"><xsl:element name="input">
<xsl:attribute name="name"><xsl:value-of
select="@name"/></xsl:attribute>
<xsl:attribute name="id"><xsl:value-of
select="@id"/></xsl:attribute>
<xsl:attribute name="style">height:30px;width:100px;font-
size:18pt;font-weight:700;</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of
select="@value"/></xsl:attribute>
</xsl:element>
</xsl:when>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
Der obige Code kann für Sie keinen Namespace erstellen, XML-Tags definieren, DTD oder Schema bestätigen. Damit können Sie funktionierende HTML-Skripte erstellen, die in völlig neue Seiten umgewandelt werden können, ohne sich Gedanken über Designaspekte machen zu müssen.
Im Stylesheet wird das Transformationsattribut des HTML-Tags verwendet, um den Transformationsvorgang zu steuern. Ich habe darüber nachgedacht, ein FORM-Formular als Einheit zum Definieren der für Konvertierungsvorgänge erforderlichen Benutzersteuerelemente zu verwenden, da alle Steuerelemente für Benutzereingaben in einem FORM liegen sollten. In diesem Beispiel ist die Ausgabe ein Text INPUT, die Textfarbe ist blau; eine Schaltfläche mit einer Höhe von 20 Pixeln und einer Breite von 100 Pixeln und einer 18-Punkt-Fettschrift. Wir können die Textfarbe im Textfeld ändern, indem wir die Transformationseigenschaft ändern.
Es gibt viele Möglichkeiten, einer Webseite statischen Inhalt hinzuzufügen. In diesem Beispiel verwenden wir nur die einfachste Methode, nämlich das Hinzufügen von Kopf- und Fußzeilen zum Stylesheet.
Wenn Sie nun ein neues Formular für Benutzereingaben erstellen möchten, müssen Sie lediglich ein reguläres Formular erstellen. Sobald die allgemeinen Formulare den Test bestehen, können diese Formulare der Transformation hinzugefügt werden, um die HTML-Ausgabe des Themas zu generieren. Sie müssen sich lediglich den Typ des Eingabesteuerelements merken und ihn unbedingt als Konvertierungseigenschaft hinzufügen.