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

上星期六膽粗粗去左考 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)

呢幾日睇左好多 Final Year Project~
發現左一 d 臥”獅”藏”蛇” (臥虎藏龍)…
有 d 平時唔顯眼既人寫 d FYP 真係勁到嚇親你~

睇左大家既 project 自己都學左唔少野~
諗返轉頭~ 點解 Final Year Project 既 presentation session 唔可以做到好似一個 conference 咁?
大家一齊睇人 present~ 大家一齊比 comments~ 甚至黎個公投~
咁樣相信大家o係 FYP 學到既野可以多好多倍~

自己係一個 Web Application Developer~
對於 Algorithm-based 既 FYP 我只可以講句 “勁”
但係望住一大堆只係為左滿足某一個 specific purpose 既 form-based application…
我覺得好無奈… 幾十甚至幾百頁 HTML 加 d Javascript 加個 database… 算 FYP 嗎?
我會覺得佢的確出左好多力… 但方向錯左…

Innovation 對一個 FYP 黎講好重要~ 但我著眼點係有無用過心黎做而唔係交行貨~
其實就算係一張 form~ 真係用心寫既都一定贏一個得個做字既 system~

有 d student 係好用心機 design form 的~
Real time feedback…
Auto complete…
Dynamic combo box content loading… etc…

就算平時我覺得小豬唔係 programming 既材料
我睇完佢個 demo 都覺得佢好用心諗過個 UI…

Inline field editing…
Apply all boxes…

都非常 user friendly~ 減少左好多 click 黎 click 去既問題…
簡單但係真係有切身地考慮過 user
呢點唔係最重要咩?

比起一 d 幾十種 feature~ 幾十張 form~ click 黎 click 去~ 又 popup 呀咁~
我更喜歡呢黎小豬的 design~ simple and clear

我唔敢話自己寫野 user friendly
以上只係我 as a user 既感覺~
但身為 developer… 應該要諗清楚~
Technology 重要? Challenging 重要? Innovation 重要?
最終個 application 其實都係 user 比分~

當然~ 有心去做先係王道~

Related posts

• 閃亮榣柱芝脆批 (0)
• 繼續學會去輸 (0)
• 第一 Blog (0)

其實應該尋晚 post 出黎~ 不過太夜所以今日先 post
Budget 既問題困擾左成個幾禮拜總算告一段落
所以都正式 register 左 Adobe MAX~

reg 完之後第一件事就係要用佢地 provide 既 scheduler 黎排 session
唔睇都唔知… 差唔多有一百種唔同既 session 可以 reg…
由 acrobat -> breeze -> dreamweaver -> flash -> flex -> xml
再由最簡單既 get started -> intermediate -> advanced
總之就乜都有咁啦~~!! 揀到我傻傻地….
排完之後感覺係…. 仲慘過上堂…. 哈哈~~
當然啦~ 上 Flash-related 既野點都精神好多既~

依家既 schedule 如下

• Combining Flex with PHP and Open Source
• Best Practices for Developing Flash Applications
• Building RIAs with Flex Builder
• Improving ActionScript 3 Performance
• Design Patterns in ActionScript 3
• Understanding Security in Flex and Flash
• User Interface Design with Flash
• Delivering RIA solutions with Cairngorm 2
• Getting Started with Apollo
• Techniques for Integrating Flash contents and Flex applications

其實仲有兩個月~ 所以都仲會有好多變動~~
總之今次就一定係好好既學野機會啦!!
聽朝再講 MAX Event 既 inter-network application

Related posts

• PURE ACTIONSCRIPT vs FLEX vs LASZLO (0)
• I am going to Adobe MAX to MIN (Blog Entry for MAXUP) (0)
• Flex FAQ #3: 點樣用 Flex FileReference 下載檔案 (0)