Introduction
Mainsoft for Java EE, Developer Edition, 2.5 (a. k. a. Grasshopper™ 2.5) gives you the freedom to build C# and Visual Basic® Web applications using the Visual Studio® 2008 development environment and host them on open Java platforms. Like its predecessor, Grasshopper 2.5 provides full support for ASP.NET AJAX and integrates seamlessly with Microsoft's® ASP.NET 2.0 AJAX Extensions and the AJAX Control Toolkit. In addition, 2.5 supports new language features for C# 3.0 and Visual Basic 9, such as Local Type Inference, Object and Collection Initializers, Anonymous Types, and Auto-Implemented Properties.
Below, we'll show you how easy it is to build a basic AJAX news reader using ASP.NET, Visual Studio® 2008, and Grasshopper 2.5 and run it locally on a Tomcat server.
Getting Started
Figure 1: Create a new ASP.NET project targeting Java.
First, download and install Grasshopper 2.5, a Visual Studio®-based SDK we developed with the Mono open source community.
To get started on the AJAX news reader, we'll create a new project based on the Visual C# for Java EE > ASP.NET Web Application template and name it Mainsoft News Reader [Figure 1].
Designing the RSS Reader
Now we'll begin designing the application's user interface. Visual Studio® 2008 features a new and vastly improved Web Designer, including a Split View that lets you use the Source and Design Views side-by-side. Changes in one pane are synchronized with the other. Since HTML coding typically relies on hand-tuning the source code, the old edit-save-view development cycle is now a thing of the past, as you can immediately visualize your markup changes [Figure 2].
Figure 2: View the Web Designer using Split View.
Let's add an Image and a Label control using drag-and-drop from the Toolbox to the design surface. We'll use these two elements as the logotype and header, and we'll associate the Mainsoft logo with the Image control and write a Label caption.
Below the header, we add a list of LinkButton controls to the design surface, where each item is a news source. Clicking on a link should display the latest articles from this source. We'll choose a DataList for presenting the articles because it's simple, and it contains all the functionality we need.
Next, we'll design the layout for the added controls. The DataList supports auto-formatting based on pre-defined layout templates. We simply choose the "Slate" format in the DataList's Auto Format... context menu and get a much more attractive list of news sources. We'll design the rest of the layout using Cascading Style Sheets (CSS).
Visual Studio® 2008 introduces some useful additions for working with CSS. For example, the CSS Style Manager gives you the flexibility to manage all CSS styles, regardless of whether the styles are defined in the current page or in an external file. Let's start by formatting the banner text, the top Panel, which says "Mainsoft News Reader."
Figure 3: Use the CSS Style Manager to create a new style.
With the Label element selected, we choose View > Manage Styles from the Visual Studio® menu. Now we can view all available styles and see whether they're being used on the current page. This feature eliminates the otherwise time-consuming guesswork needed to understand how complex inheritance flows are calculated. We'll create a new style in the Manage Styles pane and name the new style .header, where the dot indicates a class in CSS. By selecting the Apply new style to document selection checkbox, we ensure that this style will be applied to the current control. Then we define the font properties and other styling attributes to apply to the header class [Figure 3]. We follow the same process to define CSS styles for the news feed list, as well as a global CSS format for the body element.
Implementing the Logic
Now we need to identify a data source and retrieve the news content that will populate the DataList. Because DataList binds to any .NET data source, we want to find a data source control that exposes news. RSSToolkit, an ASP.NET control hosted on CodePlex, exposes RSS feeds as data sources and is perfect for the job. I already ported the RSSToolkit to Java in another article, so both .NET and Java binaries are available to us.
Figure 4: These are the RSSToolkit controls.
To use the RSSToolkit, we'll choose Add Java Reference... from the Project menu and browse to the RSSToolkit.jar file. Then we'll add RSSToolkit.dll to the Visual Studio Toolbox by right-clicking the toolbox and selecting Choose Items... This adds two new Web controls: RssDataSource and RssHyperlink [Figure 4].
Next, we'll add the RssDataSource to the design surface and associate it with the DataList.
The DataList has an Edit Templates action menu, where it's straightforward to add standard controls and bind them to the data source [Figure 5].
In the Item Template, we'll add two Panels, one for the article title and another for the article text, and bind them to the appropriate field from the RssDataSource.
Figure 5: Add DataBindings to the DataList's Item Template.
In the code-behind on the server side, we'll register an event handler for the LinkButtons' command event using the controls' property pane. In this case, the command event is preferable to the more standard click event because it lets us send an argument from the originating HTML element. All LinkButton elements share the same event handler and send their news feed URL to the event as a CommandArgument, which is then bound to the RssDataSource:
protected void NewsSources_Click(object sender, CommandEventArgs e)
{
RssDataSource.Url = e.CommandArgument.ToString();
ArticleList.DataBind();
}
AJAXifying the Application
Today, JavaScript is an essential part of any Web site, but historically, writing and testing JavaScript was often left to tools outside of Visual Studio. With Microsoft's® 2008 release, JavaScript has become a first-class citizen in the IDE.
In order to highlight the selected news feed, I define a .current CSS class. When the user opens a news feed, a JavaScript function applies the .current class to the selected <li> element. The development of the JavaScript function is super-easy in Visual Studio® 2008, with the added support of JavaScript IntelliSense and formatting.
Figure 6: Grasshopper supports AJAX Extensions controls out-of-the-box.
While the solution compiles and runs at this point, we still haven't used any AJAX features. So let's go ahead and add AJAX functionality to our application for a richer and more responsive user experience. For example, when the user switches news sources, we would like to reload just the article list. As seen in Figure 6, the AJAX Extensions' UpdatePanel control supports partial page rendering and ensures that only the controls inside it are reloaded when the page refreshes.
We'll wrap the DataList with an UpdatePanel and set the LinkButtons as triggers in the UpdatePanel's property pane. It couldn't possibly be simpler than that!
To make each header in the article list clickable to show the full news article, we'll use a CollapsiblePanel control, which allows us to click on a panel that toggles the visibility of a second panel (similar to reading items in Google Reader). The CollapsiblePanel control is included in the AJAX Control Toolkit, which contains many useful AJAX controls. The AJAX Control Toolkit is included in the Grasshopper installation under Samples\CS\Tomcat\AjaxControlToolkit. Before we can add it to Visual Studio's® Toolbox (in the same way we added the RssToolkit), we need to build the toolkit with Visual Studio and Grasshopper. Here's the markup code that glues RssDataSource, DataList, and CollapsiblePanel together:
<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>
Finally, we'll add an UpdateProgress control to indicate when the page is fetching news articles. Once it's added to the design surface, the control automatically becomes visible during partial page updates using the UpdatePanel.
Deploying ASP.NET AJAX on Tomcat
From Visual Studio, building the ASP.NET solution's Java binary target is as simple as selecting the Debug_Java configuration and hitting Ctrl-F5.
Just make sure you first start the bundled Apache Tomcat application server (Start > All Programs > Mainsoft for Java EE > Start Tomcat) or you'll get a deployment error. MSBuild compiles the application and then, behind the scenes, fires up Mainsoft's bytecode cross-compiler to generate JAR files that can be deployed on Java Web application servers.
Figure 7: This is the JavaScript debugger.
When we launch the Web application, it quickly becomes apparent that there is a bug. The initially selected news feed never gets unselected when the user changes feeds. Likely, the problem is in the JavaScript function that deals with the feed highlighting. To find out, we'll add a breakpoint to the start of the linklist_onclick() function and launch the debugger with F5. Debugging Java from Visual Studio® using Grasshopper is no different from debugging a traditional ASP.NET application. Breakpoints, the ability to step through code, and variable watching are fully supported in your C#/Visual Basic code when you debug JAR targets.
When the user changes the news feed selection and we hit the breakpoint, we see that the selectedNewsSource variable is null, even though it should have been set in the global scope two lines above it [Figure 7].
Figure 8: Here's the ASP.NET AJAX news reader deployed on Tomcat.
Actually, the variable initialization is executed prior to the time when the Document Object Model finishes loading. As a result, the variable is null the first time the user changes news feeds. In order to solve this problem, let's change the logic inside the function to explicitly set selectedNewsSource to the default news item. Running the application again verifies that everything works well [Figure 8].
And there you have it!
Conclusion
As you can see, Mainsoft’s Interop solution makes it easy to build a basic RSS Java news reader on the powerful ASP.NET platform and target Tomcat or other Java EE Web application servers.
Bear in mind that no Java-specific code was written here. This means you get two immediate benefits when you use Grasshopper. First, you don't need to learn Java coding skills to deploy Web and server applications to Java. And second, you maintain the freedom to use the same source code to target both Java and .NET.
So now it's your turn to give Grasshopper a try. Remember, Grasshopper is free, although you'll need a commercial license if you want to target multi-CPU deployments or IBM middleware such as WebSphere® Portal Server, WebSphere Application Server, Lotus Expeditor®, or other open platforms.
