JSON ページソースの事前設定

www.altova.com すべてを展開/折りたたむ このトピックを印刷 前のページ 1つ上のレベル 次のページ

ホーム >  埋め込まれた Web ページソリューション > サンプル >

JSON ページソースの事前設定

このセクション内のサンプルでは、 HTML ページが開かれると、自動的に Web ページ からの JSON ソースデータが自動的にワークフローに送信されます。

 

HTML コードは JSON データの送信/受信 サンプル内で使用されるものをベースにしています。差異は、以下のとおりです: 前のサンプルでは、Web ページ内でボタンをクリックして、最初の本のリストを IFrame に送信する必要があります。このサンプルでは、 データはページが開かれると自動的にロードされます。 (「ロード」 ボタンとその関数は削除され、新しい関数がデータをロードするために使用されます)。

 

このサンプルで使用されるファイルは jsonBooksOnStart.htmljsonBooks.mtd です。 両方のファイルは次の場所にあります: マイドキュメント MobileTogether フォルダー: MobileTogetherDesignerExamples\Tutorials\EmbeddedWebpageSolutions. ファイルを試すには、 MTD ファイルをサーバーにデプロイし、匿名でのアクセスを有効化してください。 必要な場合は、正確なワークフローをターゲットするために HTML コードを変更します。

 

下の説明は JSON データの自動ロードに関連した点についてのみ行われています。仕組みの他の点については、次を参照してください: JSON データの送信/受信

 

HTML コード リスティング

ファイル jsonBooksOnStart.htmlHTML コード リスティング。コードの説明は次のセクションで行われています。 このサンプルで使用される JavaScript 機能は、全てのブラウザーで使用できない場合があることに注意してください。 この場合、ブラウザーに合うように JavaScript を変更してください。

 

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 src="http://localhost:8083/js4.0/WebAppIFrame.js"></script>

      <script>

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

          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

                  }

               ]

            };                                                                          

         

           // 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 show books in webpage on page load

          document.addEventListener('DOMContentLoaded', showbooks);

 

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

            window.addEventListener('message', receivebooks);

 

           // Handler to send data to IFrame on page load

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

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

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

            });

    </script>

  </head>

 

 

  <body>

     <h4>An editable list of books in JSON format</h4>

     <h5>The book list, stored as a JSON object in the webpage:</h5>

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

    <h5>The book list is displayed in the Iframe as soon as the HTML page is opened.</h5>

    <iframe frameborder="0"></iframe>

  </body>

 

 

</html>

 

 

しくみ

以下の説明では、異なる背景色が使用され仕組みのそれぞれの部分で起こっていることが説明されています (Web ページ–ソリューション–ワークフロー):

 


Web ページ: ユーザーアクションと HTML/JavaScript コードの作動方法


ソリューション: IFrame 内のソリューションにより実行されるアクション


ワークフロー: (MT デザインをベースにした)サーバー上の処理

 

 

HTML ページのロード時:

 

books という名前の JavaScript 変数が読み込まれます。books という名前の JSON オブジェクトが含まれています。

 

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

      }

   ]

};

 

Web ページ内でブックリストを表示する:

 

DOMContentLoaded イベントのをリッスンする)イベントリスナーと JavaScript 関数 (showbooks) を使用して books 変数のコンテンツが HTML code 要素内で表示されます:

 

document.addEventListener('DOMContentLoaded', showbooks);

 

function showbooks() {

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

}

 

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

 

HTML ドキュメントがロードされた時、 Web ページ内のブックリストを確認することができます。

 

Web ページをロードする際に自動的に本のリストを自動的に IFrame に送信する:

 

DOMContentLoaded イベントをリッスンするイベントリスナーは、自動的にロードする関数を定義します:

 

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

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

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

});

 

上で定義される関数は WebAppIFrame.js を呼び出すことで変数を作成します。JavaScript ファイルへの参照 (script 要素を参照してください) は前の JSON サンプルで必要とされていないことに注意してください。

 

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

 

WebAppIFrame.js (下のリスティング) はソリューションをロードして、データを $MT_EMBEDDEDMESSAGE に送信します。ソリューションを開始する URL は IFrame の src 属性を与えられていませんが、 start メソッドの最初のパラメータとしてパスされます。 

 

WebAppIFrame.js のコード リスティング:

 

'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, '*');

   }

}

 

 

IFrame はソリューション jsonBooks をロードし、 Web ページからデータを受け取ります。

{books} は(シリアル化された JSON フォームで)自動的にサーバー上のワークフローに送信されます。

ページイベント 埋め込まれたメッセージ には...と定義されているアクションが存在するため、

MTActionOnEmbeddedMsgJSON

... ページソース $MT_EMBEDDEDMESSAGE は自動的に{books}データと共にロードされます。

MTDEWSExJSONPgSrc

デザインは item ノードの繰り返しテーブルを含んでいます。 デザインは item ノードの繰り返しテーブルを含んでいます。テーブルのセルはそれぞれ author、 title、year、 および pages ページソースノードにリンクされています。

MTDEWSExJSON02

この結果、...

 

...IFrame 内のソリューションがこのデータと共にロードされます。ワークフローの $MT_EMBEDDEDMESSAGE ページソース内のデータと共に繰り返しテーブルは作成されます。

MTDEWSExJSON03

HTML ページを開くとデータを IFrame 内で直接使用することができます。

 

 

 


(C) 2019 Altova GmbH