ホスト画面からHTMLページに変換した時のHTMLの仕様について説明します。
スクリプトエディタのプロジェクト読み込みや実行時に使用されるHTML属性は以下のとおりです。
HTML属性 | 説明 |
|---|---|
id | ページ部品のIDが出力されます。 "Field_開始行_開始桁" 開始行、開始桁にはフィールドの文字列の開始位置が設定されます。 |
name | ページ部品のNameが出力されます。 |
data-elementtype | 要素のデータ種別が出力されます。 |
data-elementsize | 要素の相対サイズが出力されます。 |
data-dynamicbind | ダイナミックバインド情報が出力されます。 |
data-fieldpos | フィールドの位置情報が出力されます。 |
data-fieldrange | フィールドの範囲情報が出力されます。 |
data-modified | メインフレーム用コンテンツの実行時、入力フォームの更新フラグとして使用されます。 |
data-text | 画面記録時にエミュレータの保護フィールドに表示されていた文字列が出力されます。 |
ページ変換時、フィールドからHTML要素に変換した時に付加されるCSSクラスは以下の通りです。
CSSクラス | 説明 |
|---|---|
field-input | 非保護属性(入力可能)のテキストボックス |
field-label | 保護属性(入力不可)のラベル |
field-blue | 文字色(青) |
field-red | 文字色(赤) |
field-magenta | 文字色(マゼンタ) |
field-green | 文字色(緑) |
field-cyan | 文字色(シアン) |
field-yellow | 文字色(黄) |
field-white | 文字色(白) |
field-reverse-blue | 反転色(青) |
field-reverse-red | 反転色(赤) |
field-reverse-magenta | 反転色(マゼンタ) |
field-reverse-green | 反転色(緑) |
field-reverse-cyan | 反転色(シアン) |
field-reverse-yellow | 反転色(黄) |
field-reverse-white | 反転色(白) |
field-border-vert | 縦罫線 |
field-border-top | 上罫線 |
field-border-bottom | 下罫線 |
field-border-round | 囲み罫線 |
スクリプトエディタが生成するプロジェクト共通CSSには、上記の文字色・反転色のクラスに、ディスプレイプロファイルのWebスタイルパターン1と同じカラーが定義されます。
文字色・反転色クラスのカラーを変更する場合は、ユーザカスタマイズ用のCSSに文字色・反転色のクラスとスタイルを定義することにより、フィールドのカラーをカスタマイズすることができます。
【ユーザカスタマイズCSSの例】
/* 文字色(青)を黒字にする場合 */
.field-blue {
color: black;
}
/* 反転色(青)の背景色を青、文字色を白にする場合 */
.field-reverse-blue {
background-color: blue;
color: white;
}
プロジェクトのプロパティで「エミュレータのキー入力」をTrueに設定すると、HTMLページ上でキーボードによるアテンションキー入力が可能になります。
アテンションキーのキー割り当てはディスプレイプロファイルのデフォルト設定と同じです。
キー割り当てを変更する場合はキーテーブルを編集することでカスタマイズできます。
キーテーブルは以下の形式で定義します。
【定義ファイル】
プロジェクトディレクトリ\scripts\config.js
【定義】
KeyBindingsTable = […(1)キーテーブル変数
アテンションキー名： […(2)アテンションキー定義オブジェクト
キー割り当てオブジェクト…(3)キー割り当てオブジェクト
キー割り当てオブジェクト…(3)キー割り当てオブジェクト
]
…
];
【JavaScriptでの記述例】
var KeyBindingsTable = [ // (1)キーテーブル変数
// CLEARキーの定義
Clear: [ // (2)アテンションキー定義オブジェクト
{ shiftkey: true, key: 'Home' }, // (3)キー割り当てオブジェクト
{ ctrlkey: true, shiftkey: true, key: 'F6' }, // (3)キー割り当てオブジェクト
],
// 実行キーの定義
Enter: [ // (2)アテンションキー定義オブジェクト
{ key: 'Enter' }, // (3)キー割り当てオブジェクト
},
];
アテンションキーのキー割り当て定義を記述したテーブルです。
変数名は「KeyBindingsTable」で、グローバル変数(windowオブジェクト)として定義します。
keydownイベント時にキーテーブルが参照され、押されたキーと一致する組み合わせのアテンションキーを処理します。
アテンションキーの名前をオブジェクト名にして、キーの組み合わせを配列形式で定義します。
アテンションキーとオブジェクト名の表を以下に記載します。
アテンションキー | オブジェクト名 |
|---|---|
CLEAR | Clear |
実行(ENTER) | Enter |
PF1 | PF1 |
PF2 | PF2 |
PF3 | PF3 |
PF4 | PF4 |
PF5 | PF5 |
PF6 | PF6 |
PF7 | PF7 |
PF8 | PF8 |
PF9 | PF9 |
PF10 | PF10 |
PF11 | PF11 |
PF12 | PF12 |
PF13 | PF13 |
PF14 | PF14 |
PF15 | PF15 |
PF16 | PF16 |
PF17 | PF17 |
PF18 | PF18 |
PF19 | PF19 |
PF20 | PF20 |
PF21 | PF21 |
PF22 | PF22 |
PF23 | PF23 |
PF24 | PF24 |
PA1 | PA1 |
PA2 | PA2 |
PA3 | PA3 |
ATTN | Attn |
SYS-REQ | SysReq |
キーの組み合わせを定義したオブジェクトです。
プロパティと値の説明を以下の表に記載します。
プロパティ | 値 | 説明 |
|---|---|---|
altkey | true / false | Altキーを組み合わせるかどうかを指定します。 true：Altキーを組み合わせる falseまたはプロパティ省略：Altキーを組み合わせない |
shiftkey | true / false | Shiftキーを組み合わせるかどうかを指定します。 true：Shiftキーを組み合わせる falseまたはプロパティ省略：Shiftキーを組み合わせない |
ctrlkey | true / false | Ctrlキーを組み合わせるかどうかを指定します。 true：Ctrlキーを組み合わせる falseまたはプロパティ省略：Ctrlキーを組み合わせない |
key | キー名 | JavaScriptのkeydownイベントのEventオブジェクトの 例) Enterキーの場合、"Enter" |