蘇 芝， 李 茹

(1. 上海船舶運(yùn)輸科學(xué)研究所 艦船自動(dòng)化系統(tǒng)事業(yè)部， 上海 200135；2. 上海工程技術(shù)大學(xué) 高等職業(yè)技術(shù)學(xué)院， 上海 200437)

0 引 言

隨著通信技術(shù)和自動(dòng)控制技術(shù)的發(fā)展及“自主船舶”建議的提出,航運(yùn)界和造船界對船舶智能監(jiān)控系統(tǒng)的需求不斷高漲。船舶所有人不僅希望船舶在航行期間具有一定的“智能”特性，而且希望能采用多種方式對航行中的船舶進(jìn)行遠(yuǎn)程監(jiān)控, 這就提出了船舶智能監(jiān)控系統(tǒng)軟件能同時(shí)在桌面端和移動(dòng)端使用的需求。然而，不同類型船舶的智能監(jiān)控系統(tǒng)有很大差別，為每種船舶開發(fā)桌面端和移動(dòng)設(shè)備端2套系統(tǒng)會(huì)帶來巨大的開發(fā)成本和后期維護(hù)成本。在此情況下，提出船舶智能監(jiān)控系統(tǒng)軟件在桌面端和移動(dòng)設(shè)備端界面自適應(yīng)的要求。

1 響應(yīng)式設(shè)計(jì)理念

傳統(tǒng)的網(wǎng)頁都是基于桌面端設(shè)計(jì)的，尺寸一般是固定的，不能根據(jù)設(shè)備的變化作相應(yīng)的調(diào)整，因此在平板、手機(jī)等移動(dòng)設(shè)備端顯示的效果和可讀性比較差，使用不方便，甚至可能影響正常使用(見圖1)[1]。

響應(yīng)式網(wǎng)頁設(shè)計(jì)[2]也稱自適應(yīng)網(wǎng)頁設(shè)計(jì)，可根據(jù)屏幕的尺寸、平臺(tái)等自動(dòng)調(diào)整其顯示的界面，以保證界面操作方便、美觀大方。

Bootstrap框架不僅具有良好的響應(yīng)式設(shè)計(jì)理念，而且簡單易學(xué)；ZRender包含需繪制的圖形在內(nèi)的多種繪制方式。因此，采用Bootstrap框架進(jìn)行界面設(shè)計(jì)，采用ZRender進(jìn)行圖形繪制。

2 Bootstrap和ZRender介紹

Bootstrap[3]是Twitter網(wǎng)站推出的一種目前比較流行的開源工具包，基于HTML、JavaScript[4]和CSS開發(fā)，具有移動(dòng)設(shè)備優(yōu)先、支持主流瀏覽器、響應(yīng)式設(shè)計(jì)、簡單靈活和容易操作等優(yōu)點(diǎn)[5-6]。基于Bootstrap框架開發(fā)的網(wǎng)站可解決多樣化樣式和平臺(tái)無關(guān)性問題[5]。國內(nèi)很多大型網(wǎng)站(如新浪時(shí)尚頻道、知乎等)和很多主流電商網(wǎng)站(如淘寶、京東等)都采用Bootstrap框架，用戶反映效果良好，開發(fā)技術(shù)成熟。

ZRender是二維繪圖引擎，提供包含Canvas在內(nèi)的多種渲染方式，不僅易學(xué)易用，而且具有豐富的圖形選項(xiàng)和易擴(kuò)展等功能[7]。ZRender庫中封裝有各網(wǎng)站采用的渲染方式。

因此，采用Bootstrap框架和ZRender渲染進(jìn)行移動(dòng)設(shè)備和桌面窗口界面自適應(yīng)開發(fā)，無論是從布局、屏幕自適應(yīng)方面看，還是從網(wǎng)頁效果方面看，都更容易創(chuàng)造視覺的沖擊，是Web開發(fā)的趨勢[5-6]。

3 實(shí)現(xiàn)原理和開發(fā)流程

為實(shí)現(xiàn)移動(dòng)設(shè)備端和桌面端界面自適應(yīng)，利用柵格系統(tǒng)對移動(dòng)設(shè)備端和桌面端采用不同的類屬性。在開發(fā)過程中，只寫1套在桌面端和移動(dòng)設(shè)備端都能使用的代碼，根據(jù)媒體查詢設(shè)置不同的container容器寬度，在容器內(nèi)用百分比設(shè)置其列col的寬度，以自適應(yīng)不同大小的屏幕。一行row共有12個(gè)col,只需添加相關(guān)的類名，并使對應(yīng)類名后面的數(shù)字之和為12即可。

圖2 開發(fā)流程

開發(fā)流程為：采用Bootstrap布局對頁面進(jìn)行分割，在分割的不同Div中采用ID選擇器對其封裝的控件進(jìn)行調(diào)用；在封裝時(shí)，可對一個(gè)Div中要顯示的控件進(jìn)行整體封裝；在調(diào)用控件時(shí)，可對其默認(rèn)的屬性進(jìn)行設(shè)置。具體開發(fā)流程見圖2。

4 實(shí)現(xiàn)過程

為實(shí)現(xiàn)移動(dòng)設(shè)備端和桌面端界面自適應(yīng)，主要考慮庫中已有的控件和需開發(fā)的控件。本文主要對需開發(fā)的控件進(jìn)行分析(已有的控件滿足要求)。

以是否帶標(biāo)題矩形框?yàn)槔M(jìn)行繪制，以整個(gè)畫面控件封裝為例進(jìn)行代碼展示，采用MyEclipse2017編輯器和Tomcat 9.0服務(wù)器進(jìn)行開發(fā)，具體步驟如下。

1) ZRender進(jìn)行繪制。在該帶標(biāo)題的矩形框開發(fā)中，主要采用ZRender庫中封裝好的矩形函數(shù)(zrender.Rect)，對其形狀(shape)和樣式(style)進(jìn)行屬性賦值，具體代碼見圖3。

圖3 是否帶標(biāo)題矩形框代碼

2) JQuery封裝。JQuery是JavaScript的一個(gè)函數(shù)庫，可對JavaScript進(jìn)行擴(kuò)展和封裝，使其使用更簡單、方便。在進(jìn)行JQuery封裝時(shí)，可對一個(gè)Div中需顯示的控件進(jìn)行整體封裝，該封裝采用原型法(prototype類)，綁定多個(gè)函數(shù)，避免單個(gè)對象獨(dú)占函數(shù)代碼，影響效率。在封裝時(shí)，采用$.fn.drawMEMainView定義擴(kuò)展方法，用this.each遍歷drawMEMainView中的每個(gè)函數(shù)。具體封裝調(diào)用代碼以主機(jī)畫面為例進(jìn)行說明(見圖4)。

圖4 JQuery封裝代碼

3) HTML文檔調(diào)用。在調(diào)用MTML文檔時(shí)采用ID選擇器的方式，在布局好的Div中添加ID選擇器，若在某個(gè)Div中添加內(nèi)容，可直接使用ID選擇器。圖5為HTML文檔調(diào)用,采用的ID選擇器為$(‘#mytest1’)，調(diào)用封裝好的JQuery(GE1monter)，這里設(shè)置的是Div內(nèi)容顯示的寬度和高度，也可根據(jù)需要對其默認(rèn)屬性進(jìn)行相應(yīng)的修改。

圖5 HTML文檔調(diào)用

圖6 手機(jī)設(shè)備端顯示效果

按上述操作即可實(shí)現(xiàn)移動(dòng)設(shè)備端和桌面端界面自適應(yīng)。

5 自適應(yīng)界面的實(shí)現(xiàn)

5.1 移動(dòng)設(shè)備端界面自適應(yīng)的實(shí)現(xiàn)

在Bootstrap中，支持移動(dòng)設(shè)備優(yōu)先，需在HTML5開發(fā)文檔標(biāo)簽中添加下述命令，即：

由此，不僅能根據(jù)設(shè)備本身的寬度自動(dòng)縮放，而且可手動(dòng)縮放，以實(shí)現(xiàn)移動(dòng)設(shè)備端界面自適應(yīng)。以手機(jī)為例，顯示效果見圖6，只需上下滑動(dòng)手機(jī)屏幕即可清晰地瀏覽網(wǎng)頁。

5.2 桌面端界面自適應(yīng)的實(shí)現(xiàn)

界面展示以桌面屏幕分辨率為1 920×1 080為例進(jìn)行展示，顯示效果見圖7。

圖7 桌面端顯示效果

5.3 分析與結(jié)論

采用Bootstrap框架進(jìn)行界面布局，采用ZRender進(jìn)行圖形繪制，采用JQuery封裝的方式進(jìn)行移動(dòng)設(shè)備端和桌面端界面自適應(yīng)的開發(fā)。從圖6和圖7顯示的效果中可看出，界面能在移動(dòng)設(shè)備端自動(dòng)適應(yīng)屏幕尺寸，可解決傳統(tǒng)設(shè)計(jì)存在的顯示內(nèi)容不全、不清晰和可讀性差等問題。

6 結(jié) 語

基于HTML5技術(shù)，采用Bootstrap框架實(shí)現(xiàn)移動(dòng)設(shè)備端和桌面端界面自適應(yīng)。試驗(yàn)結(jié)果表明，自適應(yīng)效果良好，不僅能節(jié)約開發(fā)成本和開發(fā)時(shí)間，降低軟件維護(hù)成本，而且可為船舶智能監(jiān)控系統(tǒng)的開發(fā)及其他B/S架構(gòu)軟件的開發(fā)提供技術(shù)支持和可靠保障。