機械翻訳について

Webページへのビジュアライゼーションの埋込みアプリケーションがOracle JETを使用している場合

埋込みアプリケーションがOracle JETを使用している場合、別のWebページにビジュアライゼーションを埋め込むことができます。

埋込みアプリケーションがOracle JETを使用している場合、データの視覚化埋込みは必要なコンポーネントでアプリケーションを拡張します。 Oracle JETのインストールおよび使用方法の詳細は、http://www.oracle.com/technetwork/developer-tools/jet/overview/index.htmlを参照してください。

  1. Oracle JET埋込みスクリプトを含めます。
    1. Oracle JETバージョンのembedding.jsを含めます。
      <script src="http://example.com/dv/api/ui/v1/plugins/embedding/jet/embedding.js" type="text/javascript"> </script>
    2. 適切なサイズの<div>の下に<oracle-dv>を組み込みます。
      <div style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
          <oracle-dv project-path="/shared/embed/test-embed">
          </oracle-dv>
      </div>
    3. または、<oracle-dv>属性をパラメータに置き換えて、関連する値をモデルに追加します。
      <div style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)">
           <oracle-dv project-path="{{projectPath}}">
           </oracle-dv>
      </div>
      
      
      <oracle-dv>タグの後に<script>タグ内に配置するか、onload本文ハンドラで実行する必要があります。
      function MyViewModel() {
          var self = this;
          self.projectPath =  ko.observable("/shared/embed/test-embed");
      //...
      }
  2. Oracle JET QuickStart Applicationにビジュアライゼーションを埋め込みます。
    1. --template=navbarを使用して、Oracle JET Quickstartアプリケーションをインストールする手順に従います。

      Oracle JET「開始」を参照してください。 インストールするJETのバージョンは3.1以下である必要があります。

    2. 埋込みアプリケーションのindex.HTMLファイル(たとえば、DVCCAAPP/src/index.html)を編集し、embedding.jsを含めます。
      <script src="http://example.com/dv/ui/api/v1/plugins/embedding/jet/embedding.js" type="text/javascript">
      </script>
    3. 適切なセクションに<oracle-dv>を含めます(例: DVCCAAPP/src/js/views/dashboard.html)。
      <div class="oj-hybrid-padding" style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)">  
       <h3Dashboard Content Area</h3>
        <oracle-dv id="oracle-dv" project-path="/shared/embed/test-embed">
        </oracle-dv>#
      </div>
    4. これらのコマンドを使用して、クイック・スタート・アプリケーションを実行します。
      grunt build
      grunt serve
  3. 必要に応じて、<oracle-dv>プロパティを動的に変更できます。

    この例では、<oracle-dv>をインシデント領域に動的に変更します。

    1. 適切なセクションにJETセレクタと<oracle-dv>を含めます(例: DVCCAAPP/src/js/views/incidents.html)。
      <div class="oj-hybrid-padding" style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)"  
       <label for="Project"Project</label>
        <select id="Project" data-bind="ojComponent: {component: 'ojSelect', optionChange: optionChangedHandler,rootAttributes: {style:'max-width:20em'}}">
          <option value="/shared/embed/test-embed"Project 1</option>
          <option value="/shared/embed/test-embed-2"Project 2</option>
        </select>
       <div>
          <br/>
          <label for="curr-value"Current selected value is  </label>
          <span id="curr-value" data-bind="text: projectPath"</span>
        </div>
        <oracle-dv id="oracle-dv" project-path="{{projectPath}}">
        </oracle-dv>
      </div> 
    2. ビューのモデル(ojs/ojselectcombobox)にDVCCAAPP/src/js/viewModels/incidents.jsをインポートします。
      define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojselectcombobox'],
    3. モデル(projectPath)を表示するには、DVCCAAPP/src/js/viewModels/incidents.jsを追加します
      function IncidentsViewModel() {
          var self = this;
          self.projectPath =  ko.observable("/shared/embed/test-embed");
      };
    4. モデル(optionChangeHandler)を表示するには、DVCCAAPP/src/js/viewModels/incidents.jsを追加します。
      function IncidentsViewModel() {
      //...
         self.optionChangedHandler = function (event, data) {
            if (data.option == "value") {
                self.projectPath(data.value[0]);
            }
          };