使用するエディタ

デザイナには、アプリケーションの開発に使用する各ビルディング・ブロック専用のエディタがあります。各エディタには、アーティファクトとページを説明するファイルを編集するための使いやすいインタフェースが用意されています。

たとえば、ページを設計するときには、ページ変数を定義し、アクション・チェーンを作成し、ページ・コンポーネントをページに配置し、コンポーネント・プロパティを指定する必要があります。 Designerには、これらのタスクの実行に役立つエディタが用意されているため、レイアウトおよび動作の記述に使用するHTML、JavaScriptおよびJSONファイルのソース・コードを編集する必要はありません。ただし、JSONファイルを直接編集する場合は、JSONエディタにアクセスできます。

デザイナ・エディタには、ビルディング・ブロックを作成および編集するためのフォームとウィザードが用意されています。たとえば、アクション・チェーンを作成して、パラメータを変数にマップできます。ページを設計する場合、ビジュアル・エディタを使用してページを構成し、クイック・スタートを使用して、アプリケーションで一般的に使用される機能の一部を追加するために必要なビルディング・ブロックを作成できます。

アーティファクトを開くと、デザイナの個別のタブに各アーティファクトが開きます。アーティファクトのエディタを切り替えるには、アーティファクトの適切なタブを選択します。アーティファクトに表示されるタブは、アーティファクトによって異なります。アプリケーション・アーティファクトとフロー・アーティファクトの「ダイアグラム」タブが表示され、ページを開くと「ページ・デザイナ」タブが表示されます。タブの数値は、発生数を示します。たとえば、このイメージのhrappアプリケーションには、2つのアクション・チェーンと1つのイベント・リスナー(タイプと変数に加えて)が含まれますが、main-startページには、4つのアクション・チェーン、4つのイベント・リスナーおよび1つのタイプが含まれます:
app-designer-overview.pngの説明は以下のとおりです
図app-designer-overview.pngの説明

デザイナで使用可能なエディタの概要を次に示します:

[Tab]	説明
ダイアグラム	アプリケーション・アーティファクトおよびフロー・アーティファクトの場合のみ表示されるダイアグラム・ビューは、フローおよびページの観点からアプリケーションがどのように構造化されるかを視覚的に表現します。アプリケーション・ルート・ページ、フローおよびフロー内のページをビジュアル化して、デフォルト・ページやナビゲーションなどをすばやく確認できます。アプリケーション・アーティファクトの場合、このビューには、アプリケーション・ルート・ページと、アーティファクト・フローおよびサブフローの階層ビューが表示されます。フロー・アーティファクトの場合、このビューにはフローに含まれるページとそれらのページ間のナビゲーションが表示されます。「ダイアグラム・ビューの操作」を参照してください。
ページ・デザイナ	ページ・デザイナは、ページ・アーティファクトに対してのみ表示され、ページのレイアウトを構成できます。ページ・レイアウトを表すキャンバスと、ページ・コンポーネントをキャンバスにドラッグしてページに追加するパレットが含まれています。また、ページのコンポーネントのプロパティを指定したり、クイック・スタートを開くために使用するプロパティ・ペインも含まれています。「ページ・デザイナの使用」と「クイック・スタートの動作」を参照してください。データ・ソースに基づいてページを設計および開発する場合、データ・パレットは便利なオプションです。アプリケーションにデータを公開するRESTエンドポイントを使用して操作し、キャンバスにドラッグ・アンド・ドロップして、データを適切なUIコンポーネントに表示できます。「データ・パレット」を参照してください。
アクション・チェーン	アクション・チェーン・エディタには、アーティファクトのスコープ内に定義されているアクション・チェーンのリストが表示されます。このエディタを使用して、新しいアクション・チェーンを作成し、エディタでアクション・チェーンを開くことができます。「アクション・チェーンについて」を参照してください。
イベント・リスナー	イベント・リスナー・エディタには、アーティファクトに定義されているライフサイクル・イベント、イベントのタイプおよびイベントが開始するアクション・チェーンのリストが表示されます。エディタを使用して、新しいイベントを作成できます。「ライフサイクル・イベントからのアクション・チェーンの開始」を参照してください。
イベント	イベント・エディタには、アーティファクトに定義されたカスタム・イベント、イベントのタイプおよびイベントが開始するアクション・チェーンのリストが表示されます。エディタを使用して、新しいイベントやアクション・チェーンを作成することができます。「ライフサイクル・イベントからのアクション・チェーンの開始」を参照してください。
タイプ	タイプ・エディタには、アーティファクトのスコープ内で定義されているデータ型が表示されます。タイプ・エディタを使用して、タイプを作成および編集できます。「変数と型とは」を参照してください。
変数	変数エディタには、アーティファクトのスコープ内で定義されている変数とデータ型が表示されます。変数エディタを使用して、変数を作成および編集できます。「変数と型とは」を参照してください。
HTML	デザイナでアプリケーション・アーティファクトを開くと、HTMLエディタにアプリケーションの`index.html`ファイルのコードが表示されます。ページ・デザイナのコード・ビューを使用して、アプリケーションのページのHTMLを表示および編集します。「コードの処理」を参照してください。
JavaScript	JavaScriptエディタには、アーティファクトのJavaScript関数を編集するためのコード・エディタが含まれています。デフォルトでは、アプリケーション・アーティファクトは`app-flow.js`という名前のファイルを使用し、フロー・アーティファクトは`<FLOWNAME>-flow.js`という名前のファイルを使用し、ページ・アーティファクトは`<PAGENAME>-page.js`という名前のファイルを使用してJavaScript関数を定義します。「JavaScriptの操作」を参照してください。
JSON	JSONエディタには、変数やアクション・チェーンの説明など、アーティファクトのメタデータを含むJSONファイルを編集するためのエディタが含まれています。デフォルトでは、アプリケーション・アーティファクトは`app-flow.json`というファイルを使用し、フロー・アーティファクトは`<FLOWNAME>-flow.json`というファイルを使用し、ページ・アーティファクトは`<PAGENAME>-page.json`というファイルを使用します。「JSONの操作」を参照してください。
設定	設定エディタには、アーティファクトの設定を編集するためのタブがあります。使用可能なオプションはアーティファクトに依存します。フローおよびアプリケーション・アーティファクトの設定エディタにはセキュリティ・タブがあり、これを使用してアーティファクトのセキュリティを設定できます。インポート・タブを使用して、アプリケーション・アーティファクト、フローおよびページのコンポーネント、カスタム・モジュールおよびCSSファイルをインポートし、翻訳タブを使用して、アプリケーション・アーティファクト、フローおよびページの追加の翻訳バンドルを作成できます。「カスタム・コンポーネント、CSSおよびモジュール・インポートの管理」と「変換バンドルの作成」を参照してください。