今天是第一课,我选择的参考书是《Hello SilverLight4》。看书名就知道这是一本入门的书,所以对于我们菜鸟来说,这本书最合适啦!学会之前不要逃走哦!
我们的教程一共有8章,它们分别是:
1. SilverLight是什么东东?(我:微软的东东)
2. SilverLight的控件们(一看就知道是微软的风格,控件编程正合适咱们菜鸟)
3. SilverLight的数据服务(没有数据的东东最多也就是展示性质的)
4. 通过Expression Blend学习XAML(对于咱们菜鸟来说,这是重点和难点)
5. 做一个Fish Eye按钮(效果比这章的标题要另人兴奋的多)
6. WCF RIA服务的再利用(...我也不懂)
7. 脱离浏览器(看看怎么个情况)
8. SilverLight游戏编程(可以不看前面直接学习这章吗?)
希望这8部分不会太枯燥,好了,废话说太多,咱们开始进入正题。
一 Hello SilverLight
人们(特别是咱们程序员)总是害怕改变,因为这意味着又要学习新东西了。当要开发RIA时恐怕我们又要学习一大堆不知所云的东西。如果做为.NET程序员的你选择了Flex开发的话,上面的情况就无法避免了;如果你选择了SilverLight,那并没有多少新东西要学习,相信我,这是真的。有很多程序员(像我一样),在从事WEB开发。还有很多程序员,在从事桌面程序开发。尽管ASP.Net企图把这两者有机的结合起来,但是还是有点不同。例如,我想动态的改变一下字体大小和颜色,在Web开发中,恐怕要使用JavaScript,但在桌面应用程序中,这小菜一碟。SilverLight也在向这方面努力,尽量使得双方的程序员都能尽快的适应SilverLight开发,第七章将详细进行说明。如果你开发过WPF应用程序的话,那太好了,你可以直接跳过许多章。这并不夸张,因为SilverLight是WPF的一个子集。比如它们都使用XAML界面语言。要让用户看到你的SilverLight程序,需要一个5MB大小的插件,就像Flash一样。不过这个插件可比Flash强多了,它对完整版.NET进行了精简,支持非常多的.NET功能。这意味着.NET的众多优点也被SilverLight继承了。
RIA这个概念最早由Macromedia在2002年提出,并在其Flash中实现。RIA程序使用起来的感觉和桌面程序非常相似,只不过RIA程序不能够拥有对用户磁盘读写的所有权限(出于安全考虑才出此下策)。抛开SilverLight和Flex我们来看一看RIA的通用特征吧!
失量图形
众所周知,现今有两大图形格式(别告诉我你不知道!),位图和失量图。两种格式的优缺点不知道的同学可以上网上查一下,因为篇幅关系,这里就不在做介绍了。值得注意的是,失量图形在透明,缩放等动画效果上比较位图有相当大的优势哦!
动画
不得不承认,最先吸引我学习SilverLight的就是这个所谓的“动画”,结果我完全被骗了。在传统的网页中我们也可以通过Timer以及JavaScript来创建一个动画,每隔一个特定的时间段就执行一次特定的任务(通常是改变一个值),以此来实现动画效果。而这些效果在SilverLight中小菜一碟。
客户端存储
有一次,我刚从网上看完一部大片,我感觉这部电影拍的非常棒。于是我想到把自己激动的心情通过博客来与大家分享,进入博客的编辑器我开始打字,正当我将要完成的时候,浏览器死掉了!可以想像当时我是多么的沮丧。我相信很多人都有类似的经历,通常的建议是先在本机的编辑器中(比如Word)把内容编辑好,然后再复制粘贴到网上。这的确是一个好办法,但是对于此我们真的就无能为力了吗?有人提到Cookie,但是它的容量太小了。我们来看看SilverLight是怎样处理这件事情的,它叫做“独立存储(Isolated Storage)”技术,后面我们会详细的说明。
开发工具
你可以使用记事本来开发,以此来显示你有多么与众不同。大部分正常人还是会选用Visual Stdio或Expression Blend来进行开发。VS便于调试,Blend便于布局和制作动画,区别主要就是这样。可以使用两种开发工具的原因其实很简单,那就是让设计人员和程序员关系处的更好一些,因为他们可以使用同一种工具同一种语言进行交流。而不是程序员看着一堆PhotoShop制作的PSD文件发呆。
好了,说了不少,可以开始创建我们的第一个SilverLight应用程序了,Let’s go!
一个世上最简单的SilverLight程序
我将使用VS2010 Express来进行演示,Microsoft很厚道的为我们提供了一个免费版本。
视频内容
好的,我们的程序创建完毕了,事实上,它看起来像一个网页,显示了一行文字“Hello SilverLight4”。但它不是。我们会在后面把它更完善一些。
双击MainPage.xaml文件你将会看到如下内容:
<UserControl x:Class="HelloSilverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>
这就是XAML标记语言,它是基于XML的,可读性非常的好。正如你所看到的,在XAML中不会混合其它的代码,Flex就做不到这一点。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
...
这几行是引用名称空间,和纯XML不同的是,这些URI是有意义的。它们在编译时会映射到相应的.NET空间。
代码和XAML分离的好处之一是,界面工作和程序工作可以同时进行。
设置<Grid x:Name="LayoutRoot" Background="Blue">可以使背景变成蓝色,就像使用HTML和CSS一样,这样做是为了使传统的WEB开发人员可以快速的适应SilverLight开发。事实上大部分的CSS样式可以在SilverLight中找到对应的(几乎是完全相同的)属性。
今天就到这里了,更加精彩的内容在后面呢。(2010.6.28)
今天咱们继续,昨天的内容大家应该都能明白怎么个情况吧?不明白的地方可以发送邮件到chehongzhi@163.com,我会一一解答。那么就开始今天的教程吧!
新建一个SilverLight项目后会IDE也就是VS2010会为我们自动生成一些文件(VS是神器!),这些文件里面有三个最重要:
MainPage.xaml:这个文件就是我们做大部分工作的地方,这里面我们可以放控件,可以做动画,可以在MainPage.cs后台文件中写我们枯燥的程序。
APP.xaml:这里面是全局资源,也就是说,这里面的东西在整个应用程序运行的过程中都可以使用。
APP.cs:这里面是SilverLight程序初始化的一些代码,我们后面会说明里面是什么东东。
其它还有很多文件随项目生成,不过一般情况下没什么用,又因为这是一个初级教程,所以这些文件也就不一一的说明了(其实其中一个原因是:我也不懂- -)。
XAML是基于XML的,所以不太懂XML的同学可以先去了解一下XML。不过我觉得XML发展到现在,大家应该都明白XML是怎么个情况吧?
现在我考考你们:
<TextBlock Height="56" Margin="12,25,85,0" Name="textBlock1"
Text="Hello, Silverlight!" VerticalAlignment="Top"
Foreground="White" FontSize="30" />
上面的XAML显示什么内容?我想即使你不懂技术,查查字典也能明白上面例子的答案吧。从这个例子可以看出,XAML标记中的属性几乎完全等同于传统WEB开发中的CSS样式。
部署SilverLight应用
SilverLight应用程序易于部署。为什么这么说呢?因为SilverLight只有两个文件需要部署(一个xaml文件和一个dll文件,如果你的程序中有图片、声音和视频等资源的话,这些资源也包括在内),说部署有点复杂,就是只有两个文件需要拷贝到你的服务器上,而就是这两个文件还被打包成一个后缀为xap的文件,也就是说,你写好程序,把生成的xap文件拷到服务器上,就OK了,你要说这都不会我抽你。
Xap文件生成在应用程序目录下的BIN\Debug目录。Xap其它是一个ZIP压缩文件,这么做的原因是ZIP文件可以被很好的压缩和解压。
把这一段HTML插入到网页中,你的SilverLight程序就会被用户看到了。
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/HelloSilverlight.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.41108.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.41108.0" style="text-
decoration:none">
<img src="https://s4.51cto.com/images/blog/202108/07/5bf32986ebc506971293bbecb629dee5.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="Get
Microsoft Silverlight" style="border-style:none"/>
</a></object>
如果以前你在网页中使用过Flash,那这些代码你一定不陌生。蓝色的代码是当用户没有安装SilverLight时,会显示的内容,它会提示用户下载并安装SilverLight。
当然,你可以改成其它的图片,至少把它变成中文的!
小结:
RIA使得桌面程序和Web程序的界限更加不明确了,当全屏使用SilverLight时,几乎完全无法感觉到这是一个Web程序。
SilverLight使得我们.NET程序员不用去学习新的复杂的技术,以现有的技术和编程语言就可以开发Flash一样的程序。
SilverLight容易部署,XAML标记语言向WEB公开自己的DOM树,以方便搜索引擎的收录。通过下面的学习,你将会看到SilverLight真正的特点(当然,前面的教程也不是假的,只是让人提不起精神)。