域卡的卜 Vicker’s Blog

好多時候寫 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>
		<mx:HBox>
			<mx:Label width="100%" minWidth="0" text="{data.label}" truncateToFit="true" />
			<mx:Button label="{outerDocument._button_label}" />
		</mx:HBox>
	</mx:Component>
</mx:itemRenderer>

後來同 Way discuss 之後諗諗下都有道理

因為 truncateToFit 先決係 minWidth 或者 maxWidth 要 set

如果 set minWidth = 0 其實無影響 layout 但係會開著 truncateToFit

然後 set width = 100% 就可以解決…

總之有時寫 Flex UI 要寫得好~

個腦係要 Flex-ible 一 d….

English title: Layout 101 Part 1

Related posts

• Flex FAQ#4: 利用 Adobe Flex 做 Video Player (0)
• Flex FAQ #5: 點樣做 Full Screen Application (0)
• Flex FAQ #3: 點樣用 Flex FileReference 下載檔案 (0)

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", "${bgcolor}",
	"name", "${application}",
	"allowScriptAccess","sameDomain",
	"type", "application/x-shockwave-flash",
	"pluginspage", "http://www.adobe.com/go/getflashplayer"
);

Object tag: (要留意加左兩個地方~!)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="${application}" width="${width}" height="${height}"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
	<param name="movie" value="${swf}.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="${bgcolor}" />
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
		width="${width}" height="${height}" name="${application}" align="middle"
		play="true"
		loop="false"
		quality="high"
		allowScriptAccess="sameDomain"
		allowFullScreen="true"
		type="application/x-shockwave-flash"
		pluginspage="http://www.adobe.com/go/getflashplayer">
	</embed>
</object>

之後 within Flex application 就可以利用 stage.displayState 開動 full screen

stage.displayState = StageDisplayState.FULL_SCREEN;

如果想做到 toggle full screen effect 可以利用簡單既 if… else… statement

if (stage.displayState == StageDisplayState.NORMAL)
{
	stage.displayState = StageDisplayState.FULL_SCREEN;
}
else
{
	stage.displayState = StageDisplayState.NORMAL;
}

但係要留意一點~ Full screen mode o既所有 text field 係唔可以 edit 架…

講真… 咁o既 limitation 可以話將個 application 廢左武功…

暫時都無解決辦法… Astro 都唔得…

Adobe Labs - Flash Player 10 Beta Release Notes

http://labs.adobe.com/technologies/flashplayer10/releasenotes.html

Limited Fullscreen Keyboard Access — In Flash Player 10, key events are supported for non-printing keys such as arrows, shift, enter, tab, space, etc.  Limited access to the keyboard will allow fullScreen games and video controls with keyboard access in a secure way.

背後o既原因係擔心有人 develop 假既 OS login page…

都好無奈… 如果咁既話所有 web browser o既 full screen mode 都應該 disable text input…

Adobe Labs - Talk:Flash Player:9:Update:Full-Screen Mode

http://labs.adobe.com/wiki/index.php/Talk:Flash_Player:9:Update:Full-Screen_Mode#Why_suspend_key_input.3F

When considering this feature, several security concerns impacted our decisions for this first release. The reason keyboard input was blocked was to help prevent phishing attacks using Flash, where full-screen is used to simulate a log-in screen, someone else’s website, etc. This also impacted our decision to add the overlay to visually inform the user that something had changed and they were in a new state.

English title: How to develop full screen application

Related posts

• 時光倒流第一集 - Adobe Flex Workshop (0)
• Sometimes I hate Flex… Sometimes (0)
• Flex FAQ #3: 點樣用 Flex FileReference 下載檔案 (0)

又係一個好簡單既問題~ 但係絕對可以玩死人~
用 Flex 想播 video 基本上只可以用 VideoDisplay component + FLV movie format
FLV movie format 可以點整呢? 當然係 Flash Video Encoder CS3~

但係 Flash Video Encoder 其實好多野未必 convert 到~
WMV? bye bye~ MOV? bye bye~ 就算 MPG 都有可能無啦啦無晒聲~
AVI 暫時算係一定可以 import 到既 format~
如果你用 Windows 的話~ 可以試下用 erightsoft 既 SUPER

http://www.erightsoft.com/SUPER.html

可以將 WMV, MOV 等等轉左 DIVX AVI~
(見到 可以直接 convert 做 FLV 既朋友唔需要興奮… 係唔 compatible 架 =.=||)

好喇~ 睇黎好似問題已經解決左~ 不過唔好意思~
當你好開心咁 convert 晒 d video~ 翻睇一次~ 你會發覺…
所有 video 一 play 到大約 3 份之 1 就會 kick 住左~
之後如果你郁 slider~ 就會無左聲… what the…

究竟係 encoder 問題? codec 問題? OS 問題?
我試晒 Windows 同 Mac 都唔 work…
但係用 Flash 既 Video component 播又無問題… 似乎又係 Flex…

咁究竟最後可以點解決呢?

YouTube…

將任何 format video 放上 YouTube (within 100Mb)
然後等 YouTube 幫你 convert 做 FLV
最後用 VideoDownloader down 返個 FLV…
Quality 算 acceptable~ 但起碼係最 stable 既解決方法~
Please Adobe! 買多幾塊烏蠅拍唔該… 太多問題喇~ 仲要下下攞命…
有幾多問題? 聽日再 Blog…

English title: How to use Adobe Flex to make a video player

Related posts

• Munsang College Biology Department Website version 3 始動~! (0)
• Sometimes I hate Flex… Sometimes (0)
• Flex FAQ #6: Layout 秘技 Part 1 (0)

本來呢個問題應該好簡單~
基本上一個 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

睇落好似無分別~就算 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 ()
	{
		this._file_ref = new FileReference ();
		...
	}
}

其實呢個問題… 都幾荒謬… 不過可以玩謝好多 developer…Adobe o既 Technote 有詳細解釋~
http://kb.adobe.com/selfservice/viewContent.do?externalId=3637d5c3&sliceId=1English title: How to download a file in Flex using FileReference

Related posts

• Essential ActionScript 3.0 and ActionScript 3.0 Design Patterns (0)
• PURE ACTIONSCRIPT vs FLEX vs LASZLO (0)
• Google 同 Yahoo! improve Flash indexing (0)

相信用 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 就可以攪掂

[source:css]
find . -name .svn -print0 | xargs -0 rm -rf
[/source]

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

[source:css]
find . -name .svn -print0 | xargs -0 sudo rm -rf
[/source]

參考文章:

SVN on OSX by SIMPLESTATION
http://www.simplestation.com/journal/how-to-use-svn-on-os-x/

English title: How to remove all the .svn information when using subclipse

Related posts

• Flex FAQ #5: 點樣做 Full Screen Application (0)
• 時光倒流第一集 - Adobe Flex Workshop (0)
• Sometimes I hate Flex… Sometimes (0)

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

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

[source:xml]

<?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>
[/source]

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

English title: How to make Flex application’s input cursor focus on a specific TextInput component

Related posts

• Flex FAQ#4: 利用 Adobe Flex 做 Video Player (0)
• Flex FAQ #6: Layout 秘技 Part 1 (0)
• Flex FAQ #5: 點樣做 Full Screen Application (0)