基于Silverlight 的在线定制系统的构建

蔡志恒

（福建行政学院、福建江夏学院，福州350108）

现阶段的电子商务已经不满足于简单地实现商务功能，电子商务技术与商务模式将有效融合，电子商务模式将有质的创新和变革[1]。电子商务企业渴望通过模式创新延长顾客网站停留时间、提高品牌忠诚度、减少运营成本、增强客户体验等，进而提高销量和业绩。

RIA（Rich Internet Application 富互联网应用程序）[2]通过可分离实现的程序逻辑构建更富具交互的应用程序，带来Web 交互性能的提高，进而提高交互效率。当RIA 主流解决方案之一的Flash（Flex）开始流行的时候，许多人仅把它认为是一种网页动画，一种多媒体解决方案。当微软意识到Flash 不仅仅局限于网页动画时，于2007年9 月急忙发布Silverlight，加入RIA 阵营。RIA 的出现，改变了互联网传统的交互模式，其在电子商务领域应用的巨大潜力开始逐渐显现，将引发电子商务业务创新的革命。

1 Web 交互性能提高对电商企业的意义

对于许多提供在线客服的电子商务企业来说，客服人员被实时捆绑在客服平台前面是一个问题，对企业而言表现为人工成本开支。旧有业务交互模式下，客服人员必须在线与顾客实时交互并及时做出响应，一旦这种响应延迟或者不符合顾客的意图，常常会招致顾客抱怨。某些时候企业因为太低的交互效率，导致企业人工成本居高不下，困扰企业经营。Web 交互效能低下对电子商务企业的束缚，成为企业头疼的成本问题，对此类场合进行业务创新，提高企业运营效率，是企业客观上的需要。

电子商务企业通过业务模式创新，提高企业经营效率，主要得益于RIA 的良好交互性能。RIA 的商业价值开始显现。基于Silverlight RIA 的名字首饰在线定制系统，通过改良Web 交互性能改造企业的业务流程，该系统降低了企业人工成本，提高了生产效率。希望对于其他需要通过改良Web 交互性能带来效益提高的电子商务企业，本文具有一定借鉴和参考价值。

2 企业问题与需求分析

2.1 企业问题

名字首饰是顾客使用自己或他人的名字、字母作为首饰设计主要元素，委托设计师设计生产的个性化风格首饰。和丽企业是一家主要经营网络名字首饰定制业务的电子商务企业，原来的业务模式为：顾客在网络上通过旺旺、QQ 或留言板等方式与和丽客服人员进行实时沟通，设计师根据顾客的要求设计并反馈以首饰草稿初图，然后针对顾客的反馈意见对草稿图进行不断修改完善，最终确定首饰稿件，和丽将确认的首饰稿件交由生产商生产出成品，包装邮寄给顾客，完成业务过程。

企业的问题在于：设计师需要消耗大量沟通时间才能确定顾客的需求，这个过程耗时且费劲，占据了人工成本很高的比例，大部分的人工成本都是在这个环节发生的。顾客的需求常被曲解，造成返工率较高。稿件的人工管理也比较随意，会出现丢单等错误。首饰工匠对稿件的理解也会出现偏差，手工生产具有一定随意性，造成返工。首饰工匠需要休息，无法提供全天候不间断生产，而顾客希望尽快拿到产品。这些因素造成了企业定制人工成本过高，占据首饰定制成本的一半以上。

2.2 企业需求

（1）客服负担：客服人员不必被实时捆绑在客服平台前，减少稿件沟通的工作量；（2）定制效果：稿件更贴近顾客的构想；（3）稿件管理：方便定制依据、保存、共享和发布；（4）首饰生产：自动化和连续性生产；（5）售后：方便产品追踪和管理。

3 在线定制系统主要功能结构

根据企业需求，进行业务创新的名字首饰在线定制系统框图如图1 所示：

图1 名字首饰在线定制系统Fig.1 The online customization system of Name jewelry

从系统框图可以看出，基于Silverlight RIA 系统交互性能得到改良：稿件定制与首饰生产模块发挥了重要作用，大部分的稿件确定和首饰生产工作可以由这个系统自动完成，人工成本大幅度地减少。

4 系统核心技术实现

4.1 Silverlight 和JavaScript

Silverlight 前期的开发代号WPF/E，是微软WPF的一个子集。WPF/E Silverlight 架构分为两大部分：.NET for Silverlight 和 Silverlight 表 示 核 心 。Silverlight 1.0 是通过以浏览器为基础的“文档对象模型”（Document Object Model:DOM）和“Silverlight 对象模型”来实现其功能[3]，解释XAML 并将内容呈现在浏览器中，该插件以可编写脚本的方式向浏览器提供其内部的文档对象模型（DOM）和事件模型，通过DOM 访问页面其他标准组件。DOM 级别的对象通过新的托管接口包装成托管对象并提供给 Silverlight代码，此方法向基础浏览器发出请求以获取对指定DOM 元素的引用，请求成功得到DOM 对象的非托管引用，然后它创建对象并返回托管包装。Silverlight提供了跨平台的特性。它可以在Mac 和Windows 上工作，它可以在IE，Firefox，Safari 上工作，将来还可以在Opera 上工作[4]。

XAML 是可以用来描述Silverlight 元素的语言，构建用户界面和程序逻辑。通过Silverlight 开发的元件编辑平台，完成元件组合成名字首饰的过程，顾客可以对元件进行各类操作，并形成最终以XAML 保存的名字首饰文件。采用XAML 作为设计各类名字首饰的基础，并使用Silverlight 开发首饰元件的增加、修改、删除、收缩、变形、加载、保存等操作功能，用户根据个人喜好编辑组合各类元件最终形成符合个人要求的名字首饰。

Javascript 或.NET 编程语言作为逻辑脚本，将HTML 或ASP 作为浏览器浏览的入口点，引用Silverlight.js 进行插件初始化。由微软官方提供的Silverlight.js 创建了Silverlight 对象所必需的两个方法：CreateObject（）和CreateObjectEx（），它们的参数定义了Silverlight 对象尺寸、元素ID、所引用的XAML 文件等，使得Silverlight 能够解释并呈现XAML 内容在浏览器窗口中。用JavaScript、C#等编程语言调用CreateObject（）或者CreateObjectEx（）方法，调用Silverlight 对象，实现程序逻辑和事件处理方法，实现文字首饰设计的形状（界面）和程序逻辑，载入含有用户界面和程序逻辑的XAML 文档，完成XAML 对象的交互：模板选择、元件（文字等）插入、变形等操作。名字首饰元件由XAML 构造。

4.2 交互功能的实现

Silverlight RIA 交互功能的实现是本系统的核心，交互功能的实现如图2 所示：

图2 交互功能实现Fig.2 The Interactive Function Implementation

4.2.1 初始化Silverlight 对象

若已知Silverlght 对象的引用，通过调用传递给事件处理程序的sender 参数的GetHost（）方法来获取装载此Silverlight 对象的Silverlight 插件。若Javascript 代码不是由Silverlight 事件触发时，则必须使用document.getElementById（）方法来取得，然后再调用此Silverlight 插件的findName（）方法。 引用Sivlerlight 插件的settings 属性和content 属性，可以存取某一群属性与方法。

4.2.2 对象的添加、删除

添加Silverlight 对象：

sender.children.Add（value）：将 value 参数指定的对象添加到已有的对象层级中；

sender.children.insert（n，value）：将 value 参数指定的对象添加到索引位置n。

删除Silverlight 对象：

object.remove（value）：将 value 参数指定的对象删除；

value＝object.removeAt（index）：将index 参数所指定的索引值的对象删除；

object.clear（）：将集合中的所有对象删除。

4.2.3 文字对象属性修改

调整功能可通过设置Silverlight TextBlock 元素的FontFamily 属性实现指定字体，通过FontSize 属性实现指定文字改变。

4.2.4 事件绑定

事件绑定包括声明式绑定和动态绑定两种方式。声明式绑定用Loaded 属性指定对象事件名称，通过x:Name 属性指定XAML 对象名称，为myRet 对象绑定了onLoaded 事件。 onLoaded 事件中通过sender.findName（＂myRet＂）的方法获得名称为 myRet的对象，然后对该Rectangle 进行相应操作。

addEventListener（）方法允许动态绑定一个事件响应，例如在鼠标动作的时候同时执行某一个操作，为当前DOM 对象注册多个事件处理函数。

4.2.5 元件拖放

元件拖放涉及到事件绑定和鼠标拖放。

事件绑定的具体方法（参数）为：addEventListener（event，function，capture/bubble），参数event 给出要注册的事件名称，例如鼠标拖放事件名称。

鼠标拖放事件一般可分解为三个步骤：1.按下鼠标，触发绑定的MouseLeftButtonDown 事件，选择要拖动的对象：MouseLeftButtonDown:function（sender，mouseEventArgs）；2.拖动鼠标，触发 MouseMove 事件，拖动选择的对象：MouseMove:function（sender，mouseEventArgs）；3. 松开鼠标，触发 MouseLeftButtonUp 事件，停止捕捉事件：MouseLeftButtonUp:function（sender，mouseEventArgs）。

通过为XAML 对象的 MouseLeftButton、Down－MouseMove、MouseLeftButtonUp 事件编写事件处理程序，实现鼠标对Silverlight 元件的拖放等操作。

4.3 自动生产模块

自动生产模块通过对文字首饰定制模块中产生的XAML 文档进行转换，形成模块形成雕刻机可识别的G 代码。在线设计系统稿件最终保存为XAML代码，该XAML 文件与同样是基于坐标的G 代码具有可转换性，通过程序模块转换XAML 坐标成为G坐标，形成雕刻机识别所需的G 代码—雕刻机的走刀逻辑，定制系统根据用户下单时间将转换好的G代码推送到生产队列中，后端雕刻机根据生产队列进行文字首饰自动雕刻并形成准成品。

5 结论

Silverlight RIA 用于名字首饰在线定制的业务改造，通过交互效能的提高，带来生产力的提高，解决了企业实际经营过程中的人工成本过高问题。本文给出了业务模式创新的解决思路和软件系统设计实现方案，实现顾客在线自主设计名字首饰。在软件系统的辅助和规范下，顾客自主设计满足自身要求的文字首饰产品，并且通过先进的自动化生产设备进一步改良生产环节，提高生产效率，减低误差，极大降低了企业生产成本。

Silverlight RIA 良好交互性的优势，能够用于电子商务行业的商业应用，名字首饰在线定制系统论证SilverLight RIA 应用于商务模式创新的可行性，拓展了RIA 应用领域，对其他类似企业具有参考意义。

［1］ 范俊芳.浅谈电子商务的发展［J］.科技情报开发与经济，2008，18（32）:119-120.

［2］ 肖治国.RIA 技术特性及发展趋势［J］.长春大学学报.2008，18（6）:34-36.

［3］ 章立民研究室.SilverLight 范例导学［M］.北京:机械工业出版社，2008.

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