Flex FAQ

Flex FAQ #11: Spark Layout Basics

Jan 31st

Posted by Vicker in Flex FAQ

No comments

o係 Flex 裡面我地用得最多o既 control 係乜呢? Label? TextInput? Button? DataGrid? 我覺得答案應該係 VBox 同 HBox

無論係 Application layout, custom item renderer, form layout, padding… 好多地方都要用 VBox 同 HBox 所以第一個 Spark 要學o既o野就係 VBox 同 HBox o既 alternatives – Group 同 LayoutBase

顧名思意 Group 係用黎將唔同o既 components group 埋一齊 呢 d components 可以係 control 亦可以係 containers 可以係 Spark component 亦可以係 Halo component Group 基本上係取代左 Halo o既 Box container 同 Box 一樣~ Group 本身 by default 係 absolute layout Absolute layout 者係所有 child component 都係 position o係 x 0 y 0 所以下面o既 example 所有 component 都會重疊左

<?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">

	<s:Group>

		<!-- Spark and Halo Button More >
, , , , , , , , ,

Flex FAQ #10: Flex 4 有幾多個 namespace

Jan 16th

Posted by Vicker in Flex FAQ

1 comment

知道點解要用 Spark 之後當然要實戰下啦 首先寫返個 Hello Spark application 先 以下o係 main application o既 source code * 太簡單喇~ 無 build application 放上黎~ 抱歉

<?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">

	<s:Label text="Hello Spark!" />

</s:Application>

唔太複雜吧~ 不過都幾多野唔同~ 首先當然係 namespace 啦

Flex Builder 3 (FB3) 寫 Flex 3 app 時o既 namespace 真係簡單到不得了

xmlns:mx="http://www.adobe.com/2006/mxml"

一個 mx 走天涯~ 一個已經包括左: - language (Array, uint, Number, Object etc…) 同埋 - Halo components (Button, VBox, DataGrid etc…)

FB4 寫 Flex 3 namespace 基本上無變架~ 大家唔駛咁擔心

xmlns:mx="http://www.adobe.com/2006/mxml"

但係 FB4 寫 Flex 4 就複雜喇~ 首先 Flex 4 namespace 唔再係一個 namespace 玩晒~ 而係好 clear cut 咁分開左 language 同 component namespaces

Flex 4 o既 language namespace 係

xmlns:fx="http://ns.adobe.com/mxml/2009"

至於 Flex More >

, , , ,

Flex FAQ #9: 點解要 Spark

Jan 14th

Posted by Vicker in Flex

2 comments

認識 Spark 之前先要講下 Halo

Halo 係 Flex 3 o既主要骨格 由最 base o既 application (mx:Application) 去到 layout properties (horizontalAlign, padding) 再去到 UI control (mx:Button, mx:TextInput) 都係 Halo o既範圍 而 Spark 就係 Flex 4 o既主要骨格

好地地用緊 Halo 點解又要 Spark 呢?

用得 Flex 比較深入o既 developer 或者 designer… 又或者 dezeloper 都會發現 Halo 有幾個比較大o既問題

1) Skinning Skinning and Skinning

Halo control 要做 skin 係非常痛苦架 一係就只係用 CSS 做 d 好似無做過咁o既 styling 一係就用 Flash 畫好晒 d 野~ 之後 export SWF~ Flex embed SWF~ 再 CSS map class… 要改野咩? 開返個 Flash source 由頭做過啦

而且 Halo control o既 internal object 係 fixed 架 舉個例~ 一個 Halo button 裡面有一個 icon More >

, , , ,

Flex FAQ #8: Font Embedding 全集

Apr 7th

Posted by Vicker in Flash

No comments

尋日要幫一個 application 做 font embedding 主要係想 embed 楷書 其實 font embedding 本身並唔係一件難事 因為 Flex 本身已經 support~ 但係 embed 得黎又要控制好 file size 就唔簡單~! 至於楷書o既問題就更加多… 應該 specific d 講… 係 Microsoft o既標楷體o既問題更加多…

由淺入深~

1) Flex 直接 Embed font

方法主要有兩種

1A) Flex CSS refer local font

@font-face
{
	src: local("標楷體");
	font-family: "KaiShu";
}

o係 CSS 裡面 declare font-face 然後 source 利用 local 指住個字體名 最後 declare 一個 font family 名~ (呢個隨意就得) 呢度最 tricky 係個字體名… 特別係 Mac 機再加埋中文字… 經常攪到 Flex Builder compile o既時候會出現 local build error…

好: 快 壞: 唔穩定, File Size 大

1B) Flex CSS refer font file

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu"; More >
, , , , , , , , ,

Flex FAQ #6: Layout 秘技 Part 1

Aug 2nd

Posted by Vicker in Flex

No comments

好多時候寫 Flex application 有大部份時間都係用o係 UI layout 雖然 Flex 既 UI layout 已經好易寫~ 但係有時想做到心目中既效果唔係咁易

舉個例我地想整一個 shopping cart list 我地會用 List + itemRenderer itemRenderer 既 content 多數係 Label + Button 通常我地都會將 Label 放埋一邊~ Button 放另一邊~ 好似咁…

A List with Label and Button itemRenderer

但係有時總會出現一 d item o既名太長… 結果令到 button distort 左~

Too long label resulting distorted button

解決方法係利用 Label o既 truncateToFit 而用 truncateToFit o既時候一定要 define minWidth 或者 maxWidth 直覺上當然係用 maxWidth 啦~

計法就係: maxWidth = itemRenderer width – Button width – horizontalGap

但係呢種做法首先非常煩~ 而且容易錯 再諗下如果 Button width 轉咁點算呢… 重新計過… 當然可以用 data binding 解決… 但係你諗下咁樣做 d code 係幾咁長…

咁有無終極方法呢? 有… 但係唔容易明… 竟然係用 minWidth

<mx:itemRenderer>
    <mx:Component> More >
, , , , , , , ,

Flex FAQ #5: 點樣做 Full Screen Application

Jul 12th

Posted by Vicker in Flex

No comments

Flex application 有一個特點就係可以完全跳出 web browser o既框架 Adobe AIR 當然係其中一種做法~ 但係 Flash player 本身 support full screen mode 所以直接用 full screen mode 就比起 AIR 直接同快喇~!

要用 full screen mode 首先要改動 SWFObject 或者 Object tag 主要係加入 allowFullScreen 呢個 parameter 以 Flex Builder o既 HTML template 為例

SWFObject:

AC_FL_RunContent(
    "src", "${swf}",
    "width", "${width}",
    "height", "${height}",
    "align", "middle",
    "id", "${application}",
    "quality", "high",
    "bgcolor", More >
, , , , , , , ,

Flex FAQ #3: 點樣用 Flex FileReference 下載檔案

Aug 17th

Posted by Vicker in Flex

2 comments

本來呢個問題應該好簡單~ 基本上一個 ActionScript developer 可以即時答得出

var t_file_ref:FileReference = new FileReference ();
var t_url_request:URLRequest = new URLRequest ("some_path/some_file.type");
t_file_ref.download (t_url_request);

但係原來o係某 d 情況佢係會 malfunction 既… 而且係你估都估唔到~ 加上玩足你幾個鐘…

為免大家中招所以寫左呢個 example

Please enable Javascript and Flash to view this Flash video.

睇落好似無分別~就算 click “這個不能下載” 都出現左下載畫面但係當你以為 download 左既時候… 你會發覺乜都見唔到…其實問題係在於 FileReference o既 instance declaration method如果o係 function 裡面 declare 既 temporary variable當 function 完成之後 FileReference instance 就會o係 select event 之前消失結果… download 左個桔… 解決方法係將 FileReference instance 放o係 class member variable

public class some_class
{
    private var _file_ref:FileReference;
    function some_function ()
  More >
, , , , , , , ,

Flex FAQ #2: 點樣清除亂左既 subclipse .svn 資料

Aug 10th

Posted by Vicker in Flex

2 comments

相信用 Flex Builder 或者 Eclipse 既人都會裝埋 Subclipse Subclipse 的確令到 project source control 輕鬆好多 但係當你需要做 project folder relocation 或者 project import 就會出現好多問題

舉個例~ 你有一堆 svn 左既 Flex Builder 2 projects 要轉去 Flex Builder 3… 最穩陣既方法相信係 FB2 svn commit 左~ 然後 FB3 checkout 返~ 但係如果你選擇 direct copy / project import~ 就會有機會出現舊既 .svn data remove 唔到~ 然後無辦法重新 connect svn…

解決方法係人手逐個 .svn delete… =.=||

講笑~ 哈哈

Mac o既 user 會比較幸福~ 因為一句 command 就可以攪掂


find . -name .svn -print0 | xargs -0 rm -rf

如果出現 operation not permitted 可以試下加 sudo


find . -name .svn -print0 | xargs -0 sudo rm More >
, , , , , , , ,

Flex FAQ #1: 點樣令 Flex 程式開始時將 cursor 指定係某一個 TextInput 裡面

Aug 4th

Posted by Vicker in Flex

1 comment

今日開始會寫返多 d technical articles~

我見好多人都會問呢個問題~ 點樣將 input text 既 cursor by default set 去某一個 TextInput component. 其實方法好簡單~ 只需要利用 setFocus function

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”{this.t_ti.setFocus ();}”>
<mx:TextInput id=”t_ti” />
</mx:Application>

但係大家會發現當 application load 完之後直接打字都係唔 work. 其實只要大家o係 Flex application 任何一個位置 click 一下就得喇. 咁樣 click 一下似乎有 d 笨… 但係呢個應該係 browser 或者 Flash player 既 issue~ Flash player 需要你 click 佢一下以確認你既 focus point 係 Flex application 而唔係 HTML

Please enable Javascript and Flash to view this Flash video.

English title: How to place Flex application’s input cursor focus on a specific TextInput control by default

swfobject.embedSWF("http://vicker.cubeforge.net/flex_faq/001/flex_faq_001.swf", "vvq-115-flash-1", "400", "300", "10", vvqexpressinstall, vvqflashvars, vvqparams, vvqattributes); More >
, , , ,