方眼紙状のアプリケーションを作っているときに
Flexライブラリのmx:Buttonのwidthの指定に欠陥があるのではないかと思いました。
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="test2"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:Button width="500" height="500" />
</s:Application>
これだと大きな四角いボタンができます。
インラインCSSだとwidthを受け付けるようですね。
しかし外部からのCSSにすると
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="test2"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Button {
width: 500;
}
</fx:Style>
<mx:Button />
</s:Application>
これだと幅は広がりません。
次に
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="test2"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Button {
fontSize: 500;
width: 500;
}
</fx:Style>
<mx:Button label="test" />
</s:Application>
はテキストの幅と同じだけボタンの幅を広げられます。
他にも、ActionScriptからButtonのidを指定してid.setStyle("width", 500);
なども試しましたが、フォントサイズは変更できても幅は変更できません。
Flexのドキュメントにはmx:Buttonのプロパティとしてwidthもheightも登録されていないため、インラインCSSでwidthが指定できてしまうのも謎です。
mxmlのButtonの幅はフォントやアイコンなどの内容物の大きさに依存して決定するようにしか実装されていないのだなと思いました。
しかし、そうなるとインラインCSSでwidthが変更できることとつじつまが合わないような気がして、やっぱり外部からのwidthの変更が上書きされないバグなのかなあと悩んでおります。
外部CSSで上書きができれば動的にボタン幅を変更できる方眼紙状の機能が作れてとても助かるのですが、何かアドバイスなど頂けませんでしょうか・・・?
後日談
stack overflowで質問したところ、Flash開発ではCSSプロパティとMXMLプロパティが存在し、インラインCSSにはその両方が統合されているらしいです。CSSにx,yプロパティを書いても全く意味がないのはx,yプロパティはMXMLに記述するべきだったからみたいですね。