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

Deeplからの自動翻訳

クラシック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;
}

blank

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

セレクタ

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

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

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

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

blank

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

属性セレクタ

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

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

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

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

blank

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

Vanessa Talbot
- プロダクトオーナー - Vanessa Talbotは、2014年6月に4Dプログラムチームに参加しました。プロダクトオーナーとして、彼女はユーザーストーリー(ユーザーが期待する新機能とその使用法)を書き、それを具体的な機能仕様に変換する役割を担っています。また彼女の役割は、実装された機能が顧客のニーズを満たしているかどうかを確認することでもあります。入社以来、4Dにおける主要機能の定義に関わってきました。プリエンプティブ/マルチスレッドの新機能の大部分と、非常に複雑なテーマである組み込みアプリケーションの新アーキテクチャに取り組んできました。VanessaはTelecom Saint-Etienneで学位を取得後、Criminal Research Institute でオーディオビジュアル部門の開発者としてキャリアをスタートさせました。また、メディアや医療の分野でも、技術サポートやプロダクションの分野で働いてきました。