顯示具有 Flex4 標籤的文章。 顯示所有文章
顯示具有 Flex4 標籤的文章。 顯示所有文章

2012年1月31日 星期二

Flex Sort


這是用自訂的比對規則

private function getSort():Sort
{
  var sort:Sort = new Sort();
  var sortField:SortField = new SortField();
      sortField.compareFunction =
  function(firstItem:Object , secondItem:Object):int
  {
    //return 0 表示 兩者相等 位置不變
    //return -1 表示 firstItem 在 secondItem之前
    //return 1 表示 firstItem 在 secondItem之後

  }
      sort.fields = [sortField];
  return sort;
}


這是使用預設的比對規則

private function getSort():Sort
{
  var sort:Sort = new Sort();
  var sortDateField:SortField = new SortField("要排序的屬性A",false);
  var sortContentField:SortField = new SortField("要排序的屬性B" , false);
      sort.fields = [sortDateField , sortContentField];
  return sort;
}

Sort最後會給予ArrayCollection使用,ArrayCollection有一個sort屬性可以設定。

2011年12月27日 星期二

Flex DataGrid 複製至剪貼簿 CSV格式


<?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="start(event)"
>
<fx:Script>
<![CDATA[
import flash.desktop.Clipboard;
import flash.desktop.ClipboardFormats;

import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.utils.UIDUtil;

protected function start(event:FlexEvent):void
{
  var provider:ArrayCollection = new ArrayCollection();
  for(var i:int=0 ; i < 10 ; i++)
  {
    provider.addItem( {id:UIDUtil.createUID() , index:i , value:i + "號"});
  }
  grid.dataProvider = provider;
}

protected function copy(event:MouseEvent):void
{
  var csv:String = "";
  var item:Object;
  csv = "ID" + "\t" + "Index" + "\t" + "Value" + "\n";
  for(var i:int ; i < grid.dataProvider.length ; i++)
  {
    item = grid.dataProvider.getItemAt(i);
    csv += item['id'] + '\t' + item['index'] + '\t' + item['value'] + '\n';
  }

//寫入剪貼簿
Clipboard.generalClipboard.clear();
Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT , csv , false);
}

]]>
</fx:Script>
<s:VGroup>
<s:DataGrid id="grid"
  verticalScrollPolicy="off"
  variableRowHeight="false"
  editable="false"
  selectionMode="singleRow"
  alternatingRowColors="{new Array(0xF0F0F0, 0xFFFFFF)}">
  <s:columns>
   <s:ArrayList>
    <s:GridColumn dataField="id" headerText="ID" resizable="false"    minWidth="300"/>
    <s:GridColumn dataField="index" headerText="Index" resizable="false"   minWidth="80"/>
    <s:GridColumn dataField="value" headerText="Value" resizable="false" minWidth="80"/>
   </s:ArrayList>
  </s:columns>
</s:DataGrid>

<s:Button label="複製到剪貼簿" click="copy(event)"/>
</s:VGroup>
</s:Application>



















如此可以簡單的貼到execel中。

CSV格式參考文件

2011年11月11日 星期五

Flex4 TIleLayout 在width 100% 下出現的奇怪的row


<?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">
<fx:Script>
<![CDATA[ 
protected function addItem(event:MouseEvent):void
{ 
var item:Button = new Button();
item.label = String(testContainer.numElements);
item.width = 50;
item.height = 50;
testContainer.addElement(item); 
} 

protected function clearAll(event:MouseEvent):void
{ 
testContainer.removeAllElements(); 
}

protected function clearLastItem(event:MouseEvent):void
{
if(testContainer.numElements > 0)
{
testContainer.removeElementAt(testContainer.numElements - 1); 
} 
} 
]]>
</fx:Script>
<s:controlBarContent>
<s:Button click="addItem(event)" label="add item"/>
<s:Button click="clearLastItem(event)" label="clear last "/>
<s:Button click="clearAll(event)" label="clearAll"/>
</s:controlBarContent>


<s:SkinnableContainer id="testContainer" 
backgroundColor="0xcccccc" 
alpha="0.8" 
width="100%" 
>

<s:layout> 
<s:TileLayout id="tileLayout" 
clipAndEnableScrolling="true" 
paddingLeft="5"
paddingRight="5"
orientation="rows" 
/> 
</s:layout> 
</s:SkinnableContainer> 
</s:Application>


一個解決的方式是繼承TileLayout並override updateDisplayList 如下:
override public function updateDisplayList(unscaledWidth:Number , unscaledHeight:Number):void
  {
   super.updateDisplayList(unscaledWidth , unscaledHeight);
   (target as GroupBase).explicitHeight = Math.ceil(rowCount * (rowHeight + verticalGap) - verticalGap);
  }


詳細內容請參考:http://forums.adobe.com/thread/565055

簡單的虛線Components


這是一個簡單的虛線元件,還未做記憶體管理效率化以及點的大小動態更改處理。
<?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" xmlns:view="ut.view.*">
 <s:VGroup width="100%" paddingTop="5" paddingLeft="5" paddingRight="5">
  <view:DottedLine width="100%" dotteLineMode="line" color="0x0000FF"/>
  <view:DottedLine width="100%" dotteLineMode="dot" color="0x0000FF"/>
  <view:DottedLine width="100" dotteLineMode="line" color="0xFF0000"/>
  <view:DottedLine width="100" dotteLineMode="dot" color="0xFF0000"/> 
 
  <s:HGroup>
   <view:DottedLine width="100" dotteLineMode="dot" color="0xFF0000" rotation="90"/>
   <view:DottedLine width="100" dotteLineMode="line" color="0xFF0000" rotation="90"/>
   <view:DottedLine width="100" dotteLineMode="line" color="0xFF0000" rotation="90"/>
   <view:DottedLine width="100"  dotteLineMode="dot" color="0xFF0000" rotation="90"/>
  </s:HGroup>
 </s:VGroup>
</s:Application>

package ut.view
{
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.display.DisplayObject;
 import flash.display.Graphics;
 import flash.display.Shape;
 import flash.utils.getTimer;
 
 import mx.graphics.BitmapFillMode;
 
 import spark.primitives.BitmapImage;
 
 import ut.enum.DottedLineMode;
 
 public class DottedLine extends BitmapImage
 {  
  public function DottedLine(color:uint = 0xD4D4D4 , dotteLineMode:String=DottedLineMode.DOT)
  {  
   this.color = color
   this.dotteLineMode = dotteLineMode;
    
  }  
    
  private var _color:uint;
  /**虛線的顏色*/
  public function get color():uint
  {
   return _color;
  }
  public function set color(value:uint):void
  { 
   if(_color != value)
   {
    _color = value;
    changeSource();
   }
  }
  
  
  private var _dotteLineMode:String;
  /**選則點或線的虛線,可由DottedLineMode選擇輸入參數*/ 
  [Inspectable(category="General", enumeration="dot,line", defaultValue="stretch")]
  public function get dotteLineMode():String 
  {
   return  _dotteLineMode;
  }  
  public function set dotteLineMode(dottedLineMode:String):void
  {  
   if(dottedLineMode == DottedLineMode.DOT || dottedLineMode == DottedLineMode.LINE)
   {  
    if(_dotteLineMode != dottedLineMode)
    {
     _dotteLineMode = dottedLineMode; 
     changeSource();
    }
   }
  }  
 
  
  /**bitmapImage所要填入source*/
  private function changeSource():void
  {
   switch(dotteLineMode)
   {
    case DottedLineMode.DOT:
     setSource(createDotDotted);
     break;
    case DottedLineMode.LINE:
     setSource(createLineDotteed);
     break;
    default:
     
   }
  }
  
  /**預設為點狀態的虛線*/
  private function setSource(createMethod:Function):void
  { 
   this.source = null;
   this.source = getBitmap(createMethod(color));
   this.fillMode = BitmapFillMode.REPEAT;
  }  
  
 
  /**將畫好的圖轉換成bitmap  (displayObject to bitmap)*/
  private function getBitmap(target:DisplayObject):Bitmap
  {
   var _bitMapData:BitmapData = new BitmapData(target.width , target.height , true  , 0x000000);
    _bitMapData.draw(target);   
   var _bitMap:Bitmap = new Bitmap(_bitMapData);
   return _bitMap;   
  }
  
  
  /**畫兩個圓依照color,其中一個是看不見,如此bitmap在repeat時方有間隔*/
  protected function createDotDotted(color:uint=0xD4D4D4 ,  ellipseX:Number=0 , ellipseY:Number=0 , ellipseWidth:Number=2 , ellipseHeight:Number=2):DisplayObject
  {   
   var grapgics:Shape = new Shape();
    //first ellipse alpha is 1
    grapgics.graphics.beginFill(color);
    grapgics.graphics.drawEllipse(ellipseX , ellipseY , ellipseWidth , ellipseHeight);     
    //second ellipse alpha is 0 
    grapgics.graphics.beginFill(0xFFFFFF , 0);
    grapgics.graphics.drawEllipse(ellipseX+ellipseWidth , ellipseY , ellipseWidth , ellipseHeight);
    //end fill
    grapgics.graphics.endFill();
   return grapgics;
  }
  
  /**畫兩個線段*/
  protected function createLineDotteed(color:uint=0xD4D4D4 ,  rectX:Number=0 , rectY:Number=0 , rectWidth:Number=3 , rectHeight:Number=1):DisplayObject
  {
   var grapgics:Shape = new Shape();
   //first line
   grapgics.graphics.beginFill(color);
   grapgics.graphics.drawRect(rectX , rectY , rectWidth , rectHeight);   
   //second line
   grapgics.graphics.beginFill(0xFFFFFF , 0);
   grapgics.graphics.drawRect( rectX + rectWidth , rectY , rectWidth , rectHeight);
   //end fill 
   grapgics.graphics.endFill();
   return grapgics; 
  }
 }
}


package ut.enum
{
 public class DottedLineMode
 {
  static public const DOT:String =  "dot";
  static public const LINE:String = "line";
  public function DottedLineMode()
  {
  }
 }
}

Flex4 Rect and Style Metadata


有時候Layout時只是想用到border或是只想要用到BackgroundColor的時候可以考慮在Group中使用Rect,並加上Style Medatata就可以達到而不用使用到SkinnableContner或是BorderContainer,用法如下。

<?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"    
      xmlns:itemrenderers="itemrenderers.*"
      >
 <fx:Style source="css/Test.css"/>
 <s:HGroup paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">  
  <itemrenderers:Rect_Style_BackgroundColor width="200" height="200"/>
  <itemrenderers:Rect_Style_Border width="200" height="200"/>  
 </s:HGroup> 
</s:Application>


<?xml version="1.0" encoding="utf-8"?>
<s:Group 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:Metadata>
  [Style(name="backgroundColors", inherit="no", type="uint" ,  theme="spark")]
 </fx:Metadata>
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   override public function styleChanged(styleProp:String):void
   {
    super.styleChanged(styleProp);
    if(styleProp == "backgroundColors")
    {
     invalidateDisplayList();
    }
   }
   
   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    myBackgroundColor.color = getStyle("backgroundColors");
   }
    
  ]]>
 </fx:Script>
 <s:Rect left="0" right="0" top="0" bottom="0">
  <s:fill>
   <s:SolidColor id="myBackgroundColor" color="0x00ff00"/>
  </s:fill>
 </s:Rect>
</s:Group>


<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%"
   >
 <fx:Metadata>
  [Style(name="borders", inherit="no", type="uint")]
 </fx:Metadata>
 
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   override public function styleChanged(styleProp:String):void
   {
    super.styleChanged(styleProp);
    if(styleProp == "borders")
    {
     invalidateDisplayList();
    }
   }
   
   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    myBorder.color = getStyle("borders");
   }
   
  ]]>
 </fx:Script> 
 <s:Rect 
   left="0" right="0" top="0" bottom="0"
   radiusX="5" radiusY="5">
  <s:stroke>   
   <s:SolidColorStroke id="myBorder"  weight="2" color="0x00ff00"/>
  </s:stroke>
 </s:Rect> 
</s:Group>


/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace itemrenderers "itemrenderers.*";
@namespace spark "spark.skins.spark.*";


itemrenderers|Rect_Style_BackgroundColor
{
 backgroundColors:#f63b5e;
}

itemrenderers|Rect_Style_Border
{
 borders:#3e95ef;
}

2011年5月7日 星期六

Flex4 Application(一):SystemManager、SystemManager.application、 topLevelApplication之間關係

Flex 4中的一個變更:
Flex3中Application裡的屬性application這個屬性在Flex4中被拿掉了,改由 FlexGlobalse這各類管理,由FlexGlobalse的topLevelApplication屬性代替原本的appliction,topLevelApplication這是一個靜態的屬性。

什麼是topLevelApplication?
的ApplicationDomain中運行的第一個應用程序是頂層應用程序在頂層應用程序的構造函數中將此屬性設置為對頂層應用程序的引用每個 ApplicationDomain中都有其自己的topLevelApplication,這個topLevelApplication通常就是一支SWF,在Flex中這支SWF通常會是一個Application的實體,在一個ApplicationDomain中可能會有多個SWF存在,但只會有一個負責管理所有應用程式的最上層Application,這個管理者就是topLevelApplication。


adobe技術手冊中的圖示如下:

















範例:在一SWF中利用Loader讀取另一支SWF,在loader()第二個參數使用預設null。
請參考LoaderI與LoaderContext
  • loader()第二參數為null時,將使用Loader所在的Application的ApplicationDomain。
程式碼Hero_Test.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="1280" minHeight="780"
  applicationComplete="application1_applicationCompleteHandler(event)"
  pageTitle="Hero_Test"
  >
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.managers.SystemManager;

 private var _loader:Loader;
 private var _request:URLRequest;
 private var _systemManager:SystemManager;
 protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
 initLoader();
 deployLoader();
 startLoader();
 btn.addEventListener(MouseEvent.MOUSE_DOWN , onDown);
}
 private function initLoader():void
{
  _loader = new Loader();
  _loader.contentLoaderInfo.addEventListener(Event.COMPLETE , onLoaderComplete);
  _request = new URLRequest('./swf/ByLoaderSWF.swf');
}
private function deployLoader():void
{
  uic.addChild(_loader);
  this.box.addElement(uic);
}
private function startLoader():void
{
  _loader.load(_request);
}
private function onLoaderComplete(e:Event):void
{
 _systemManager = _loader.content as SystemManager;
 changedColorBtn.addEventListener(MouseEvent.MOUSE_DOWN , onChangeColor);
  uic.width = _loader.content.width;
  uic.height= _loader.content.height;
}

private function onChangeColor(e:MouseEvent):void
{
 var color:uint = Math.round(Math.random()* 0xFFFFFF);
  _systemManager.application['setByLoaderSWFbackgroud'](color);
  info.text = color.toString();
}

private function onDown(e:MouseEvent):void
{
 var o:Object = FlexGlobals.topLevelApplication;
 info.text ="";
 info.text = "this = " + this + '\n\n';
  info.text += 'topLevelApplication = ' + o.toString()+'\n\n';
  info.text += 'systemManager = ' + this.systemManager + '\n\n';
}

]]>
</fx:Script>
<s:HGroup id="box">
<s:VGroup>
<s:Panel title="Hero_Test">
<s:TextArea id="info" editable="false" width="420"/>
</s:Panel>
<s:Label text="print Hero_Test資訊"/>
<s:Button id="btn" label="print"/>
<s:Button id="changedColorBtn" label="changeColor"/>
</s:VGroup>
<mx:UIComponent id="uic"/>
</s:HGroup>
</s:Application>


程式碼ByLoaderSWF.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="600" minHeight="200"
  applicationComplete="application1_applicationCompleteHandler(event)"
  pageTitle="ByLoaderSWF"
  backgroundColor="0xA1FF8F"
  >
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.ProgressBar;
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import mx.managers.SystemManager;
import mx.preloaders.DownloadProgressBar;

protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
 Security.allowDomain("*");
 btn.addEventListener(MouseEvent.MOUSE_DOWN , onDown);
}
private function onDown(e:MouseEvent):void
{
 var _topLevelApplication:Object = FlexGlobals.topLevelApplication;
 info.text ="";
 info.text = "this = " + this + '\n\n';
 info.text += 'topLevelApplication = ' + _topLevelApplication.toString()+'\n\n';
 info.text += 'systemManager = ' + this.systemManager + '\n\n';
}

public function setByLoaderSWFbackgroud(color:uint):void
{
  this.setStyle("backgroundColor",color);
}

]]>
</fx:Script>
<s:VGroup>
<s:Panel title="ByLoaderSWF資訊看板">
<s:TextArea id="info" editable="false" width="450"/>
</s:Panel>
<s:VGroup>
<s:Label text="Print ByLoaderSWF資訊"/>
<s:Button id="btn" label="print"/>
</s:VGroup>
</s:VGroup>
</s:Application>


將這兩支mxml編譯成SWF,並將發佈的的資料放置Web Server中運行。

  • 注意,Loader在load SWF時,無法在flashBuilder中直接執行運作,因為Loader SWF不可在本機上執行,這是FlashPlayer的安全機制,將其放置Web Server中運行即可。










我們可以看到ByLoaderSWFtopLevelApplication是指向Hero_Test。



而我們可以在Hero_Test中呼叫ByLoaderSWF的public function 。

呼叫ByLoaderSWF的setByLoaderSWFbackgroud(color:uint)方式如下:

//在Loder的contentLoaderInfo讀取完畢發出Complete時將Loader的content轉成SystemManager。
private var _systemManager:SystemManager;

private function onLoaderComplete(e:Event):void
{
_systemManager = _loader.content as SystemManager;
changedColorBtn.addEventListener(MouseEvent.MOUSE_DOWN , onChangeColor);
}
//在Button被按下後呼叫,利用_systemManager來呼叫setByLoaderSWFbackgroud(color:uint)


private function onChangeColor(e:MouseEvent):void
{
var color:uint = Math.round(Math.random()* 0xFFFFFF);
_systemManager.application['setByLoaderSWFbackgroud'](color);
info.text = color.toString();
}


什麼是SystemManager?

  • SystemManager是應用程式的根(root)。
  • SystemManager是MovieClip的子類,有兩個影格。
  • SystemManager在第一個影格是預載器,在此會載入。
  • SystemManager在第二個影格會開始建立主要應用程式的實體。
  • SystemManager有個application屬性,會指向Application的實體。
  • application這個屬性在第二影格建立屬性前都會是null,也就是說SystemManager是一支應用程式中最先建立的然後才是建立Flex中主要應用程式的類別(如Application)。

systemManager中有一個屬性application其實就是Application的instance,而在這裡_systemManager中其實就是ByLoaderSWF的SystemManager。

關於this對象、SystemManager對象、SystemManager.application在ByLoaderSWF單獨執行下的追蹤結果。

2010年6月18日 星期五

Flex4中以mxml tags來使用top_level ActionScript elements

§Flex4中使用top_leveel ActionScript elements
Flex3中可以使用mxml tags來使用<Array></Array>、<Number></Number>等等top_level ActionScript elements,而這top_level elements項目都是使用,xmlns:mx="http://www.adobe.com/2006/mxml的命名空間,由於並未與視覺組件命名空間做區隔,因此若是在<Application><Application>使用了top_level elents容易與視覺元件混在一起,一方面覺得使用起來能將非視覺元件標籤直接放於視覺元件標不合理,一方面也覺得很混亂,而我自己習慣上不會去使用top_level tags的用法,但是若想測是一個組件的特性這時的top_level tags到是蠻方便的。


Flex4中top_level elements tags設計得更合理了,這些tags是置於xmlns:fx="http://ns.adobe.com/mxml/2009"命名空間,明顯的與spark、mx來做出區隔,並且無法直接放於顯示組件tags之間,而是置放於<fx:Declarations></fx:Declarations>Tags之間使用,或是能夠接受top_level項目型別的屬性標籤之間,例如:

2010年6月15日 星期二

Flex4 Dynamic Layout

§利用Flex4的Layout特性寫一個動態更換Layout的例子
關於Flex4的Layout請參考上篇About Layout in Flex4
//動態更換layout Example
<?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"
applicationComplete="application1_applicationCompleteHandler(event)"
layout="{new VerticalLayout()}"
>

<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.graphics.SolidColor;
import spark.layouts.HorizontalAlign;
import spark.layouts.HorizontalLayout;
import spark.layouts.TileLayout;
import spark.layouts.VerticalLayout;
import spark.primitives.Rect;


//排版物件參照
private var rectGroupVerLayout:VerticalLayout;
private var rectGroupHorLayout:HorizontalLayout;
private var rectGroupTileLayout:TileLayout;
//色彩存放的Array
private var _colors:Array = [0xff0000,0xffc600,0xfff605,0x00ff00,0x0000ff,0x5a2fe9,0xae2fe9];


protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
 //建立排版物件
 rectGroupVerLayout = new VerticalLayout();
 rectGroupHorLayout = new HorizontalLayout();
 rectGroupTileLayout = new TileLayout();
 createSevenRect();
}

About Layout in Flex, 關於Flex4中 (SDK4) 的排版

§About Layout in Flex4
在Flex4中,顯示元件的動作,樣式(Style),外觀(Skin),排版(Layout)都是抽離出來成為一個類別(Class),如此做法更合乎了物件導向觀念能讓物件之間彼此更鬆散, 降低耦合,也更合乎了MVC,因此在Flex4中的顯示元件更顯得靈活好用。

上圖是Layout的類別關係圖,可以看到Flex4中具有四種原生的Layout類別,而這四種Layout類別都繼承了LayoutBase,由此父類來達到超型態(superType)作用,而如果你想要製作自己的Layout工具,繼承LayoutBase來開發自訂的Layout類。

  • <s:BasicLayout/>    絕對位置佈局
  • <s:TileLayout/>
  • <s:HorizontalLayout/>  水平排列佈局
  • <s:VerticalLayout/>   垂直排列佈局
如何使用:
 使用標籤或是layout屬性來設定,注意在標籤中如果是小寫這代了此標籤是屬性或方法,而layout他是一個屬性。

2010年5月4日 星期二

Flex Button 的autoRepeat 須注意Event

最近剛好需要一個按住按鈕連發的功能,查了一下ActionScript 3.0 Language and Components Reference確定了Flex的Buttonu有一個autoRepeat屬性,只要設為ture就可以啟動button內部的Timer,結果奇怪怎麼在按鈕按下後只觸發了一次呢?????結果一查原來我習慣使用flash.events底下的MouseEvent而autoRepeat是使用FlexEvent發送所以就收不到連發事件囉!!請看以下範例

Example:
<?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"
applicationComplete="application1_applicationCompleteHandler(event)"
>
 <s:layout>
  <s:BasicLayout/>
 </s:layout>

2010年4月18日 星期日

拖曳基礎原理,AS3

顯示元件拖曳基礎原理
Fundamentals of Drag for DisplayObject.


基本觀念:
  • 會使用mouseDown、mouseMove、mouseUp,三個事件。
  • mouseDown時記錄住滑鼠在Stage上的座標,並加入mouseMove與mouseUp事件偵聽。
  • 當mouseMove時使用新的滑鼠座標減去mouseDown時座標求得offset。
  • 將拖曳對像的座標+offset。
  • mouseUp發生時移除mouseMove,與mouseUp事件偵聽。
以FB4來撰寫範例:
example: