[Flex 4] Tùy biến một layout với Flex 4/Spark

Sự nhàm chán về mặt layout và những vất vả khi phải thay đổi các layout mặc định của Flex có lẽ sẽ chấm dứt từ bản Flex 4 Gumbo này, khi mà Flex 4 đã cho phép bạn thay đổi layout của một container. Theo quan điểm của tôi thì tính năng này của Flex có thể vay mượn từ Java – cụ thể là khả năng tùy biến layout của Java. Các container Spark của Flex 4 không tự layout các component con của nó. Thay vào đó là một thuộc tính layout chỉ định cách mà các component con của nó được layout như thế nào. Bạn có thể chỉ định cho 1 container layout các component con của nó theo các layout có sẵn của Flex 4 như vertical layout, horizontal layout, tile layout … đơn giản chỉ với 3 dòng code

<s:layout>
	<s:VerticalLayout/>
</s:layout>

Tuy nhiên khi ứng dụng của bạn đòi hỏi cần phải có dạng layout “độc” thì đến lúc bạn cần sử dụng khả năng custom – tùy biến layout của Flex. Trong ví dụ đơn giản sau, tôi tạo ra 1 lớp layout tùy biến dạng bậc thang (ladder) và dùng nó để layout 1 danh cách các label.
File main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600"
			   creationComplete="{creationCompleteHandler(event)}"
			   width="100%" height="100%" xmlns:local="*">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		&ltmx:ArrayCollection id="dataSource" />
	</fx:Declarations>

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

			private var _layoutType: Boolean = true;

			private function updateLayoutHandler(event:MouseEvent=null) : void {
				dataGroup.layout = this._layoutType ? new HorizontalLayout() : new LadderLayout();
				this._layoutType = !this._layoutType;
			}

			private function creationCompleteHandler(event:FlexEvent):void {
				for ( var x:int = 0; x < 20; x++ ){
					dataSource.addItem( dataSource.length );
				}
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button label="Click here to change Layout" click="{updateLayoutHandler()}" />
	<s:DataGroup id="dataGroup"
		width="100%" height="100%"
		dataProvider="{ dataSource }"
		itemRenderer="CustomItemRenderer">
		<s:layout>
			<local:LadderLayout  />
		</s:layout>
	</s:DataGroup>
</s:Application>

File LadderLayout.as

Đây là lớp tùy biến kế thừa từ lớp LayoutBase của Flex 4. Thực chất bạn chỉ cần override lại hàm updateDisplayList và cài đặt các dòng code để tự layout theo ý mình. Bạn có thể layout các component theo hình tròn, zíc-zắc hay dạng carousel nổi tiếng – tùy thuộc vào bạn. Ví  dụ này chỉ đơn giản là minh họa cho khả năng tùy biến mà thôi😀

package {
	import mx.core.ILayoutElement;
	import spark.layouts.supportClasses.LayoutBase;

	public class LadderLayout extends LayoutBase {
		public function LadderLayout() {
			super();
		}

		override public function updateDisplayList(w:Number, h:Number):void {
			super.updateDisplayList(w, h);
			if (!target) {
				return;
			}
			var layoutElement:ILayoutElement;
			var count:uint = target.numElements;
			var hgap:uint = 25;
			var vgap:uint = 18;
			for (var i:int = 0; i < count; i++) {
				layoutElement = target.getElementAt(i);
				var xpos:Number = i * hgap ;
				var ypos:Number = i * vgap;
				layoutElement.setLayoutBoundsPosition( xpos, ypos );
			}
		}
	}
}

File CustomItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				autoDrawBackground="true">
	<s:Label text="{data}" fontSize="25"/>
</s:ItemRenderer>

Bạn có thể download toànbộ source code tại đây.  Tất nhiên bạn phải có Flash Builder hoặc Flash Builder Plug-in nếu đã có sẵn Eclipse

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s