WPF/E CTP Quick Start - 第一部分：创建一个WPF/E项目（翻译） - 老赵点滴

WPF/E CTP Quick Start - 第一部分：创建一个WPF/E项目（翻译）

Posted on 2006-12-07 00:46 Jeffrey Zhao 阅读(3816) 评论(25) 编辑收藏所属分类: 翻译、WPF/E

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

在您开始之前……
第一步：建立一个aghost.js文件
第二步：在您的HTML文件中创建一个ActiveX控件
第三步：创建一个表示WPF/E内容的文件
添加额外的WPF/E内容
一个示例工程
下面该做什么呢？

在您开始之前……

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

安装了WPF/E插件：如果您还没有安装，请点击此处为您的浏览器安装WPF/E插件。
一个HTML文件：您需要一个用于显示WPF/E内容的HTML文件。您可以自己创建，也可以复制这个文件。
一个文本编辑器：您需要一个文本编辑器（例如记事本）来编辑您的HTML文件。需要更多关于使用Visual Studio编辑WPF/E工程的内容，请查看“创建一个Visual Studio 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内容的元素。
```

<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文件添加内容。

Feedback

#1楼 [楼主] 回复 引用 查看

2006-12-07 00:40 by Jeffrey Zhao

还是从翻译开始。

#3楼 [楼主] 回复 引用 查看

2006-12-07 00:53 by Jeffrey Zhao

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

#4楼  回复 引用 查看

2006-12-07 08:16 by Tseng

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

#5楼  回复 引用 查看

2006-12-07 09:24 by LirenZhao

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

#6楼  回复 引用 查看

2006-12-07 09:38 by Pharaoh

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

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.