PowerBuilder編程新思維5:包裝(界面美化與WebUI+React)
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)