項目毎(かつ画面単位)で、さまざまなヘルプメッセージを用意することができます。入力支援として活用できます。

画面例

項目名(ラベル部)の右横にボタンを配置することができます。図1は "Help!" というボタンを置いた例です。

図1 Help!ボタンを配置する

ボタンの上にマウスをのせるとメッセージが表示されます。

図2 ボタンの上にマウスをのせる

定義方法

モデル項目詳細定義の「説明」タブを開きます。登録画面・更新画面・検索画面・詳細画面毎に設定できます。ここでは登録画面を指定します。

「ヘルプボタン」の欄にボタンのラベル(表示文字)を、「内容」の欄にメッセージをそれぞれ記載します。

図3 ヘルプボタンの設定

画面例

項目ラベル部にメッセージを記述することもできます。「項目名」のに表示されます。

図4 項目名の下にメッセージが表示される

定義方法

説明タブ内の「項目ラベル>内容」欄にメッセージを記載します。

図5 項目ラベルの内容

なお、途中の改行は無視されます。(ビルド後は図4と同じようになります。)

図6 改行は無視される

画面例 - スタイル指定

スタイル(文字の大きさや色など)を指定することもできます。(図7)

図7 文字サイズを小さくし、文字色を青に設定した

定義方法

説明タブ内の「項目ラベル>スタイル」欄にCSSを記載します。具体的なCSS文法の説明は割愛します。(CSSに関する他の文献を参照してください。)

図8 スタイルの設定

画面例

図9は入力フィールドにヘルプメッセージを指定した例です。入力フィールドの幅が100%のとき、メッセージは入力フィールドのに表示されます。

図9 入力フィールドの下にメッセージが表示される

定義方法

説明タブ内の「入力フィールド>内容」欄にメッセージを記載します。

図10 入力フィールドの内容

画面例 - スタイル指定

スタイル(文字の大きさや色など)を指定することもできます。(図11)

図11 文字色を青に設定した

定義方法

説明タブ内の「入力フィールド>スタイル」欄にCSSを記載します。具体的なCSS文法の説明は割愛します。(CSSに関する他の文献を参照してください。)

図12 スタイルの設定

画面例

マウスを入力欄にのせる(オーバーラップ)と、メッセージが表示されます。(図13)これをツールチップと呼びます。

図13 ツールチップ

定義方法

説明タブ内の「マウスオーバー時のメッセージ」欄にメッセージを記載します。

図14 マウスオーバー時のメッセージを指定する

画面例

プレースホルダとは、入力欄に値が入力されていない時に表示される文字です。(図15)

図15 プレースホルダ

プレースホルダは「初期値」ではありません。この状態で保存しても、データベースにはプレースホルダの文字は保存されません。(より正確には、何も保存されません。)

この入力欄に一文字でも入力を行なうと、プレースホルダの文字は消えます。

定義方法

図16 プレースホルダのメッセージを指定する

プレースホルダの表示ルールについての補足

  • 本機能は HTML の placeholder 属性を利用して実現しています。よって、本機能に未対応のWebブラウザではご利用になれません。(例えば IE 9 は本機能に未対応です。)
  • プレースホルダが消えるタイミングは、Webブラウザによって異なります。
  • テキストエリアには設定できません。

ヘルプボタンの文字はpresentation/displayitem/@tipslabelです。

ヘルプボタンに対応したメッセージはpresentation/displayitem/@tipsです。

項目ラベルのヘルプメッセージはpresentation/displayitem/displaytext/@position\=labelです。

項目ラベルのヘルプメッセージのスタイルはpresentation/displayitem/displaytext[@position\=label]/@styleです。

入力フィールドのヘルプメッセージはpresentation/displayitem/displaytext/@position\=fieldです。

入力フィールドのヘルプメッセージのスタイルはpresentation/displayitem/displaytext[@position\=field]/@styleです。

ツールチップはpresentation/displayitem/@tooltipです。

プレースホルダはpresentation/displayitem/@placeholderです。