如何以LEAP快速開發行動裝置

蘇文瑞

前言

在後PC時代，行動上網的裝置數量與應用，已經呈現爆炸性的成長。許多管理者正在思考，如何以最少的開發與建置、維護成本，讓企業逐步引進行動化技術，讓企業即時資訊、產品訊息、統計報表等，能在第一時間被決策人員或是客戶存取。

LEAP 是一個輕量化的web-based 開發平台，透過其視覺化、自動化的開發工具，可快速產出多個具HTML5 特性的web-based 資訊系統，希望能為資訊服務業者優化現行系統開發環境外，更期望可協助業者在追求科技趨勢以精進軟體開發的過程中，能透過LEAP 的開發方式降低企業成本、減輕員工負擔、並提昇產品品質與客戶滿意度。

LEAP的開發流程

本文將以一個實際範例用來說明LEAP的開發步驟，對LEAP來說與傳統的雛型開發方式很接近，如下圖，不同的是LEAD所開發出的是可以直接執行的系統。

                               

從Table開始

假設我們要開發的是EIP(企業入口平台)的『公布欄』功能，第一步先由建立資料表開始。

1. 可以手動方式建立資料表欄位，設定欄位類型、長度、是否必填、是否自動新增。

2. 也可以使用create table語法，節省人工輸入時間。

LEAP的頁面概念

LEAP對執行的操作頁面(View)定義，有下列幾種：
Search Form：搜尋條件輸入頁面。
            

Search Result：搜尋結果條列頁面，類似一般的DataGrid。

Action Form (Insert)：資料新增頁面，類似.net的Insert Template。

             

Action Form (modify)：資料修改頁面，類似.net的Edit Template。

Detail Form：資料瀏覽頁面，類似dotnet的Item Template。
            
而上述各種操作頁面的關連與串接，在LEAP稱之為Flow。

快速產生頁面

上一個步驟建立好公布欄資料表後，可以直接點擊『自動產生Flow』。

系統會自動依照資料表結構，產生預設的Flow，也就是會自動產生包含『公布欄查詢』、『公布欄查詢結果』、『新增公布欄』、『修改公布欄』、『顯示公布欄詳細內容』等頁面，並將這幾個頁面串接起來。如下圖，這樣就完成了，已經可以直接執行了，夠簡單吧。
 

執行結果

上述所產生完成的頁面，使用一般瀏覽器輸入帳號密碼後，系統顯示已完成的公布欄頁面：

點擊新增圖示，顯示公布欄新增頁面。

各種頁面，除了預設橫列單欄的呈現方式外，開發人員也可以依照實際需求，自行設計版面排列方式。

             
                                                                      一列單欄

             
                                                                      橫列雙欄
 

使用Pad的執行結果

由於目前智慧型裝置的瀏覽器功能提昇不少，因此除了Flash或是Silverlight以外，大多數Web Application都可以直接執行，但是未特別為了小尺寸螢幕設計的使用者介面，操作上十分不方便，需要不斷的以手指放大、縮小、左右拖曳螢幕。而畫面中過小的圖示按鈕與過多的控制項欄位，以手指輸入、點選時，也很容易誤觸其他按鈕，徒增使用者困擾。 

點開公布欄選單項目，顯示簡潔的公布欄列表。

直接以手指頭點選資料列，可以進行資料維護，如下：

LEAP的呈現技術中，會依照適合行動裝置的版本，能依照不同的螢幕尺寸，偵測裝置直立、橫放，自動調整版面的擺放，這是手機的直向顯示，如下：

如果將手機橫向的話，如下：

LEAP功能調整

公布欄的各個頁面，顯示的欄位與順序都可以由開發人員以非常直覺的方式操作，直接拖曳欄位的方式設計，或是按滑鼠右鍵刪除欄位。以下為拖曳的方式來調整欄位順序：

也可以按右鍵刪除欄位：

同樣的，在Action Form(修改或新增)頁面中，同樣可以用拖拉的方式改變位置與各控制項的屬性等等，如下圖：

          

結語

而目前行動裝置應用程式的分類大致上有三種：

 1.     Native App(原生應用程式)
         效能最好，功能完整。但是開發與維護門檻高，不同裝置要使用不同開發語言，同樣裝置也有作業系統版本問題。
         且需考慮硬體、螢幕尺寸與裝置未來發展性還有應用程式佈署更新等問題。

 2.     Web App(網頁版應用程式)
         效能與功能較差，無法離線操作。但是開發門檻與維護成本最低。且若不需要使用到行動裝置的API，以Web App即
         可滿足大多數企業應用需求。LEAP就是屬於這型的。

3.     Hybrid App(混合型應用程式)
新的App方式，各裝置上透過第三方應用程式，載入Web App。因此可支援行動裝置大多數的API，也具有Web App易
開發的特性。在Adobe Flash技術在行動裝置上漸漸式微後，Adobe也轉向Hybird App，併購相關公司。但目前成熟度
還不高，需要時間觀察。

 因此我們可以期待LEAP開發方案，可在最少的投入成本下，快速開發適合PC、行動裝置等應用，達到真正” Write once, run anywhere”的目標。