フォームオブジェクトの進化

最も美しいインターフェイスを作ることができるように、私たちはフォームオブジェクトの改良を続けています。4D v19 R6 では、静的テキストと入力テキストのフォームオブジェクトの境界線に角の丸みを定義することができるようになりました。

4D v20 では、さらに新たな可能性が追加されました。

• ボタン、ラジオボタン、チェックボックスについて、タイトルテキストとアイコンの表示を管理する新しい設定が追加されました。
• ラジオボタンとチェックボックスについては、アイコンに使用可能な状態の数が拡張され、より良いインターフェースが提供できるようになりました。

HDI: ボタン等の新しいプロパティ

テキストとアイコンの位置

テキストの “横揃え”

ボタン、ラジオボタン、チェックボックス に “横揃え” プロパティを適用できるようになりました。テキストの横揃えを定義するには、プロパティリスト、CSS、および OBJECT SET HORIZONTAL ALIGNMENT コマンドが使用できます。

プロパティリスト:

CSSの例:

.align {
    textAlign : right;
}

コードの例:

OBJECT SET HORIZONTAL ALIGNMENT コマンドに対して、次の 3つの定数のうち 1つを渡すことができます：Align left、Align right、および Align center。

OBJECT SET HORIZONTAL ALIGNMENT (*; "button"; Align center)

“タイトルと画像を隣接させる”

ボタン、ラジオボタン、チェックボックス について、新たに “タイトルと画像を隣接させる” プロパティが追加されました。

このプロパティの値が false の場合、画像は “タイトル/ピクチャー位置” プロパティに基づき、ボタンの端のほうに配置されます。このプロパティが true の場合、画像は “タイトル/ピクチャー位置” プロパティに基づき、タイトルに隣接した位置に配置されます。

このプロパティを定義するには、プロパティリスト、CSS、および OBJECT SET FORMAT コマンドが使用できます。

プロパティリスト:

CSSの例:

.hug {
    imageHugsTitle : false;
}

コードの例:

OBJECT SET FORMAT コマンドを使用してボタンをフォーマットする場合は、次のシンタックスに準じた文字列を渡します: “title; picture; background; titlePos; titleVisible; iconVisible; style; horMargin; vertMargin; iconOffset; popupMenu; hyperlink; numStates; imageHugsTitle“。値を変更しない場合は、値を渡す必要はありません。

imageHugsTitle プロパティだけを変更する場合:

OBJECT SET FORMAT (*; "button"; ";;;;;;;;;;;;;0")

結果

下図は、設定できるさまざまな例のご紹介です:

アイコンの “状態の数”

4D v20 以前は、ラジオボタン や チェックボックス のアイコンについて状態の数を 4つまで (“false、true、ロールオーバー、無効”) 定義することができました。

より良いエンドユーザー体験のためには、true時・false時のロールオーバーや無効の状態も考慮する必要があります。そこで、4D v20 では、アイコンの状態の数を最大 6つまで 使用できるようになりました。

次は…

これらの機能の詳細については、HDI とドキュメントを参照ください。あなたのフィードバックを楽しみにしています!