Silverlight(Code name WPF/E)体验-JavaScript-中华IT技术网

您现在的位置：中华IT技术网 >> 开发语言 >> JavaScript >> 正文

全文

作者：1024k 文章来源：本站原创点击数：更新时间：2007-6-10

WPF/E是微软2007年推出的新技术事先已经有不少评论了（什么flash终结者之类的）
这几天看到它有了正式的新名字Silverlight
不管它是新时代的开始还是只是昙花一现的过渡技术让我们一起对它say hello~!

1.准备工作
下载浏览器插件去微软的网站下一个WPF/E的插件
http://www.microsoft.com/downloads/info.aspx?na=90&p=&SrcDisplayLang=en&SrcCategoryId=&SrcFamilyId=e63992d3-ccf5-40b9-b98a-d16bca57467c&u=http%3a%2f%2fdownload.microsoft.com%2fdownload%2f5%2fe%2fe%2f5eeb4dcb-eba5-4e67-8705-48d954df3270%2finstall.msi
下载WPF/E实例包
http://download.microsoft.com/download/6/5/e/65e50c97-b99e-4075-8d97-d56d3dd46dc7/FebCTPSamples.zip

安装好了插件打开看看吧效果的确是不错的

2.开始Silverlight之旅
本来vs2005里有用于WPF/E web开发的插件的 8过我还是比较喜欢自己动手工具只有记事本和浏览器
a.首先建立一个文件夹一会把我们写的文件全放进去

b.之后在里面建立一个空的html文件起名为helloworld.html 当然应该写好基本元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

c.好了现在该考虑如何把Silverlight控件加入到我们的页面中了
Silverlight兼容ie ff opera（不兼容ns 试过了）在ie中它作为ActiveX控件在ff op中是嵌入式对象
听起来似乎有点困难但是好在这些东西不用我们操心了微软已经把他封装好了

  接下来就让我们偷点懒从任何一个演示包中的例子里把 js文件aghost.js考出来放到我们的目录里
最好新建一个文件夹js 然后把aghost.js复制进去

  之后编辑前面创建的html文件把aghost.js加进去因为aghost.js是用来被调用的所以放到head里

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<SCRIPT src="js/aghost.js" type="text/javascript" ></SCRIPT>
</head>
<body>
</body>
</html>

c.把aghost.js添加进来后可以开始建立对象了
首先创建一个div作为对象的容器随便起个名字

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<SCRIPT src="js/aghost.js" type="text/javascript" ></SCRIPT>
</head>
<body>
<div id="silverlight"></div>
</body>
</html>

然后创建一个agHost对象参考实例包里的使用和注释加入代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title></title>
<SCRIPT src="js/aghost.js" type="text/javascript" ></SCRIPT>
</head>
<body>
<div id="silverlight"></div>
<script type='text/javascript'>
            new agHost("silverlight",                // hostElementID (HTML element to put WPF/E
                                                     // ActiveX control inside of -- usually a <div>)
                       "wpfeobj",                    // ID of the WPF/E ActiveX control we create
                       "100%",                       // Width
                       "100%",                        // Height
                       "#FF999999",                  // Background color
                       null,                         // SourceElement (name of script tag containing xaml)
                       "xaml/Hello world.xaml",      // Source file
                       "false",                      // IsWindowless,
                       "24",                         // MaxFrameRate
                       null,                         // OnError handler (method name -- no quotes)
                       0,                            // Minimum major version required
                       8,                            // Minimum minor version required
                       5);                           // Minimum build required
</script>
</body>
</html>

d.现在html里的工作完成了
我的代码里Source file随便写了个xaml/Hello world.xaml 你也可以使用别的名字
但是我们还没有建立这个文件
建立文件夹xaml 再建立文件Hello world.xaml
用记事本编辑

<Canvas
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="javascript:downloadAssets"
    x:Name="root"
>
    <TextBlock TextWrapping="NoWrap" >Hello world!Hello Silverlight!</TextBlock>
</Canvas>

保存之后再打开网页看看出现Hello world!Hello Silverlight!字样了吧^^

从hello world 你可以开始探索了试着加一些图片修改一下文字的定位之类的

上一篇文章： Javascript继承体系

下一篇文章：网页中的loading代码

Silverlight(Code name WPF/E)体验

作者：1024k 文章来源：本站原创 点击数： 更新时间：2007-6-10

作者：1024k 文章来源：本站原创点击数：更新时间：2007-6-10