会社のブランディングやガイドラインに沿うようテーマを即座にアプリケーションに適用することが開発者には求められます。ここでひとつ良いお知らせです。Ext JS はその統合された膨大なコンポーネントライブラリのおかげで、非常に強力なテーマ機能を備えています。

Ext JS の統合コンポーネントライブラリの主要な利点の1つは、それらが階層を構成しており、プロパティを親コンポーネントから引き継いでいるということです。この階層のおかげでSassのいくつかの変数セットを変更するだけでそれは上位から下位のコンポーネントに引き継がれ、結果としてアプリケーション全体に効くため、テーマを素早く適用することができます。この階層構造の継承がまさにExt JS を強力で、かつテーマを簡単にアプリケーションに適用できるフレームワークにしています。

Ext JS のSass変数を使用してアプリにテーマを適用する

Ext JS アプリケーションにテーマを適用するに当たり、開発者やデザイナーが押さえておくべきポイントは4つあります。色、およびフォント、スペーシング、アニメーションです。色とフォントについてはデフォルトのSass変数を変更するだけでテーマの変更に大きな効果があります。このブログ記事の目的はアプリに素早くテーマを適用することにありますので、この記事の残りではこれらに焦点をあてます(スペーシングとアニメーションの変更にはより時間がかかり、その効果はこれらほど大きくありません)。

Ext JS アプリケーションのテーマに最初から取り掛かる場合、デフォルトのGlobal_CSS変数を変更し、続いてコンポーネントのSass変数を変更してください。Sass変数は以下の順で効果的です:

1. Global_CSS
2. Buttons
3. Containers
4. Toolbars

クラシックツールキットに向けて、Global_CSS、および上に挙げたコンポーネントから21のSass変数を抽出しました。これらはGithubで入手可能にしていますので、すぐに始められます。アプリケーションでこれらの変数の値を変更し、その効果を確認してください。全く新しいテーマパッケージを作りたい場合は、そのテーマを複数のアプリケーションで再利用することができます。詳しくはExt JS Docs でご確認ください。

テーマを試すためのスターターアプリが必要でしたら、Github上のTheme Helper App をお試しください。同僚のLee Boonstraが作成しました。

Sencha Architect を使用してアプリにテーマを適用する

Sencha Architect を使用している場合、Quick Themingも上記のGithubに挙げたSass変数の多くを使用しており、これを利用する手もあります。Quick Theme を利用するにはToolboxのTheme Optionを選択し、”Quick Themes”のドロップダウンから利用可能なQuick Themeを選び、Project Inspectorのリソースにドラッグアンドドロップします。

Quick Theme in Sencha Architect

経験を共有しましょう

私がGithubにて共有したSass変数は、アプリの見た目に大きな印象を与えることのできるもののほんの一部です。いかがでしょうか。他にもあればGithubより私の変数リストをコピーし、あなたの変数を追加してください。そのリンクは下記のコメント欄に投稿し、皆と共有していただけると幸いです