LightSwitch HTML Client のスタイル変更(基本編)

LightSwitch の Silverlight クライアントで見た目を変更するには、Shell エクステンションや Theme エクステンション(公開されているもの、または自作)をプロジェクトに適用することで行いました。イコール、「あらかじめ用意された範囲でのみ見た目を変えることができる」と言えます。もちろん「用意された範囲」によっては大きな変更も可能です(が、当然それなりに手間と時間がかかることがあります)。

HTML クライアントでは、見た目(スタイル)を変更するのは大きく分けて3通りのやり方があります。

  1. あらかじめ用意されたテーマを使う
  2. user-customizeation.css を編集する
  3. jQuery Mobile の ThemeRoller を使う

 


あらかじめ用意されたテーマは Preview 2 では2つだけです。

  • dark-theme
  • light-there

 

imageimage

 

本稿ではこの変更方法を紹介します。と言っても、やり方はとっても簡単。


 

  1. ソリューションエクスプローラーの表示を Logical View から File View に変更
    image
  2. Client ノード(プロジェクトの作りによっては別の名前の可能性あり)を展開し、default.htm を開く
  3. “Content/dark-theme.css” へのリンクがあるので、これを “Content/light-theme.css” に変更する(コメントがあるのですぐに分かるはず)
    image
  4. Content サブフォルダーの user-customization.css を開く
  5. “If using light theme” で始まるコメントや “If using light theme” で始まるコメントがあるので、指示に従って編集
    image

以上!簡単です。

フォントを変えたいなど(本稿最初の 2番目の変更方法)の場合も user-customization.css を変更します。ロゴやデータローディングの画像を変えるのも同じ。
Silverlight クライアントではプロパティページで一発で変更できたのに比べると少し面倒ですが、決して難しい変更ではありません。代わりに自由度が高いのがメリット(でも、やり過ぎ注意で)。

これを超える変更をしたい場合には上述の 3番目の方法、jQuery Mobile の ThemeRoller を使用します。これについては改めて。

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

LightSwitch HTML Client のスタイル変更(基本編) への2件のフィードバック

  1. ピンバック: LightSwitch HTML Client のスタイル変更(ThemeRoller 利用編) « 技術との戯れ

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

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中