|
Written by Jonas Martinsson, an entrepreneur and member of Mainsoft's product management
team. Jonas helped to integrate Mainsoft's .NET-Java™ EE interoperability products
with the Visual Studio® IDE. Currently, he's helping design products that integrate SharePoint® content into IBM middleware.
Mainsoft for Java EE, 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.
|
|
 |
|
|
Figure 1: Create a new ASP.NET project targeting Java.
|
Getting started
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
|
|
 |
|
|
Figure 2: Viewing the Web Designer using Split View.
|
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].
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).
|
|
 |
|
|
Figure 3: Use the CSS Style Manager to create a new style.
|
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."
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
|
|
 |
|
|
Figure 4: The RSSToolkit controls.
|
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.
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].
|
|
 |
|
|
Figure 5: Add DataBindings to the DataList's Item Template.
|
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.
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 the 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: 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 than 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: 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 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,
though 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.
|