Microsoft Silverlight扩展你的现有的开发技能,赋予你建立一个无视目标平台或浏览器的新类型的应用程序。使用所有熟悉的功能,语言和.NET框架工具去快速的创建一个引人注目的Web应用程序,
建立一个现代的丰富的互联网应用需要很多技术。首先,创建应用程序的外观, Silverlight提供支持大量2D图形的XAML;提供一个对象模型来记载所有的路径数据和梯度停止点。 任何属性可以是动态的,并且我们还提供一套分类机来缓和那些让眼睛感觉很不和谐的动画。
对于一个互动的,高性能的用户界面,充满活力的布局也是必不可少的 —它允许其中的元素适应于他们的内容( e.g.假如他们都绑定了数据,或者都是本地化的)。此外布局容器还向应用程序开发人员提供预制的控件,在里面可以插入他们自己的用户界面元素(比如输出一个 toolbar,并在应用程序中进行控制),实现了这个就和设计 UI很接近了。
.jpg)
图 11:Silverlight 结构概览
然后,应用程序就可以访问和更新服务器数据。 Silverlight通过证明其内置了支持多层协议,使这个功能变得轻松:在底层, Silverlight支持socket和Web客户端的接口,以简化文件的上传;顶部的这个 Web服务可以被创建。你可以根据Web服务的元数据创建一个代理的类,并且使用代理与你的 Silverlight应用程序的Web服务进行通信。在更高一层的ADO.NET提供了一些更广泛的服务,你可以通过 URL发送请求,并且可以直接的得到结果。
绝大多数的用户界面都使用一些方式或方法显示数据。数据可视化的应用程序常常希望他们的数据是从 UI元素中分离出来的。此外,大部分的网站都资料丰富,并且显示来自 Web服务的数据。很多时候,这个数据是会更新的,比如股票代码应用程序。数据绑定提供了一种将数据和 UI轻松结合的方法。
最后,Silverlight提供了一套丰富的控件,这套控件可以使建立一个应用程序变得更加容易。控件的改良包括一个新的 TabControl,TextBox的新特性,诸如文字环绕和滚动条,还有 DataGrid现在包含了Autosize, Reorder, Sort属性,性能也提升了等等。控件现在是在运行时中,代替了原来的在应用程序中打包。
在Web中,创建一个能让人有印象的用户体验是很重要的。独特的,一致的,漂亮的外观和感受将为用户区别不同的网站,并且帮助保留和吸引客户。创建这种视觉设计的关键部分是控件自己的外观。
有的时候你想要自定义你的应用程序的外观,但是超出了设置属性说允许的范围。举个例子,你可能希望你的应用程序中的按钮与默认的形状不一样。当你改变了现有控件的外观,但是并没有改变它的方法的时候,也就是你更换了控件的皮肤。像列表框( listbox)这种简单的控件甚至可能需要重写大量的代码,以便适应各种场景,比如布局,可访问性和本地化。
Silverlight可以轻松的创建图形,然后使用它们去自定义控件,例如滚动条的外观。 Silverlight为每个控件都提供了模板,它可以让设计师不必修改任何代码就可以改变控件每一部分的布局和外观。例如,一个滚动条是由一套零件组成的,他们包括向上向下的按钮和一个用于拖拽的滑块。零件可以被重新安排,并且可以完全根据自定义样式去改变控件。下面的例子展示了将重复按钮和滑块更换皮肤;并且还展示了在控件的布局的范围内是可以被改变的:
.jpg)
图 12:更换scrollbar皮肤
在Silverlight中,控件的皮肤是由其ControlTemplate定义的。由于ControlTemplate是由XAML创建的,所以你不写任何代码就可以改变控件的样子。下面的例子就展示了 XAML如何用来创建一个按钮:
.jpg)
复制代码
<controltemplate>
<Grid>
<Grid x:Name="DownStroke" Opacity="0">
<Rectangle Margin="1,2,1,1" Opacity="0.05" RadiusX="3" RadiusY="3" Stroke="{TemplateBinding Background}" StrokeThickness="1"/>
<Rectangle Margin="1,1.75,1,1" Opacity="0.05" RadiusX="3" RadiusY="3" Stroke="{TemplateBinding Background}" StrokeThickness="1"/>
<Rectangle Margin="1,1.5,1,1" Opacity="0.05" RadiusX="3" RadiusY="3" Stroke="{TemplateBinding Background}" StrokeThickness="1"/>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#A5FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
</Grid>
<ContentPresenter Margin="4,5,4,4"/>
<Rectangle x:Name="DisabledVisual" IsHitTestVisible="false" Opacity="0" RadiusX="4" RadiusY="4" Fill="{StaticResource DisabledBrush}"/>
</Grid>
</controltemplate>你可以向设计师展示控件的属性。你可以使用 TemplateBinding将形状的属性或者控件中的其他元素连接到控件自身的属性上。这些提供了一个内置的压缩属性的机制 ---在上面的按钮例子中,就可以看到我们将按钮内部的形状背景色连接到了控件自身的背景属性上。 Silverlight同样还支持可视化状态管理。它使状态能够触发控件的内部模板,这样你就可以看到控件的如何触发事件的,比如点击或者鼠标经过。下面的例子展示的是如何当鼠标经过的时候,按钮变成梯度的:
复制代码
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverLinearBevelDarkEndColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>此外,你还可以使用一个样式去一次性设置属性,然后要求其他的控件都使用这个样式,这样就可以给所有的控件一个统一的外观。当你套用控件的样式时,你仍旧可以设置控件的本地属性,但在本地所设置的属性的优先级将高于在样式中设置的属性。例如,假设你希望你的应用程序中的大部分按钮都是红色的,并且字体是 16号,但是其中有一个按钮我们需要它是绿色的,还是 16号字。这样你就可以创建一个样式,将背景属性设置为红色,将字体属性设置为 16号,然后在每个按钮控件上套用这个样式。
在下面的例子中,EasyJet就为他们的地图使用了更换皮肤的自定义控件,比如slider, button, calendar 和 listbox。请注意,使用橘色为关键色的热度控件体现了当地的受欢迎度:
.jpg)
图 13 : EasyJet 机票预订
EasyJet (www.easyjet.co.uk),大英国航空公司已经使用Silverlight创建一个平滑的接口,以帮助用户能够更清楚的研究目的地。这个网站结合了Microsoft虚拟地球技术,所以开发人员可以将与本地相关的数据放到虚拟地球的地图图片上。用户可以使用一个简单的菜单,输入日期和目的地,就可以轻松快速的预定。如果用户不确定他们的目的地,那他也可以指定想去旅行的日期和出发地。然后地图就会找出所有的他们可以去的地方,并且实时的列出可以在哪天去,票价是多少。
easyJet的应用程序总架构师, Paul Curtis说道“用户不需要提交多个搜索就可以快速的比较出在给出的这些日期中他们可以去哪里,并且花费多少钱”。界面重叠价格( interface overlays prices) —返回最便宜的价格 ---每一个目的地的价格。 Curtis解释说“使用 Silverlight,我们可以在屏幕左侧加一个滑动栏,来帮助用户为旅行设置预算。上下滑动这个滑块,会根据其费用标准将不适合的目的地隐藏起来。所有的信息都在一个页面中无缝的提供,其他的技术要想达到这一点,需要不断的刷新页面。”以上所说在图例 13中有所展示。
使用多线程技术是使你的应用程序在使用处理器在用户事件中处理的同时,快速响应用户最有效的方法之一。你可以将你的代码单独的运行在部分的线程中,这样他们就不会阻塞。
Silverlight使用硬件加速有几种方式。首先, Silverlight利用高级的多核技术进行渲染和媒体播放。因此,基于 Silverlight创建的应用程序将在多核的系统上性能更快。这种将矢量图形转换为像素图形的相性算法,可以在您的机器上并行进行处理。这意味着应用程序中的大部分工作都可以不需要任何附加的代码就可以自动使用用户的 CPU。
第二,Silverlight使用图形处理器去实现视频内存中的像素图形。尤其是在全屏播放视频的时候,几乎整个屏幕的每一帧都要更新,而用这种方法就大大提升了性能。
通用语言运行时(CLR)提供了Silverlight编程的基础框架。这是可以创建大型复杂应用的强大的组件。它在运行时管理代码的执行,并且为诸如汇编,内存管理,线程管理,执行安全类型和代码安全检查提供核心服务。由于它为代码执行提供了一个管理环境,所以通用语言运行时有助于强大的应用程序的发展,并且提高开发效率。
通过Web服务,将应用程序和数据进行连接,将会有很多工作要做。在很多情况下,服务器端和客户端是用不同的语言运行的,所以你需要为每个服务调用做很多工作。
通过使用Silverlight,利用由.NET提供的服务器端和客户端的一致的编程模型成为可能。 Visual Studio内置了一个支持通过Web服务元数据来创建代理类的功能,并且使用该代理与 Silverlight应用程序的Web服务进行通信。
Silverlight使用Windows Communication Foundation (WCF) 和ADO.NET创建代理并且通过HTTP协议传送SOAP1.1消息。
ADO.NET数据服务框架将数据以一种可以在Silverlight开发环境中使用的格式来部署。向Internet部署ADO.NET数据服务是通过标准的HTTP协议实现的,并且作为可寻址的代表性状态迁移资源。数据是根据实体数据模型(Entity Data Model)的说明来定义的实体和关系。众所周知,例如JSON, AtomPub, 和简单的XML都是展现基于文本传递的数据的。
它可以轻松的向现有的Ajax应用程序添加丰富的内容,并且减少跨浏览器的影响。 Silverlight将Web和视频标准,统一的媒体格式使用现有的 Web技术和资源进行简单整合。这就是说, Silverlight可以与任何后端的Web平台技术和现有的基础结构和应用结合使用,包括 Apache, PHP 和更多的在服务器上的语言,以及JavaScript, XHTML和其他的在客户端运行的语言,都不需要淘汰。
此外,Silverlight的.NET框架除了允许开发者使用XAML标记,也允许他们使用HTML DOM。这不仅可以使Web2.0站点更快更容易扩展,而且可以消除由不同浏览器带来的差异
如果你使用ASP.NET或者SharePoint,你可以摆脱组件的束缚,将丰富的方法添加到现有的页面中。比如, Nintex提供了一套Silverlight丰富的图表组件,并且可以放置到 SharePoint页面中:
.jpg)
图 14 : Nintex ( www.nintex ) 为 SharePoint提供的丰富的图表
Nintex (www.nintex.com)在Sharepoint Web Parts中创建了一系列的Silverlight控件。它们的报告UI显示了数据使用Silverlight的barchart,piechart和表格等。这允许它们在控件之间将图形和制表信息保持同步,页面可以通过无需要求返回的数据就可以返回给服务器,并且允许用户与图表交互以创建更加直觉深层的体验。其结果就是一个丰富的,交互式的可视化的亚秒响应时间的数据交换。
Nintex想要得到数据图形表现的丰富的可视化界面,但是他们宁愿描述浏览器中的数据而不是让服务器去处理图像生成。他们还想让用户可以快速轻松地与他们查看的数据进行交互。正当寻找替代品时,Silverlight却可以让我们利用我们已经掌握的.NET技能来完成这些需求了。
解决方案已在2008年的8月份发布了它。Mike Fitzmaurice,技术副总裁说到“与AJAX技术相比较silverlight降低了50%开发UI的时间,甚至可能更优于其它浏览器的环境。它也意味着我们在服务器上编写更少的代码,也完全不必担心缓存的管理,静态图像的生成,或者任何inelegant的长列表,以及那些非Silverlight方法而产生的讨厌的副产品。让我们不要忽视这一点–最终结果非常棒。用户喜欢它。用户理解它。”
Microsoft Visual Studio开发系统是专门为软件开发人员 -无论是新手还是经验丰富的专业人员 -面对复杂的挑战和创新的解决方案而专门设计的开发工具。它提供的功能包括高效率的代码编辑器,智能检测,向导,和在 Microsoft® Visual Studio® Team System中的集成开发环境(IDE)到高端应用程序生命周期管理产品中的数据设计器。
无论你偏好哪种编程语言,Silverlight都可以轻松的使你将编程技能应用到开发中。动态语言运行时( DLR)是用来运行.NET框架上的,如Python 和 Ruby这种动态语言的。
使用功能齐全的控件可以使得创建应用程序更加轻松,并且比 AJAX控件更适合使用。对于Silverlight2,已经提供了许多的新控件,可以极大的丰富开发环境中。下面的是新的日历和 Datagrid控件的例子:
.jpg)
图 15 : 丰富的日历和多行datagrid 控件
以下是Silverlight 2所提供的控件:
输入控件 : Button, CheckBox, RadioButton, RepeatButton, HyperLinkButton , ScrollBar (Vert/Horiz), Slider, Togglebutton, Tooltip, Calendar, Password, GridSplitter, Date Picker
布局控件 :Border, Stack, Grid,ScrollViewer, DockPanel*, StackPanel*, ViewBox*
文本控件 : Textblock, Textbox, Tooltip, Label* , AutoComplete*
数据控件 : Listbox; DataGrid, ItemsControl, Dropdown list, Treeview*
导航控件 : Scrollviewer, Tab Control
外观控件 : Image, MediaElement, Ink canvas, MultiScaleImage, Expander*, Accordian*
对话框 : File, FontPicker
此外,我们也通过CodePlex获取更多的控件。这些控件就是上面表格中带有( *)标记的。在今后的几个月中,我们计划提供超过 100个控件。
Silverlight允许控件直接与数据源进行连接,并且控件本身有一个知道如何显示每条数据的项模板。例子是一个清单控件,它的每个项都有一个创建日历和文本区域的模板。如果用户选择或者编辑了这些项,那么将会直接改变底层的数据。
.jpg)
图 16 :控件的每一行都有一个listbox的数据模板
使用Silverlight,可以使设计原型轻松的转化成真实的 UI,使其更快的产生应用程序。以前,要实现一个设计原型,需要生成大量的图片,然后开发人员还需要去编码实现输出,图像和动画。任何设计上的改动都要花费很多,因为设计师并不能接触到开发人员的代码;而且重写代码是很昂贵的。而在 Silverlight中,UI是以基于文本标识的语言XAML来独立实现的。设计师不需要任何代码的修改,就可以使用他们习惯使用的图形工具去创建并且编辑 XAML:
.jpg)
图 17 :在Expression Blend 和 Visual Studio 2008中进行Silverlight应用程序的操作
为了支持其在产生更好的应用程序上所扮演的角色,我们的工具也发生了变化。 Expression Blend公开了工程的格式,XAML,和使用Visual Studio 开发.NET的设计-开发流程,并且也增加了对Silverlight 2 的支持。这意味着设计师也可以像开发人员一样,可以在同一个项目上进行工作了,而且这些不需要对代码进行重新编写,也不需要导出大量的插件。这也同样意味着开发人员的操作也可以应用于 UI,比如Diff和源代码控制。