プロジェクト・データベース：スタイルシートでフォームを美しくする

クラシック4Dのバイナリ構造では、スタイルシートを定義して、フォームで使用するフォント、フォントサイズ、テキストスタイルをmacOSとWindowsの両方のプラットフォームで指定することができます。プロジェクトデータベースでは、4ステートボタンのプロパティを定義したり、すべてのラインオブジェクトのカラーとボーダーを指定したり、アプリケーションのすべてのリストボックスのヘッダーの高さを設定するなど、さらに進んだことができます。CSSの文法と構文に触発された4Dは、4Dプロジェクト・データベースのフォームの特定のニーズを満たすために、CSSを適応させました。スタイルシートのおかげで、すべてのプロパティを設定し、真に視覚的に魅力的なフォームを作成することができます。このブログ記事で、その方法をご紹介します

スタイルシート・データベースの例

プラットフォーム

プロジェクト・データベースでは、「全体的な」スタイル・シートだけでなく、両方のプラットフォーム（WindowsまたはmacOS）用に個別のスタイル・シートを定義することができます。

なぜ、プラットフォームごとに異なるスタイルシートが必要なのでしょうか？macOSでは、Windowsで使われているフォント／フォントサイズと異なるフォント／フォントサイズが使われることが多いからです。一方、テキストの色はどちらも同じであることが多いのです。

そこで、”stylesheets.css “ファイルに共通のスタイルを定義し、プラットフォーム別のスタイルをそれぞれのファイルに定義することができるようにしました。”stylesheets_mac.css” と “stylesheets_windows.css” です。

プロパティ

プロジェクト・データベースにおける大きな革命の一つは、フォーム・オブジェクトがサポートするすべてのプロパティをスタイル・シートで使用できるようになったことである。

例えば、”buttonAction” クラスを作れば、”toolbar” の外観を持ち、テキストがグレーで、フォーカスできない4ステートボタンを作成することができる。

.buttonAction {
  iconFrames: 4;
  style: toolbar;
  stroke: grey;
  focusable: false;
}

これにより、同じグラフィックデザインを維持しながら、アプリケーション用のフォームを簡単にデザインすることができます。

セレクタ

もう一つの大きな変更点は、クラス、オブジェクトタイプ、オブジェクト名、属性によってスタイルシートを作成できるようになったことです。

オブジェクト・タイプ・セレクタ

オブジェクトタイプセレクタ（CSSの要素セレクタに相当）を使うと、データベース内のすべてのオブジェクトに適用される共通のプロパティを定義することができます。例えば、リストボックスのヘッダーは2行であること、空行は表示しないこと、行の背景色はゲインズボロとホワイトスモークであること、などです。

listbox {
  headerHeight: 2em;
  hideExtraBlankRows: true;
  fill: gainsboro;
  alternateFill: whitesmoke;
} 

このセレクタのおかげで、フォームオブジェクトのルック＆フィールを独自に定義することができます。

属性セレクタ

属性セレクタを使うと、プロパティの値によってスタイルシートを定義することができます。

例えば、入出力データのフォームには、レコードを追加、編集、削除するためのボタンがあります。これらのボタンはすべて、同じアイコン、タイトル、ヘルプ・ヒントを使用している。

アクションボタン用のスタイルシートを作成し、アクションプロパティに特定の値を指定してみてはどうでしょうか。例えば、actionプロパティに “editSubrecord “を指定した場合。

.buttonAction[action=editSubrecord] {
  icon: url("/RESOURCES/Images/Buttons/edit.png");
  tooltip: ":xliff:button_tip_EditRecord";
  text: ":xliff:button_EditRecord" !important;
}

おまけで、実写のデモをどうぞ