入力（Input）

入力（Input）は、ユーザーからデータを受け取るための重要な要素であり、様々なタイプのフォームコントロールを提供する基本的なタグです。

たとえば、テキスト入力フィールド、数字、パスワードフィールドなどを作成できます。

主要な入力タイプ

テキスト入力フィールド:

ユーザーが自由にテキストを入力できるフィールドです。
パスワードフィールド:

パスワードを入力するためのフィールドです。入力内容が見えないように隠されます。
数字入力フィールド:

ユーザーが自由に数字を入力できるフィールドです。

上記のようなtype属性を適切に使用することで、ユーザーからの入力データを効率的に収集し処理することができます。

Magic xpaにおける［エディット］コントロールに対応したウィジェットです。

Web Clientでは［入力］(matinput)または［ラベル］(label)、日付を入力（Date）として扱われ、Magic xpa側では同じ［エディット］コントロールを使っています。

使う方法によってデータ入力がさまざまなシナリオに変わります。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

Magic Xpa側

Magic Xpa側では［エディット］コントロール関して以下の設定を行います。

フォームに［エディット］コントロールを設置する
SmartUX側と関連するプロパティを設定する
⁂必要に応じてご活用ください。

可視
コントロールを表示させるかどうか指定します。
論理値を返す式で指定することもできます。

有効
コントロールを有効にするかどうかを指定します。
有効にするかどうかを表す論理値を返す式を使用できます。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

SmartUX側

左ペイン：SmartUX側では、入力ウィジェットを配置します。
（または右ペインのモデルから該当のモデルを配置）

入力ウィジェットを配置すると、以下のように下線が入ったような見た目になります。
Magic xpaと関連するためData入力の隣にある歯車ボタンをクリックして設定します。
これを「マッピング」と言います。
UXウィジェットから配置したものにはマッピングが必要ですが、モデル項目から配置するとすでにマッピングされた状態なので必要ありません。

設定した後は以下の通りになっております。

これでMagic xpa側とSmartUX側は連携取れた状態になります。
Magic xpa側で「可視」プロパティを設定した場合は、SmartUX側で以下の通りに設定をします。

表示ロジックの「Display if」プロパティに歯車ボタンをクリックして「mg.getVisible」を設定します。

設定した後は以下の通りになっております。

中央ペイン下部のコンポーネントをご覧いただくと、入力ウィジェットを配置した際に、デフォルトで以下のコードが定義されます。

<mat-form-field data-comp-id=”mat-input.1″ id=”mat-input.1″>

</mat-form-field>

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

以下のプロパティがあります。

プロパティ

内容

Data

Magic プログラムで定義されたコントロールを指定します。
歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。
Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。

label

ラベルとして表示させるテキストを指定します。
歯車ボタンをクリックするとダイログが表示されます。
ここで、表示するテキストを入力したり、Angular関数を選択することができます。

is inside Table

テーブル内に配置する場合はチェックをつけます。
追加することで[rowId]=”row.rowId”タグが追加されます。

Show Control

コントロールを表示するかどうかを指定します。以下から選択できます。
“Is Inside Table” がチェックされている場合のみ有効です。

None - 常に表示されます。
Is Row Edit - 修正モード時のみ表示されます。
Is Row Read - 照会モード時のみ表示されます。

Required

エンドユーザがコントロールに値を入力する必要があるかどうかを指定します。

Input Type

入力するテキストのタイプを以下から指定できます。

Default
Text - 任意の文字が入力できます。
Number - 数字のみ入力できます。ただし、
Currency MaskをONにした場合はDefaultに設定してください。
NumberとCurrency Maskの併用はできません。
Password - 入力内容が ●で表示されます。

Display If

コントロールを表示させるかどうか指定します。
Is Visibleと似ていますが論理型の式を設定し、 True,Falseで指定します。
他 mg.getValue(mgc.XXXXXXXXXX) !=” と入力するとXXXXXXXXXXが空白以外の場合はTrueになるので表示されます。

Currency Mask

数値データの場合のみ有効です。
チェックすると mg.getNumericPicture 関数を使用して Magic xpa側で定義されたコントロールの書式を継承するようになります。
主にN10Cなどカンマ区切り文字に使用します。
※カンマ入力はIME起動時に正常に作動いたしません。
IMEをオフにするには該当inputタグのタイプをTELに設定します。

Disabled

表示、非表示ではなく有効、無効を設定いたします。
mg.isDisabled(mgc.XXXXXXXXXX)とすることでMagicの有効無効と関連付けられます。

Hint

コントロールのヒントとして使用されるテキスト。
ヒントは、タイプ入力している間に自動的に削除されるエディットコントロールの上で表示されるテキストです。
歯車ボタンをクリックするとダイログが表示されます。
ここで、表示するテキストを入力したり、Angular関数を選択することができます。

Tooltip

コントロールに関連付けるツールチップを指定します。
マウスカーソルをこのコントロールに置くと指定された文字が表示されます。
歯車ボタンをクリックするとダイログが表示されます。
ここで、表示するテキストを入力したり、Angular関数を選択することができます。
mg.getTitle(mgc.XXXXXXXXXX) にてMagicで設定されたツールチップを表示させることが可能です。

Appearance

表示方法を以下から指定します。

outline - 外観はフォームフィールドを全周に枠線が表示されます。
fill - 外観はフォームフィールドを塗りつぶした背景ボックスと下線で表示されます。

Font Size

フォントの大きさを定義します。デフォルトは、16ピクセルです。

指定方法には，次のようなものがあります。

指定方法		説明
数値で指定	px	数値に px の単位をつけて指定します。px とは１ピクセルを１とする単位で，実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
	em	数値に em の単位をつけて指定します。em とは現在使用中の標準フォントの高さを１とする単位です。
	ex	数値に ex の単位をつけて指定します。ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。
	%	親要素のフォントのサイズを基準にして割合を％値で指定します。
キーワードで指定	xx-small	７段階があり，medium が標準サイズです。
	x-small
	small
	medium
	large
	x-large
	xx-large
	smaller	smaller，larger を指定すると大きさが１段階上下します。
	larger	smaller，larger を指定すると大きさが１段階上下します。

Font Style

フォントのスタイルを以下から指定できます。

Default
Normal …… 標準フォントを指定します。
Italic …… イタリック体を指定します。
Oblique …… 斜体フォントを指定します。
Inherit …… 親要素から取得するよう指定します。

Font Family

選択した要素に対して、フォントファミリ名を指定することができます。

Default
Arial
Times New Roman
Verdana
Georgia
Tahoma
Segoe UI
Roboto
Open Sans
Helvetica
Playfair Display
Poppins
Raleway
Montserrat
Cinzel

Font Weight

フォントの太さ（あるいは重み）を指定します。実際に表示されるフォントの太さは、現在設定されている font-family に依存する場合があります。

Default
Bold ……太字のフォント（700）に設定されます。
Bolder ……フォントの太さが800に設定されます。
Boldest ……フォントの太さが900に設定されます。
Normal ……通常の太さのフォント（400）に設定されます。
Lighter ……フォントの太さが300に設定されます。
Lightest ……フォントの太さが100に設定されます。

Text Align

テキスト表示の整列方法を指定します。以下から選択できます。

Default
Left …… 左寄せ
Right …… 右寄せ
Center …… 中央寄せ
Justify …… 均等割付

Text Transformation

テキストの変換方法を指定します。以下から選択できます。

Default …… 変換しません。
Uppercase …… 大文字に変換します。
Lowercase …… 小文字に変換します。
Capitalize …… 先頭文字のみ大文字に変換します。

Text Color

テキストの色を指定します。デフォルトは、rgba(44, 56, 74, 0.95)です。

指定方法には，次のようなものがあります。

指定方法
16進数で指定	color: #FF0000; 色を、RGBの各値を2桁ずつ、16進数で表す方法 #FF0000のようにRGB各色の数値が同じである場合は、#F00と3桁に省略可
色の名前で指定	color: red; 色を、各ブラウザで設定されているカラーネーム（約140色）で表す方法
10進数で指定	color: RGB(255,0,0); 色を、RGBの値をそれぞれカンマ（,）で区切って10進数で表す方法
10進数で透明度も指定	color: RGBa(255,0,0,0.5); 色について、RGBの値のあとに「 0（透明）～1（不透明）」の数値で透明度も表す方法
HSLで指定	color: hsl(0,100%,50%); 色相環での角度（ 0～359度）で色を、そのあと彩度と輝度を%で、カンマ（,）で区切って表す方法
HSLで透明度も指定	color: hsla(0,100%,50%,0.5); 色について、HSLの値のあとに「 0（透明）～1（不透明）」の数値で透明度も表す方法
％で指定	color: RGB(100%,0%,0%);またはcolor: RGBa(100%,0%,0%,0.5); 色を、RGBの値をそれぞれカンマ（,）で区切って％で表す方法

Label Color

ラベルの色を指定します。デフォルトは、rgba(0, 0, 0, 38)です。

指定方法には，次のようなものがあります。

指定方法
16進数で指定	color: #FF0000; 色を、RGBの各値を2桁ずつ、16進数で表す方法 #FF0000のようにRGB各色の数値が同じである場合は、#F00と3桁に省略可
色の名前で指定	color: red; 色を、各ブラウザで設定されているカラーネーム（約140色）で表す方法
10進数で指定	color: RGB(255,0,0); 色を、RGBの値をそれぞれカンマ（,）で区切って10進数で表す方法
10進数で透明度も指定	color: RGBa(255,0,0,0.5); 色について、RGBの値のあとに「 0（透明）～1（不透明）」の数値で透明度も表す方法
HSLで指定	color: hsl(0,100%,50%); 色相環での角度（ 0～359度）で色を、そのあと彩度と輝度を%で、カンマ（,）で区切って表す方法
HSLで透明度も指定	color: hsla(0,100%,50%,0.5); 色について、HSLの値のあとに「 0（透明）～1（不透明）」の数値で透明度も表す方法
％で指定	color: RGB(100%,0%,0%);またはcolor: RGBa(100%,0%,0%,0.5); 色を、RGBの値をそれぞれカンマ（,）で区切って％で表す方法

Class

任意のクラスを定義することができます。

入力（Input）

主要な入力タイプ

テキスト入力フィールド:

パスワードフィールド:

数字入力フィールド:

Magic Xpa側

SmartUX側

関連記事