基于Silverlight 的在線定制系統(tǒng)的構(gòu)建

蔡志恒

（福建行政學(xué)院、福建江夏學(xué)院，福州350108）

現(xiàn)階段的電子商務(wù)已經(jīng)不滿足于簡(jiǎn)單地實(shí)現(xiàn)商務(wù)功能，電子商務(wù)技術(shù)與商務(wù)模式將有效融合，電子商務(wù)模式將有質(zhì)的創(chuàng)新和變革[1]。電子商務(wù)企業(yè)渴望通過(guò)模式創(chuàng)新延長(zhǎng)顧客網(wǎng)站停留時(shí)間、提高品牌忠誠(chéng)度、減少運(yùn)營(yíng)成本、增強(qiáng)客戶體驗(yàn)等，進(jìn)而提高銷(xiāo)量和業(yè)績(jī)。

RIA（Rich Internet Application 富互聯(lián)網(wǎng)應(yīng)用程序）[2]通過(guò)可分離實(shí)現(xiàn)的程序邏輯構(gòu)建更富具交互的應(yīng)用程序，帶來(lái)Web 交互性能的提高，進(jìn)而提高交互效率。當(dāng)RIA 主流解決方案之一的Flash（Flex）開(kāi)始流行的時(shí)候，許多人僅把它認(rèn)為是一種網(wǎng)頁(yè)動(dòng)畫(huà)，一種多媒體解決方案。當(dāng)微軟意識(shí)到Flash 不僅僅局限于網(wǎng)頁(yè)動(dòng)畫(huà)時(shí)，于2007年9 月急忙發(fā)布Silverlight，加入RIA 陣營(yíng)。RIA 的出現(xiàn)，改變了互聯(lián)網(wǎng)傳統(tǒng)的交互模式，其在電子商務(wù)領(lǐng)域應(yīng)用的巨大潛力開(kāi)始逐漸顯現(xiàn)，將引發(fā)電子商務(wù)業(yè)務(wù)創(chuàng)新的革命。

1 Web 交互性能提高對(duì)電商企業(yè)的意義

對(duì)于許多提供在線客服的電子商務(wù)企業(yè)來(lái)說(shuō)，客服人員被實(shí)時(shí)捆綁在客服平臺(tái)前面是一個(gè)問(wèn)題，對(duì)企業(yè)而言表現(xiàn)為人工成本開(kāi)支。舊有業(yè)務(wù)交互模式下，客服人員必須在線與顧客實(shí)時(shí)交互并及時(shí)做出響應(yīng)，一旦這種響應(yīng)延遲或者不符合顧客的意圖，常常會(huì)招致顧客抱怨。某些時(shí)候企業(yè)因?yàn)樘偷慕换バ?，?dǎo)致企業(yè)人工成本居高不下，困擾企業(yè)經(jīng)營(yíng)。Web 交互效能低下對(duì)電子商務(wù)企業(yè)的束縛，成為企業(yè)頭疼的成本問(wèn)題，對(duì)此類(lèi)場(chǎng)合進(jìn)行業(yè)務(wù)創(chuàng)新，提高企業(yè)運(yùn)營(yíng)效率，是企業(yè)客觀上的需要。

電子商務(wù)企業(yè)通過(guò)業(yè)務(wù)模式創(chuàng)新，提高企業(yè)經(jīng)營(yíng)效率，主要得益于RIA 的良好交互性能。RIA 的商業(yè)價(jià)值開(kāi)始顯現(xiàn)?；赟ilverlight RIA 的名字首飾在線定制系統(tǒng)，通過(guò)改良Web 交互性能改造企業(yè)的業(yè)務(wù)流程，該系統(tǒng)降低了企業(yè)人工成本，提高了生產(chǎn)效率。希望對(duì)于其他需要通過(guò)改良Web 交互性能帶來(lái)效益提高的電子商務(wù)企業(yè)，本文具有一定借鑒和參考價(jià)值。

2 企業(yè)問(wèn)題與需求分析

2.1 企業(yè)問(wèn)題

名字首飾是顧客使用自己或他人的名字、字母作為首飾設(shè)計(jì)主要元素，委托設(shè)計(jì)師設(shè)計(jì)生產(chǎn)的個(gè)性化風(fēng)格首飾。和麗企業(yè)是一家主要經(jīng)營(yíng)網(wǎng)絡(luò)名字首飾定制業(yè)務(wù)的電子商務(wù)企業(yè)，原來(lái)的業(yè)務(wù)模式為：顧客在網(wǎng)絡(luò)上通過(guò)旺旺、QQ 或留言板等方式與和麗客服人員進(jìn)行實(shí)時(shí)溝通，設(shè)計(jì)師根據(jù)顧客的要求設(shè)計(jì)并反饋以首飾草稿初圖，然后針對(duì)顧客的反饋意見(jiàn)對(duì)草稿圖進(jìn)行不斷修改完善，最終確定首飾稿件，和麗將確認(rèn)的首飾稿件交由生產(chǎn)商生產(chǎn)出成品，包裝郵寄給顧客，完成業(yè)務(wù)過(guò)程。

企業(yè)的問(wèn)題在于：設(shè)計(jì)師需要消耗大量溝通時(shí)間才能確定顧客的需求，這個(gè)過(guò)程耗時(shí)且費(fèi)勁，占據(jù)了人工成本很高的比例，大部分的人工成本都是在這個(gè)環(huán)節(jié)發(fā)生的。顧客的需求常被曲解，造成返工率較高。稿件的人工管理也比較隨意，會(huì)出現(xiàn)丟單等錯(cuò)誤。首飾工匠對(duì)稿件的理解也會(huì)出現(xiàn)偏差，手工生產(chǎn)具有一定隨意性，造成返工。首飾工匠需要休息，無(wú)法提供全天候不間斷生產(chǎn)，而顧客希望盡快拿到產(chǎn)品。這些因素造成了企業(yè)定制人工成本過(guò)高，占據(jù)首飾定制成本的一半以上。

2.2 企業(yè)需求

（1）客服負(fù)擔(dān)：客服人員不必被實(shí)時(shí)捆綁在客服平臺(tái)前，減少稿件溝通的工作量；（2）定制效果：稿件更貼近顧客的構(gòu)想；（3）稿件管理：方便定制依據(jù)、保存、共享和發(fā)布；（4）首飾生產(chǎn)：自動(dòng)化和連續(xù)性生產(chǎn)；（5）售后：方便產(chǎn)品追蹤和管理。

3 在線定制系統(tǒng)主要功能結(jié)構(gòu)

根據(jù)企業(yè)需求，進(jìn)行業(yè)務(wù)創(chuàng)新的名字首飾在線定制系統(tǒng)框圖如圖1 所示：

圖1 名字首飾在線定制系統(tǒng)Fig.1 The online customization system of Name jewelry

從系統(tǒng)框圖可以看出，基于Silverlight RIA 系統(tǒng)交互性能得到改良：稿件定制與首飾生產(chǎn)模塊發(fā)揮了重要作用，大部分的稿件確定和首飾生產(chǎn)工作可以由這個(gè)系統(tǒng)自動(dòng)完成，人工成本大幅度地減少。

4 系統(tǒng)核心技術(shù)實(shí)現(xiàn)

4.1 Silverlight 和JavaScript

Silverlight 前期的開(kāi)發(fā)代號(hào)WPF/E，是微軟WPF的一個(gè)子集。WPF/E Silverlight 架構(gòu)分為兩大部分：.NET for Silverlight 和 Silverlight 表 示 核 心 。Silverlight 1.0 是通過(guò)以瀏覽器為基礎(chǔ)的“文檔對(duì)象模型”（Document Object Model:DOM）和“Silverlight 對(duì)象模型”來(lái)實(shí)現(xiàn)其功能[3]，解釋XAML 并將內(nèi)容呈現(xiàn)在瀏覽器中，該插件以可編寫(xiě)腳本的方式向?yàn)g覽器提供其內(nèi)部的文檔對(duì)象模型（DOM）和事件模型，通過(guò)DOM 訪問(wèn)頁(yè)面其他標(biāo)準(zhǔn)組件。DOM 級(jí)別的對(duì)象通過(guò)新的托管接口包裝成托管對(duì)象并提供給 Silverlight代碼，此方法向基礎(chǔ)瀏覽器發(fā)出請(qǐng)求以獲取對(duì)指定DOM 元素的引用，請(qǐng)求成功得到DOM 對(duì)象的非托管引用，然后它創(chuàng)建對(duì)象并返回托管包裝。Silverlight提供了跨平臺(tái)的特性。它可以在Mac 和Windows 上工作，它可以在IE，F(xiàn)irefox，Safari 上工作，將來(lái)還可以在Opera 上工作[4]。

XAML 是可以用來(lái)描述Silverlight 元素的語(yǔ)言，構(gòu)建用戶界面和程序邏輯。通過(guò)Silverlight 開(kāi)發(fā)的元件編輯平臺(tái)，完成元件組合成名字首飾的過(guò)程，顧客可以對(duì)元件進(jìn)行各類(lèi)操作，并形成最終以XAML 保存的名字首飾文件。采用XAML 作為設(shè)計(jì)各類(lèi)名字首飾的基礎(chǔ)，并使用Silverlight 開(kāi)發(fā)首飾元件的增加、修改、刪除、收縮、變形、加載、保存等操作功能，用戶根據(jù)個(gè)人喜好編輯組合各類(lèi)元件最終形成符合個(gè)人要求的名字首飾。

Javascript 或.NET 編程語(yǔ)言作為邏輯腳本，將HTML 或ASP 作為瀏覽器瀏覽的入口點(diǎn)，引用Silverlight.js 進(jìn)行插件初始化。由微軟官方提供的Silverlight.js 創(chuàng)建了Silverlight 對(duì)象所必需的兩個(gè)方法：CreateObject（）和CreateObjectEx（），它們的參數(shù)定義了Silverlight 對(duì)象尺寸、元素ID、所引用的XAML 文件等，使得Silverlight 能夠解釋并呈現(xiàn)XAML 內(nèi)容在瀏覽器窗口中。用JavaScript、C#等編程語(yǔ)言調(diào)用CreateObject（）或者CreateObjectEx（）方法，調(diào)用Silverlight 對(duì)象，實(shí)現(xiàn)程序邏輯和事件處理方法，實(shí)現(xiàn)文字首飾設(shè)計(jì)的形狀（界面）和程序邏輯，載入含有用戶界面和程序邏輯的XAML 文檔，完成XAML 對(duì)象的交互：模板選擇、元件（文字等）插入、變形等操作。名字首飾元件由XAML 構(gòu)造。

4.2 交互功能的實(shí)現(xiàn)

Silverlight RIA 交互功能的實(shí)現(xiàn)是本系統(tǒng)的核心，交互功能的實(shí)現(xiàn)如圖2 所示：

圖2 交互功能實(shí)現(xiàn)Fig.2 The Interactive Function Implementation

4.2.1 初始化Silverlight 對(duì)象

若已知Silverlght 對(duì)象的引用，通過(guò)調(diào)用傳遞給事件處理程序的sender 參數(shù)的GetHost（）方法來(lái)獲取裝載此Silverlight 對(duì)象的Silverlight 插件。若Javascript 代碼不是由Silverlight 事件觸發(fā)時(shí)，則必須使用document.getElementById（）方法來(lái)取得，然后再調(diào)用此Silverlight 插件的findName（）方法。 引用Sivlerlight 插件的settings 屬性和content 屬性，可以存取某一群屬性與方法。

4.2.2 對(duì)象的添加、刪除

添加Silverlight 對(duì)象：

sender.children.Add（value）：將 value 參數(shù)指定的對(duì)象添加到已有的對(duì)象層級(jí)中；

sender.children.insert（n，value）：將 value 參數(shù)指定的對(duì)象添加到索引位置n。

刪除Silverlight 對(duì)象：

object.remove（value）：將 value 參數(shù)指定的對(duì)象刪除；

value＝object.removeAt（index）：將index 參數(shù)所指定的索引值的對(duì)象刪除；

object.clear（）：將集合中的所有對(duì)象刪除。

4.2.3 文字對(duì)象屬性修改

調(diào)整功能可通過(guò)設(shè)置Silverlight TextBlock 元素的FontFamily 屬性實(shí)現(xiàn)指定字體，通過(guò)FontSize 屬性實(shí)現(xiàn)指定文字改變。

4.2.4 事件綁定

事件綁定包括聲明式綁定和動(dòng)態(tài)綁定兩種方式。聲明式綁定用Loaded 屬性指定對(duì)象事件名稱，通過(guò)x:Name 屬性指定XAML 對(duì)象名稱，為myRet 對(duì)象綁定了onLoaded 事件。 onLoaded 事件中通過(guò)sender.findName（＂myRet＂）的方法獲得名稱為 myRet的對(duì)象，然后對(duì)該Rectangle 進(jìn)行相應(yīng)操作。

addEventListener（）方法允許動(dòng)態(tài)綁定一個(gè)事件響應(yīng)，例如在鼠標(biāo)動(dòng)作的時(shí)候同時(shí)執(zhí)行某一個(gè)操作，為當(dāng)前DOM 對(duì)象注冊(cè)多個(gè)事件處理函數(shù)。

4.2.5 元件拖放

元件拖放涉及到事件綁定和鼠標(biāo)拖放。

事件綁定的具體方法（參數(shù)）為：addEventListener（event，function，capture/bubble），參數(shù)event 給出要注冊(cè)的事件名稱，例如鼠標(biāo)拖放事件名稱。

鼠標(biāo)拖放事件一般可分解為三個(gè)步驟：1.按下鼠標(biāo)，觸發(fā)綁定的MouseLeftButtonDown 事件，選擇要拖動(dòng)的對(duì)象：MouseLeftButtonDown:function（sender，mouseEventArgs）；2.拖動(dòng)鼠標(biāo)，觸發(fā) MouseMove 事件，拖動(dòng)選擇的對(duì)象：MouseMove:function（sender，mouseEventArgs）；3. 松開(kāi)鼠標(biāo)，觸發(fā) MouseLeftButtonUp 事件，停止捕捉事件：MouseLeftButtonUp:function（sender，mouseEventArgs）。

通過(guò)為XAML 對(duì)象的 MouseLeftButton、Down－MouseMove、MouseLeftButtonUp 事件編寫(xiě)事件處理程序，實(shí)現(xiàn)鼠標(biāo)對(duì)Silverlight 元件的拖放等操作。

4.3 自動(dòng)生產(chǎn)模塊

自動(dòng)生產(chǎn)模塊通過(guò)對(duì)文字首飾定制模塊中產(chǎn)生的XAML 文檔進(jìn)行轉(zhuǎn)換，形成模塊形成雕刻機(jī)可識(shí)別的G 代碼。在線設(shè)計(jì)系統(tǒng)稿件最終保存為XAML代碼，該XAML 文件與同樣是基于坐標(biāo)的G 代碼具有可轉(zhuǎn)換性，通過(guò)程序模塊轉(zhuǎn)換XAML 坐標(biāo)成為G坐標(biāo)，形成雕刻機(jī)識(shí)別所需的G 代碼—雕刻機(jī)的走刀邏輯，定制系統(tǒng)根據(jù)用戶下單時(shí)間將轉(zhuǎn)換好的G代碼推送到生產(chǎn)隊(duì)列中，后端雕刻機(jī)根據(jù)生產(chǎn)隊(duì)列進(jìn)行文字首飾自動(dòng)雕刻并形成準(zhǔn)成品。

5 結(jié)論

Silverlight RIA 用于名字首飾在線定制的業(yè)務(wù)改造，通過(guò)交互效能的提高，帶來(lái)生產(chǎn)力的提高，解決了企業(yè)實(shí)際經(jīng)營(yíng)過(guò)程中的人工成本過(guò)高問(wèn)題。本文給出了業(yè)務(wù)模式創(chuàng)新的解決思路和軟件系統(tǒng)設(shè)計(jì)實(shí)現(xiàn)方案，實(shí)現(xiàn)顧客在線自主設(shè)計(jì)名字首飾。在軟件系統(tǒng)的輔助和規(guī)范下，顧客自主設(shè)計(jì)滿足自身要求的文字首飾產(chǎn)品，并且通過(guò)先進(jìn)的自動(dòng)化生產(chǎn)設(shè)備進(jìn)一步改良生產(chǎn)環(huán)節(jié)，提高生產(chǎn)效率，減低誤差，極大降低了企業(yè)生產(chǎn)成本。

Silverlight RIA 良好交互性的優(yōu)勢(shì)，能夠用于電子商務(wù)行業(yè)的商業(yè)應(yīng)用，名字首飾在線定制系統(tǒng)論證SilverLight RIA 應(yīng)用于商務(wù)模式創(chuàng)新的可行性，拓展了RIA 應(yīng)用領(lǐng)域，對(duì)其他類(lèi)似企業(yè)具有參考意義。

［1］ 范俊芳.淺談電子商務(wù)的發(fā)展［J］.科技情報(bào)開(kāi)發(fā)與經(jīng)濟(jì)，2008，18（32）:119-120.

［2］ 肖治國(guó).RIA 技術(shù)特性及發(fā)展趨勢(shì)［J］.長(zhǎng)春大學(xué)學(xué)報(bào).2008，18（6）:34-36.

［3］ 章立民研究室.SilverLight 范例導(dǎo)學(xué)［M］.北京:機(jī)械工業(yè)出版社，2008.

［4］ Scott Guthrie，程化.Scott Guthrie 談Silverlight（上）［J］.程序員，2008（7）:32-34.