RIAWAVE – 一個輕量化的Flex 2 應用程式開發手法(2)

＊系統架構圖

＊範例程式畫面

-Login畫面

-電話簿主畫面

-重構後使用 pop-up window 畫面

RIAWAVE – 一個輕量化的Flex 2 應用程式開發手法(1)

＊Riawave 是什麼？

Riawave是一個專為Adobe Flex 2 所設計的 RIA 快速開發手法，妥善整合了 flex framework 中data binding、custom events、mxml component與view states等多項新特色以加速程式開發流程並確保彈性。

Riawave 不是一個 framework，而比較像是一個 design-pattern 與 best practice 的集合，它的設計精神是以「元件導向設計」(Component-Based Design, CBD)與「低相依性」(Decoupling)為主，透過一連串簡單的設計概念加快 flex RIA 的開發流程，同時保留高度的程式彈性與可維護性，以滿足將來程式擴展與重構(refactoring)需要。

Riawave主要的特色是易學易用，只要瞭解關鍵架構與基本概念，十分鐘內就可上手且不易忘記，並且一旦學會能掌握住大方向，將來可隨時彈性變化與延伸以適應不同的專案型態。

＊安裝說明

範例下載：http://ria.richtechmedia.com/flexsample/sample.rar (內含中、英文說明文件)

zip版: http://ria.richtechmedia.com/flexsample/sample.zip

線上操作：http://ria.richtechmedia.com/flexsample/

-AppServ: 先確定電腦上已安裝apache, php, mysql，如果沒有，建議安裝 appserv

-sql script: 專案目錄下之 etc 內有 ContactBook.sql 檔為範例所需之資料庫設定

-AMFPHP: sample.zip 解壓縮後，將 web.rar 解縮到 apache/htdoc 目錄下(如使用appserv則為 c:\appserv\www\)，如此會得到兩個資料夾，分別是 flashservices 與 FlexContactBook

-connDb.php：FlexContactBook\service\connDB.php 內有資料庫連線、帳號與密碼等設定資料，請依自已環境設定。

-FlexExample.rar: 內為 flex project 與 source code

MS Max - news reader and photo album

Gallery

MS 發佈了 codename 為 Max 的 news reader 與 photo album軟體。

本來想下載一份來玩玩，但看到要 .net framework 3.0 RC1 然後還特別提醒” backup your system (recommended)” 就決定謝謝再聯絡，看看圖片就好。

從 gallery 裏的幾張圖片可以看出一些有趣的事：

-UI Paradigm 在改變了：MS大概每隔一兩年就會在UI design 上大動手腳，今年先是在 Office 2007 與 Visusal Studio 2005裏啟用了新式 UI，現在 Max 又套用了另一種風格的設計。

這個 paradigm shifting 包含了 titlebar 的消失，以及類似 mac 式的一體成型式(one piece toolbar)，也就是原本 titlebar 裏面的 min/max/close buttons 與 toolbar 裏面的選項現在都融合為一，變的很像 os x aqua 但又有些不同。

-美術風格與配色也採用了這一兩年由 mac 帶起的 aqua 風，也就是大量的使用漸層、光暈柔合的色調，讓程式看起來不再那麼的有菱有角與生硬，並且也放大 icon 的size，改成由圖案引導操作，而非以往的「文字指令」導向，這些也跟 os x 一貫的 GUI 設計理念相像。

-3D Mantle View：photo album 裏最有趣的一張就是立體照片顯示，所有 mac user看到這張應該都會發出會心的微笑，nice try, M$~

這個 3D Mantle View 就像是 iChat 裏多人視訊對話時的顯示方式，圖片由2d 轉變成立體3D，或許還可以拖拉與任何操弄，視覺效果很不錯，wow-factor 十足，但實用性堪慮。

-File Menu 的消失：這恐怕是 windows app 最大的改變之一，在max這支程式裏完全看不到 file menu 的存在，取而代之的是面板上大量的圖示與按鈕，也就是說儘量將常用的功能放在顯眼處，讓user容易點選，這樣的設計方向是絕對正確的，但其它的設定細節將如何處理就值得觀察(因為我沒裝，所以看不到)

看完這幾張照片，心中直覺的反應是：

1、UI paradigm shift 將會正式發酵，雖然 os x 已經紅了幾年，但唯有 MS 開始用，才會真正普及到一般人，進而徹底改變使用者習慣。

2、目前看到的 UI 配置，可說是新/心意有餘，但實用不足，有部份 UI logical allocation 讓人覺得疑惑，例如分隔線條與區塊的劃分定義不明。

3、這是最重要的，程式本身54mb，我非常好奇它跑起來的效能如何？畢竟我們都知道windows一向不是以高效率運算與穩定度高而著稱，現在它得花更多的力量去處理新的 UI 與必然存在的 animation，甚至是部份 3D 顯示，它跑起來速度如何？user能接受嗎？在一般設備的電腦上能執行嗎？

4、一個有趣的觀察，這幾年來，UI設計的順序幾乎都是這樣

>Apple 先設計出來用在 OS X: 例如 aqua 裏的光暈、controlbar
>Adobe/Macromedia 抄來用:例如 V2的 halo theme 與 Flex 裏的元件組
>MS抄了後做修改：例如 Vista 的介面與 Max 的 Toolbar

可惜的是，我知道 MS實際上有花大錢在養 Information Architech/Usability Designer 做這些事，他們的設計團隊恐怕比大部份的design studio還大十倍有餘，但為何最後出來的東西總是，呃，就是讓人覺得扼腕，不好用呢？

到底這裏面出了什麼錯？一次次的 prototyping session 與 user session 難道都不能傳達出正確、有效而又強力的設計訊息嗎？

flex 2 sample 已寄出

之前在文章中留言的朋友們，今天應該都已經收到範例下載位址與文件，接下來就等你們的 feedback 囉~

ps. 如果有留言卻沒收到信的朋友請在此篇再留一次，我會立即補寄過去。

我會等這十幾位網友看完並提供意見後，做綜合修改更新後再正式公佈在blog上。

eclipse / flex builder 加速法

原文

精華擷錄：

1、JDK 要用 v1.5

2、JDK 1.5 設定方法

C:\eclipse\eclipse.exe -vm “C:\Program Files\Java\jdk1.5.0_08\bin\javaw.exe”

3、改變eclipse啟動時的mem大小

-vmargs
-Xms256m
-Xmx768m

我的機器上是2gb，因此這裏設成 1024 / 1256

4、如果有 duo core 的cpu，可加上下列參數

-XX:+UseParallelGC

以上方法我在 Flex Builder 2 已試過成功，程式啟動時間大約只要六秒，開發時也很順暢。

附帶八卦一則：現在大家都在傳九月十二 apple 會有新產品問市，希望會是低熱量版的 macbook，這樣裝個2gb 又是 duo core 也可直接跑 xp 還內建 webcam，搭配上述小技巧真正是開發第一機啊~ 快來吧 快來吧 快來吧…