Activer JavaScript pour consulter ce site.

Altova MobileTogether Designer

The example in this section shows how to automatically send JSON source data from the webpage to the workflow when the HTML page is opened.

 

The HTML code is based on that used in the Sending/Receiving JSON Data example. The difference is this: In the former example, the user must click a button in the webpage to send the initial book list to the IFrame; in this example, the data is automatically loaded when the page is opened. (The Load button and its function have been removed, and a new function is used to automatically load the data.)

 

The files used in this example are jsonBooksOnStart.html and jsonBooks.mtd. Both are located in your (My) Documents MobileTogether folder: MobileTogetherDesignerExamples\Tutorials\EmbeddedWebpageSolutions. To try out the files, deploy the MTD file to your server and enable it to be accessed anonymously. If needed, modify the HTML code so that the correct workflow is targeted.

 

La description ci-dessous explique uniquement les points ayant trait avec les chargement automatique des données JSON. Pour une explication des autres aspects du mécanisme, voir Envoyer/Recevoir des données JSON.

 

Liste de code HTML

La liste de code HTML du fichier jsonBooksOnStart.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 jsonBooksOnStart.html.  

 

Liste de code de la page web

 

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

      }

   ]

};

 

Afficher la liste de livres dans la page web :

 

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 la liste de livres dans la page web lorsque le document HTML est chargé. 

 

Envoyer automatiquement la liste de livres au IFrame lors du chargement de la page web :

 

Un écouteur d'événement qui "écoute" un événement DOMContentLoaded définit la fonction automatique-charger :

 

document.addEventListener('DOMContentLoaded', function() {

   var embedded = new WebAppIFrame(document.querySelector('iframe'));

   embedded.start('http://localhost:8083/run?d=/public/jsonBooks', books);

});

 

La fonction définie ci-dessus crée une variable en appelant WebAppIFrame.js. Veuillez noter que la référence au fichier JavaScript (voir élément script ci-dessous) n'est pas requise dans l'exemple JSON précédent.

 

<script src="http://localhost:8083/js4.0/WebAppIFrame.js"></script>

 

WebAppIFrame.js (liste ci-dessous) contient un code pour simplifier le chargement de la solution et envoyer les données à $MT_EMBEDDEDMESSAGE. Veuillez noter que l'URL pour lancer la solution n'est pas donnée dans l'attribut src de l'IFrame, mais est transféré en tant que le premier paramètre de la méthode start.

 

La liste de code de WebAppIFrame est :

 

'use strict';

 

function WebAppIFrame(iframe, listener) {

   var _this = this;

   var _data;

   var _jwt;

 

   if (listener) {

      window.addEventListener('message', listener, false);

   }

 

   this.start = function(url, data, jwt) {

      function _start() {

         _this.post({data: _data, jwt: _jwt});

            iframe.removeEventListener('load', _start);

      }

 

      _data = data;

      _jwt = jwt;

   if (_jwt) {

         url += '&auth';

      }

         iframe.addEventListener('load', _start);

            iframe.src = url + '&embed';

   }

 

   this.post = function(data) {

      iframe.contentWindow.postMessage(data, '*');

   }

}

 

 

L'IFrame charge la solution jsonBooks et reçoit les données depuis la page web.

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

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

MTActionOnEmbeddedMsgJSON

... la source de page $MT_EMBEDDEDMESSAGE est chargée automatiquement avec les données {books}.

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 la source de page author, title, year et pages.

MTDEWSExJSON02

En conséquence,...

...la solution dans l'IFrame est chargé avec ces données. La table répétitive est remplie avec les données contenues dans la source de page $MT_EMBEDDEDMESSAGE du flux de travail.

MTDEWSExJSON03

Les données ont été rendues disponibles dans l'IFrame directement lors de l'ouverture de la page HTML.

 

 

 

© 2019 Altova GmbH