May 26, 2013

前端體驗之表單製作 - 使用KnockoutJS及Twitter Bootstrap (1)

最近應產品部門需求,將一份服務申請表(PDF格式)轉換為線上表單讓使用者填寫申請。由於輸入欄位不少且是個全新的功能,試著導入一些前端框架看能不能加速開發或是提昇UX,而選用的框架為KnockoutJSTwitter Bootstrap

KnockoutJS是在一年多前研究MVVM pattern時注意到它,當時對它處理前端的方式頗為讚嘆,因為使用它時可以大大地降低自己對DOM的處理(甚至完全不用自己處理DOM),大部份時間只需要操作好ViewModel即可。但這一年多來苦無機會在實際專案使用它,直到最近才有機會。選用Twitter Bootstrap的原因則很單純,因為在一個沒有UI/UX designer的團隊裡,能有一個堪用且支援度不錯的UI框架可以使用對Developer來說是個不錯的選擇。

KnockoutJS

KnockoutJS的官方文件及範例寫得相當不錯,在開始實戰前先至Tutorials觀看教學,看看它能做些什麼。Turtorials有5個sections,先瀏覽IntroductionWorking with Lists and CollectionsLoading and saving data,看完後對KnockoutJS會有基本的認知。基本上看完後就可以準備實戰,並以官方的Documentation做為實戰時的參考,也建議有空的話可以把整個Documentation快速看過一遍,對操作KnockoutJS的能力會大大地提升也省去一些google的時間,因為Documentation介紹得蠻詳細的。接下來到Download / Install頁面下載安裝KnockoutJS,因為我是以VS 2008做為開發工具所以需手動安裝,VS2010以上則使用nuget安裝即可。

Twitter Bootstrap

Bootstrap的官方文件及範例也寫的不錯。在此需求中Bootstrap用來製作表單頁面及排版,主要使用到了Grid SystemTablesFormsButtonsIcons by GlyphiconsAlerts,其中Forms是最常參考的文件。Boostrap的安裝可參考ASP.NET MVC 4中使用Bootstrap或手動下載自行安裝

接下來我們看看如何實作這需求,前端體驗之表單製作 - 使用KnockoutJS及Twitter Boostrap (2)

No comments: