Infragistics® NetAdvantage® for Web Client - Silverlight controls for Line of Business applications gives you the tools for a sleek navigation user experience that ties directly into new Microsoft Silverlight 3 capabilities like the Navigation Framework. In this article I am going to show you some of the rich, outstanding Web-based applications that can be at your fingertips with these latest, native Silverlight 3 controls augmenting your Microsoft® Visual Studio® 2008 toolbox.
If you’re already familiar with the new navigation features in Silverlight 3 that Infragistics takes advantage of, and want to go directly to the free trial, download your free trial from here.
There are countless applications that rely on a hierarchical categorization of their contents and/or functionality. Whether it is document management using traditional file folders or streaming RSS feeds of real-time blog content being updated over the Internet, the tree view is one which your users are already intimately familiar. Nothing says parent/child relationship like the xamWebTree™ (pronounced zam-Web-Tree).
Figure 1 – Infragistics xamWebTree allows intuitive navigation through blog RSS feeds for your users so they find content relevant to them quickly and easily.
xamWebTree runs in either unbound or bound modes. In unbound mode you can custom populate the tree nodes, which is convenient for many code-and-go situations.
<igTree:XamWebTreeItem Content="Corporate">
<igTree:XamWebTreeItem Content="HR Announcements" />
<igTree:XamWebTreeItem Content="Press Releases" />
<igTree:XamWebTreeItem Content="New Employees" />
</igTree:XamWebTreeItem>
Listing 1 - XAML showing how easily you can define unbound tree nodes beneath the Corporate RSS feed category.
In data bound mode, you can specify hierarchical data templates in XAML (or programmatically) that adapt your own data structures to tree form for presentation to your users.
<igTree:XamWebTree ItemsSource="{Binding Path=CategorisedRssFeeds}" >
<igTree:XamWebTree.HierarchicalItemTemplate>
<ig:HierarchicalDataTemplate ItemsSource="{Binding Path=RssFeeds}">
<ig:HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Resources/Rss.png" Width="16" Height="16" />
<TextBlock Text="{Binding Path=Title}" Foreground="Gray" />
</StackPanel>
</DataTemplate>
</ig:HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Resources/Folder.png" Width="16" Height="16" />
<TextBlock Text="{Binding Path=Title}" FontWeight="Bold" />
</StackPanel>
</DataTemplate>
</ig:HierarchicalDataTemplate>
</igTree:XamWebTree.HierarchicalItemTemplate>
</igTree:XamWebTree>
Listing 2 - Hierarchical data templates are the native XAML approach to create a parent-child tree structure in a bound Silverlight tree control.
You will find that the data binding of Infragistics Silverlight controls for Line of Business applications follows the familiar pattern that Microsoft introduced for XAML in the immensely popular Windows Presentation Foundation (WPF) on which Silverlight was based. This is one example of how Infragistics designs its controls specifically for the Silverlight platform following Microsoft’s conventions. If you have learned WPF or Silverlight data binding then you can count on Infragistics controls data binding in the same way.
Notice in Listing 2 how effortlessly xamWebTree supports node templates. All tree nodes are 100% template-ready, just as you would expect from a declarative user interface markup lanugage such as XAML. In this example, tree nodes contain both a text label and iconic image source, but you can devise many more complex templates as your Line of Business applications may require.
Figure 2 - Infragistics xamWebTree presents the table of contents for one book in an easy-to-navigate e-bookshelf application.
Journal-Aware Menuing (JAM) for Silverlight 3
One of the new features introduced by the Silverlight 3 platform is a navigation framework that takes into account the Back/Forward buttons of the browser and its support for History. How many of us have written AJAX-powered Web-based applications, only to run afoul of the Back button? Why, to this day there are still Web pages out there that warn users against using the Back button.
Have you ever seen the message, “Do not press the Back button, or your credit card may be charged an unbelievable number of times” (or words to that effect?)
A few tense moments later and the user is relieved that their operation has gone through. This doesn’t have the making of a delightful user experience.
Navigation controls designed and built for Silverlight 2 cannot intrinsically take advantage of the new navigation framework (or require cumbersome event handler workarounds to do so), but Infragistics has designed with the new features introduced by Silverlight 3 in mind when they made the xamWebMenu™ (pronounced zam-Web-Menu) control.
Figure 3 - Infragistics xamWebMenu in vertical orientation as used in a versatile retailing service that can be delivered securely over the Internet to paying subscribers.
As part of the new Microsoft Navigation Framework in Silverlight 3, you will have a Frame that serves as the container for your Page, and offers key validation and navigation services into which Infragistics controls like xamWebMenu and xamWebEditors™ know how to integrate. The important thing about the Frame when it comes to Forward / Back navigation is that it has a property for JournalOwnership that allows you to connect this Frame into your browser’s history (this is the default) or your own application’s navigation history.
<navigation:Frame x:Name="MainContent" Source="/Views/HomePage.xaml"
JournalOwnership="Automatic" />
Listing 3 - A rudimentary Frame declaration in Silverlight 3 that keeps track of its navigation history (journal) through the browser. Other options are to use its own local journal, or use the journal specified by a parent frame.
If you have used ASP.NET (2.0 or higher) before, the best way to think of a Frame in the new Microsoft Navigation Framework is as a master page. You will then have one or more Pages in your Views folder that are like the user controls to fill content placeholders in the ASP.NET 2.0 model. However, the new Navigation Framework lets us do much more like seamlessly tie-in any navigations performed within your Silverlight Line of Business application to your user’s browser history.
<navigation:Page x:Class="Views.HomePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:igMenu="clr-namespace:Infragistics.Silverlight.XamWebMenu;
assembly=Infragistics.Silverlight.XamWebMenu.v9.1"
xmlns:navigation="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Navigation"
Title="xamWebMenu Home Page">
<igMenu:XamWebMenu x:Name="MainMenu" MenuOrientation="Horizontal"
NavigationElement="{Binding ElementName=MainContent}"
NavigationOnClick="True" VerticalAlignment="Top" >
<igMenu:XamWebMenuItem Header="File">
<igMenu:XamWebMenuItem Header="New">
<igMenu:XamWebMenuItem Header="Project"
NavigationUri="Views/NewProject.xaml" />
<igMenu:XamWebMenuItem Header="Solution"
NavigationUri="Views/NewSolution.xaml" >
<igMenu:XamWebMenuItem.Icon>
<Image Source="images/NewSolution.png" />
</igMenu:XamWebMenuItem.Icon>
</igMenu:XamWebMenuItem>
</igMenu:XamWebMenuItem>
</igMenu:XamWebMenuItem>
</igMenu:XamWebMenu>
</navigation:Page>
Listing 4 - A simple unbound xamWebMenu inside of a Navigation Framework Page and integrated into the MainContent Frame element declared in Listing 3.
The XamWebMenuItem tags provide several attributes for connecting with the Microsoft Navigation Framework, including NavigationElement which binds to the Frame whose navigation services will be used, and is tracked in the Frame’s journal. NavigationElement can be set at the control-level, such that it is inherited by all child menu items. In this example, when users go to create a File | New | Solution they can rapidly back-up through the screens using their browser’s Back button. Your users will love this ability, and there are absolutely no headaches for you.
Flexible Navigation like in Microsoft Outlook® 2007
Many of your users are probably familiar with the UI patterns of Microsoft Outlook 2007, especially its flexible, accordian-style navigation bar that allows users to browse their incoming e-mail, calendar, contacts and much more. You can simulate these same consistent, familiar patterns using the Infragistics xamOutlookBar™ in your Line of Business applications for Silverlight 3.
Figure 4 - Infragistics xamOutlookBar in a Silverlight 3 sales team management reference application.
There’s no reason an Outlook-style navigation bar needs to constrain itself solely to mail and scheduling. It has broad applicability in any application where grouping or functional categorization is important, offering a number of dynamic features that allow users freedom in how they work and navigate in your Line of Business application. Its expandable groups can contain lengthy lists, even nested tree views of detailed business information. As you would expect, its designed for 100% template customizability so you can just drop an Infragistics xamWebTree into the selected group’s client area. With nary any work on your part, you can have application user experiences that shine in no time!
About NetAdvantage for Web Client - Silverlight Controls
The navigation controls described here are only part of the broad toolset for Line of Business applications that Infragistics launches this July for the Microsoft Silverlight 3 platform. You also receive a high performancce, hierarchal data grid, lightweight business charting (more sophisticated charting and mapping is available in a separate offering, NetAdvantage for Silverlight Data Visualization), robust editors, spell checking across multiple languages, a library for reading and writing Microsoft Excel files, a windowing control, and several other controls to augment your Microsoft Visual Studio 2008 toolbox.
These Silverlight 3 UI controls for the Line of Business developer are included with NetAdvantage for Web Client, the ultimate toolset for Web-based ASP.NET, ASP.NET AJAX and Silverlight LOB applications.
The UI controls are also included in NetAdvantage for .NET, 4 platforms in 1 package, including full control sets for ASP.NET, ASP.NET AJAX, Windows Forms, Windows Presentation Foundation, and Silverlight 3 for Line of Business applications.
Download a Free Trial of these Silverlight 3 UI Controls to Make Your Applications Shine Today.
Copyright © 2008-2009 Infragistics, Inc. All Rights Reserved. Infragistics and NetAdvantage are registered trademarks of Infragistics, Inc. xamWebEditors, xamWebMenu, xamWebOutlookBar and xamWebTree are trademarks of Infragistics, Inc. All other trademarks or registered trademarks are the property of their respective owner(s).
My name is Murtaza Abdeali, also known as Taz, I am the Product Manager for Web Clients at Infragistics. I manage our ASP.NET product line.
I started at Infragistics in 2004 as a Developer Support Engineer, where I enjoyed being at the fore front of all the product lines, talking directly to customers, answering questions, solving simple and complex problems.
Then I joined our Evangelism department as a Technical Evangelist, where I travelled all over the world visiting customers, speaking with them face to face, talking about the product and technologies around. During the same period, I also did some consulting and training gigs. This was the time where I got to see Infragistics customers actually using the product within their applications and being able to help with their problems in real time.
In my current role as a Product Manager, I still do all of the above, but I am also responsible for setting the direction for our ASP.NET product. So, if you want to discuss anything regarding the ASP.NET toolset, please feel free to contact me: murtazaa@infragistics.com
Submit an article or tip
