PowerBuilder編程新思維5：包裝（界面美化與WebUI+React）

前一節，分析了三種界面美化方案，都是控件級的美化。今天再來分析一下窗口級的美化。上一次講的DirectUI，大家反響一般，效果和創新都不足。那是沒有講完的原故。今天……還是沒有講完，不過效果應該還行吧：）。

PB界面美化方案四：DirectUI包裝

Hook的方式使用DirectUI，是局限在控件裏。如果創建一個類似Canvas的可視控件，把所有控件包裝在一個（或幾個）控件裏面，我把這種方式稱之包裝（Wrap）。

在現有界面上改造，不需要改動原有代碼，只需在界面open事件中打開u_dui控件，並of_load("ui.xml")即可，所有消息轉到相應名稱的控件的事件中。ui.xml是DirectUI的界面定義文件，如下圖（所有資源來源於網絡）

PB界面美化方案五：Sciter（WebUI）包裝

相比DirectUI的界面包裝，WebUI的界面包裝更為流行。使用Web控件替代原有控件，可以做出非常好的效果。

Sciter及其前身HtmlLayout，都是大名鼎鼎的WebUI控件，使用廣泛。Sciter的Powerbuilder封裝，在PowerFramework中有提供。

Sciter是最早一批專業的WebUI解決方案，相比Cef近百兆的體積，它的只有幾兆。所以在通用軟件中廣泛使用。

Sciter的缺點就是不完全與Js兼容，在體積與速度方面有優勢，在兼容性方面就有劣勢了。由於前端飽受IE的折磨，建議對體積與速度方面不太敏感的應用不要使用。

Sciter的效果還是很贊的，下圖是QQ動態登錄界面。

PB界面美化方案六：Miniblink（WebUI）包裝

Miniblink是這兩年冒出的嵌入式Web新秀，更新非常快，所以用起來很放心。它的大小20多兆，比Cef小很多，而且使用的是比較新的Chrome內核版本，相比Sciter，Miniblink幾乎沒有兼容性的問題。可以順利運行幾乎所有的前端框架。

PowerFramework也封裝了Miniblink，而且還全面導出了Powerbuilder的JS接口，使用方便。在PowerPlume裏面，也封裝了Miniblink（u_wui），但是沒有像n_lua對象，或者PowerFramework一樣導出JS接口。至於為什麽，往下看就知道了。使用效果如下圖：

PB界面美化方案七：DirectUI自動包裝

前面所說的包裝（Wrap）全部都手工進行的，就是手工編寫相應的XML，或者HTML。對於個別的界面美化是可行的，如果對於大型管理軟件做這樣的美化修改是不可能的。界面的數量太多，手工編寫工作量太大，而且測試工作量同樣巨大。這時，我們要求對現有界面進行自動包裝，生成相應的XML或者HTML。

DriectUI的自動包裝工作，比較好做。只需在控件的相應位置，添加一個控件，把原有控件置為底層即可。

u_dui控件使用方法如下：

 1 if not isvalid(iu_dui) then
 2     cb_unwrap.event clicked()
 3     OpenUserObject(iu_dui, "u_dui", 0, 0)
 4     iu_dui.of_load("ui2.xml")
 5     
 6     iu_dui.of_wrap(cb_dui, "")
 7     iu_dui.of_wrap(cb_wui, "")
 8     iu_dui.of_wrap(cb_unwrap, "")
 9     
10     iu_dui.of_wrap(st_1, "")
11     iu_dui.of_wrap(st_2, "")
12     iu_dui.of_wrap(sle_1, "")
13     iu_dui.of_wrap(sle_2, "")
14 end if

對於Datawindow這樣的控件，暫時沒有包裝方案，所以不動即可。

PB界面美化方案八：WebUI自動包裝

這個部分最難。涉及的方面非常多。

要求生成的代碼必須要有通用性、可定制化、簡單清晰。要達到這個要求，必須是動態頁面，而非靜態HTML。所以選型的時候，重點考慮了React、Vue、Angular，而不是傳統的JQuery+Bootstrap。

React作為大熱的前端框架，這裏就不詳細介紹了。React只負責View的部分，這正是我們需要的，相比大而全的Angular更適合WebUI包裝。而基於MVVM模型的Vue，則可能在接口方面有更底層的修改需求，所以最終選擇了React。

完整的MVC框架，應該是React+Redux組合，則使用PB替換Redux就是我們的目標。首先，我們來分析一下Redux。下面是簡化版Redux：

// Mini Redux
    const createStore = (reducer) => {
      let state;
      let listeners = [];

      const getState = () => state;

      const dispatch = (action) => {
        state = reducer(state, action);
        listeners.forEach(listener => listener());
      };

      const subscribe = (listener) => {
        listeners.push(listener);
        return () => {
          listeners = listeners.filter(l => l !== listener);
        }
      };

      dispatch({});

      return { getState, dispatch, subscribe };
    };
    const reducer = function (state, action) {
        ...
        return null;
    };
    const store = createStore(reducer);
    const state = store.getState();

由於Redux的靈感來自於Flux的單向數據流，所有的數據只有一個入口Reducer。所以，最終設計的JS接口只有一個（又雙叒叕是一個接口？！）

pbSend( { type: ‘clicked‘, payload: {name: ‘button‘, value: ‘‘} } );

u_wui的使用方式與u_dui類似，只多了一個of_render(template, output)接口

 1     OpenUserObject(iu_wui, "u_wui", 0, 0)
 2     iu_wui.width = parent.width
 3     iu_wui.height = parent.height
 4     
 5     iu_wui.of_wrap(cb_dui, "")
 6     iu_wui.of_wrap(cb_wui, "")
 7     iu_wui.of_wrap(cb_unwrap, "")
 8     
 9     iu_wui.of_wrap(st_1, "")
10     iu_wui.of_wrap(st_2, "")
11     iu_wui.of_wrap(sle_1, "")
12     iu_wui.of_wrap(sle_2, "")
13     
14     iu_wui.of_render("res/html/wui.tpl", "res/html/wui.html")

WebUI在使用時，加載會有一段時間的空白頁面， 可以使用各種技術手段來解決，比如加載動畫，比如服務端渲染（緩存的方式）等等，本節就不深入了。

預告：PowerPlume共分為內外上下後前6部分18篇，敬請期待。

有人留言說，PB9能不能支持，當然能支持（多了pblua.pbd，pbdui.pbd，pbwui.pbd三個文件）。PB8及以下的由於不支持PBNI，所以不能支持。

WindowsXP不能運行的問題，沒有測試過，本次試著降級VC++版本為VC2010進行編譯。

源碼: PowerPlumeDemoV0.5.3.rar

提供了PB9.0 PB10.5 PB11.5 PB12.5四個版本

Miniblink node.dll: node.rar

Miniblink由於太大，所以沒有包含在源碼內，采用的是miniblink-190226版本，使用其它版本可能會找不到API。

<本節完>

PowerBuilder編程新思維5：包裝（界面美化與WebUI+React）