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

一如以往~ 多謝大家先~

Peter

Jimmy Lee

Eva

Soki

Adonis

Alethea

Sampson

Olivia

Bert

Carlos

Andy Au Yeung

Victor Leung

Felix

Kit Chai

Jimmy Lam

如有遺漏~ 請見諒~

今年比較特別~

特別想有一個家

一齊努力~!

Related posts

• No related posts.

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)

近日怒玩呢隻 NDS game

算係少數變化大~ 吸引力強~ 耐玩既 NDS game

今日同阿 Tim 怒打 XDD

有 NDS 既朋友快 d 加入戰圈

P.S. 今日悶死阿庭喇 XD sor~

国盗り頭脳バトル 信長の野望

http://www.gamecity.ne.jp/ds/kunitori/

Related posts

• 閃亮榣柱芝脆批 (0)
• 繁忙的秋天 (0)
• WELCOME and PAST PROGRESS (0)

好耐無寫 blog… 太懶喇… 每一日都有藉口比自己…

不過都差唔多喇~! 係時候重整生活節奏~!

過埋今晚先 XDD

個人差唔多充夠電… 又係熱血寫 code 時間~!!!

以後唔可以再太夜訓~! 唔可以唔寫 blog~!

寫 blog 某程度上係可以比時間自己思考做過 d 乜~

然後從中整理一下自己~ 所以真係要寫返密 d~!

寫開 Flex 既朋友放心~

Flex FAQ 會繼續寫~

呢大半年的確累積左好多野可以同大家分享

Related posts

• No related posts.

呢期興 Touch~
首先係 Apple iPhone~
跟住係 Microsoft MultiTouch Table~
然後係 HTC Touch~
仲有 Apple iPod Touch~

但係估都估唔到… ActionScript 3 都可以 MultiTouch…

然有 d 窒下窒下~ 但係都叫做 work~!
有時真係好想可以參與下呢種唔係用錢字行頭既 development

Related posts

• 時光倒流第三集 - Adobe MAX 2006 (0)
• 全新 iMac 大解剖 (0)
• PURE ACTIONSCRIPT vs FLEX vs LASZLO (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)