Adobe Flex在Vision DWCS大屏幕顯示控制軟件B/S結構中的應用

摘 要： 介紹了大屏幕拼接顯示控制軟件基于C/S結構的模塊組成及其關系，以及采用Adobe Flex編程實現B/S結構的方法。Vision DWCS大屏幕顯示控制軟件適合目前各種結構的硬件控制器并對各類矩陣、投影等周邊設備具有廣泛的支持，各項需求已達到要求。

關鍵詞： 大屏幕顯示； C/S結構； B/S結構； RGB數據； 視頻數據； 媒體流； Adobe Flex； TCP/UDP協議

中圖分類號： TN711?34 文獻標識碼： A 文章編號： 1004?373X（2013）13?0164?03

Application of Adobe Flex in B/S structure of Vision DWCS

CHEN Rong?rang

（Aircraft Strength Research Institute of China， Xi’an 710065， China）

Abstract： The module composition and its relationship of the digital wall control system （DWCS） based on the structure of C/S and the method of realizing the B/S structure using Adobe Flex programming are introduced. Vision DWCS is suitable for the hardware controller with all kinds of structure， and has wide support of all kinds of matrix， projection and other peripheral equipment. The requirements have been satisfied.

Keywords： large screen display； C/S structure； B/S structure； RGB data； video data； media stream； Adobe Flex； TCP/UDP

0 概 述

Vision DWCS大屏幕顯示系統管理軟件（Vision Digital Wall Control System）是一套基于硬件的控制軟件，它直接體現一個大屏幕顯示系統的功能。

Vision DWCS集成了視頻信號、RGB信號、網絡計算機信號和工作站信號，集成了對視頻矩陣，RGB矩陣，遠端攝像機，控制器，投影機等的控制與操作，通過它可以方便的把信號以窗口的形式在大屏幕顯示墻上顯示出來，如單屏顯示、任意大小顯示、共屏顯示、跨屏顯示、整屏漫游等；并且可以實現圖像和信號的切換，色彩和對比度的調節、預案顯示等功能；支持網絡控制，多用戶控制，遠程異地操作等功能，具備用戶管理，權限管理，通道管理，遠程鼠標管理等多種管理功能。用戶僅需要在一個圖形界面下通過鼠標操作就能完成對大屏的控制。

1 Vision DWCS的系統構成

Vision DWCS大屏幕顯示控制軟件系統以模塊方式構成，系統拓撲圖如圖1所示。

<＼＼192.168.0.25＼$d＼8月＼8-2＼補＼補！現代電子技術201313＼Image＼38t1.tif>

圖1 Vision WDCS系統拓撲圖

系統模塊分別為：

VIEW AGENT： Vision DWCS的服務模塊Viewagent，面向控制器，負責開關窗口，通道操作等。該模塊位于控制器上，接收SYSTEM MANAGER發來的操縱命令，在大屏上相應位置繪制窗口，切換輸入信號到窗口顯示出來。

SYSTEM MANAGER： Vision DWCS的一個服務模塊Sysmanager，面向VIEW AGENT，集成用戶命令，位于主控計算機上。它接收來自于各個用戶（OPERATOR）的操作命令，分類解析，單獨傳送到大屏控制器。另外，大屏系統的所有信息，如遠端攝像機，視頻矩陣，RGB矩陣，VGA信號，網絡信號，用戶信息等，都可以在此進行詳細設置。對于每套系統，只單獨配置一份SYSTEM MANAGER，就可以讓多用戶同時操作大屏。

OPERATOR： Vision DWCS的客戶模塊，面向的是SYSTEM MANAGER，模擬大屏，用戶在此完成對大屏的操作。該軟件模塊基于TCP/IP方式，在大屏上實時顯示窗口信息（窗口大小，種類，信號類型，通道等）。

SCLIENT： Vision DWCS的Windows網絡顯示服務模塊。安裝于各個計算機上，采用TCP/IP方式，將PC機的顯示信號通過網絡上傳到控制器進行顯示。該軟件拋棄了傳統的“拷屏——壓縮——傳輸——解壓——顯示”的網絡拷屏技術而采用WINDOWS HOOK動態檢測技術，實時監測屏幕上變化的部分并傳送該部分，使得系統資源占用最低，速度最快。

2 采用Adobe Flex技術Vision DWCS B/S結

構的系統實現

B/S結構是相對于C/S結構而言的。C/S結構，即Client/Server（客戶機/服務器）結構，是大家熟知的軟件系統體系結構，比如MSN，QQ，Outlook就屬于C/S結構。

B/S結構，即Browser/Server（瀏覽器/服務器）結構，是隨著Internet技術的發展，對C/S結構的一種變化或者改進的結構。在這種結構下，用戶接口完全通過WWW瀏覽器實現，一部分事務邏輯在前端實現，但是主要事務邏輯在服務器端實現，形成所謂3?tier結構。B/S結構利用不斷成熟和普及的瀏覽器技術實現原來需要復雜專用軟件才能實現的強大功能，相較于C/S結構開發，B/S開發節約成本，方便使用，已成為當今應用軟件的首選體系結構。

在大屏控制軟件Vision DWCS B/S結構設計方案中，選擇一種適合的B/S開發平臺和技術至關重要。經過反復的比較、測試，最終采用了Adobe Flex的Web應用程序作為Vision DWCS B/S結構的客戶端方案。

Adobe Flex是用于構建和維護在所有主要瀏覽器、桌面和操作系統一致地部署的極具表現力的Web應用程序的高效率的開放源碼框架。該技術提供了一個新的、基于標準的語言和編程模型，其編程模型支持常用的設計模式，能夠使企業創建許多有吸引力的、交互的快速應用，這些應用會戲劇性的增強用戶的體驗、增加客戶的滿意度和用戶的工作效率。傳統的Web開發，在表現層次受到非常大的約束，Flex技術不僅輕松解決了所有表現層的技術問題，讓客戶感受前所未有的Web應用體驗。更主要的是，基與Flash AS 3.0的純面向對象和組件的構架，讓B/S結構表現層的開發層次分明，結構完整協調，在提供強大華麗表現的同時，大大節約維護成本。

Vision DWCS的B/S結構系統包含兩個部分：Web應用客戶端（Flex App）和Web應用服務器（Flex Server）。其中，Web應用客戶端是實現用戶操作的Flash客戶端應用。Flex App主要是一個Flash程序文件，配合相關的動態網頁等配置文件，通過IIS或其他Http服務器部署在局域網內。由于Flex App本身就是標準的Web應用程序，所以部署起來和通常的網頁部署完全一致，無需額外的配置，因而十分簡單，易于操作。Web應用服務器是標準的Window開發的程序文件，從用戶命令的數據流來看，介于客戶端Flex App和Sysmanager之間，主要實現數據的中間轉發和系統設置管理。

用戶通過使用IE，Firefox等網頁瀏覽器，進行大屏幕的控制管理，Web客戶端的操作命令通過網絡TCP協議發送至Flex Server，需要轉發的命令就轉發給Sysmanager，由Sysmanager處理后送達VIEW AGENT，實現對大屏幕系統的最終控制。同樣，Sysmanager發回客戶端的數據經過Flex Server又回傳給用戶。

Vision DWCS B/S結構軟件的架構如圖2所示，箭頭表示了用戶操作指令的數據流向。

<＼＼192.168.0.25＼$d＼8月＼8-2＼補＼補！現代電子技術201313＼Image＼38t2.tif>

圖2 Vision DWCS基于B/S結構的數據流向

以下就是利用Flex技術開發的OPERATOR客戶端界面，如圖3所示，定義方法如圖4所示?？蛻舳说慕缑娌季指械腃/S版軟件基本一致。界面的上端是傳統的操作主菜單；左側包含了信號源列表，預案管理列表，羅列了當前可用的信號源和用戶的預案配置；中間的區域是大屏系統管理的可視操作界面，包括了開窗，關窗，窗口移動等一系列的功能；頁面下端包含了當前系統狀態的信息提示和狀態欄。

相比較原有的C/S結構，一個最明顯的不同，也是B/S結構最大的優勢，就是B/S的Web客戶端是基于網頁瀏覽器訪問的。原有的客戶端軟件需要進行軟件的安裝、部署，而B/S版的控制軟件根本沒有客戶端的安裝文件，用戶只需在IE，Firefox等瀏覽器中輸入服務器的IP訪問即可打開大屏控制軟件的接口，隨后就可以使用Web瀏覽器隨時隨地對大屏幕管理調度，甚至可以實現Internet廣域網的自由調度控制。

<＼＼192.168.0.25＼$d＼8月＼8-2＼補＼補！現代電子技術201313＼Image＼38t3.tif>

圖3 2×2拼接的控制操作界面

<＼＼192.168.0.25＼$d＼8月＼8-2＼補＼補！現代電子技術201313＼Image＼38t4.tif>

圖4 2×2拼接的定義方法

由于Adobe Flex技術基于Adobe的Flash播放平臺，而Flash Player是目前世界上最為廣泛流行的跨平臺的瀏覽器插件，支持Windows 2000/2003/XP/Vista所有32位/64位操作系統，同時也有Linux，Mac?OS，Solaris的版本。這就意味著B/S的客戶端可以在以上操作系統中使用，具有了跨平臺的優點，用戶可以有更多的選擇。

在系統后期的升級維護方面，B/S結構的軟件也有許多優勢。傳統的C/S客戶端需要安裝專用的客戶端軟件，特別是如果有很多客戶端的情況，工作量就會很大。還有，當系統軟件升級，或者受到病毒感染時，每一臺客戶機需要重新安裝，其維護和升級成本非常高。而B/S結構這種“零安裝”的特點大大降低了客戶端的維護成本。系統架構于Web技術之上，運行穩定，只要能上網，再由系統管理員分配一個用戶名和密碼，就可以使用了。同時便于后期升級維護：即只需升級Web服務器一端的軟件即可實現整體系統的升級，客戶終端用戶無須考慮版本升級所帶來的影響，客戶端零維護。

從用戶使用的習慣上，B/S客戶端最大程度地保留了原有C/S客戶端OPERATOR的操作，繼承了原有設計對于大屏開窗，關窗，移動窗口，改變窗口大小等通用性的操作模式，包含了用戶主菜單，右鍵菜單，用戶提示Tooltip，操作日志等友好的操作接口，不管是新用戶還是原來使用過C/S版軟件的用戶，都可以很快速、方便的了解和使用B/S版軟件進行大屏的操作控制。

在數據的通信方面，B/S的客戶端Flex App同服務端Flex Server之間通過TCP/IP協議進行網絡通信。Flex Server作為客戶端與原有系統通信的中繼系統，同時負責用戶數據的在線保存功能。Flex Server自動嘗試建立與原有C/S服務管理軟件Sysmanager的通信連接，同時監控來自Web客戶端的用戶連接。用戶發送的指令和連接狀態都有完整的日志記錄，方便用戶查詢。Flex Server整個過程無需人員操作，屬于無人職守的服務器軟件。

可以看出，Flex Server其實就是一個中間層的構件。從技術層面，B/S客戶端完全可以直接和Sysmanager進行直接通信，無需Flex Server在中間進行數據的轉發服務。需要Flex Server的原因是：一方面，由于在一般的B/S應用中，用戶的自身數據需要保存在服務器端，這就需要一個軟件作為服務器，進行相應的數據存儲維護服務；另一方面，一些計算量大的任務不宜放在用戶端進行，而需要在服務器端執行；因此，才有了Flex Server這樣的中間層設計。這樣做的好處是：第一，避免了讓Sysmanager承擔的功能過于復雜與繁重，符合軟件工程的設計理念；第二，在不改動原有C/S系統的基礎上完成了B/S軟件的數據傳輸通信，降低了系統之間的耦合，縮短了開發周期；第三，系統各個部分職責明確，便于以后的系統調試、升級，降低了維護成本。

以下是Flex Server的操作界面，如圖5所示。

Flex Server界面主要包含了主菜單、工具條、系統狀態記錄、任務欄幾個主要部分。工具條的按鈕主要包含了開啟服務、關閉服務、清空記錄、刷新客戶連接等。狀態欄包含了和Sysmanager的連接狀態以及當前連接的用戶數量等信息。

<＼＼192.168.0.25＼$d＼8月＼8-2＼補＼補！現代電子技術201313＼Image＼38t5.tif>

圖5 Flex Server界面

同時，基于Web應用程序的特點和方便用戶的角度出發，B/S結構軟件也對原有C/S版軟件進行了一些改動，包括用戶操作界面，用戶配置信息管理等方面，使得軟件的風格更加緊湊，功能設置也更加集中，方便用戶操作。

目前，Vision DWCS B/S版大屏幕控制軟件已經廣泛應用于各類大屏幕顯示控制系統中，并取得了良好的應用效果。

3 結 論

由于大屏幕拼接顯示控制軟件是一個相對復雜的調度系統，其用戶端操作包含大量的窗口信息、信號信息和設備信息，由C/S結構轉換成B/S結構，采用一般的Web編程技術難以實現，而采用Adobe Flex技術則可以支持相對復雜的B/S應用。通過Vision DWCS B/S版本的Adobe Flex編程實現，說明了Adobe Flex的技術特點。Adobe Flex使得B/S結構實現、構建簡單、快捷方便，且可以實現相對復雜的系統應用。

參考文獻

[1] Microsoft公司.Windows核心編程[M].USA：Microsoft公司，2002.

[2] 張靜，梁澍.Windows多媒體編程基礎[M].北京：清華大學出版社，2005.

[3] Microsoft公司.Windows網絡編程[M].USA：Microsoft公司，2002.

[4] 楊淑瑩.VC++圖像處理程序設計[M].2版.北京：清華大學出版社，2006.

[5] Microsoft公司.VC++6.0中文版程序員開發指南[M].USA：Microsoft公司，2002.

[6] [美]孫晗波.Adobe Flex 3程序設計指南[M].北京：電子工業出版社，2009.

[7] [美] TRETOLA Rich，BARBER Simon，ERICKSON Renaun. Adobe Flex高級編程[M].郝剛，袁永剛，譯.北京：人民郵電出版社，2008.