Envoyer/Recevoir des données JSON

www.altova.com Agrandir/Réduire tout Imprimer cette rubrique Page précédente Un niveau supérieur Page suivante

Accueil >  Solutions de page web intégrée > Exemples >

Envoyer/Recevoir des données JSON

Cette section explique le fonctionnement d'une solution de page web intégrée qui utilise des données de source JSON. Une liste de livres de format JSON est envoyé depuis la page web (capture d'écran ci-dessous) vers un IFrame intégré (encadré en bleu). Ici, la liste peut être éditée à l'aide d'une solution MobileTogether. Lors de l'enregistrement des changements dans l'IFrame, la liste de livres éditée est envoyée à la page web.

Click to expand/collapse

La solution de page web intégrée consiste en une page web HTML (jsonBooks.html) et un design MobileTogether (jsonBooks.mtd). Les deux fichiers sont situés dans votre dossier MobileTogether (Mes) Documents : MobileTogetherDesignerExamples\Tutorials\EmbeddedWebpageSolutions. Pour essayer les fichiers, déployer le fichier MTD sur votre serveur et l'activer pour qu'il puisse être accédé de manière anonyme. Si nécessaire, modifier le code HTML de manière à ce que l'IFrame cible correctement le flux de travail sur le serveur. Ouvrir la page web dans un navigateur et cliquer sur la touche Charger pour démarrer.

 

La description ci-dessous contient la liste de code HTML complète de la page web, suivie d'une explication à code de couleur de la manière dont le code HTML interagit avec la solution.

 

Liste de code HTML

La liste de code HTML du fichier jsonBooks.html. Vous trouverez une explication du code dans la section suivante ci-dessous. Veuillez noter que certaines fonctionnalités JavaScript utilisées dans cet exemple ne sont pas toujours disponibles dans tous les navigateurs. Dans ce cas, veuillez modifier le JavaScript pour l'adapter à votre navigateur.

 

Liste de code de la page web

 

<!DOCTYPE html>

<html>

   <head>

      <style>

         * {

            font-family: Segoe UI, Tahoma, Arial, Helvetica, sans-serif;

         }

         iframe {

            width: 100%;

            height: 400px;

            border: 2px solid blue;

            border-radius: 5px;

            margin: 10px 0px;

         }

         code {

            font-size: small;

         }

      </style>

      <script>

         // The initial book list is stored in a variable in JSON format

         // It can be easily handled in JavaScript

          var books = {

               "books": [

                  {

                     "author": "Mary Shelley",

                     "title": "Frankenstein; or, The Modern Prometheus",

                     "year": 1818,

                     "pages": 280

                  },

                  {

                     "author": "Bram Stoker",

                     "title": "Dracula",

                     "year": 1897,

                     "pages": 302

                  }

               ]

            };

 

          // Posts variable 'books' to IFrame (from where 'books' is forwarded to MT Server)

          function sendbooks() {                                                      

              document.querySelector('iframe').contentWindow.postMessage(books, '*');  

           }                                                                            

         

          // Contents of variable 'books' converted to string and displayed inside HTML element CODE

          function showbooks() {

              document.querySelector('code').innerText = JSON.stringify(books, null, ' ');

           }

         

           // m = HTML message event; data = container for message from server

           // m.data.json = contents of the 'json' object that was sent from the server

        function receivebooks(m) {

              books = m.data.json;

              showbooks();

           }

         

           // Handler to receive messages from server via solution in IFrame

          window.addEventListener('message', receivebooks);

         

           // Handler to show initial book list in webpage on page load

          document.addEventListener('DOMContentLoaded', showbooks);

 

    </script>

  </head>

 

 

  <body>

     <h4>Example showing how to interact with a single JSON source</h4>

     <h5>The books we want to edit:</h5>

     <!-- Send the JSON book list from the webpage to the IFrame -->

    <button onclick="sendbooks()">Load</button>

     <pre><code><!-- The SHOWBOOKS function displays the book list here --></code></pre>

    <h5>

        Click LOAD to load the book list into the IFrame. In the IFrame, edit the list. You can add, delete, and/or modify entries. Click SAVE to save changes. Notice that changes are propagated to the list in the webpage.

     </h5>

    <iframe src="http://localhost:8083/run?d=/public/jsonBooks" frameborder="0"></iframe>

  </body>

 

</html>

 

 

Fonctionnement

Dans cette section d'explication, des couleurs d'arrière-plan différentes ont été utilisées pour illustrer le processus dans les différentes parties du mécanisme (page web–solution–flux de travail) :

 


Page web : actions de l'utilisateur et fonctionnement du code HTML/JavaScript


Solution : actions exécutées par la solution dans l'IFrame


Flux de travail : traitement du serveur (sur la base du design MT)

 

 

Lors du chargement de la page HTML :

 

Une variable JavaScript nommée books est lue. Elle contient un objet JSON nommé books.

 

var books = { 

   "books": [

      {

         "author": "Mary Shelley",

         "title": "Frankenstein; or, The Modern Prometheus",

         "year": 1818,

         "pages": 280

      },

      {

         "author": "Bram Stoker",

         "title": "Dracula",

         "year": 1897,

         "pages": 302

      }

   ]

};

 

Le contenu de la variable books est affiché dans l'élément HTML code en utilisant un écouteur d'événement (qui "écoute" un événement DOMContentLoaded) et une fonction JavaScript (showbooks):

 

document.addEventListener('DOMContentLoaded', showbooks);

 

function showbooks() {

   document.querySelector('code').innerText = JSON.stringify(books, null, ' ');

}

 

<pre><code></code></pre>

 

Cela nous permet de voir les contenus de la variable books lorsque le document HTML est chargé. (Ensuite, nous allons utiliser la même fonction JavaScript pour vérifier si la variable books a été mise à jour.)

 

 

L'IFrame charge la solution jsonBooks (ciblée dans l'attribut src de l'élément iframe) :

 

<iframe src="http://localhost:8083/run?d=/public/jsonBooks" frameborder="0">
</iframe>

 

Sur clic de la touche Charger :

 

<button onclick="sendbooks()">Load</button>

 

Une fonction JavaScript utilise postMessage() pour envoyer les contenus de la variable books vers l'IFrame.

 

function sendbooks() {            document.querySelector('iframe').contentWindow.postMessage(books, '*');

   }

 

{books} est envoyé automatiquement vers le flux de travail du serveur (dans un formulaire JSON sérialisé).

Puisque l'événement de page SurMessageIntégré a une action définie, ...

MTActionOnEmbeddedMsgJSON

... la source de page $MT_EMBEDDEDMESSAGE est chargée automatiquement avec les données {books}. Pour que cela fonctionne tel que prévu dans le design, la structure de la source de page (définie au moment du design) doit correspondre à la structure des données JSON entrantes. Veuillez noter que le nœud item se trouvant dans la source de page correspond à chaque item dans l'array JSON. (Si les données JSON entrantes ne correspondent pas à la structure définies pour la source de page, elles seront chargées tout de même, avec sa propre structure. Mais puisque les expressions XPath dans le design référenceront la structure définie, la structure chargée au moment de l'exécution ne sera pas atteinte par ces expressions XPath.)

MTDEWSExJSONPgSrc

Le design contient une table répétitive des nœuds item. Les cellules de la table sont liées, respectivement, aux nœuds de page de source author, title, year et pages.

MTDEWSExJSON02

En conséquence,...

...la solution dans l'IFrame est mise à jour. La table répétitive est remplie avec les données se trouvant dans la source de page $MT_EMBEDDEDMESSAGE du flux de travail.

MTDEWSExJSON03

Lors de l'édition des données des livres dans la solution, la source de page $MT_EMBEDDEDMESSAGE est mise à jour en continu. En cliquant sur Enregistrer, un gestionnaire d'événement SurClicDeBouton est déclenché.

L'événement SurClicDeBouton spécifie qu'une action Message Intégré Retour peut être exécutée. Cela envoie le contenu de l'ensemble de la source de page $MT_EMBEDDEDMESSAGE en tant qu'un événement message sur l'IFrame. (Veuillez noter que $MT_EMBEDDEDMESSAGE contient maintenant la liste éditée des livres.)

MTDEWSExJSON04

Un écouteur d'événement a été enregistré pour "écouter" l'événement message. Lors de la détection d'un événement message, une fonction JavaScript (receivebooks) est appelée :

 

window.addEventListener('message', receivebooks);

 

La fonction receivebooks (voir ci-dessous) prend l'événement message (m) en tant que son paramètre (data est la données de l'événement message), et attribue le contenu de l'objet json dans le message reçu à la variable books. La variable books contient maintenant les contenus de l'objet json, qui est la liste de livres mise à jour depuis le serveur. La structure de la liste de livres modifiée est la même que celle de la liste de livres originale (mais avec plus ou moins d'items de livres dans le tableau books). 

 

function receivebooks(m) {

   books = m.data.json;

   showbooks();

}

 

La fonction showbooks affiche la liste de livres mise à jour dans la page web :

 

function showbooks() {

   document.querySelector('code').innerText = JSON.stringify(books, null, ' ');

}

 

<pre><code></code></pre>

 

 

 


© 2019 Altova GmbH