|
EEP2017新成員-RWD模組
訊光科技 / 蘇文瑞
前言
隨著行動裝置的普及與用戶使用習慣的改變，使用者以行動裝置來上網或查詢資料的比率已經大過使用桌上型電腦或筆電的比率，這個結果就逼得所有知名網站與企業網站都必須提供適合行動裝置所使用的介面與螢幕大小的網頁。因此RWD的網頁技術就此因應而生，RWD就是Responsive Web Design的簡稱，也就是響應式網頁設計，或稱為適應性網頁、自適應網頁設計等，就是用一套設計網頁的方式來根據不同的裝置螢幕尺寸來自動回應式網頁設計效果，達到多螢網頁設計的目的。
EEP RWD模組，使用的為最廣為使用的bootstrap框架，是很簡潔，直覺，強大的前端框架，讓RWD網頁開發更快速更簡單。但由於Bootstrap是比較新的技術，舊型瀏覽器如IE8，支援程度會比較差，也需要額外安裝插件才能運作。
EEP RWD模組開發方式
承襲EEP的之前的表單開發方式，可以使用快速精靈產生出RWD表單(註: EEP Wizard的Server端與Client端是哪一種Client端無關)，除了使用javascript自動將json格式的資料綁定與畫面上呈現外，資料的CRUD處理(增查改刪)、欄位預設值、資料檢核、安全控管等機制也一併完成。可免去自行辛苦撰寫html tag，及引用javascript與css的瑣碎步驟。如下，EEP Wizard多了一個RWD的表單，透過選擇顯示那些欄位，及各欄位的控制項，即可自動產生前端頁面。
產生的網頁，在Visual Studio的Designer中，可以透過右鍵快速工作列 Edit Column 來改變各欄位的屬性與想要的格式變化。
EEP RWD Runtime頁面
透過上面的設計，透過EEPManager設定網頁的使用權限後，在Visual Studio中執行預設的網站，就會自動出現使用者的Runtime頁面，當然這是EEP預設寫好的Login與主頁面，開發者是可以自行更改CSS來更換圖檔或色系。
■以往版本，EEP分為電腦版與行動版兩個入口與操作介面，現在統一透過全新RWD登入介面進行登入驗證，並透過共同的主畫面開啟選單、操作表單與流程簽核待辦等，也就是大小螢幕尺寸都吃。
(▲大尺寸螢幕登入畫面)
(▲小尺寸螢幕登入畫面)
■主畫面的【個人事項】(有工作流程的簽核所使用)，會依照螢幕大小來呈現如下的內容:
(▲大尺寸螢幕主畫面及待辦事項)
(▲小尺寸螢幕主畫面及待辦事項)
也就是不同螢幕尺寸呈現的資料內容完全一樣，RWD的機制只是透過css將網頁調整成最適合的版面配置。
■再來看一下，主畫面的選單，在不同螢幕大小也會有下列的兩種方式呈現:
(▲大螢幕顯示左側選單區)
(▲小螢幕小選單自動隱藏，右上角多了一個Menu的小圖示)
(▲點擊MENU的圖示後打開功能選單)
■表單與表格也是一樣會有兩種的方式呈現，如下:
(▲大螢幕顯示完整的表格資料)
(▲小螢幕顯示單筆的表格資料)
(▲大螢幕顯示表單可以左右多欄)
(▲小螢幕顯示表單只能單欄)
■針對功能按鈕也是會依裝置大小而自動變化，如下:
(▲大尺寸按鈕在表格資料旁顯示)
(▲小尺寸按鈕在畫面右上方顯示成一個小圖示)
改善元件屬性設定方式
由於開發需求日益複雜，EEP元件的屬性也增加了不少，也因此設定起來會覺得繁瑣。此次模組也針對各項屬性設定方式，做更友善的設計。
■default預設值，可先選擇類型，如下:
■validate資料檢核，可選擇檢核的種類，如下:
■還有Format資料格式可以用選的，常用的資料顯示格式，以屬性選項方式選擇，如下:
結論
雖然EEP RWD模組，可以快速產生出電腦版與行動裝置共用的表單，大幅減少開發人員重複開發與維護的時間，不用撰寫兩次前端介面的程式邏輯，但是採用時也必須考量一個要點：太過複雜的表單，例如欄位過多，頁籤過多，表頭表身層級過多等表單，直接透過行動裝置狹小螢幕使用時，會變的很不好操作，點選步驟也會過多。因此，可以考慮類似這種的複雜表單就不要硬要使用RWD的設計方式，還是使用EEP jQuery模組，或者有必要的話只好使用jQuery與RWD分開設計。
此外EEP RWD模組採取的架構，是類似EEP jQuery模組，使用javascript、html與css達成表單操作功能，不依賴aspx.cs去產出網頁畫面與執行後端邏輯處理。此方法的好處是輕度依賴IIS，因此未來產生的表單可直接用來在hybrid app(混和型行動裝置應用程式)上使用(RWD的APP版本將在2017年第4季推出)。達成一次開發，電腦版、行動裝置瀏覽器、行動裝置APP皆可使用的優點。 | 
