Sencha CmdでExtJSのテーマパッケージを作成する | Sencha Advent Calendar 2013 – 2日目

この記事は、Sencha Advent Calendar 2013の2日目の記事です。

Sencha Cmdを使ってExtJSのテーマパッケージを作成 → ExtJSアプリケーションに適用するまでをやってみました。
Sencha Docsの説明を元に進めています。

Theming ExtJS

テーマは、neptuneテーマのベースカラーを緑にしたテーマです。

アプリケーション固有のスタイルを作る場合、Sencha Cmdでアプリケーションの雛形を作ると、sassディレクトリができるのでそこにsassファイルを置けばいいのですが、今回はテーマをパッケージとして作ります。
パッケージについては、こちらの記事に詳しく書かれています。
共通化したいテーマやコンポーネントをパッケージングすることで、複数のExtJSアプリケーションに簡単に導入できるようになるんですね。

Sencha Cmdパッケージを理解する

1. ワークスペースを作成する

最初にワークスペースを作ります。ワークスペースはExtJSやSencha Touchのソースフォルダを置く場所です。各アプリケーションもこの場所に置きます。
ワークスペースを作ると、複数のアプリケーションにパッケージを適用するのが楽なので今回は作成していますが、特に必要な手順ではないです。

実行すると以下のようにExtJSのソースが配置されます。

2. ExtJSアプリケーションを作成する

テスト用にExtJSアプリケーションを作成します。

実行すると以下のようにExtJSアプリケーションの雛形が作成されます。

3. パッケージの雛形を作成する

ExtJSアプリケーションに移動して、パッケージの雛形を作成します。

実行すると以下のように、ワークスペース直下のpackagesディレクトリに、my-custom-themeが配置されます。

ディレクトリの内容は以下のようになっています。
Sencha DocsのThemingの意訳です。)

  • package.json: Sencha Cmdが利用するプロパティファイルです。
    • sass: テーマで作成するSASSファイルを置くディレクトリです。以下4つのディレクトリで構成されます。
      • sass/var: 変数定義のファイルを置くディレクトリです。
      • sass/src: コンポーネントのCSSクラス定義やMixins定義などを置くディレクトリです。
      • sass/etc: 共通で利用するMixinsやSASSの関数定義などを置くディレクトリです。
      • sass/example: スライス画像作成のためのディレクトリです。
    • resources: 画像など静的リソースを置くディレクトリです。
    • overrides: ExtJSのコンポーネントクラスのオーバーライドクラスを置くディレクトリです。

※ワークスペースを作っていない場合は、ExtJSアプリケーション直下にpackages/my-custom-themeが配置されます。

4. テーマを作成する

まずは継承するテーマをpackage.jsonに記述します。今回はneptuneテーマを継承するので、ext-theme-neptuneと設定します。

次にSassファイルを作ります。今回はベースカラーを緑にするだけなので、変数のbase-colorを#317040に変更するだけです。

packages/my-custom-theme/sass/var/Component.scssを作成して以下のような内容にします。

ファイル構成はext-theme-baseパッケージを参考にしています。
Sassファイルの構成は、コンポーネントの名前空間とフォルダ構成が一致しているので、変更したいコンポーネントを名前空間と一致するようにファイルを配置してスタイルを作っていけばいいです。
(例えばExt.button.Buttonのスタイルを変更したい場合は、srcディレクトリの下にbuttonディレクトリとButton.scssファイルを作ります。)

この辺は昔に比べると、Sassファイルが整理されていてかなり分かりやすくなっていますね。変更したいコンポーネントがすぐ見つけられるようになってます。

5. テーマをビルドする

Sassファイルを作成したらテーマをビルドします。

ビルドが終わると、theme-space/buildディレクトリにmy-custome-themeディレクトリができます。

6. アプリケーションに作成したテーマを適用する

sencha.cfgに、作成したテーマを設定します。

設定したら以下のコマンドを実行します。

実行後、MyAppをブラウザで表示すると作成したテーマが、今回の場合ベースカラーが緑になった画面が表示されるはずです。

変更を監視して自動でビルドする

毎回、sencha package buildして画面を確認するのは面倒ですが、Sencha CmdではJSファイルやCSSファイルの変更状態を監視して、自動でビルドしてくれるコマンドが用意されています。

ExtJSアプリケーションに移動して、sencha app watchと実行すれば監視されます。

利用しているテーマパッケージとExtJSアプリケーションの両方を監視して、自動ビルドが実行されるので便利です。
JSファイルの変更でもビルドが実行されますが、これは利用しているコンポーネントのSassファイルを自動抽出してビルドするからだと思います。(たぶん)

参考リンク