Créer un Processus "Smart View" via un modèle - Cloud - 8.0

Guide d'utilisation du Studio Talend

Version
Cloud
8.0
Language
Français
Product
Talend Big Data
Talend Big Data Platform
Talend Cloud
Talend Data Fabric
Talend Data Integration
Talend Data Management Platform
Talend Data Services Platform
Talend ESB
Talend MDM Platform
Talend Real-Time Big Data Platform
Module
Studio Talend
Content
Création et développement
Last publication date
2024-03-06
Disponible dans...

Data Fabric

MDM Platform

Pourquoi et quand exécuter cette tâche

Un Processus "Smart View" utilise une étape XSLT pour refléter la présentation HTML de l'enregistrement XML entrant. La chose la plus simple à faire est de créer un modèle HTML avec des valeurs codées en dur hors du Studio Talend :

<tr>
<td>Product Name</td><td>PROD NAME</td>
<!-- etc -->
</tr>

Copiez-collez ensuite ce modèle dans le corps de la feuille de style XSLT dans l'éditeur du Processus, et remplacez la valeur codée en dur par les instructions <xsl:value-of> :

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">  
    <xsl:output method="html" indent="yes"/>  
    <xsl:template match="/" priority="1"> 
        <html> 
            <head> 
                <title>Product</title> 
            </head>  
            <body> 
<tr>
<td>Product Name</td><td><xsl:value-of select="Product/Name"/></td>
<!-- etc -->
</tr>
            </body> 
        </html> 
   </xsl:template> 
</xsl:stylesheet>

Utilisez par exemple PHPform pour créer un modèle Web de votre formulaire. Un modèle Web se compose d'un ou plusieurs fichier(s) HTML en plus des ressources (JavaScript, CSS, images, etc.). Les ressources doivent être accessibles depuis MDM donc vous devez les placer dans <TomcatPath>/webapps/, où <TomcatPath> désigne le chemin où a été installé Tomcat.

Procédure

  1. Dans <TomcatPath>/webapps/, créez un nouveau dossier nommé smartview, dézippez le modèle Web dans un autre dossier nommé Product (c'est-à-dire dans <TomcatPath>/webapps/smartview/Product/).
    Votre formulaire doit maintenant être accessible via : http://localhost:8180/smartview/Product/form.html.
  2. Ouvrez le formulaire dans un éditeur de texte et vérifiez les éléments HTML.
    Le XSLT est du XML, et le XML est plus strict que le HTML. Vous pouvez voir des tags de début sans tags de fin (meta, img, link, etc.). Vérifiez que tous les éléments HTML sont écrits avec un tag de début et un tag de fin.
  3. Corrigez l'URL de JS, CSS et des images. Changez tous les attributs src afin qu'ils pointent vers /smartview/Product/<resource> au lieu de simplement <resource>. Par exemple :
    Changez :
    <script type="text/javascript" src="view.js"></script>
    
    en : <script type="text/javascript" src="/smartview/Product/view.js"></script>
  4. Créez un Processus "Smart View" dans le Studio Talend comme décrit dans Créer une "Smart View" par défaut d'un enregistrement de données et nommez-le Smart_view_Product.
  5. Changez <xsl:template match="/"> en <xsl:template match="/Product">, si l'entité est Product.
  6. Copiez le code HTML, sans <!DOCTYPE>, à partir du tag HTML et collez-le dans l'élément <xsl:template match="/Product">. Écrasez tout ce qui était à l'intérieur de l'élément <xsl:template> :
  7. Paramétrez les valeurs des champs avec les valeurs avec les valeurs actuelles extraites de l'enregistrement Product à l'aide de l'instruction <xsl:value-of>. Pour demander au XSLT d'écrire un attribut, utilisez l'instruction <xsl:attribute>.

Résultats

Voici, par exemple, le code HTML avant le changement :

<label class="description" for="element_2">Price
</label>
<div>
    <input id="element_2" name="element_2" class="element text   medium" type="text" maxlength="255" value=""/>
</div>

Après le changement :

<label class="description" for="element_2">Price
</label>
<div>
    <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255">
<xsl:attribute name="value"><xsl:value-of select="Price"/></xsl:attribute>
    </input>
</div>

Cela dit au XSLT d'émettre un attribut "value" dans le tag <input> et de récupérer la valeur de cet attribut depuis l'élément Price de l'enregistrement Product.