		<s:RichText x="200"
					whiteSpaceCollapse="collapse"
					y="200">
			<s:content><s:p><s:span>ここは普通です。</s:span></s:p><s:p><s:span fontSize="20">こっちはボールドです</s:span></s:p></s:content>
		</s:RichText>

このとき、whiteSpaceCollapseをpreserveにしている場合、気をつけないと意図しない表示結果となってしまう場合がありますので注意が必要です。

上記の表示結果は下記のようになりますが、

下記のコードは

		<s:RichText x="200"
					whiteSpaceCollapse="collapse"
					y="200">
			<s:content>
				<s:p>
					<s:span>ここは普通です。</s:span>
				</s:p>
				<s:p>
					<s:span fontSize="20">こっちはボールドです</s:span>
				</s:p>
			</s:content>
		</s:RichText>

以下のように表示されます。

whiteSpaceCollapseは、空白を圧縮または保持するのでこういった事がおこりえます。
うっかりファイルのコード全体をフォーマットすると、あらぬ場所に表示されたりする羽目になったりします。
そんな時はwhiteSpaceCollapseを確かめてみるといいでしょう。

2011-09-08

Flexで動的にCSSやスキンを変更する

AIR

swfにしたCSSファイルをロードしてごそっと変更するやり方もありますが、まずはプリミティブに変更するやつを。

CSS


	<fx:Script>
		<![CDATA[
                
                [Bindable]
                private var buttonColor:uint=0xB8B8B8;
                [Bindable]
                private var mySize:Number = 20;
                
		]]>
	</fx:Script>
<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Button {
			fontSize: PropertyReference("mySize");
			color: PropertyReference("buttonColor");
		} 
</fx:Style>

スキンをコードベースで*1

	<fx:Script>
		<![CDATA[
                //省略.....................................................
                private function parentElement_creationCompleteHandler(event:FlexEvent):void{
                       myButton.setStyle("skinClass",myButtonSkin);
                }

		]]>
	</fx:Script>
<s:Button id="myButton" label="button"/>

*1:スキンもCSSであてられますがそれはおいといて

2011-09-06

StateでincludeInを使っているときは生成タイミングを意識する

AIR

Flex4からはStateが簡単に書けるようになったのもあって、よく使っているのではないでしょうか。
で、状態に応じてボタンの表示、非表示を切り替えたりといった事をよくStateで行うのではないかと思います。
この際にincludeInを使う方法と、個別のプロパティにstateを記述する方法がありますが、コンポーネントの生成タイミングが変わったりしますので、注意が必要です。

具体例。
何かデータを新規保存する際は、まだデータがないので、削除ボタンを表示させず、データが既にあり、修正、削除を行える状態時には削除ボタンを表示する、というような場合です。
設定に合わせて、削除ボタンの文字色を変更も親コンポーネントが生成されたタイミングで行います。

includeIn版

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

//省略....................................................................

			protected function component_creationCompleteHandler(event:FlexEvent):void {
				if(doColorSetting=="black"){
					deleteButton.setStyle("color",0x000000);
				}else {
					deleteButton.setStyle("color",0xFFFFFF);
				}
				this.currentState="newSetting";
			}

//省略.....................................................................
		]]>
	</fx:Script>
	<s:states>
		<s:State name="newSetting"/>
		<s:State name="modify"/>
	</s:states>
//省略.....................................................................
	<s:Button id="saveButton"
			  label.newSetting="作成"
			  label.modify="修正"/>
	<s:Button id="deleteButton"
			  includeIn="modify"
			  label="削除"/>
//省略.....................................................................

includeInで制御している場合、親コンポーネントのcreationCompleteの段階では、 stateのmodifyに切り替わっていませんので、 deleteButtonコンポーネントは生成されていません。したがって、setStyleの所で、deleteButtonがnullなのでエラーになります。

プロパティにstateを記述した場合

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

//省略....................................................................

			protected function component_creationCompleteHandler(event:FlexEvent):void {
				if(doColorSetting=="black"){
					deleteButton.setStyle("color",0x000000);
				}else {
					deleteButton.setStyle("color",0xFFFFFF);
				}
				this.currentState="newSetting";
			}

//省略.....................................................................
		]]>
	</fx:Script>
	<s:states>
		<s:State name="newSetting"/>
		<s:State name="modify"/>
	</s:states>
//省略.....................................................................
	<s:Button id="saveButton"
			  label.newSetting="作成"
			  label.modify="修正"/>
	<s:Button id="deleteButton"
			  visible.newSetting="false"
			  visible.modify="true"
			  label="削除"/>
//省略.....................................................................

この場合はvisibleにstateを記述して制御しています。
deleteButtonは親コンポーネントのcreationCompleteのタイミングでは既に生成されていますのでエラーにはなりません。

2011-09-06

Flash Catalystから固定で渡されたスキンをサイズ変更可能にする

AIR

固定サイズで渡されたスキンをサイズ可変なスキンにするには、Flash Builder側で、スキンコンポーネント内の該当箇所にtop,left,right,bottomを適切に設定してあげれば、可変サイズ対応のスキンができあがります。ただし、画像素材を当てているようなスキンを考えなしにサイズ変更可能なように変更すると、ナインスライス等とは違いますので、単純に画像が引き延ばされ、間延びして間抜けな事になってしまったりするので注意が必要です。

文章の説明だけだとわかりづらいと思いますので、ボタンのスキンを例にとってみます。
適当にプロジェクトを作成してボタンをおいて・・・

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|BorderContainer { borderColor:#000000; borderAlpha:1; cornerRadius:10; borderWeight:1;
		} </fx:Style>
	<s:BorderContainer width="200"
					   height="200">
		<s:layout>
			<s:HorizontalLayout paddingLeft="15"
								paddingRight="15"
								paddingTop="15"
								paddingBottom="15"/>
		</s:layout>
		<s:Button label="Click Me" />
	</s:BorderContainer>
</s:WindowedApplication>

ボタンのスキンを作成します

スキンを適当に記述します。
ステートに対応してないので非常にアレですがサイズ可変に関係ないのではしょります。

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:mx="library://ns.adobe.com/flex/mx"
		xmlns:s="library://ns.adobe.com/flex/spark"
		minWidth="21"
		minHeight="21">
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<s:Rect
			width="69"
			height="20"
			radiusX="2"
			radiusY="2">
		<s:fill>
			<s:SolidColor color="#ed6f6f"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="0x000000"
								weight="1"/>
		</s:stroke>
	</s:Rect>
	<s:Label id="labelDisplay"
			 horizontalCenter="0"
			 verticalCenter="1"
			 >
	</s:Label>
</s:Skin>

実行するとこんな感じ

固定サイズなので、この状態でラベルの文字数を増やすと残念な感じに

可変にしてみます。ついでにラベルの余白も調整します。

//.........................................................

	<s:Rect left="0"
			right="0"
			top="0"
			bottom="0"
			height="20"
			radiusX="2"
			radiusY="2">
		<s:fill>
			<s:SolidColor color="#ed6f6f"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="0x000000"
								weight="1"/>
		</s:stroke>
	</s:Rect>
	<s:Label id="labelDisplay"
			 horizontalCenter="0"
			 verticalCenter="1"
			 left="10"
			 right="10"
			 top="2"
			 bottom="2">
	</s:Label>

こんな感じで

実際には各ステート毎のサイズを調整したりとか、いくつものスキンが組み合わさったような複雑なものになればさらに弄る箇所が増えますが基本は変わりません。
で、実はスキンを適当に新規作成して、そのときに既存のスキンコンポーネントのコードをコピーしてみてみるというのが、参考になって一番わかりやすかったりします。

例えば標準のボタンとか、普通に文字数にあわせて伸縮するじゃないですか。フレームワークのコードを参考にするのが一番手っ取り早いと思います。

なお、Adobe Flash Catalyst5.5ではサイズ変更に対応したコンポーネントを作成出来るらしいのですが試してないのでわからないです。

仙台 Ruby Vim JavaScript フリーランスプログラマ

片平堂のブログ

第11回Sendai.rb＆朝活にて

第8回Sendai.rb＆朝活に参加

Aizu.js v0.0.1に参加してきた

RichTextやRichEditableTextでのwhiteSpaceCollapseに気をつける

Flexで動的にCSSやスキンを変更する

StateでincludeInを使っているときは生成タイミングを意識する

Flash Catalystから固定で渡されたスキンをサイズ変更可能にする