１つ前の投稿を書いてから「Specific component with style name」はいったい・・・と思って、adobe labsのFlex 3 フォーラムで聞いてみたところ、Flex Builder TeamのGregさんから返答がありました。
The “Specific component with style name” acts as a hint to CSS Design View and serves to document the purpose of the style. However, Flex itself ignores the component name portion of the name.
So, if you have Label.myLabel{} in a css file and open that file in CSS Design View, you will see a preview of that style with a Label as the sample component. If you have just myLabel{}, CSS Design View will not know what to use as the sample component, so you would need to select the sample component from the combo box at the top of CSS Design View.
In the MXML source code, Flex considers Label.myLabel and myLabel to be the same thing. This is a limitation of Flex and the MXML compiler. It ignores all characters before the dot in the style name.
So, the Label.myLabel syntax is only useful in Flex Builder CSS Design View. It saves you from having to select Label as the sample component. We also consider it to be a good practice because it makes it clear from the name that the style is intended for use with a Label and not some other kinds of components.
– Greg Dow
– Adobe Flex Builder Team
TypeセレクタとClassセレクタがくっついたLabel.myLabel{…….} みたいなのはCSS Design Viewのみで意味ある書き方で、プレビューするコンポーネントを指定できるだけという事みたいです。
あと、スタイル名でドットの前はFlex・MXMLコンパイラで無視されるって書いてますね。
Related posts
Flex Builder 3 (Beta2)のCSS Design Viewがなかなかどうして良さそうな感じです。
Flex 3:Feature IntroductionsのCSS Design View (Updated for Beta 2)にビデオがあるので、それを見ればだいたいのCSS Design Viewでできることは分かると思います。
ひとことで言うとFlex Builder内でFlex Style Explorerみたいなことができるようになった感じです。
CSSファイルを新規作成して、CSSデザインビューに切り替えると、”New Style”ボタンがあって、そこからコンポーネント用のCSS定義を作成できたり、開いているCSSファイルに含まれるCSS定義からデザインビューに表示するものをプルダウンで選択できたりします。
で、それをCSSデザインビューのプロパティパネルからスタイル調整できるのです。
さらにはコンポーネントに含まれる別の部分のCSS定義に進める（画像のDropdown Listの”Edit”ボタン）仕様になっていて、なかなか考えられている印象です。
MXMLのデザインビューでも、コンポーネントにインラインでスタイル設定した後に、プロパティパネルから”Convert to CSS”ボタンでCSSファイルに移したり、CSSデザインビューに直接移動したりすることができます。
しかもコンポーネントのスタイルをインラインで再編集して、再び”Convert to CSS”ボタンを押すと、適用されているCSS定義の内容を上書きしてくれるなど、なかなかやります。
その”Convert to CSS”ボタンやCSSデザインビューの”New Style”からは、
- All components (global)
globalセレクタ（ global{…….} ）
コンポーネント・スタイル名指定なし
既にglobalセレクタがある場合は選択してもOKできない
その後、デザインビューでプレビューするコンポーネントを選択する。（適宜変更可）
- All components with style name
Classセレクタ（ .myStyle{…….} ）
スタイル名を指定する
既に同じ名前のClassセレクタがある場合は選択してもOKできない
その後、デザインビューでプレビューするコンポーネントを選択する（適宜変更可）
- Specific component
Typeセレクタ（ Button{…….} ）
コンポーネントを選択する
既に同じコンポーネントのTypeセレクタがある場合は選択してもOKできない
- Specific component with style name
Typeセレクタ.Classセレクタ？（Button.myButton{…….} ）
コンポーネント・スタイル名を指定する
既にTypeセレクタ.Classセレクタの名前の組み合わせがある場合は選択してもOKできない
の４つのセレクタのタイプを選択することができます。
その時、MXMLデザインビューから”Convert to CSS”ボタンを押した場合には、そのコンポーネントにstyleNameが設定されます。
で、４つ目のTypeセレクタとClassセレクタがくっついたSpecific component with style nameが良く分かりません。styleNameではClassセレクタ部分のみが使用されるので（styleName=”myButton”）、Classセレクタと区別がつかないし、また既に指定してあるClassセレクタ名（ .myButton{……} ）とバッティングしても作成時にOKボタンが押せてしまいます。
ついでにClassセレクタはMXMLのデザインビューでプロパティパネルのStyleのコンボボックスに表示されるけど、このTypeセレクタとClassセレクタが繋がったやつは表示されないのです。
ただスタイル作成時にプレビューできるコンポーネントを限定しているだけなんですかね・・・
追記：Specific component with style nameについてFlex3のフォーラムで回答をもらいました。
[Flex] CSS Design Viewが良い感じ。(2)
Related posts