代码改变世界

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

2006-12-07 00:46 Jeffrey Zhao 阅读(...) 评论(...) 编辑 收藏

您该如何在您的页面中添加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文件添加内容。