域卡的卜 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)

Don’t get it wrong… I am not leaving Flex, most of my current developments still rely on it and I am sure it will last for several more years.

Working with Flex for nearly two years. I am sure I have the right choice however sometimes Flex do makes me mad.

• SWFLoader content can’t be unloaded completely.
  (How many times you try to replace a loader content but you notice the content music never gone away)
• VideoDisplay component doesn’t play .flv correctly…
  Not even those produced by Flash Video Encoder…
• Non standard CSS
• Math.floor (Math.random () * 4) + 6
  (Oh my god… I just want a random integer)
• Smooth scroll List
• Disabling Ctrl key during drag move
• Gradient fill Container
• Full screen Keyboard input…
  (I understand security… but that should be user’s responsibility… not developer’s obstacle) 

• Why can’t I export my syntax coloring settings? 
• I don’t know which part I haven’t done yet… WHERE’S MY TODO!?!?
• Auto building get set function please…

Related posts

• Munsang College Biology Department Website version 3 始動~! (0)
• 時光倒流第一集 - Adobe Flex Workshop (0)
• Flex FAQ#4: 利用 Adobe Flex 做 Video Player (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)

MAX 2008 已經 open 左 registration 一段時間~

要 reg 就要快 d o係 early bird 完之前 reg 喇~

2 年前去過 MAX Vegas

大開眼界而且完全改變左自己既 development path

呢 2 年可以話係賺晒~

今年 MAX San Francisco focus 將會係 Flex 4 同 Thermo 非常期待~!

希望趕得切儲錢去啦~ 哈哈

大家留意下 MAX 既 banner~

好有 Indianna Jones feel…

硬係覺得隻 MAX 係 Ted Patrick…

P.S. MAX 2009 都好吸引~ 哈哈

Adobe MAX 2008 NA

http://max.adobe.com/na/experience/

Adobe MAX 2008

http://max.adobe.com/

Related posts

• Flex FAQ #5: 點樣做 Full Screen Application (0)
• Adobe MAX 2006 Scheduler (0)
• 繁忙的秋天 (0)

今日 Google o係 webmaster central blog 公布左佢地已經 improve 左 Flash content 既 indexing power

所有 version 既 Flash content o係唔需要改動既情況底下都可以得到更好既 indexing result

同一時間 Adobe 亦o係 Adobe Developer Center 發表左 SWF searchability FAQ

裡面除左有耳熟能詳既 marketing slogan 之外

The openly published SWF specification describes the file format used to deliver rich applications and interactive content via Adobe Flash Player, which is installed on more than 98 percent of Internet-connected computers”

亦有提及到背後既原理

以及 Yahoo! 都會於稍後 update search engine

的確~ 咁多年以黎 Flash 都比人彈 SEO

每一次我幫人做 project analysis 既時候

第一句都係問 “application base” 定 “content base”

今次呢個 news 的確幾吸引~

但係問題係唔係就咁就解決呢?!?!

我地係唔係唔再需要寫特登寫 XHTML version / XSL / 一大堆 supportive AS?!?!

言之尚早~!

At least… Munsang Biology web d content 仲未 index 到~ 哈哈

Anyway~ should be a great start!

詳情:

Improved Flash indexing by Google Webmaster Central Blog
http://googlewebmastercentral.bl … flash-indexing.html

SWF searchability FAQ by Adobe Developer Center
http://www.adobe.com/devnet/flas … _searchability.html

Related posts

• Flex FAQ #3: 點樣用 Flex FileReference 下載檔案 (0)
• Essential ActionScript 3.0 and ActionScript 3.0 Design Patterns (0)
• 實力? 運氣? 我信運多 d… (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)

上星期六膽粗粗去左考 Adobe Certified Flex 2 Developer Exam…
講真的確係好即興… 其實幾個月之前已經想去考~
o個時用左 Flex 寫野無耐~ 覺得自己唔夠料所以無考~
直至前幾日聽 Angus 講左幾句~ 話我實得~
結果我就即興咁星期四晚報名… 星期六考試… 前後溫左兩日一夜~
將成本 training from the source 睇晒…

其實考試前一晚睇 examination blue print 已經知出事…
FDS… JAR… WAR… JMS… JTS… JNDI… Hibernate… 攪乜鬼咁多 Java 野…
唯有成晚死刨~ 講真… 真係學左唔少野~ 有好多野之前係 miss 左~

星期六早左到試場~ S 字頭既 training center~
入到考試專用房… 呆晒… 細到呢~
4 個男人 4 部機 4 格位… 勁似去緊廁所… =.=
機慢… keyboard 殘… mouse cam…
下次真係幫襯第二間…

67 題 MC~ 大約 1 小時 40 分鐘既卷~ 100 分滿~ 73 分合格~
基本上每做 3 題就有 1 題要 mark… mark 既意思係我唔 sure 個答案 =.=||
d 問題好多都可以玩謝人… 呢度唔方便打出黎… 總之唔係你會考慮到既問題…
之前都睇到 d foreigners 講個試好難考… 唔好無啦啦去考… 估唔到真係咁變態…
話佢係 Flex 既卷~ 不如話係 SE 既卷… 勁多 OO 同 Design Pattern 既問題…

唔駛 40 分鐘… 做完… 一望… 3X 題 mark 住…
心裡面即時安慰自己… 下次補考… 然後當考一次二千蚊罷啦… =.=
Anyway~ 我盡左自己能力 go through 多兩次題目~
o係 click end o個一刻我深呼吸左一下~ 同自己講一定得既 (講係一件事… 諗係一件事…)
一睇到 result 真係忍唔住 yes 左出聲~ 總算合格~~!! 純粹好彩…
Remote Data o個一個 session 最差… 唔合格 tim…
好彩 UI, Architecture 同 Programming 拉返 d 分~

比將來會考呢一個試既人一 d 意見…
Training from the source 的確算係必讀~ 未睇晒既唔好去考
就算睇晒~ 都最好肯定自己熟悉整個 Flex 同 Flash API 先好去考…
有 d API 平時真係少用~ 但係佢會問的…
最好就係寫返一年 Flex Application 先去考~ and FDS 比重幾大~ 一定要玩過下先好考~
祝大家好運~

Related posts

• Essential ActionScript 3.0 and ActionScript 3.0 Design Patterns (0)
• 時光倒流第一集 - Adobe Flex Workshop (0)
• Sometimes I hate Flex… Sometimes (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)

今日黎左兩本書… 唔知點解用 Amazon 訂書寫 CityU 地址特別快收到書…
比起 Amazon 既 estimate date 早左 17 日…

兩本新書係 Essential ActionScript 3.0 同 ActionScript 3.0 Design Patterns
唔知道由幾時開始鍾意左 design patterns~
以前明明最憎 OO… (唔… 心照… 唔夾就係唔夾…)

Essential ActionScript 3.0 真係好有貨~ 成千頁… 又有排睇
比起上一集厚左好多~ 好快咁掃左 TOC 好詳細~ 似係由淺入深~
比較起 ActionScript 3.0 Design Patterns 就好似深好多~ 有好多少聽既 patterns

Flash, ActionScript 同 Flash d 書愈黎愈多~ 唔知幾時先睇得完…
(Chocobo 你幫我睇埋佢啦~ 哈哈)

Related posts

• Flex FAQ #3: 點樣用 Flex FileReference 下載檔案 (0)
• Adobe Certified Flex 2 Developer Examination 合格~! (0)
• 實力? 運氣? 我信運多 d… (0)