Xojo日本語ブログ

マルチプラットフォーム対応アプリが開発できるXojoのブログです。

XojoのWebアプリケーションにスタイルシートを当てるには?

XojoでWebアプリケーションを作っていて、フォントや文字サイズなどを細かく調整したいと思うことは多々あるでしょう。そんな時、通常のWebシステムであればスタイルシートを使って指定するかと思います。

今回はXojoの中でスタイルシートを指定する、Webスタイルの使い方を紹介します。

Webスタイルを作成する

Webスタイルの作成方法は、左側にあるプロジェクトファイル一覧のペインを右クリックして「Webスタイル」を選択します。

f:id:moongift:20170122095734p:plain

そうするとWebスタイルの作成画面が表示されます。通常時、マウスオーバー時、ボタンを押した時そしてすでに表示済みの4パターンに対してスタイル設定が可能です。

f:id:moongift:20170122095743p:plain

Add Propertyボタンをクリックすると、設定できるスタイル設定が表示されます。フォント、枠線、影、パディング、コーナー、その他といったカテゴリに分かれており、その中からさらに選んで指定ができます。

f:id:moongift:20170122095805p:plain

Webスタイルを適用する

Webスタイルを作成したら、画面上の任意のコントロールを選択し、インスペクタのStyles設定にて先ほど作成したWebスタイルを選択します。

f:id:moongift:20170122095824p:plain

これでWebスタイルの適用された表示が確認できるはずです。

f:id:moongift:20170122095833p:plain


Webアプリケーションの場合、細かな設定はWebスタイルでできるようになっているので、各コントロールでは文字色なども設定できないようになっています。Webスタイルを使った利点としては、スタイルシートのように設定の再利用がしやすく、メンテナンスも容易ということでしょう。

さらにWebスタイルは継承して別なWebスタイルを定義することもできます。これによって、入れ子の構造も定義できますので、全体は統一しつつ、一部だけ設定を変更したいといった指定もできます。

ぜひ活用してください。