フラグメント

フラグメントはページの一部で、１つ以上のウィジェットで混成されたものです。他のページにそれを挿入することができます。フラグメントは、それ自体で固有の構成設定とデータを持ち、さらにそのフラグメントを含むページでそれらのデータを使用することができます。

フラグメントはサブスクリプション版でのみ利用可能です。

フラグメント エディタ

フラグメントの作成や更新に使用されるこのエディタは、ページ エディタと同じです。あなたがページを作成と更新する場合と同様の方法でフラグメントを作成し更新します。

フラグメントを作成する

UI デザイナーのホームページでスクラッチの状態からフラグメントを作成できます。

  1. 新規フラグメントという領域で名前を指定します。
  2. [作成] ボタンをクリックします。
  3. フラグメント エディタをが開きます。

ページやフラグメント内で使用される任意のコンテナは、フラグメントに変換されます。

  1. ページ エディタ内のコンテナを選択します。
  2. プロパティのサイドバー内にある [フラグメントとして保存] のリンクをクリックします。
  3. 名前を指定します。
  4. [保存] ボタンをクリックします。
  5. フラグメント エディタが開きます。

フラグメントを更新する

フラグメントはUI デザイナーのホームページ上にリストされます。フラグメントの名前をクリックしフラグメント エディタ内にそれを開きます。

フラグメントを使用するページを編集しているときは、そのページ エディタ内でフラグメントを更新することもできます。ページ エディタ内のフラグメントを選択し、[フラグメントを編集] ボタンをクリックします。そのフラグメントに加えた変更は、現在編集中のページだけでなく、そのフラグメントが使用されているすべてのページに適用されます。

変数とフラグメント

フラグメントは、それ自体固有の変数を持ちますが、そのフラグメントを含むページでもその変数を使用できます。

あるフラグメントに変数を追加するとき、このフラグメントを使用しているページにその変数を公開するかどうか指定します。

  • フラグメントの変数が公開されていない場合は、その変数データはそのフラグメント専用になります。
  • フラグメントの変数が公開されている場合は、そのフラグメントを組み込んだページの変数にバインドできます。

たとえば、”MyFragment” というフラグメントを例にとると、このフラグメントは２つの変数を持ち、１つは公開される「exposedData」とし、もう一方は公開されない「notExposedData」とします。ページ エディタのページに、このフラグメントを追加したとき、下図に示すとおり、そのページによってページ内に定義された変数 pagaData に、この exposedData をバインドできます。

fragment

実行時にフラグメントとページの変数はバインドされ、データの変更はそのページ、またはそのフラグメントのいずれかで行うことができます。

いくつかのフラグメントがある１つの変数を公開し、それらの変数が同じページ変数にリンクされている場合、そのページ内、あるいはフラグメントの１つの中でその変数を変更すると、すべてのフラグメント内のその変数が変化します。

フラグメントをエクスポートする

フラグメントは、UI デザイナーのホームページからエクスポートできます。そのフラグメントは次の項目を含んだ zip ファイルとしてエクスポートされます：

  • HTML ページ
  • リソース フォルダに含まれるもの
    • CSS ファイル
    • JavaScript 依存性
    • そのフラグメントによって使用されたウィジェットのファイル（ウィジェットは Angular JS のディレクティブ）
    • 使用された任意のサブ・フラグメント

HTML ページをそのまま使用できます。UI デザイナーの外でそのコードを更新することも可能です。ただし、UI デザイナーと非互換な変更を加えると、そのフラグメントをインポートでUI デザイナーに戻せなくなる恐れがあります。

フラグメントをインポートする

UI デザイナーにフラグメントをインポートできます。

インポートした .zip ファイルのフォーマットは、UI デザイナーがエクスポートでビルドしたものと同じでなければなりません。UI デザイナー内に既にそのフラグメントが存在する場合は、UI デザイナー内のそのフラグメントのバージョンと、このフラグメントによって使用されていたカスタム ウィジェットがインポートしたオブジェクトによって消去されます。あなたが HTML コード、CSS ファイル、あるいはフラグメントの JavaScript を更新した場合、その変更点は UI デザイナーにインポートされません。