LightSwitch HTML Client のスタイル変更(ThemeRoller 利用編)

こちらの記事 で LightSwitch HTML クライアントのスタイル変更の基本編として、自動生成される dark-theme と light-theme の切り替え方法について書きました。これだけで最低限のスタイル変更はできますが、あまりにもバリエーションに乏しいです・・・。
user-customization.css を編集すればそれなりのカスタマイズが可能ですが、それもなかなか面倒です。

jQuery Mobile の ThemeRoller を使えば、簡単に綺麗なスタイルに変更できます。

 

  1. jQuery Mobile のバージョンの確認
    default.htm を開いて jQuery Mobile のバージョンを確認します。HTML Client Preview 2 だと 1.1.1 になっているはずですが、今後変更される可能性があります。念のため確認しておきます。このバージョンはあとで ThemeRoller で指定します。

    SNAGHTML49b0a4aa

  2. 現在利用しているテーマファイルを開く
    ここまでの手順の範囲であれば dark-theme か light-theme のどちらかだと思いますが、テーマ変更のベースにするテーマファイルを開きます。もちろんそれ以外のファイルを使っている時は適切な名前を指定してください。
  3. ThemeRoller を表示する
    jQuery Mobile の ThemeRoller をブラウザーで開きます。あとの手順でファイル全体の内容を使うので、今のうちにクリップボードにコピーしておくといいです。
  4. バージョンを合わせる
    先ほど確認した、ソリューションで使っている jQuery Mobile のバージョンを選択します。

    SNAGHTML49b81519

  5. 使用しているテーマをインポートする
    前の手順で開いた、ソリューションで使っているテーマファイルを ThemeRoller にインポートします。内容全体をコピー済みであればそれを、まだならばここでクリップボードにコピーしてから、インポートします。

    image

  6. テーマの変更
    ご自由にどうぞ。 

    image

  7. 作成したテーマをダウンロード
    作成したテーマに名前を付けてダウンロードします。ZIPで圧縮された状態でダウンロードされるので、ローカルに保存したら解凍してください。

    image

  8. ソリューションに追加
    解凍したテーマファイルをソリューションに追加します。追加先は Content フォルダーです。

    image

  9. index.htm を変更
    index.htm のテーマファイルを指定している箇所を今回作成したファイル名に変更します。

    SNAGHTML4a74e18f

以上でスタイル変更は完了です。アプリケーションを実行してみると ThemeRoller で作成したテーマに差し替わっているのが分かります。

image

Silverlight クライアントに比べて自由度の高いカスタマイズができますね。Webアプリ開発の一つの流れになってくれるといいのにと思います。

広告
カテゴリー: LightSwitch タグ: , パーマリンク

LightSwitch HTML Client のスタイル変更(ThemeRoller 利用編) への1件のフィードバック

  1. ピンバック: LightSwitch HTML Client アプリ開発(超基本) – ステップバイステップ « 技術との戯れ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中