使用 Visual Studio 2008 开发 Java AJAX 新闻阅读器
1.00/5 (2投票s)
使用 .NET 2.0 编写代码并为 Java 构建！使用 Visual Studio 2008、ASP.NET AJAX 和 Grasshopper 2.5 开发一个 Java AJAX RSS 新闻阅读器。
引言
Mainsoft for Java EE 开发者版 2.5 (又名 Grasshopper™ 2.5) 让您能够使用 Visual Studio® 2008 开发环境构建 C# 和 Visual Basic® Web 应用程序，并将它们托管在开放的 Java 平台上。与前代产品一样，Grasshopper 2.5 完全支持 ASP.NET AJAX，并与 Microsoft® ASP.NET 2.0 AJAX Extensions 和 AJAX Control Toolkit 无缝集成。此外，2.5 版本还支持 C# 3.0 和 Visual Basic 9 的新语言功能，例如本地类型推断、对象和集合初始化器、匿名类型以及自动实现的属性。
下面，我们将向您展示如何使用 ASP.NET、Visual Studio® 2008 和 Grasshopper 2.5 构建一个基本 AJAX 新闻阅读器，并在 Tomcat 服务器上本地运行它。
入门
图 1：创建以 Java 为目标的新 ASP.NET 项目。
首先，**下载**并安装 Grasshopper 2.5，这是一个我们与 **Mono** 开源社区合作开发的基于 Visual Studio® 的 SDK。
要开始构建 AJAX 新闻阅读器，我们将创建一个基于 **Visual C# for Java EE > ASP.NET Web Application** 模板的新项目，并将其命名为 **Mainsoft News Reader** [图 1]。
设计 RSS 阅读器
现在，我们将开始设计应用程序的用户界面。Visual Studio® 2008 拥有一个全新且大幅改进的 Web 设计器，其中包括一个分屏视图，让您可以并排使用源代码视图和设计视图。一个窗格中的更改会同步到另一个窗格。由于 HTML 编码通常依赖于手动调整源代码，因此旧的编辑-保存-查看开发周期已成为过去，因为您可以立即可视化标记的更改 [图 2]。
图 2：使用分屏视图查看 Web 设计器。
我们将从工具箱中将一个 Image 和一个 Label 控件拖放到设计图面上。我们将使用这两个元素作为标志和标题，并将 Mainsoft 徽标关联到 Image 控件，并编写 Label 的标题。
在标题下方，我们将向设计图面添加一个 LinkButton 控件列表，其中每个项目代表一个新闻源。点击链接应该会显示来自该源的最新文章。我们将选择 DataList 来展示文章，因为它简单易用，并且包含我们所需的所有功能。
接下来，我们将设计添加控件的布局。DataList 支持基于预定义布局模板的自动格式化。我们只需在 DataList 的 **自动格式化...** 上下文菜单中选择“Slate”格式，即可获得更具吸引力的新闻源列表。我们将使用级联样式表 (CSS) 来设计其余布局。
Visual Studio® 2008 引入了一些有用的 CSS 工作辅助功能。例如，CSS 样式管理器让您可以灵活地管理所有 CSS 样式，无论样式是定义在当前页面还是外部文件中。让我们从格式化横幅文本开始，即顶部 Panel，显示“Mainsoft News Reader”。
图 3：使用 CSS 样式管理器创建新样式。
选中 Label 元素后，我们从 Visual Studio® 菜单中选择 **视图 > 管理样式**。现在我们可以查看所有可用的样式，并查看它们是否在当前页面上使用。此功能消除了理解复杂继承流程计算所需的耗时猜测。我们将在“管理样式”窗格中创建一个新样式，并将其命名为 .header，其中点表示 CSS 中的类。通过选中 **将新样式应用于文档选择** 复选框，我们确保此样式将应用于当前控件。然后，我们定义应用于 header 类的字体属性和其他样式属性 [图 3]。我们遵循相同的过程来定义新闻源列表的 CSS 样式，以及 body 元素的全局 CSS 格式。
实现逻辑
现在我们需要确定数据源并检索将用于填充 DataList 的新闻内容。由于 DataList 可以绑定到任何 .NET 数据源，因此我们希望找到一个公开新闻的数据源控件。RSSToolkit 是一个托管在 CodePlex 上的 ASP.NET 控件，它可以公开 RSS Feed 作为数据源，非常适合此任务。我已经在另一篇文章中将 RSSToolkit **移植**到了 Java，因此 .NET 和 Java 二进制文件都可以供我们使用。
图 4：这是 RSSToolkit 控件。
要使用 RSSToolkit，我们将从 Project 菜单中选择 **添加 Java 引用...** 并浏览到 RSSToolkit.jar 文件。然后，通过右键单击工具箱并选择 **选择项...**，将 RSSToolkit.dll 添加到 Visual Studio 工具箱。这将添加两个新的 Web 控件：RssDataSource 和 RssHyperlink [图 4]。
接下来，我们将 RssDataSource 添加到设计图面并将其与 DataList 关联。
DataList 有一个 **编辑模板** 操作菜单，在其中可以轻松添加标准控件并将其绑定到数据源 [图 5]。
在 Item Template 中，我们将添加两个 Panel，一个用于文章标题，另一个用于文章正文，并将它们绑定到 RssDataSource 的相应字段。
图 5：向 DataList 的 Item Template 添加数据绑定。
在服务器端的代码隐藏中，我们将使用控件的属性窗格为 LinkButtons 的 command 事件注册一个事件处理程序。在这种情况下，command 事件比更标准的 click 事件更受欢迎，因为它允许我们从原始 HTML 元素发送参数。所有 LinkButton 元素共享相同的事件处理程序，并将它们的新闻 Feed URL 作为 CommandArgument 发送到事件，然后该参数将绑定到 RssDataSource。
protected void NewsSources_Click(object sender, CommandEventArgs e)
{
RssDataSource.Url = e.CommandArgument.ToString();
ArticleList.DataBind();
}
AJAX 化应用程序
如今，JavaScript 是任何 Web 网站不可或缺的一部分，但历史上，编写和测试 JavaScript 通常依赖于 Visual Studio 之外的工具。随着 Microsoft® 2008 的发布，JavaScript 已成为 IDE 中的一等公民。
为了突出显示选定的新闻 Feed，我定义了一个 .current CSS 类。当用户打开一个新闻 Feed 时，一个 JavaScript 函数会将 .current 类应用于选定的 <li> 元素。在 Visual Studio® 2008 中开发 JavaScript 函数非常简单，并且增加了对 JavaScript IntelliSense 和格式化的支持。
图 6：Grasshopper 开箱即用地支持 AJAX Extensions 控件。
虽然解决方案在此阶段可以编译和运行，但我们尚未完全使用任何 AJAX 功能。因此，让我们继续为应用程序添加 AJAX 功能，以获得更丰富、更响应式的用户体验。例如，当用户切换新闻源时，我们希望只重新加载文章列表。如图 6 所示，AJAX Extensions 的 UpdatePanel 控件支持部分页面渲染，并确保在页面刷新时仅重新加载其中的控件。
我们将 DataList 包装在 UpdatePanel 中，并将 LinkButtons 设置为 UpdatePanel 的触发器。这**不可能**更简单了！
为了使文章列表中每个标题都可点击以显示完整的文章，我们将使用 CollapsiblePanel 控件。该控件允许我们点击一个 Panel 来切换第二个 Panel 的可见性（类似于阅读 Google Reader 中的项目）。CollapsiblePanel 控件包含在 AJAX Control Toolkit 中，后者包含许多有用的 AJAX 控件。AJAX Control Toolkit 包含在 Grasshopper 安装的 Samples\CS\Tomcat\AjaxControlToolkit 目录下。在将其添加到 Visual Studio® 工具箱（方式与添加 RssToolkit 相同）之前，我们需要使用 Visual Studio 和 Grasshopper 构建该工具包。以下是连接 RssDataSource、DataList 和 CollapsiblePanel 的标记代码：
<cc1:RssDataSource ID="RssDataSource" runat="server" MaxItems="0"
Url="http://feeds.feedburner.com/MainsoftDevzone"></cc1:RssDataSource>
<asp:DataList ID="ArticleList" runat="server" DataSourceID="RssDataSource"
BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px"
CellPadding="3" GridLines="Horizontal">
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<AlternatingItemStyle BackColor="#F7F7F7" />
<ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<ItemTemplate>
<asp:Panel ID="ArticleTitle" runat="server" CssClass="article-header">
<asp:Image ID="ExpandImage" runat="server"
ImageAlign="Middle" /><%# Eval("title") %></asp:Panel>
<asp:Panel ID="ArticleDescription" runat="server">
<%# Eval("description") %></asp:Panel>
<cc2:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="ArticleDescription" ExpandControlID="ArticleTitle"
SuppressPostBack="True" Collapsed="True" CollapseControlID="ArticleTitle"
CollapsedImage="images/minus.png" ExpandedImage="images/plus.png"
ImageControlID="ExpandImage">
</cc2:CollapsiblePanelExtender>
</ItemTemplate>
</asp:DataList>
最后，我们将添加一个 UpdateProgress 控件来指示正在获取新闻文章。一旦将其添加到设计图面，该控件就会在部分页面更新期间自动显示，使用 UpdatePanel。
在 Tomcat 上部署 ASP.NET AJAX
从 Visual Studio 中，只需选择 Debug_Java 配置并按 Ctrl-F5，即可构建 ASP.NET 解决方案的 Java 二进制目标。
只需确保先启动捆绑的 Apache Tomcat 应用程序服务器（**开始 > 所有程序 > Mainsoft for Java EE > 启动 Tomcat**），否则您会收到部署错误。MSBuild 编译应用程序，然后在后台启动 Mainsoft 的字节码交叉编译器，以生成可部署到 Java Web 应用程序服务器的 JAR 文件。
图 7：这是 JavaScript 调试器。
当我们启动 Web 应用程序时，很快就会发现一个 bug。当用户更改 Feed 时，最初选定的新闻 Feed 永远不会取消选中。很可能问题出在处理 Feed 高亮显示的 JavaScript 函数中。为了找出原因，我们将在 linklist_onclick() 函数的开头设置一个断点，并按 F5 启动调试器。使用 Grasshopper 从 Visual Studio® 调试 Java 与调试传统 ASP.NET 应用程序没什么区别。在调试 JAR 目标时，您的 C#/Visual Basic 代码完全支持断点、代码单步执行以及变量监视。
当用户更改新闻 Feed 选择并命中断点时，我们看到 selectedNewsSource 变量为 null，尽管它应该在它上面的两行全局范围内设置 [图 7]。
图 8：这是部署在 Tomcat 上的 ASP.NET AJAX 新闻阅读器。
实际上，变量初始化是在 Document Object Model 加载完成之前执行的。因此，当用户第一次更改新闻 Feed 时，变量为 null。为了解决这个问题，让我们更改函数中的逻辑，明确将 selectedNewsSource 设置为默认新闻项。再次运行应用程序会验证一切正常 [图 8]。
搞定！
结论
如您所见，Mainsoft 的 互操作解决方案 使得在强大的 ASP.NET 平台上轻松构建基本 RSS Java 新闻阅读器，并将其目标定位到 Tomcat 或其他 Java EE Web 应用程序服务器。
请记住，这里没有编写任何特定于 Java 的代码。这意味着当您使用 Grasshopper 时，您可以获得两个直接的好处。首先，您无需学习 Java 编码技能即可将 Web 和服务器应用程序部署到 Java。其次，您可以保持使用相同的源代码来同时定位 Java 和 .NET。
所以现在轮到您尝试 Grasshopper 了。请记住，Grasshopper 是免费的，尽管如果您想定位多 CPU 部署或 IBM 中间件（如 WebSphere® Portal Server、WebSphere Application Server、Lotus Expeditor® 或其他开放平台）的商业许可证。