iT邦幫忙

4

extjs 4 系列 4/5:利用 Sencha Architect 快速開發 extjs

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

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

第一天:extjs 4 的新特性與基本概念
第二天:使用 extjs 必須了解的 js 技巧與知識
第三天:extjs mvc 架構:繼承與模組重覆使用
第四天:利用 sencha architect 快速開發 extjs(本篇)。
第五天:企業級開發框架:extjs 與 grails 的完美組合。
使用 Sencha Architect 來開發 extjs 的好處,除了他會幫你檢查一些常見的問題,比如 id 與 class 名稱的重覆與錯誤,對於前端很最重要的畫面呈現,經由他所組合出來的畫面,幾乎就是實際運行的結果,網路上對於一些基礎的使用技巧已有詳細介紹,這邊就不贅述,在開始閱讀下面的內容時妳可以先參考下面連結,先對基本操作有些概念。

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

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

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

<span style="color: green;"><span style="font-size: 30px;">物件導向:元件重覆使用</span></span>

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

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

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

<span style="color: green;"><span style="font-size: 30px;">toolbox</span></span>

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

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

<span style="color: green;"><span style="font-size: 30px;">model 資料表令 Store 連結真實資料</span></span>

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

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

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

<span style="color: green;"><span style="font-size: 30px;">進階屬性定義</span></span>

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

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

<span style="color: green;"><span style="font-size: 30px;">介面 layout 定義</span></span>

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

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

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

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

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

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

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

<span style="color: green;"><span style="font-size: 30px;">方便進行測試與開發</span></span>

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

這樣有什麼好處?在開發 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 的完美組合。


尚未有邦友留言

立即登入留言