Pages

搜尋此網誌

2013年12月25日 星期三

利用 Sencha Architect 快速開發 extjs

利用 Sencha Architect 快速開發 extjs

Sencha Architect,基於 extjs 的可視化開發工具,如果你目前主要的前端開發框架選擇的是 extjs,那你就不能錯過,Sencha Architect 提供的功能比妳想像的多更多,他不只是使用 extjs 的元件來進行 mockup 而已,妳可以利用他完成所有妳想到的功能,幫你節省很多除錯的時間,如果有過開發 extjs 的經驗純文字開發除錯是非常費時的。

早在 Sencha Architect 前一代 designer 時,筆者就有使用過,這一版在徹底大改版後的物件化設計,好用許多,非常值得一試。


使用 Sencha Architect 來開發 extjs 的好處,除了他會幫你檢查一些常見的問題,比如 id 與 class 名稱的重覆與錯誤,對於前端很最重要的畫面呈現,經由他所組合出來的畫面,幾乎就是實際運行的結果,網路上對於一些基礎的使用技巧已有詳細介紹,這邊就不贅述,在開始閱讀下面的內容時妳可以先參考下面連結,先對基本操作有些概念。

使用 Sencha Architect 2 快速搞定 Web App 的 UI

假設妳已經讀過上面連結,最好還能夠實際操作看看,相信有些概念後會更容易吸收。

並且可以先了解一下 extjs 中的 mvc 還有物件導向的特性,在 Sencha Architect 中,妳將可以很輕易做到,一些基礎的使用方式筆者就不贅述,本篇將介紹進階使用技巧。

物件導向:元件重覆使用

拜 extjs 所賜,讓前端純 javascript 的開發也能用物件導向的方式來進行,我們可以將一些常用的元件重覆使用,一旦我們需要調整時,只要調整基礎元件,就可以同時影響所有有使用到的元件,參考下圖:

image

可以看到 saveBtn 同時出現在三個自定元件,在 Sencha Architect 裡如果是屬於 link 元件將會用藍色線連結,讓你可以一目了然,一旦改了最原始的 saveBtn 將會連動其他的元件,如下圖

image

物件導向的特性讓你將共用與特有的屬性能夠有效率的管理,在妳需要時組合成妳想的介面。

toolbox

除了利用類別的方式,我們也可將我們自定義的元件加入 toolbox 以利重覆使用,使用上如下圖:

image

一旦此元件屬於標準元件妳可以將其加入 toolbox 加以管理,需要使用時,拖拉至妳需要放置的位置即可。

model 資料表令 Store 連結真實資料

除了在一開始基礎操作連結中有說明到可以定義 model 之外,妳也可以連真實的資料來進行呈現。

一旦連結成功,在 store 旁,將會有一個黑色眼睛,表示資料已連結,實際在 Architect 裡,也會將資料真實呈現。

image

如此一來,除了 grid 的欄位顯示,我們也可以透過 Architect 知道實際呈現時資料內容是否正確。

進階屬性定義

在 Sencha Architect 裡的每個元件皆有預設的屬性可以讓您方便的進行定義,但實際上妳可能會找不到妳要的屬性,沒關係,妳也可以自定,如下圖:

image

一旦妳輸入的屬性不存在,妳可以點選 add,就會加入下方的屬性,並且可選取該屬性的資料型態,根據妳所選的資料屬性 Architect 會幫你進行資料型態檢查。

介面 layout 定義

這部份是筆者認為非常棒的功能,在使用 extjs 時,如果是利用純文字編輯,對於元件的佈置很難直覺的想像,透過 Architect 可以很方便完成我們希望的介面呈現,舉個例子:

image

上圖是在上一篇 MVC 文章中,用到的 ItemGrid 可以看到若是單獨看此元件的話,其實是縮在一起的,但如果我們要確認實際放入 ItemEditor tab 中的狀況就可以透過 Architect:

image

圖中可以看到使用的 layout 為 vbox,結構上如下圖:

image

由 listToolbar 以及 itemGrid 組成,在這邊希望能夠將下方得 itemGrid 填滿全部,如下圖,實際呈現上 grid 並沒有填滿:

image

那是因為沒有設置 Flex,所以我們將 grid 的 Flex 設為 1,可以看到,顯示上已全部填滿可以顯示的區域:

image

此時如果我們要看其他 layout 情形將可以很方便完成,以往直覺上我們可能會使用 fit,但是結果可能不是我們所預期,透過這樣的工具我們可以很快速完成佈置,專注在重要的互動事件與邏輯上,最後附上若同樣的介面,使用 fit 會是怎樣的情形:

image

只有 toolbar 被填滿,grid 不見了,所以,妳可以省下寶貴生命快速確認介面的呈現。

方便進行測試與開發

在 extjs 的 application.js 中可以定義一個屬性為 autoCreateViewport,一旦定義此屬性為 true,extjs 會在 view 底下自動顯示檔案為 Viewport.js 定義的內容,而在 Architect 中每一個 view 類別都可以標示為 Initial View,如下圖中的 Mark as Initial View:

image

這樣有什麼好處?在開發 extjs 時,如果應用程式是需要進行登入的,每次更新程式後要進行測試,免不了需要經過登入步驟以及點選功能來開啟需要測試的功能,次數少還好,如果反覆測試的情況下,著實浪費時間,更甚者,假設應用程式是多人開發,可能在執行某應用程式前,需要經過別的應用程式,但如果前面步驟尚未完成,就無法進行測試,這時候這樣的功能就很方便,因為我們可以針對單一元件進行單元功能開發與測試,大大降低功能間的相依性,一旦各自元件開發完成,就可以進行組合最終在進行整合功能測試即可!

Sencha Architect 確實有他存在及使用的價值,筆者使用純文字開發 extjs 多年,遇到很多介面上的問題,並且依靠經驗除過不少 bug,但是都沒有使用 Sencha Architect 來的快及準確,話雖這麼說,IDE 也沒有辦法幫你寫出「對」的程式,強烈建議使用 Sencha Architect 務必先了解 extjs 的原理,如此才能夠讓你駕馭 Architect,就像開車一樣,沒有先了解如何開車就上路,開的不好錯怪車子,還有可能出車禍喔。

經由這四篇文章,希望可以帶給讀者 extjs 從入門到進階的知識,以及如何透過 IDE 快速建立應用網站外觀,並且確認,減少不必要的反覆測試。

最後的第五天,要為大家說明在實際的開發環境,extjs 如何與後端應用程式進行互動,在軟體開發技術上越來越方便的現在,更提倡敏捷快速的開發,善用 extjs MVC 架構作為 view 層,來與後端的 MC(?)搭配,將以 java 中 Ruby on Rails:Grails 來為大家介紹,企業級開發框架:extjs 與 grails 的完美組合。

張貼留言