Hello World
Spiga

WPF/E CTP Quick Start - 第一部分:创建一个WPF/E项目(翻译)

2006-12-07 00:46 by 老赵, 4417 visits

您该如何在您的页面中添加WPF/E呢?一个典型的WPF/E项目有4个文件:一个用于存放和显示内容的HTML文件,一个aghost.js文件,一个XAML文件和一个JavaScript文件。这篇文当描述了创建一个WPF/E工程,以及向HTML添加WPF/E内容的三个步骤。这份指导包括了一下部分:

 

在您开始之前……

在您创建WPF/E的内容之前,您必须具有以下条件:

 

第一步:建立一个aghost.js文件

aghost.js文件是一个JavaScript辅助文件,用来使您的WPF/E内容生效,使之能在多哥平台下查看。

  • aghost.js文件复制到您的HTML文件所在的目录下:右键点击aghost.js文件的超级链接并选择“目标另存为...”,将aghost.js文件存放在与您的HTML文件相同的目录下。
  • 打开您的HTML文件,将下面的代码添加到页面的部分。如果您没有可以使用的HTML文件,请右键点击SampleHTMLPage.html文件的超级链接并选择“目标另存为...”,将SampleHTMLPage.html复制到与ashost.js文件相同的目录下。
    <script type="text/javascript" src="aghost.js"></script>

现在您的HTML页面应该已经保存了如下这些基本元素:

<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>A Sample HTML page</title>
        <script type="text/javascript" src="aghost.js"></script>
    </head>
    <body>
    </body>
</html>

 

第二步:在您的HTML文件中创建一个ActiveX控件

为了显示WPF/E的内容,您需要在HTML文件内创建一个ActiveX控件。

  • 在您的HTML文件的<body>标签之间添加如下三行代码,以创建一个用于放置WPF/E内容的元素。
    <!-- WPF/E ActiveX控件会放置在下方元素中 -->
    <div id="agControl1Host">
    </div>
    您能够改变<div>标签的ID,不过您也必须在下一步中修改创建一个agHost时所用的第一个参数。
  • 在上一步之后,添加如下的HTML和脚本代码以创建一个ActiveX控件。
    <script language="javascript">
        // 创建一个WPF/E的ActiveX控件,这里的
        // 方法使您的WPF/E的内容在这个ActiveX控件
        // 被点击之前就创建完毕。
        new agHost(
           // 用于插入WPF/E ActiveX控件的元素,一般会使用
            // DIV元素,如果您在上一步改变了HTML元素的ID,
            // 您在这里也必须相应的改变。
            "agControl1Host",
           // WPF/E ActiveX控件的ID
           "agControl1", 
           // 控件宽度
            "300px", 
           // 控件高度
            "300px", 
           // 控件的背景色
            "#D6D6D6", 
           // 源元素(存放XAML内容的Script标签)
            null, 
           // 存放WPF/E内容的XAML文件的URI
            "myxaml.xaml", 
           // 是否是无窗的
            "false", 
           // 最大帧率(Frame Rate)
            "30",
           // 处理错误的Handler,
            // 您能够将其设为一个方法的引用。
            null
        );
    
        // 创建一个全局的WPF/E ActiveX控件的引用,
        // 您能够使用它来接受已经命名的XAML元素。
        var agControl = document.getElementById("agControl1");
    </script>
    上面的脚本包含了几个您可以自定义的参数,例如ActiveX控件的高度和宽度(您可以使用百分比作为参数),包含WPF/E内容的XAML文件的文件名,和一个表示控件是否无窗的参数。

 

第三步:创建一个表示WPF/E内容的文件

现在您的HTML文件已经配置完毕了,是时候该创建内容了。

  • 在您HTML文件所在目录里创建一个空文件,命名为“myxaml.xaml”。如果您改变了上一步所使用的文件名参数,那么在这里也需要相应地进行改变。
  • (可选)如果您的WPF/E工程需要包含脚本,创建一个包含脚本的JavaScript文件,并将下面一行代码添加到您的HTML文件中,添加您在第一步创建的<script></script>标签之后。
    <script type="text/javascript" src="my-script.js"></script>

 

添加额外的WPF/E内容

如果您需要在页面上创建其它的WPF/E ActiveX控件,请重复第二步和第三步,并保证每一个ActiveX控件都有唯一的名字。

 

一个示例工程

如果您遇到了困难,或者仅仅是想知道一个简单的WPF/E工程是怎么样的,请将以下这些文件复制到您的机器中,并且打开SampleProject.html文件。

 

下面该做什么呢?

在下一部分“创建一个XAML文件”中,我们将学习应该如何为您的XAML文件添加内容。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

25 条回复

  1. 老赵
    admin
    链接

    老赵 2006-12-07 00:40:00

    还是从翻译开始。

  2. 木野狐
    *.*.*.*
    链接

    木野狐 2006-12-07 00:50:00

    :)

  3. 老赵
    admin
    链接

    老赵 2006-12-07 00:53:00

    @木野狐
    先找找WPF/E的感觉。:)

  4. Tseng
    *.*.*.*
    链接

    Tseng 2006-12-07 08:16:00

    昨天看了WPF/E的例子,惊叹中。。。以前认为只有FLASH做的,现在WPF/E做到了。

  5. LirenZhao
    *.*.*.*
    链接

    LirenZhao 2006-12-07 09:24:00

    我认为这个东西不会很快出来的,等他出来 Flex不知道都已经什么样子了,再说全是 javascript 晕

  6. Pharaoh
    *.*.*.*
    链接

    Pharaoh 2006-12-07 09:38:00

    我的插件一直没有安装成功。
    一直提示:You must install "WPF/E" (codename) December 2006 CTP to view this page: Get "WPF/E!".
    我已经安装过几次了,安装过程都提示成功了的。

  7. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-07 09:46:00

    Mike Harsh's Blog
    Right angle, laser, razor thin lines that curve and swerve in perfect sines
    What is WPF/E really?
    In a few newsgroup posts on our forums, I’ve seen some confusion about what WPF/E CTP enables and what it doesn’t. This is probably a result of the snappy codename we’ve chosen, but I’ll attempt to add some clarity. WPF/E is a subset of WPF, but the subset was chosen in a careful way to enable web scenarios that are not possible with HTML alone.



    On the team, the way we think of WPF/E is this: WPF/E is a browser plug-in that augments the set of functionality provided by HTML to provide media, animation and vector graphics with the same programming model that the HTML DOM exposes. This CTP of WPF/E is not a UI technology that replaces HTML, it augments the capabilities.



    HTML elements can be created, accessed and modified using javascript running on a web page. WPF/E elements can be created, accessed and modified using javascript running on a web page. HTML is easy to search since it is sent to the user as plain text. WPF/E is also sent to the user as plain text. HTML samples and tricks are shared organically because the page source can be easily viewed. WPF/E allows for the same thing.



    HTML provides flow text layout, text input, tabular and flow layout panels, and a simple set of UI controls. WPF/E provides media playback, vector graphic drawing and animation support. The two sets of capabilities compliment one another.



    This is not to say other parts of WPF will not be incorporated into WPF/E in future CTPs and versions of the product, because we are definitely planning on growing our WPF subset and the overlap with HTML features. Very important things like text input, layout, resources, data binding and of course, CLR integration are all WPF features that our team is scoping for integration with WFP/E. I’m just trying to frame the approach we’ve taken with the initial CTP of WPF/E. Extend the browser and give users the most consistent development model we can.



  8. Cat Chen
    *.*.*.*
    链接

    Cat Chen 2006-12-07 09:56:00

    哇……要先做那么多东西才开始到写XAML啊,官方不提供模板吗?

  9. neuhawk
    *.*.*.*
    链接

    neuhawk 2006-12-07 10:10:00

    下个月Microsoft Expression Blend 可能会对wpf/e支持,这样就不用手工写啦.

  10. 在路上
    *.*.*.*
    链接

    在路上 2006-12-07 10:31:00

    效果是不是一个蓝色的圆?

  11. 海东青[匿名][未注册用户]
    *.*.*.*
    链接

    海东青[匿名][未注册用户] 2006-12-07 10:51:00

    晚上回去在Vista上研究研究

    谢谢你老赵

  12. Ring
    *.*.*.*
    链接

    Ring 2006-12-07 11:51:00

    请问如何在vista上安装wpf啊?
    谢谢!

  13. 老赵
    admin
    链接

    老赵 2006-12-07 12:09:00

    @Tseng
    这就是WPF/E,可惜不可能达到DHTML如此普及

  14. 老赵
    admin
    链接

    老赵 2006-12-07 12:11:00

    @LirenZhao
    JavaScript真的是一种障碍吗?有可能以后会变的。
    会引入Script#的功呢?可惜C#语言还是很难模拟和JS的动态语言特性,即时Script#还是比较难以作的漂亮。

  15. 老赵
    admin
    链接

    老赵 2006-12-07 12:12:00

    @neuhawk
    Orcas应该也会对WPF(/E)有不错的支持。:)

  16. 老赵
    admin
    链接

    老赵 2006-12-07 12:12:00

    @Cat Chen
    提供一个基于Web Project的模板。:)
    // 其实也不多,就几步

  17. 老赵
    admin
    链接

    老赵 2006-12-07 12:15:00

    @Ring
    Vista里WPF是作为操作系统的一个组件存在的,需要在“Turn windows features on or off”里装,不过WPF/E还是在MS官方那边下载安装。

  18. 虾米
    *.*.*.*
    链接

    虾米 2006-12-10 01:02:00

    为什么我在本机上运行 会提示参数不能为NULL,我是IE7,最后下载了你的文件运行,还是这个现象.请问是什么原因?我已经安装了WPF插件.

  19. 老赵
    admin
    链接

    老赵 2006-12-10 01:45:00

    @虾米
    您下载了哪个文件呢?具体我也不是很清楚,因为这些都是系统级别的异常,是不是可以尝试着去官方求助呢?

  20. 哈哈[匿名][未注册用户]
    *.*.*.*
    链接

    哈哈[匿名][未注册用户] 2006-12-12 10:27:00

    Script#最终也要被解析成JavaScript的吧.我觉得只要是基于浏览器的技术就一定会用到JavaScript.

  21. 老赵
    admin
    链接

    老赵 2006-12-12 17:14:00

    @哈哈[匿名]
    所以我觉得WPF/E总是离不开JavaScript的,因为很多情况下还会有许许多多的客户端操作,不可能去服务器端,必须用JS。

  22. charleschen
    *.*.*.*
    链接

    charleschen 2006-12-21 17:44:00

    汗,要装了插件再重启才可以用的。
    不然IE总是显示
    You must install "WPF/E" (codename) December 2006 CTP to view this page: Get "WPF/E!"

  23. 老赵
    admin
    链接

    老赵 2006-12-21 21:03:00

    @charleschen
    呵呵,重启几乎是必然要的了。就像装了个IE的工具栏。

  24. Youzelin
    210.22.158.*
    链接

    Youzelin 2010-09-27 12:41:38

    Jeffrey Zhao, 请问这篇文章的原文在哪里?谢谢。

  25. 老赵
    admin
    链接

    老赵 2010-09-27 14:02:45

    @Youzelin

    早就没了,呵呵。

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我