Skip to main content

[作品]Flex 3.4 + PureMVC 的企業級 RIA 應用

認識 Erin 的人都知道, Erin 最懶得寫作品集相關的文章,但是這個案子比較有趣,所以特別提出來聊一下囉!

廚櫃業某公司內部軟體,目前系統尚在 Beta 階段,所以下面圖片皆有模糊化處理。


[可擴充功能面板首頁,後台皆包含在管理系統內(有 iPhone 的 fu)]

這個案子是幫一家傳統公司做的專用軟體線上化,想要開發企業級 RIA 想當然爾就是使用 Flex 來處理囉!

整個案子前端是以 Flex SDK 3.4 + Flex Builder3, PureMVC MultiCore for AS3, Utility - AS3 StateMachine 以及先前 Erin 所發表的 WidgetsConsole 來處理整個系統的轉換。

整個系統包含前後台共七大系統,分別是:估價,客戶,店面管理,貨品上架,會員管理,分店系統以及權限系統。超級管理員可以利用權限系統分別開出不同職級的權限,然後使用者透過同一入口,依照權限區分,畫面會顯示不同的功能。整個系統最複雜的部份當然是估價系統,由於櫥櫃的建立是透過選擇資料即時演算出來,更何況櫥櫃類的 BOM 表階層是怪物般的可怕...所以在 DB 的建置與前端資料整合的部分著實費了我們一番苦心。


[櫥櫃 BOM 表編輯視窗及櫥櫃 BOM 單物件材質指定]

此外,在 UI 設計上也特別花了一些心思。本案子 Target User 是管理者、店長與公司旗下的業務群,此公司成員年齡約 30-60 歲,皆為一般電腦使用者,所以 UI 設計及操作 Flow 必須比一般線上 RIA 更加友善,才能幫助縮減公司的人事教育花費。如放大整個系統的標準字 size;新增資料時不能碰的快速鍵會鎖定;產品類縮圖雙點擊即可觀看放大圖;操作 flow 皆以左上至右下結束以及利用畫面引導使用者操作都是一些設計上的巧思。


[新增估價單]


[簡單易用的業務員用客戶系統]

此外這個專案在實作 PureMVC 過程當然是相當的快樂,因為它的彈性與權職切分實在太令人滿意了!不管是擴充性,Rich Data 管理又或者除錯都非常的容易。當然本人早就已經是 PureMVC 的忠實粉絲了...=P
快來加入 Flex + PureMVC 的行列吧~~

結果這篇到最後變成 PureMVC 的勸進文...XD

Comments

  1. PureMVC 真的是太棒了!!

    ReplyDelete
  2. Erin 你好:

    我最近接觸到Air,欲建立桌面右下角的icon圖示。
    在測試階段看得到,不過包成Air檔後卻看不到,請問你有遇過這樣的問題嗎?

    Randy

    ReplyDelete
  3. 我有一陣子沒玩 AIR 了喔,所以也沒有碰到你說的情況...=)

    ReplyDelete
  4. 我是剛準備學 pureMVC的人~
    我使用的是 FDT(eclipse 掛 FLEX SDK)
    想問有沒有一些簡單的PLUS 可以掛載~
    可以在專案一開始就準備好基礎的PUREMVC文件?
    類似 http://blog.smartlogicsolutions.com/2008/12/05/introducing-puremvcgen-an-ant-based-puremvc-flex-generator/ 這介紹的PureMVCGen
    也可以請問你
    在開啟一個專案後~ 是怎樣開始作的 ?

    ReplyDelete
  5. to tenchiwang,
    我都是用手工寫的喔!因為我主要第一層都是差不多的,所以開一個新專案就是將第一層複製後修改一些設定就繼續用了...=)

    ReplyDelete
  6. 謝謝回應~
    我後還有找到 FLASH DEVELOP 用的板模 可以和 PureMVCGen 一開始就建立好 基礎的AS
    網址如下
    http://www.allflashwebsite.com/article/flashdevelop-fabrication-templates-and-video-tutorial
    可以是 AS 的並不能使用在FLEX上~
    所以我現再也是照 KEY
    問一下一個基礎的問題
    假設我要用 PUREMVC的模式
    作一個 可以發撲 可以發FACEBOOK文的
    我該將 API 的實體 放在哪 ?
    我試過放在 ApplicationFacade 或是 proxy 上
    雖然都可以作 但是我不確定怎樣做比較好 ?
    可以給我一些提示嗎? 再次感謝你的回應

    ReplyDelete
  7. 對外的連線都要特別寫在一張 as 內,然後 Proxy 要用到的都直接 call 它...=),反正你記得 data 操作都是由 Proxy 主導就對了

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment

Popular posts from this blog

PureMVC 我也會 [6]

Mediator ViewComponents 與 pureMVC 架構的中介 監聽並反應 View Component 發出的 Event 可以發送與接收 Notification 儘量少操作 Proxy 公開方法,多用 sendNotification... Mediator design pattern 要多認識這個 Mediator 設計模式的話,請自行看連結說明啊! 簡單來講,假使有一個 View 裡面有好幾個 MovieClip 組成,而這些 MovieClip 會互相影響對方...這個情況在 Flash 中,通常都會變成下圖: MovieClip 直接控制其他 MovieClip 搞到整個關係很複雜...換一個元件簡直是災難。 加入 Mediator 後,示意圖就會變成: 這樣,所有的 MovieClip 都透過 Mediator 來跟其他 MovieClip 溝通,當某一個 MovieClip 替換成別的元件,這時候也只需要修改 Mediator 中的引用即可,是不是變得很乾淨?如果同一組 MovieClip 有另外一個操作模式,也只需要替換掉 Mediator 即可!天下太平啊~~~ 而 PureMVC 中就是利用 Mediator class 為與前端 ViewComponent 的中介,這樣可以切開 ViewComponent 與 PureMVC framework 的關係,不管你前端介面使用 Flash or Flex 製作都跟程式核心無關。 所以 ViewComponent 製作時只需要兩個原則,一把所有的請求都以 Event 送出由 Mediator 處理,二提供公開方法, Mediator 只需要監聽 View 的 Event,將收到的資訊透過公開方法喂進 ViewComponent 即可。 如在 ViewComponent 中: public function setList( result:Object ):void{ list.dataProvider = result as ArrayCollection; } //然後在按下取得資料的按鈕 Click action 寫上: dispatchEvent( new Event( "GET_LIST" )); 新建 Mediator 的時候一樣有幾個重點方...