YonBuilder での PC 側アプリケーションの構築に加えて、サポートするモバイル側ページも構築できます。同じデータエンティティに対して、PC 側とモバイル側でデータの同期変更を実現できるため、データの入力、変更、承認などがより便利になります。この記事では、従業員情報エンティティのモバイル端末ページを構築することによる、YonBuilder モバイル端末構成の基本プロセスを紹介します。
1. ページを作成する
まず、ページ作成の前提としてエンティティを公開する必要があるので、アプリケーション構築のデータモデリングインターフェースで新しいエンティティを選択し、設定して「保存して公開」をクリックします。ここでいう従業員情報エンティティとは、あらかじめ作成・公開されている従業員情報エンティティであり、従業員の名前、性別、年齢などの情報フィールドが含まれます。具体的な構成情報は次のとおりです。
次に、作成したエンティティに従って PC 側ページとモバイル側ページを生成します。ここで、モバイル端末は現在、シングル カード (表)、メイン サブカード (表)、空のページの 3 つのページ テンプレートのみをサポートしていることに注意してください。モバイル側ページを同時に生成するオプションをチェックする必要があります。モバイル側ページの横にある構成オプションで、モバイル側リスト ページの文書カードの組版形式を実現できます。ここでは、ページ モデリング インターフェイスで新しいページを選択し、単一のカード テンプレートを選択してモバイル ページを作成します。
設定オプションをクリックすると、モバイル一覧ページのレイアウト形式の設定ページに入り、テンプレートの種類とカードの設定の2つの部分に分かれていることがわかります。
テンプレートの種類ではテンプレートの表示タイプを設定でき、オプションを選択すると左側が対応するプレビューページになります。このうち、プレーン テキスト カードは純粋なテキストで構成される物理データに適しており、グラフィック カードは画像コンテンツを含むドキュメントに適しており、小さなピクチャ カードは情報の少ないドキュメントやサブテーブル カードによく使用されます。
カード設定の拡張フィールドは、エンティティ フィールド以外の追加の拡張オプションを提供します。カードにさらに多くのフィールドを表示する必要がある場合は、[拡張フィールド] をチェックして、拡張する必要があるフィールドの数を入力できます。3 つのテンプレート タイプのうち、サムネイル カード フィールドのみが拡張フィールドをサポートしていません。アイテムをクリックして簡単にプレビューする場合は、詳細ページにジャンプするのではなく、カード情報をクリックするとプレビューの詳細ページがすぐにポップアップ表示されます。
モバイル端末でのページ レイアウト形式の設定が完了したら、[OK] をクリックしてページ作成プロセスに戻り、選択した従業員情報エンティティをバインドする必要があります。
ここまででPC側ページとモバイル側ページの作成が完了し、「完了」をクリックすると、一覧ページと詳細ページの2つのページが同時に生成されたことがわかります。ここでの違いは、単にPC側ページを生成するのとは異なり、ページをクリックすると今回の編集がPC側とモバイル側の2つに分かれていることが分かり、モバイル側部分をクリックするとモバイル側ページの設定が行われます。
2. モバイルページの構成
モバイル端末のページ構成を入力すると、その時点でのエンティティ構成システムに従って、リスト ページ、クエリ スキーム、複数選択スキーム、アイテム詳細ページなどのページがシステムによって自動的に生成されたことがわかります。システムによって自動生成されるページの場合、ページ間のジャンプ関係も同期して生成されます。PC ページと同様に、デザイナーの左側はコンポーネント ライブラリと階層リストで、右側は選択したコンポーネントのプロパティ、スタイル、およびアクション パネルです。
この時点で、必要に応じてページを設定できます。左側のコンポーネントは、ドラッグ アンド ドロップでキャンバスに追加できます。コンポーネントを選択した後、その固有の情報を設定できます。その中で、コンポーネントのインタラクション メソッドはアクションに追加でき、ほとんどすべての CSS スタイルはスタイル パネルでデザインできます。プロパティでは、コンポーネントの基本プロパティ、フィールドの権限、条件などを設定できます。ここでは並べ替えコンポーネントをドラッグ＆ドロップで追加し、右側のプロパティパネルでフィールド設定を選択し、並べ替えフィールドとして契約期間と契約日を追加します。
3. プレビュー
ここまでで、YonBuilder モバイル ページの基本的な構成プロセスが完了し、そのデータを使用してモバイル ページの効果をテストします。まず、PC側の新規オプションで2つのデータを追加しました。モバイル側のページに切り替えると、2つの新しいデータが同期して表示されていることがわかります。カードをクリックするとプレビュー情報が表示されます。同時に、モバイル端末上の新しい並べ替えコンポーネントを通じて 2 つのデータの並べ替えを実現できます。
モバイル ページで [追加] をクリックしてデータを追加すると、新しい追加がモバイルと PC で同期して実現されたことがわかります。
以上、YonBuilder モバイル ページの基本的な設定プロセスをご紹介しましたが、ご不明な点がございましたら、お気軽にコメント エリアでご連絡ください。