背景や枠線のプロパティを使って、ボタン、ラジオボタン、チェックボックスをカスタマイズする

カラフルなアクションボタンが並んだツールバーや、スタイリッシュなラジオボタンやチェックボックスを備えた設定パネルを作成していると想像してみてください。特別なイラストや複雑なグラフィックは必要ありません。角が丸く、控えめな枠線が入った青いボタンがあれば十分です。

これまでは、単純な視覚的なカスタマイズでさえ、専用の画像アセットを作成する必要がありました。

4D 21 R5からは、カスタムスタイルが適用されたボタン、ラジオボタン、チェックボックスに対して、背景色や枠線のプロパティを直接設定できるようになりました。

オブジェクトの直接着色

以前は、カスタムスタイルのボタン、ラジオボタン、チェックボックスの背景色をカスタマイズするには、背景画像を使用する必要がありました。現在では、フォームエディタで背景色を定義したり、4D コマンドを使用して実行時に変更したりすることができます。

ボタンについては、下位互換性を維持するために、新しい「カスタム」枠線スタイルが導入されました。これにより、既存のボタンの外観を変更することなく、新しい背景プロパティを利用できるようになります。

// Set a blue background on a custom-styled button
OBJECT SET BORDER STYLE(*; "myButton"; Border custom)
OBJECT SET RGB COLORS(*; "myButton"; 0xFFFFFF; 0x1E90FF)

// Set a blue background on a custom-styled check box
OBJECT SET RGB COLORS(*; "myCheckBox"; 0xFFFFFF; 0x1E90FF)

デフォルト値は「none」であり、既存のフォームの外観を維持します。背景画像が設定されている場合、その画像は背景色の上に描画されるため、色付きの背景と透明なアイコンや画像を組み合わせることが可能です。

数秒で枠線を追加

枠線を追加するためだけに専用の画像アセットを用意する必要はもうありません。新しい枠線プロパティを使用すれば、カスタムスタイルのボタン、ラジオボタン、チェックボックスの外観を直接カスタマイズできます：

• 枠線の色
• 枠線の幅
• 角の半径

控えめなアウトラインでも、角が丸いアクションボタンでも、すべてをフォームエディタ、CSS、または4Dコードから直接設定できるようになりました。

また、角丸と背景画像や背景色を組み合わせた場合、4Dは自動的に背景を枠線に合わせて切り抜きます。マスキングや画像編集は不要です。

ボタンについては、既存のフォームの外観を維持するため、これらの新しいプロパティは「カスタム」に設定された場合にのみ利用可能です。

// Set a border radius on a custom-styled button 
OBJECT SET BORDER STYLE(*; "myButton"; Border custom) 
OBJECT SET CORNER RADIUS(*; "myButton"; 2) 

// Set a border radius on a custom-styled check box 
OBJECT SET CORNER RADIUS(*; "myCheckBox"; 2) 

CSS による一元的なスタイル設定

アプリケーションですでにCSSを使用している場合、これらの新しいプロパティは既存のスタイルに自然に組み込むことができます。スタイルを一度定義するだけで、必要な場所に適用できます。

@media (prefers-color-scheme: light) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #e0f7fa;
        borderColor: #00ACC1;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #00ACC1;
        textAlign: center;
    }
}
@media (prefers-color-scheme: dark) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #164B52;
        borderColor: #45A9B9;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #45A9B9;
        textAlign: center;
    }
}

これにより、フォーム全体で一貫したビジュアルアイデンティティを容易に構築できるだけでなく、管理が必要な画像アセットの数を減らすことができます。

シンプルなスタイリング、メンテナンスの軽減

各状態ごとに異なる外観が必要な場合は、画像ベースのオブジェクトが依然として最適な選択肢です。しかし、単純な色のついたボタン、ラジオボタン、またはチェックボックスで十分な多くのケースでは、background や border プロパティを使用することで、はるかに迅速かつ簡単に解決できます。

フォームエディタで設定する場合も、CSSでスタイルを設定する場合も、コードから更新する場合も、結果は同じです。管理すべき画像アセットが減り、グラフィックの編集に費やす時間を削減して、アプリケーションの開発に注力できるようになります。