La conception Web bénéficie grandement de la transformation de XML et XSLT. Avec les transformations XML et XSLT, vous pouvez stocker du verbiage dynamique et du contenu de sites Web dans une base de données. Vous pouvez transférer la base de données au format XML puis la convertir en script HTML via la transformation XSLT.
Au début du développement du réseau, la cohésion était assurée côté serveur, mais cela impliquait une gestion manuelle des fichiers. Heureusement, à mesure que le Web évolue, les outils de développement Web évoluent également. Par exemple, sous le framework .NET, vous pouvez créer divers contrôles Web pour unifier la conception.
Lors de la conception de fonctions d'interaction utilisateur/données, comment obtenir une intégrité complète des données, des fonctionnalités d'interface utilisateur et des règles métier. Cet article fournira un exemple de site Web et expliquera comment XML et XSLT peuvent rendre la conception de votre site Web transparente.
Voici une citation :
<html>
<tête>
</tête>
<corps>
<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>
</corps>
</html>
L'extrait de code ci-dessus complète la fonction principale, mais il doit être embelli avec XML et XSLT.
En XML, le code a des balises d’ouverture et de fermeture, alors qu’en HTML il n’y en a pas. Les balises INPUT et BR sont des cas particuliers, elles ne nécessitent pas de balise de fin. Cependant, l'ajout d'une barre oblique avant la balise de fermeture ">" garantit que le code HTML est conforme à la spécification XML. Si vous faites attention à suivre ces spécifications lors de l'écriture de scripts HTML, vous pouvez convertir XML/HTML (alias XHTML) en de bonnes pages HTML.
Voici une citation :
<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="Soumettre"
transform="bigButton"/>
</form> Exécutez le code suivant pour terminer la conversion XSLT :
<?xml version="1.0"?>
<xsl:feuille de style
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">Ceci est l'en-tête défini</td></tr>
<tr><td><xsl:apply-templates select="//form"/></td></tr>
<tr><td align="center">Ceci est le pied de page défini</td></tr>
</table>
</xsl:modèle>
<xsl:template match="form">
<xsl:element name="form">
<xsl:nom de l'attribut="méthode"><xsl:valeur de
select="@method"/></xsl:attribute>
<xsl:nom de l'attribut="action"><xsl:valeur de
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:élément>
</xsl:template><xsl:template match="*">
<xsl:choisir>
<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">texte</xsl:attribute>
<xsl:attribute name="style">couleur:bleu</xsl:attribute>
<xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of
select="@value"/></xsl:attribute></xsl:if>
</xsl:élément>
</xsl:quand>
<xsl:when test="@transform='redText'"><xsl:element name="input">
<xsl:nom de l'attribut="nom"><xsl:valeur-de
select="@name"/></xsl:attribute>
<xsl:nom de l'attribut="id"><xsl:valeur de
select="@id"/></xsl:attribute>
<xsl:attribute name="type">texte</xsl:attribute>
<xsl:attribute name="style">couleur:rouge</xsl:attribute>
<xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of
select="@value"/></xsl:attribute></xsl:if>
</xsl:élément>
</xsl:quand>
<xsl:when test="@transform='bigButton'"><xsl:element name="input">
<xsl:nom de l'attribut="nom"><xsl:valeur-de
select="@name"/></xsl:attribute>
<xsl:nom de l'attribut="id"><xsl:valeur de
select="@id"/></xsl:attribute>
<xsl:attribute name="style">hauteur:30px;largeur:100px;font-
taille : 18 pt ; poids de la police : 700 ;</xsl:attribute>
<xsl:nom de l'attribut="valeur"><xsl:valeur-de
select="@value"/></xsl:attribute>
</xsl:élément>
</xsl:quand>
</xsl:choisir>
</xsl:modèle>
</xsl:stylesheet>
Le code ci-dessus ne peut pas créer d'espace de noms, définir des balises XML, confirmer une DTD ou un schéma pour vous. Il vous permet de créer des scripts HTML fonctionnels qui peuvent être transformés en de nouvelles pages complètes sans vous soucier des considérations de conception.
Dans la feuille de style, l'attribut de transformation de la balise HTML est utilisé pour piloter l'opération de transformation. J'ai envisagé d'utiliser un formulaire FORM comme unité pour définir les contrôles utilisateur requis pour les opérations de conversion, car tous les contrôles pour la saisie utilisateur doivent être dans un FORMULAIRE. Dans cet exemple, la sortie est un texte INPUT, la couleur du texte est bleue ; un bouton de 20 pixels de haut et 100 pixels de large, avec une police en gras de 18 points. Nous pouvons changer la couleur du texte dans la zone de texte en modifiant la propriété transform.
Il existe de nombreuses façons d'ajouter du contenu statique à une page Web. Dans cet exemple, nous utilisons uniquement la méthode la plus simple, qui consiste à ajouter un en-tête et un pied de page à la feuille de style.
Désormais, lorsque vous souhaitez créer un nouveau formulaire pour la saisie utilisateur, tout ce que vous avez à faire est de créer un formulaire standard. Une fois que les formulaires généraux réussissent le test, ces formulaires peuvent être ajoutés à la transformation pour générer la sortie HTML du thème. Tout ce que vous avez à faire est de mémoriser le type de contrôle d’entrée et de vous assurer de l’ajouter en tant que propriété de conversion.