2012年8月18日土曜日

Eclipse 4 アプリケーションの作成 (5) CSSテーマ

前回、CSSを使ってスタイルを設定する方法を試しましたが、一番前面の UI コンポーネントである Nebula Gallery Widgetvlcj プレーヤーの両方とも、この方法では直接スタイル設定ができなかったため、期待したような効果が得られませんでした。広い領域を占めるギャラリーの背景にグラデーションを設定しようと色々と試行錯誤したのですが思うようになりませんでした。仕方なく、ツールバーにグラデーションを設定してみました。
blue.css
Gallery {
    background-color: #5b99d6;
}
.MPart {
  background-color: #5b99d6;
}
.MPartSashContainer {
  background-color: #4b79bf;
}
.MPart Label {
  background-color: #5b99d6 #2b599f 100% false;
  color: #ffffff;
  font: 'arial' 11px;
  font-weight: bold;
}
.MPart Composite {
  background-color: #2b599f;
}
ToolBar {
  background-color: #2b599f #5b99d6 100% false;
}



red.css
Gallery {
 background-color: #cc7665;
}
.MPart {
  background-color: #cc7665;
}
.MPartSashContainer {
  background-color: #ac5645;
}
.MPart Label {
  background-color: #cc7665 #8c3625 100% false;
  color: #ffffff;
  font: 'arial' 11px;
  font-weight: bold;
}
.MPart Composite {
  background-color: #8c3625;
}
ToolBar {
  background-color: #8c3625 #cc7665 100% false;
}



垂直方向のグラデーションを設定:
blue.css :
Gallery {
    background-color: #5b99d6;
}
.MPart {
  background-color: #5b99d6;
}
.MPartSashContainer {
  background-color: #4b79bf;
}
.MPart Label {
  background-color: #2b599f #5b99d6 100%;
  color: #ffffff;
  font: 'arial' 11px;
  font-weight: bold;
}
.MPart Composite {
  background-color: #2b599f  #5b99d6 100%;
}
ToolBar {
  background-color: #2b599f #5b99d6 100%;
}



CSSを使ったスタイル設定により、気に入ったテーマが作成できれば、それを簡単に他のプロジェクトで再利用できます。ただ、個別のウィジェットに対して、状態(有効、無効、選択など)ごとにスタイルを設定するなど、より複雑な設定を行うには、もっと掘り下げて調べる必要がありそうです。

0 件のコメント: