嵌入式 linux 智慧型裝置應用中 web 支援的實現(一)

由兩篇文章組成的系列文章主要闡述如何在嵌入式 Linux 智慧型裝置的應用程式中增加 Web 支援。第 1 部分，我們將會介紹嵌入式 Linux 智慧型裝置開發的現狀、Qt 和 WebKit 的概念。並以廣告機和手持點菜機等應用為例，敘述在嵌入式 Linux 平台以及 Qt，WebKit 等技術的協助下，如何在終端應用程式中添加網頁瀏覽的功能，如何用 Web 技術取代傳統 UI 技術，以及如何在智慧型裝置上實現從 C/S 到 B/S 的開發模式的轉換。

嵌入式 Linux 智慧型裝置開發的現狀

近幾年，嵌入式 Linux 在智慧型裝置中的應用發展的非常迅速。可以預見，嵌入式智慧型裝置和我們的生活將會越來越密不可分。

Linux 在嵌入式系統中的應用可以分為兩大類：面向服務類和面嚮應用類。典型的面向服務類系統有交換器、路由器、監控裝置等；典型的面嚮應用類的系統有手機、PDA、機頂盒等。本文主要討論面嚮應用類，特別是指帶有網路和 UI 的應用系統。

在嵌入式 Linux 上進行帶 UI 的應用程式開發是一件非常複雜的事情，主要涉及以下幾個方面：

UI 系統

Linux 本身的 UI 系統並不統一，嵌入式版本上的 UI 系統更是五花八門，而且與其 PC 版本相比也有一些適應性的改變。而有些產品的開發甚至不使用 UI 系統，通過直接往 framebuffer 貼圖的方式來實現 UI。而且與 PC 相比，嵌入式系統的效能問題，也讓嵌入式的 UI 系統在表現上做出很多妥協。這些都使得開發難度增加，帶來更多的不相容問題。這些都使嵌入式 Linux 上的應用開發和移植變得更加困難，另外也使培養一名合格的嵌入式工程師的成本變的比較高。

廠商支援

對於一個嵌入式平台，其主晶片的生產商對這個平台影響巨大。一般來說，生產商會提供對某個或者某些 UI 系統的支援，但是他們不可能支援所有的系統。所以，選定一個嵌入式平台就意味著Team Dev需要切換到這個平台所能支援的 UI 平台上。這個團隊之前做的應用就需要移植到新的 UI 平台，而這個移植是非常麻煩的。

瀏覽器

嵌入式 Linux 的網路介面一般都支援 posix 的標準，但是嵌入式裝置的瀏覽器則與 UI 系統一樣是五花八門的。在應用的推動下，嵌入式 Linux 平台上的瀏覽器在近年發展也非常迅速。他們基於不同的 UI 平台進行開發（也有一些直接操作 framebuffer），對 Web 標準的支援和相容性各不相同。比較簡單的瀏覽器只能支援 HTML 標籤，優秀的產品則能在相容性上做到與 PC 平台上的瀏覽器幾乎同樣的水平。

伺服器技術

很多嵌入式應用需要與伺服器進行串連，點菜機就是一個典型的應用。手持智慧型裝置端需要將使用者的操作寫入遠端伺服器，然後遠端資訊管理系統進行進一步的處理。這種類型的應用對於 PC 平台來說就是一個非常簡單的資料庫應用系統，資料庫、遠程調用、並發、中介軟體等技術已經應用了多年，而且還有眾多成熟的公司專屬應用程式的架構，可以靈活而快速的搭建出一個系統。但是這些在嵌入式平台都是不存在的，這意味著開發人員還需要用相當於 PC 平台十幾年前的水平來進行開發，為了讓嵌入式系統和伺服器的資料庫進行對接，開發人員還需要在伺服器端編寫一個專門的程式來充當橋樑的作用。筆者見過在不少項目裡還需要直接控制 socket 來和伺服器進行資料交換，這些對於 PC 平台都是不可想象的。另外開發一個支援多個用戶端並發的穩定伺服器程式並不是一件容易的事情，這些問題都會影響整個嵌入式開發過程的成本和品質。

如果一個公司希望在某個嵌入式 Linux 平台上開發一個包含了 網頁瀏覽的應用，而他自己之前並不擁有一個完善的平台的話，其Team Dev首先需要選定一個 UI 系統，然後尋找一家做瀏覽器的公司，與其合作，再想辦法將瀏覽器移植到自己的平台上。如果是需要在自己的應用程式中嵌入一個瀏覽網頁的表單，那麼問題就會更加複雜，因為還涉及到與選定的瀏覽器進行代碼或者模組層級別整合的問題。

Qt 和 WebKit 簡介

Qt 是一個跨平台的 C++ 圖形化使用者介面應用程式架構，對 Windows、Linux、Mac OS X、Unix、Free BSD 等主要的作業系統均有支援。Qt 不僅包含了圖形介面庫，還整合了 Network、File、IO、Database、2D/3D、XML 等模組，基本涵蓋了一個應用程式所需要的所有功能，這些讓 Qt 成為最有影響力的跨平台架構，Linux 平台上的 KDE 就是基於 Qt 開發的。Qt Embedded 則是 Qt 針對嵌入式平台的版本，在嵌入式平台的 UI 市場佔有很大的份額。

Qt 可以解決上一節所討論的很多問題，因為其優異的跨平台效能，開發人員甚至可以在 PC 上進行開發調試，然後直接將代碼放到交叉編譯環境中產生嵌入式版本，這樣的移植基本不需要改動代碼。

WebKit 是一個開源的瀏覽器引擎，目前 Safari，Chrome 等瀏覽器均使用了 WebKit 作為核心。Qt 從 4.5 版本開始，整合了 WebKit 作為 Qt 的平台組件，使用者可以像使用其他組件一樣將 WebKit 引擎整合到自己的應用程式中，以提供 Web 的支援。

 

在應用程式中添加網頁瀏覽的支援

通過網址 http://qt.nokia.com/downloads 可以找到 Embedded Linux 版本的最新 Qt 原始碼。現在最新版本是 4.5.3。

WebKit 作為第三方資源可以在如下目錄中找到：

\qt-embedded-Linux-opensource-src-4.5.3\src\3rdparty\WebKit\

Qt 中對 WebKit 做了封裝，主要有以下幾個類：

QWebView 最常用的類，這是一個表單控制項，可以用來渲染網頁
QWebPage 被 QWebView 包含，表示一個 documentQWebFrame 被 QWebPage 包含，表示一個 frameQWebSettings    Web 渲染的全域設定 QWebHistory 用於瀏覽的記錄

QWebView 是最常用的類，接下來我們大概的介紹一下這個類的組成。

根據標頭檔定義，我們可以得知這個類與 Qt 中按鈕、對話方塊等一樣，都是由 QWidget 派生，可以當做一個通用表單來使用。

class QWebKit_EXPORT QWebView : public Qwidget

這個類有如下的成員函數：

void load ( const QUrl &url );
void setHtml ( const QString &HTML, const QUrl &baseUrl = QUrl() );

這兩個函數可以讓 QWebView 載入網頁或者顯示一段 HTML 內容，是 QWebView 最重要的函數。

這個類還有幾個重要的 slot：

void stop ();
void back ();void forward ();void reload ();

這幾個函數也是我們平時瀏覽網頁時常用的功能。

QwebView 類還有幾個重要的 signal：

Q_SIGNALS:
void loadStarted (); void loadProgress ( int progress ); void loadFinished ( bool );

很明顯，這幾個 signal 是用來顯示網頁的載入過程。

接著我們通過代碼來看 QWebView 是如何使用的。假設程式有一個主表單 MainWindow，在 MainWindow 的建構函式中，有如下程式碼片段：

清單 1. MainWindow 建構函式的程式碼片段

 QWebView* view = new QWebView ( this );  // 設定表單左上方的座標以及長寬 view -> setGeometry( 50 , 50 , 400 , 300 );  view -> show();  view -> load( QUrl("http://www.google.com") ); 

裝置網路設定好之後，運行程式，我們就可以看到在表單中有一個地區顯示出 google 的首頁（編譯的時候要注意在項目的 pro 檔案中包含 WebKit 的標頭檔路徑和動態庫）。可見，Qt 已經將 WebKit 做了很好的封裝，子應用程式中加入網頁瀏覽功能是非常方便的。

如果希望能知道網頁載入的進度，可以通過如下的代碼來實現：

首先實現槽函數的定義：

清單 2. 槽函數的定義

 Private slot:  void setProgress(int progress)  {  // progress，即百分比進度 }  void loadFinished()  {  // 表示網頁載入完畢 } 

第二步串連 Qt 的訊號與槽函數：

清單 3. 串連 Qt 訊號與槽函數

 connect(view , SIGNAL(loadProgress(int)), this, SLOT(setProgress(int)));  connect(view , SIGNAL(loadFinished(bool)), this, SLOT(loadFinished())); 

這樣，在程式中加一個進度條表示網頁載入過程就實現了。

 

用 Web 取代本地 UI 的應用

在嵌入式 Linux 智慧型裝置上有一個典型的應用：資訊機，或者廣告機。這種機器一般都帶有一個螢幕，有些會有觸控螢幕。螢幕上會組合顯示文字、圖片和視頻，或者提供簡單的查詢功能。這種類型的裝置最先是由內建 PC 來實現的，在各種服務大廳供使用者使用。現在普遍使用嵌入式系統來取代 PC，以降低成本。

我們在銀行、通訊電訊廠商服務大廳、醫院、電梯房等地方經常能看到各種各樣的廣告機。一個典型的螢幕顯示情況如下：

圖 1. 廣告機螢幕樣本

這是組合比較複雜的情況，也有整個螢幕就是文字、圖片或者視頻的。與傳統和大型軟體開發相比，實現這樣的功能看上去並不算很難。開發人員可能需要在嵌入式平台自己去實現字幕、圖片和天氣的顯示組件或者模組（暫時忽略視頻播放功能），然後在螢幕上進行顯示即可。比較困難的地方在於以下幾個方面：

內容顯示

圖片和字幕需要以某種格式進行存放，天氣資訊來源於 Internet，開發人員需要編寫代碼對這些內容進行顯示，並根據不同規則對內容進行切換。如有以下的設定檔內容：

清單 4. 螢幕設定檔 1

 <screen>    <duration>30</duration>    <pic>1.jpg</pic>    <text>1.txt</text>    <video>1.avi</video>    <weather>http://xxxxx.HTML</weather>  </screen>  <screen>    <duration>25</duration>    <pic>2.jpg</pic>    <text>2.txt</text>    <video>2.avi</video>    <weather>http://xxxxx.HTML</weather>  </screen>  ...  ... 

開發人員需要編寫一個解析器，能夠解析這個 xml 檔案，並且按照其中的規則進行內容的顯示。

內容更新

如果需要對廣告機的內容進行更換，維護人員則需要將內容按照這個格式進行編排。編排的效果是需要反覆調整的，這個時候，要不就是每次都用一台廣告機來看實際效果，要不然可能還需要專門設計一個預覽程式。

顯示布局

螢幕的顯示布局很可能也是要變動的，那麼意味著布局最好也是可配置的，折舊要求廣告機程式能夠解析並且實現顯示布局的配置。如果說解析上面的設定檔並不是很麻煩的事情，但是如果設定檔變成下面這樣，就不一樣了。

清單 5. 螢幕設定檔 2

 <screen>     <duration>30</duration>     <pic x=800 y=200 width=320 height=240>1.jpg</pic>     <text x=0 y=600 width=1024 height=240>1.txt</text>     <video x=0 y=0 width=800 height=600>1.avi</video>     <weather>http://xxxxx.HTML</weather>  </screen>  <screen>     <duration>30</duration>     <pic x=800 y=200 width=320 height=240>2.jpg</pic>     <pic x=800 y=400 width=320 height=240>22.jpg</pic>     <text x=0 y=600 width=1024 height=120>2.txt</text>     <text x=0 y=800 width=1024 height=120>22.txt</text>     <video x=0 y=0 width=800 height=600>2.avi</video>     <weather>http://xxxxx.HTML</weather>  </screen>  ...  ... 

不但各種元素的位置可配置，圖片、文本等的數量也發生了改變。這個時候，解析程式將變得相當複雜。當更多的需求出現，如要求配置滾動字幕的速度、背景顏色，要求圖片和文字等內容可以單獨配置重新整理時間等，這樣的設定檔不會比 HTML 標準簡單，而解析程式的規模也將急劇膨脹。

綜上，廣告機的軟體關鍵並不在於內容如何能顯示出來，而是軟體需要有複雜的解析能力，能夠支援可配置的布局和內容。目前這些廣告機的設定檔大多使用 xml 來儲存資訊，而一個能夠同時解決複雜布局和內容顯示的程式，實際上已經非常類似瀏覽器的概念了。那麼，讓我們從真正的瀏覽器的角度來看待廣告機的這些問題。

如果把螢幕內容當成一個網頁的話，螢幕布局、內容顯示、更新、維護等都轉換成了設計網頁的問題，而最關鍵的解析程式的開發可以忽略，用已有的成熟的瀏覽器取代。這裡的網頁設計並不關係到網頁伺服器端的開發，因為廣告機的內容大多是儲存在本地，所以只需要直接設計頁面。頁面內容的更新，或者整個頁面的更新都可以通過標準 HTML，或者 JavaScript 之類指令碼裡實現。對於“天氣”播放功能的實現就更加簡單了，之前的方式需要編寫程式通過網路從遠程擷取資料然後顯示，比較麻煩。轉換成網頁模式之後，只需要在網頁中嵌入一個子網頁，指向遠端伺服器連結即可。可見，以廣告機為例，在架構上使用網頁來取代之前的模式，能充分利用已有的資源和工具，極大的減少開發的工作量。

我們再考慮另外一種應用：帶互動的資訊查詢機。帶互動功能的資訊機主要提供給人們索引和查詢資訊的功能，資訊被分類並且根據索引儲存，資訊機的解析程式通過與使用者的互動，顯示所需要的資訊。實際上，互動和索引跳轉是網頁天生的特性，所以，同樣可以採用網頁和瀏覽器的模式取代編寫本地程式進行互動和解析，可以把幾乎所有的工作轉換成網頁設計，從而將開發工作量減到了最低。

 

從 C/S 到 B/S 的轉換

在嵌入式智慧型裝置的應用中，有很大一部分是嵌入式智能終端需要與遠端伺服器進行串連，通過人機互動和資料擷取來實現應用，比較典型的就是點菜機。

無線點菜機是一種很常見的嵌入式智慧型裝置，大多採用 Windows CE 或嵌入式 Linux 作為作業系統。如果把點菜機當成一個 PC 系統，那麼這就是一個非常典型的用戶端 / 伺服器架構的應用。

圖 2. 無線點菜機系統樣本

2 所示，點菜機通過 WIFI 與伺服器相連，通過網路與伺服器通訊進行點菜操作，廚房端也有用戶端與伺服器相連，根據點菜情況進行菜品製作的安排。忽略 PC 和嵌入式開發的差異性，這個應用的實現過程和原理與 PC 基本是一致的。不同的是，通過網路實現業務的調用，如我們在前面提到過的，這在 PC 平台上已經有了很多資源甚至成熟公司專屬應用程式架構，但是在嵌入式 Linux 平台上幾乎都沒有。所以，開發人員需要自己來實現點菜機和伺服器之間的業務調用，進而與伺服器端的業務處理部分進行整合。

對於伺服器而言，最重要的部分就是資料庫，要遠端操作資料庫，PC 平台有大量的資料庫組件實現對各種資料庫的支援，但是在嵌入式 Linux 平台就沒那麼豐富的組件資源可以利用。所以，開發人員需要在伺服器端實現一個“代理”，點菜機通過“代理”對資料庫進行操作。這個“代理”不一定很複雜，但問題是，它仍然會佔用大量的開發工作量，消耗工作時間。另外一個問題在於，當這個系統功能需要改變時，比如希望在點菜機介面增加顯示圖片的功能，用戶端和“代理”端都需要同步進行開發，因此維護起來也是比較麻煩的。

實際上，這一類的應用在 PC 上現在大多已經由 C/S 模式轉向了 B/S 模式。既然現在嵌入式 Linux 平台已經有了 Web 的支援，那麼在嵌入式 Linux 平台 B/S 是否也同樣適用呢。對於點菜系統這樣的應用，假如我們在 pc 平台已經用 B/S 模式進行了實現（與很多公司專屬應用程式相比，這是比較簡單的）。只要嵌入式平台支援標準 Web，那麼直接用嵌入式用戶端的瀏覽器，這套系統的遷移很可能只需要考慮嵌入式裝置的螢幕尺寸問題，把網頁顯示調整一下而已。

除了點菜機之外，物流行業中廣泛使用的條碼掃描機也是典型的應用之一。當貨物入倉之時，工作人員用手持智能終端掃描條碼，資料會上傳到伺服器進行處理。如果採用 Web 方式，嵌入式 Linux 端開發工作量就會大大降低，只需要讀取條碼，然後通過 Web 輸入即可。