Appspec項目一覧

画面ごとのAppspec（{画面名}.appspec.js）に記述する設定項目の一覧です。
Appspecの役割と記述する場所は、「HaluProject詳細＞Html＞Apps＞appspec.js」を参照してください。

設定項目は、次の3つに分類されます。

基本情報

基本情報は、次の項目で構成されます。 

・urlInfo：HTML・JavaScriptとJSONの配置先 
・jsonInfo：読み込むJSON
・requestInfo：使用するトランザクション
・externalInfo：ほかの画面（外部プログラム）のトランザクション 
・nextname・beforename：遷移先・遷移元の画面名

urlInfo

HTML・JavaScriptの配置先と、JSONの配置先を、Applicationフォルダからのパスで指定します。

urlInfo: [
  { app: "{アプリケーション名}/Html/Apps/{画面名}/" }
  , { json: "{アプリケーション名}/Json/Apps/{画面名}/" }
]

画面遷移では、appの値が遷移スタック（sessionStorageの画面遷移）に積まれます。

jsonInfo

画面で使用するdatasetとvalidationの各JSONについて、読み込みの要否を指定します。

jsonInfo: [
  { dataset: "yes" }
  , { validation: "yes" }
]

requestInfo

画面で使用するトランザクションと、その処理で呼び出す3つのメソッドを、1組ずつ登録します。

requestInfo: [
  ["{トランザクション名}", "{リクエストのチェック}", "{レスポンスの編集}", "{エラー処理}"]
]

リクエストのチェックのメソッドは、リクエストデータのチェックや加工を行います。
戻り値がtrueの場合に送信し、それ以外の場合は送信しません。
レスポンスの編集のメソッドは、呼び出す前に、レスポンスデータの値がtran.jsonのresponseに設定されます。

この項目を使用しない場合は、空の配列を指定します。

externalInfo

ほかの画面（外部プログラム）の処理を呼び出す場合に、そのトランザクションを登録します。

externalInfo: [
  ["{外部プログラム名}", "{トランザクション名}", "{リクエストのチェック}", "{レスポンスの編集}", "{エラー処理}"]
]

この項目を使用しない場合は、空の配列を指定します。

nextname・beforename

遷移先と遷移元の画面名を指定します。

constructor(name) {
  super();
  this.name = name;
  this.nextname = "{遷移先の画面名}";
  this.beforename = "{遷移元の画面名}";
}

nextname・beforenameは、コンストラクタで設定します。
遷移先または遷移元がない画面は、空の文字列を指定します。

イベント・項目の定義

ボタン・ファンクションキー・入力チェック・カスタムイベントなどのイベントと、呼び出すメソッドを設定します。あわせて、画面の項目に関する設定（初期フォーカス・セレクトボックス・チェックボックス）を定義します。

navButtonEvent

画面の要素（ボタンなど）で発生するイベントと、呼び出すメソッドを登録します。

navButtonEvent: [
  ["{セレクタ}", "{イベント}", "{メソッド名}"]
]

enterTabPFKeyのFキーに同じメソッド名を指定した場合、ボタンなどのイベントとFキーのどちらからも、同じメソッドが呼ばれます。
この項目を使用しない場合は、空の配列を指定します。

enterTabPFKey

Enter・Tabキーによる入力項目間のフォーカス移動と、ファンクションキー・Escapeキーで呼び出すメソッドを設定します。

enterTabPFKey: {
  Enter: true
  , Tab: true
  , F1: "{メソッド名}"
  , F2: null
  ...
  , F12: "{メソッド名}"
  , ESC: "{メソッド名}"
  , Forms: 0
}

標準的な割り当ては、F1〜F8が画面固有の処理（照会・登録・削除など）、F9〜F12が最初・前・次・最後のページ（リスト画面）、ESCが戻る処理です。
F1〜F12のメソッドは、navButtonEventに同じメソッド名があり、そのセレクタの要素が表示されている場合だけ実行されます。
ESCのメソッドは、navButtonEventの登録や要素の表示にかかわらず実行されます。

validationEvent

フォームのfocus・blurイベントと、呼び出すメソッドを登録します。

validationEvent: [
  ["{セレクタ}", "focus", "{メソッド名}"]
  , ["{セレクタ}", "blur", "{メソッド名}"]
]

onFocus・onBlurは、ControllerがMixinから継承しており、フォーカス・ブラーの処理を行います。通常は、focusにonFocus、blurにonBlurを登録します。

この項目を使用しない場合は、空の配列を指定します。

selectorEvent

セレクトボックス・チェックボックスなどの要素のイベントと、呼び出すメソッドを登録します。

selectorEvent: [
  ["[halu-ds-field='{項目名}']", "change", "{メソッド名}"]
]

halu-ds-field属性で指定するため、HTML要素にid・class属性は不要です。
この項目を使用しない場合は、空の配列を指定します。

pubsub{Check／Derive／Other}Event

カスタムイベントと、呼び出すメソッドを登録します。用途により、次の3つに分かれます。

・pubsubCheckEvent：入力チェックや選択検証などの、バリデーション系のイベント
・pubsubDeriveEvent：導出項目の再計算のイベント（入力値に連動して、ほかの項目を自動計算する）
・pubsubOtherEvent：上記以外のイベント（例：ページ情報の表示）

pubsubDeriveEvent: [
  ["{イベント名}", "{処理レイヤー}", "{メソッド名}"]
]

pubsubDeriveEventのイベントは、JSON定義のderiveFieldに指定した項目が変更されると発行されます。
使用しない項目は、空の配列を指定します。

{first／f12}FocusItem

フォーカスを設定する項目を指定します。

・firstFocusItem：画面の表示後に、最初にフォーカスを設定する項目
・f12FocusItem：F12キーの押下時に、フォーカスを設定する項目

firstFocusItem: [
  ["field", "{項目名}", "{レコードのid}"]
]

同じ項目名が複数のレコードにある場合は、別のレコードの要素が対象になることがあるため、レコードのidの指定を推奨します。
firstFocusItemは、view.setFirstFocusItem()が呼ばれた時に参照されます。
f12FocusItemは、F12キーの押下時にonFocus12()が呼ぶview.setF12FocusItem()で参照されます。halu-ds-field属性で指定するため、HTML要素にid・class属性は不要です。

使用しない項目は、空の配列を指定します。この場合、フォーカスは設定されません。

selectbox

セレクトボックスの選択肢と、選択された値の格納先を定義します。セレクトボックスがある画面で定義します。

selectbox: [
  {
    selectorid: "{項目名}"
    , selectorname: ""
    , init: { initvalue: "", inithtml: "", datasetid: "", valuename: "", htmlname: "" }
    , change: { datasetid: "", valuename: "", htmlname: "" }
  }
]

セレクトボックスの実装では、次の点に注意してください。 

・init.initvalue・init.inithtmlは、先頭に選択肢を追加する設定です。
　既存の選択肢を選択済みにする設定ではありません。 
・onShowSelectBoxAllは、選択肢を構築するだけで、選択状態をDatasetの値に同期しません。
　同期するには、view.showCurrentSelectBoxを呼び出します。
・一覧画面では、画面表示前にヘッダー項目の値がクリアされるため、dataset.jsonのvalueは、初期値になりません。
　初期値は、Controllerで設定します。

選択肢は、ControllerのonShowSelectBoxAllで、selectboxの定義に従って構築されます。
この項目を使用しない場合は、空の配列を指定します。

checkboxDetail

一覧の各行にあるチェックボックスの値と、対応するDatasetの項目を定義します。一覧でチェックして削除するパターンで使用します。

checkboxDetail: [
  {
    selectorid: ""
    , selectorname: ""
    , datasetid: "{レコードのid}"
    , datasetname: "{項目名}"
    , value: { on: "{チェック時の値}", off: "{未チェック時の値}" }
  }
]

halu-ds-id属性がdatasetid、halu-ds-field属性がdatasetnameと一致する要素が、対象になります。
チェックボックスのchangeイベントは、selectorEventに登録します。

この項目を使用しない場合は、空の配列を指定します。

セッションストレージ

画面遷移や選択ダイアログの呼び出し時に、画面の値をセッションストレージに保存します。
保存した値は、遷移先・呼び出し先の画面への引き継ぎと、戻ってきた時の復元に使用します。
保存先は画面ごとに分かれ、キーの先頭に識別名{アプリケーション名}.{画面名}が付きます。

sessionStorage{Header／Detail／Footer}Key

自画面のセッションストレージに保存する項目を指定します。用途により、次の3つに分かれます。

・sessionStorageHeaderKey：検索条件など、画面遷移後に復元したい項目
・sessionStorageDetailKey：一覧から詳細画面へ遷移する際の、選択行のキー項目
・sessionStorageFooterKey：ページング情報（カレントページ・ページライン数）

sessionStorageHeaderKey: [
  {
    datasetid: "{レコードのid}"
    , dataname: ["{項目名}", ...]
    , classname: ["{クラス名}", ...]
    , typename: ["{項目の種類}", ...]
  }
]

sessionStorageHeaderKeyの値は、遷移先から戻ってきた時に復元されます。
sessionStorageDetailKeyの値は、一覧の行のクリック時に保存され、次画面に引き渡されます。
キー項目がすべて空の行は、選択として扱われません。
使用しない項目は、空の配列を指定します。

nextStorageData

画面遷移で、次の画面に引き継ぐ項目を指定します。

nextStorageData: [
  {
    datasetid: "{レコードのid}"
    , dataname: ["{項目名}", ...]
    , validation: ["{required／nonrequired}", ...]
    , titlename: ["{項目の表示名}", ...]
  }
]

validationは、遷移前に検証されます。"required"の項目の値が空の場合（detailのレコードでは、行が選択されていない場合）は、エラーになります。
nextStorageDataは、次画面の識別名のセッションストレージに保存されます。detailのレコードではクリックした行の値を、それ以外のレコードでは先頭の値を保存します。

この項目を使用しない場合は、空の配列を指定します。

beforeStorageData

画面遷移で、前の画面から引き継いだ値を受け取る項目を指定します。

beforeStorageData: [
  {
    datasetid: "{レコードのid}"
    , dataname: ["{項目名}", ...]
    , classname: ["{クラス名}", ...]
    , typename: ["{項目の種類}", ...]
  }
]

beforeStorageDataは、自画面のセッションストレージから、datanameの項目名で値を読み出し、Datasetに設定します。
遷移元のnextStorageDataと遷移先のbeforeStorageDataで、datanameの項目名を一致させます。

この項目を使用しない場合は、空の配列を指定します。

selectStorageRequestData

選択ダイアログを呼び出す画面で、選択ダイアログに渡す項目（検索条件など）を指定します。

selectStorageRequestData: [
  {
    requestname: "{ダイアログ画面名}"
    , datasetid: "{レコードのid}"
    , dataname: ["{項目名}", ...]
    , value: []
    , dialogid: "{ダイアログのDOM要素のid}"
    , dialogstyle: "{スタイル}"
    , dialogtype: "iframe"
  }
]

選択ダイアログは、Controllerのon選択ダイアログ表示に、selectStorageRequestData[0]・selectStorageResponseData[0]・クリック行のindexを渡して表示します。

この項目を使用しない場合は、空の配列を指定します。

selectStorageResponseData

選択ダイアログから返る値の受け取り先を、呼び出す画面で指定します。

selectStorageResponseData: [
  {
    responsename: "{自画面の画面名}"
    , datasetid: "{レコードのid}"
    , dataname: ["{項目名}", ...]
    , value: []
    , afterfunction: ""
    , cancelfunction: ""
  }
]

選択ダイアログを閉じた時に、選択データの有無によって、pubsub.publishで発行されるイベントが分岐します。

・選択データがある場合：afterfunctionに指定したイベント
・キャンセルの場合：cancelfunctionに指定したイベント

この項目を使用しない場合は、空の配列を指定します。