TECH Matari

一つ前の[AS3.0]Yahoo ASTRA LayoutContainersを使ってフォント一覧パネルを作るに、フォントサイズを変更するためのスライダーを付け、ソース内の不要なコードを消した物を作りました。

直リンはこちら。font_pane2.swf

ドキュメントクラス(fontPane.as)と、ヘッダ部分(fontHeader.as)と、フォント一覧(fontMenu.as)と、プレビュー部分(fontRightArea.as)にて構成されているけれど、ポイントはBorderPaneを継承したドキュメントクラスなので、その部分のソースのみ掲載。（全ソースはページ最下部にてダウンロードできます）

[as]
package {

import fl.controls.ScrollPolicy;
import fl.events.*;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.events.Event;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

// Yahoo Astra
import com.yahoo.astra.fl.containers.BorderPane;
import com.yahoo.astra.layout.modes.BorderConstraints;

// コンテンツ
import fontHeader;
import fontMenu;
import fontRightArea;

/**
* …
* @author IRONHEARTS Inc. Takuya Ando
*/
public class fontPane extends BorderPane{

private var _config:Array;

private var _header = new fontHeader;
private var _leftMenu = new fontMenu;
private var _rightArea = new fontRightArea;

public function fontPane() {

super();

if (this.stage) {

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, stageResizeHandler, false, 0, true);
}

width = stage.stageWidth;
height = stage.stageHeight;

paddingLeft = 5;
paddingRight = 5;
paddingTop = 5;
paddingBottom = 5;

// 縦方向のアイテムの間隔？ 0 にするとギチギチになる
verticalGap = 5;

// 横方向の間隔？
horizontalGap = 5;

_config = [
{target:_header, constraint:BorderConstraints.TOP },
{target:_leftMenu, constraint:BorderConstraints.LEFT },
{target:_rightArea,constraint:BorderConstraints.CENTER}
];

configuration = _config;

_leftMenu.addEventListener(Event.CHANGE, onListChange);

}

/**
* フォント一覧のリストを変更した時の処理
* @param e
*/
private function onListChange(e:Event):void {

var fontName:String = _leftMenu.getFontName();

// フォントのプレビュー
_rightArea.preview(fontName);
}

/**
* ステージのリサイズ処理
* @param e
*/
private function stageResizeHandler(e:Event):void {
width = stage.stageWidth;
height = stage.stageHeight;
draw();
}
}
}[/as]

_configの部分がポイントで、target:(DisplayObject)の配列を、TOPとかLEFTとかCENTERとかで渡してやると、ある程度自動的にレイアウトして配置してくれるって感じです。

ヘッダ部分は、HBoxPaneを使っていて、HBoxPaneは、要するに横方向に子要素を配置してくれるもので、フォントのプレビュー部分に使ってるのが、VBoxPane。VBoxPaneは、縦方向に子要素を配置するもので、今回は、

[ベースのサンプル文字(TextArea)]
[スライダー(Slider)]
[フォントを反映した文字(TextField)]

を配置してます。配置する際に、同じくconfiguration に配列として渡していて、x,y座標は一切指定してません。
スクリプトでインターフェースを作る際、配置の座標が面倒・難しい要素の一つだと思うけど、このBorderPaneやHBoxPane,VBoxPaneを使えば、配置が楽になります。

fontpane.zip

だれかYahooのLayoutContainers使ってる人いない～？

Popularity: 14% [?]

written by ANN