开始使用 Acropolis

引言

在 Acropolis 中，开发过程（例如创建窗口并编写其按钮事件的代码）可以分为两部分。Acropolis 中有两个重要概念：Part 和 View。View 仅指窗体的设计，而 Part 指与 View 对应的代码。因此，您的窗体设计与代码完全分离，这两种开发可以同时进行。也就是说，在开发人员编写代码的同时，设计人员可以设计窗体。稍后，Part 和 View 可以绑定在一起。这样，开发速度会更快，组件会是松耦合的，并且可以轻松进行更改。

要连接这两个项目（即 Part 和 View），可以使用连接点。例如，要在 Part 中针对 View 中的按钮单击执行代码，您需要使用连接点。要绑定方法，您将使用 ComponentCommand，要绑定属性，您将使用 ComponentProperty。讨论的概述可以在图 1 中找到。然而，随着您深入研究这个示例，您就会了解这一点。

要求

要运行该应用程序，您需要安装 Orcas Beta 1。此外，您还需要安装 Acropolis。您可以从 MSDN 网站下载这两个组件。

项目开发

现在，开始开发项目。单击 **文件** -> **新建** -> **项目**。然后，在 **项目类型** 部分，选择 **Acropolis**。在模板部分，选择 **WPF 应用程序**。

输入项目名称后，将出现一个新窗口，如下所示。此向导将允许您进行一些设置。在不进行任何更改的情况下，单击 **完成**。

您会发现有两个 XAML（发音为 ZAMEL）文件：Application.xaml 和 Window.xaml。接下来，右键单击解决方案资源管理器中的项目 `AcropolisSample`，然后单击 **添加 -> 新建项**。在“**添加新项**”窗口中，选择“**Acropolis Part and View (WPF)**”，然后单击 **添加** 按钮。您会发现有两个文件已添加到您的项目中：Sample.xaml 和 SampleView.xaml。

让我们稍微理论化一下。在 Acropolis 中，有 Part 和 View。让我们考虑一下 .NET 中的窗口窗体。在这个窗口中，您可以将设计与 Acropolis 可以完成的逻辑分离开。在 Part 中，您将编写 XAML（即 Sample.xaml）逻辑，而在 SampleView.xaml 中，您将设计您的窗体。因此，您的设计与代码完全分离。设计人员可以设计窗体，而程序员可以编写代码。让我们继续这个项目。

双击 SampleView.xaml，将显示一个设计器。设计器将分为两部分：XAM 和 Design。单击 Design 部分，然后从 toolbox 中拖动一个 TextBox 和 Button。如果文本框未出现，请不要担心。只需将以下代码替换为...

<Grid>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
        Text="{Binding Part.Title}"/>
</Grid>

...替换为...

<Grid>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
        Text="{Binding Part.Title}"/>
    <TextBox Height="26" Margin="59,41,115,0" Name="textBox1"
        VerticalAlignment="Top" />
    <Button Margin="84,82.7766666666667,115,92.5" Name="button1" >
        Click</Button>
</Grid>

此代码将向您显示一个文本框和一个按钮。您已在 sampleView.xaml 中设计了视图，但您需要在 Part（即 Sample.xaml）中编写针对按钮单击的代码。您还需要使用 TextBox 值来执行一些逻辑工作，但 TextBox 在 View（即 SampleView.xaml）中，而您需要将代码编写在 Part（即 Sample.xaml）中。因此，要在 Sample.xaml 中使用 textbox 值，您需要创建一个 connectionpoint。

现在双击 Sample.xaml，将出现设计/XAML 窗口。单击窗口的设计部分。现在您将添加 ComponentProperty（它将链接到 TextBox）和 ComponentCommand（它将在按钮单击时执行）。双击工具箱的 Acropolis Framework 部分中的 ComponentProperty。属性将添加到您的设计器中。双击 ComponentCommand，命令将添加到您的设计器中。请记住，在单击 toolbox 时，焦点应放在窗口的设计部分，而不是 XAML 部分。以下屏幕显示了当前状态

现在单击 XAML 部分并更改代码...

<AcropolisComponent.ConnectionPoints>
    <ComponentCommand Name="ComponentCommand1" />
    <ComponentProperty Name="ComponentProperty1" />
</AcropolisComponent.ConnectionPoints>

...改为...

<AcropolisComponent.ConnectionPoints>
    <ComponentCommand Name="btnClickHandler" CommandExecuted="showName" 
        Description="Show Name" />
    <ComponentProperty Name="MyText" />
</AcropolisComponent.ConnectionPoints>

在上面的表中，CommandExecute 是当命令被调用时将执行的方法的名称。Description 是菜单项的标题，如果您想通过菜单执行该命令，它将显示在菜单中。现在您需要在 sample.xaml 的代码隐藏文件中编写 showName 方法，该文件是 sample.xaml.cs。在解决方案资源管理器中展开 Sample.xaml，然后双击 Sample.xaml.cs 文件。在此窗口中，编写以下方法

private void showName(object sender, 
    ComponentCommandExecutionEventArgs<object> e)
{
    System.Windows.MessageBox.Show(MyText.Value.ToString());
}

此时，我们已经准备好了 Part 和 View，现在我们需要将它们连接起来。双击 SampleView.xaml，将显示设计器。更改 SampleView.xaml 中的 TextBox 和 Button 部分。现在代码如下所示

<TextBox Height="26" Margin="59,41,115,0" Name="textBox1"
    VerticalAlignment="Top" Text="{Binding MyText.Value}" />
<Button Margin="84,82.7766666666667,115,92.5" Name="button1"  
    Click="btnEventHandler">Click</Button>

在上面的表中，我将 Text 绑定到了 PropertyName.Value。在这种情况下，它代表 MyText.Value。此外，我还编写了一个方法名来处理按钮的单击事件。在这种情况下，处理程序是 btnEventHandler。现在您将在 View 的代码隐藏文件（即 SampleView.xaml.cs）中编写 btnEventHandler。从解决方案资源管理器打开 SampleView.xaml.cs 文件并编写以下代码

private void btnEventHandler(object sender, EventArgs e)
{
    Part.BtnClickHandler.Execute(null);
}

前面的代码段执行 Part（即 Sample.xaml）的 BtnClickHandler。现在您需要将迄今为止开发的 Part 附加到应用程序，以便可以显示它。请记住，Part 不能单独显示；它必须附加到一个主机。在这种情况下，主机是 Application.xaml。为了使 Part 可用于部署到应用程序中，请**生成解决方案**。

生成解决方案后，您将在工具箱的**用户组件 (Acropolis)** 中找到一个 **Sample** Part。现在打开 Application.xaml 文件，并将焦点放在文件的设计部分。然后双击工具箱中的**Sample**，Sample Part 将添加到您的应用程序中。**保存**解决方案并**运行**它。

当您运行应用程序时，将有一个 TextBox 和一个 Button。在 TextBox 中输入您的姓名后，单击 Button 时，TextBox 的值将显示在消息框中。为了执行 Part（即 Sample.xaml.cs）中的 showName 方法，我在 View（sampleView.xaml.cs）中使用了 Button click 事件。但是，默认情况下，Acropolis 会为 Part 中的每个 ComponentCommand 添加菜单。您可以通过单击默认菜单来执行 showName 方法，如下面的圆圈所示

优点

我在 Acropolis 中发现的主要好处是开发速度更快。当用户设计页面时，同时可以有另一位用户编写页面背后的逻辑。最后，这两者可以绑定起来。此外，由于页面设计和页面代码是完全分离的，称为“松耦合”，因此可以轻松进行更改。例如，如果业务逻辑有任何更改，则只需更改 Part，而 View 不会受到影响。因此，开发和测试时间将会缩短。我希望下次作为一个网页设计师，将引入一个 XAML 设计师。

结论

最后，我们开发了一个项目，其中 View 中的按钮单击由 Part 处理。此外，TextBox 值通过连接点从 Part 进行操作。您还可以从您的 Part 调用服务（使用 WCF 概念开发的）。

历史

• 2007 年 8 月 14 日：发布原始版本
• 2007 年 9 月 7 日：更新