数週間前にGXT 3.1.0ベータを公開しました。このリリースにGXT用の外観のベーステーマを生成する新しいTheme Builderツールも含まれています。グラデーションや角丸のようなCSS3機能も含み、古いブラウザでもこのプロパティを使用できるように、Theme Builderは画像も生成できます。

準備をしましょう

GXT 3.1 ベータの ダウンロードZIP ファイルには Theme Builder ツールそのものと、いくつかのサンプルも含まれています。それらは新しいテーマの作成方法、変数と関数の動作、どのプロパティがセットできるか、そのプロパティの意味だけを表示するのではなく、ビルドシステムにどうやってテーマを統合するかも説明します。詳しくはドキュメントでも参照できます。

GXT 3.1ベータをダウンロードすると、Mac と Windows の両方でテーマを作成するに必要なものが全て揃います。Linux では、プラットフォームに適したバージョンの PhantomJS をダウンロードして、そのバイナリを指すようにthemer.shファイルを変更する必要があります。

Windowsでは、themer.bat ファイルを実行します：

themebuilder\bin\themer.bat

Mac や Linux の場合には、themer.sh ファイルを実行します：

themebuilder/bin/themer.sh

どのプラットフォームでも、 themer の実行方法が出力されます：

usage: ThemeBuilder [options] [config ...]
-gen <path>	directory to generate code to
-generateConfig <outputFile>	Generate sample configuration
-h,--help	print this message
-imageFile <path>	captured image used for slicing images
-manifestFile <manifestFile>	json manifest file of the captured image
-out <jar>	path to jar file to generate. Default is a jar named <theme.name>.jar in the current directory
-warDir <warDir>	directory to compile the css3-based theme to before images are sliced from it

必須の引数は生成したい設定ファイルの名前のみで、残りは全てオプションです。

設定ファイル

テーマ設定ファイルは 名前空間のキーバリューペアのセットとして構成されています。名前空間は関連しているプロパティをグループ化して名前を短く、規則的に、覚えやすくするためにあります。

プロパティ値は、文字列または数字、簡単な式（算術演算、文字列連結）を指定できます。また他のプロパティへの参照やテーマが生成時に実行される組み込みの関数も指定できます。

テーマコンフィグを生成するには、2つのプロパティが必要となります、テーマの名前と生成する時のパッケージです。名前は生成される jar ファイルと、あるアプリケーションが複数のテーマをコンパイルできるようにする GWT プロパティの値に利用されます。

サンプルコンフィグ

quick-start サンプルは themer を簡単に使い始める方法を提供しています。プロパティを少し変更するだけで、全く違うテーマを素早く作成できます。これらは themebuilder/examples/quick-start のディレクトリに入っています。

このファイルの最初の 20 行はテーマの名前とパッケージをセットしていて、テーマの残りの部分は、次に基づいていくつかのグローバル変数を定義しています：

theme {
  /* First, create a name for your theme, and define a package to place it in */
  name = "quickstart"
  basePackage = "com.example"
 
  /* Next, configure these basic defaults, to be used throughout the file */
  text = util.fontStyle("Tahoma, Arial, Verdana", "13px", "#000000", "normal")
  headerText = util.extend(text, {
    size = "15px"
    color = "#eeffff"
    weight = "bold"
  })
 
  borderRadius = 6
  headerBgColor = "#2299cc"
  iconColor = "#ddeeff"
  spacing = 10

まずは、テーマにパッケージと名前を指定する必要があります：

theme {
  name = "myfirsttheme"
  basePackage = "com.example.myfirsttheme"

残りのファイルでは、残っている変数は各ウィジェットにスタイルを与えるための値を提供することに利用されます。例えば、quick-start.theme では Info ウィジェットは次の設定を利用します：

info {
  backgroundColor="#000000"
  borderRadius=theme.borderRadius
  border=util.border('none')
  opacity=0.8
  margin=util.margin(4,0,0,0)
  padding=util.padding(0)
  headerPadding=util.padding(theme.spacing)
  headerText=util.extend(theme.headerText, {
      color = "#ffffff"
  })
  messagePadding=util.padding(0, theme.spacing, theme.spacing, theme.spacing)
  messageText=util.fontStyle(text.family,text.size,'#ffffff',text.weight)
  radiusMinusBorderWidth = util.radiusMinusBorderWidth(border, borderRadius)
}

注：ある変数をフルネームで、例えば ‘theme.headerText’ のように参照することもありますが、場合によっては ‘theme.’ プリフィックスがない状態で参照することもあります。プリフィックスは常に必要ではありませんが、テーマ設定言語が最近の変数で解決しようとします（現在の名前空間、あるいは親の名前空間など）。’theme.headerText’ と参照すると、’theme.details.info.headerText’ を参照しないことを確保します。’headerText’ と指定するとこれと一致しますが、より具体的な ‘theme.headerText’ とは一致できなくなります。

ここには Info ウィジェット用の値がハードコーディングされています。これらは効果がある形で他のウィジェットと簡単には共有できません。この値のセットは一度だけ行われます。デフォルト値は次のような info ポップアップになります：

theme.spacing を 4 に変更すると、次のようになります：

theme.text を util.fontStyle(“monospace”, “11px”, “#000000”, “normal”) に変更すると、次のようになります：

良くも悪くも、このテーマの spacing、font family、sizeを変更しました。しかし、ただ Info ポップアップを変更したい場合はどうすればいいのでしょう？ theme.text をそのままにして、 info ブロックを少し変更するだけで済みます。ついでにボーダーを追加したり、背景を変更できます：

info {
  backgroundColor="#000000"
  borderRadius=theme.borderRadius
  border=util.border('solid', '#555555', 3)
  opacity=0.8
  margin=util.margin(4,0,0,0)
  padding=util.padding(0)
  headerPadding=util.padding(4)
  headerText=util.fontStyle("monospace", "15px", "#ffffff", "bold")
  messagePadding=util.padding(0, 4, 4, 4)
  messageText=util.fontStyle("monospace", "11px", "#ffffff", "normal")
  radiusMinusBorderWidth = util.radiusMinusBorderWidth(border, borderRadius)
}

これで前の例と同じテキスト、spacing があり、さらに border のスタイルが追加されましたが、テーマの他の部分は影響しませんでした：

動作の説明

Theme Builder はサポートされている各ウィジェットの font、color、border、padding、background スタイルを記述するテーマ設定ファイルを一つまたは複数扱います。それぞれの外観を生成しながら、設定ファイルの変数を探して、完了したjarファイルにその値を統合します。

Theme Builder の主な目標の１つは角丸やグラデーションのような CSS3 機能に、完全に対応していないブラウザに対応することでした。Theme Builder はモダンブラウザで生成されたテーマのスクリーンショットを撮って、レガシーブラウザで利用するためにイメージファイルを保存するようにしてそれらを実現しています。

まとめ

開発者にとって、外観が魅力的なアプリケーションを作成するのは大変なことです。それは GXT 3.1 に Theme Builder が含まれたこと、そして新しい Neptune テーマによって簡単になります。Theme Builder は新しく、より良いUXを創造するチャンスを与えます。弊社でもこの機能にとてもワクワクしていますので、皆様の使用体験のコメントを下さい。フィードバックはSencha GXT 3.1 Betaのフォーラムで書いて下さい。機能をより良く改善していきます。