Navigation wizard IE 7 style

 

Introduction

One of the coolest new things (at least for me) in IE 7 and Vista upcoming wave is redesigned minimalist wizard navigation interface.

Instead of *old style* wizards with a bunch of the navigation buttons at the bottom like the wizard shown below

Illustration 1. Classic windows wizard screen 

 

IE 7 and Windows Vista are introducing the new cool navigator control which fully replaces the functionality of the old one. It looks like a plain two arrows (left and right with a drop down menu)

Something like this in

Illustration 2. Internet Explorer 7 version navigation controls

or in case of Windows Vista

Illustration 3. Windows Vista version navigation controls

 

The whole original wizard toolbar is therefore replaced with small and nice self explanatory looking interface:

back and next are obviously left and right arrow if a user would wanted to give up, he could do that by closing the IE 7 window or windows explorer window As you can see, the same approach is implemented in web and windows world, which makes additional positive effect to user experience. Wizard navigation therefore stops to be predominant on the wizard and starts to be supportive from second plan and allowing implementation of wizard navigation logic applicable on waste range of cases.

This new navigational functionality could be easily made by using Windows Presentation Foundation (WPF) because when you set Application.StartupUri to either a XAMl or HTML page, Application (knowing that neither of these can provide its own window) creates an instance of NavigationWindow to host them and Navigation Windows derives from Window and extends its visual appearance to look like a browser by adding navigation items: left and right arrow and drop down menu

Because it is fairly trivial to implement and I’ll need that navigation functionality to use in next article of Smart Client Factory series , I’ve decided to post a blog about building it (off course just on very general way)

UI concept

UI part of the control would be based separation of the navigation control to three parts: back navigation button

part, forward navigation button part and menu drop down part.

Illustration 4. Regions of IE7Navigator control

The control would be covered with a background picture box which would show the control in initial *disabled all* state.

Illustration 5. Disabled background shown only

 

On top of that background picture there would be three picture box controls which would cover each of the three parts and show appropriate images for mouse hover and click events, as shown on next illustrations:

Illustration 6. Back action (enabled, hovered and clicked)

 

Illustration 7. Forward action (enabled, hovered and clicked)

    

Illustration 8. Drop down menu action (hovered and clicked)

Collection container concept

 

The whole point of using navigation control is in to enable user experience of navigating through successive steps back and forth. To achieve that we have to store all those steps somewhere.  I've designed simple class called NavigationItem with couple of simple properties: Id, Description (which would be presented in a drop down menu - for. e.g. window title) and a Tag of object type which could be used as a session data carrier. Tag property is implemented as a virtual so it would allow overriding of storing to strong typed values 

Illustration 11. NavigationItem class diagram

So the goal of our control is to behave like a GUI  iterator through the collection of abstract navigation items non related to any GUI specific technology.

Project overview

During making of this example I was again following the MVP - Model View Presenter Design Pattern approach and put all the logic in separate project called VusCode.Presenters.Controls.

In short, the reason why we did it to separate in separate presenter project could be maybe a reuse in WebForm variant of this control and all the other reason stated on the posting on given link. Also I have put there all the resource files because View of our control should only know about working with generic images, so in case we would replace the resource images in presenter assembly control wouldn't know about it, but it would still work perfectly.

So the project tree would look like

Illustration 12. Project tree

Presenter interface definition

As you can see, inside of the presenter there  is a interface IIE7Navigation which is been implemented in IE7Navigation user control and to whom the presentation class is referencing while speaking to the view. Please note that IIE7Navigation interface is inheriting IList<NavigationItem> interface as well

Illustration 13. Presenter interface

Those properties expose abstract interpretation of all the requested view functionality + collection functionality given by a List<NavigationItem> generic collection class

Illustration 16. IList<NavigationItem> implemented members

The View

The view is implementing that interface by applying the IOD - implementation over delegation design pattern, which described in shortly is a technique of holding a private instance of a class A inside of class B and forwarding calls to a public methods of a class B to a method of class A (see the given link for more details)

Illustration 14. The view - user control structure

 

View is implementing the IIE7Navigation interface properties by doing something like

public Image BackButtonPicture

{

      set { backPicture.Image = value; }

}

A large number of the methods enlisted is due to the fact that we have to handle different mouse events (mouse down, mouse up, mouceover) for three different images (back forward and drop down menu pictures) 

IOD implementation of the rest not-so-trivial methods and properties is relying on forwarding all the method calls to presenter, something like this for properties

/// <summary>

/// Shows current iterator position

/// </summary>

public NavigationItem Current

{

      get

      {

            return presenter.getCurrentNavigationItem();

      }

}

or for the methods

///<summary>

///Adds an item to the navigation item collection

///</summary>

///

///<param name="item">The navigation item to add to the navigation item collection.</param>

///<exception cref="T:System.NotSupportedException">The navigation item collection is read-only.</exception>

public void Add(NavigationItem item)

{

      presenter.Add(item);

}

The Presenter

The presenter project contains IE7NavigationPresenter class which holds all the logic of the control.

Illustration 15. Presenter interface

We already seen that the view is implementing his functionality bu delegating his method calls to presenter, but how presenter is doing the real work?

Well it is very simple: it is delegating it further

If we take a look at the defined private fields we would see that in it there is a private field variable member navigationItemCollection of a List<NavigationItem> type so when a presenter method is been called by the view, the presenter is delegating method call by simple forwarding parameter to that private contained class method

For example presenter class is implementing Contains functionality like this

public bool Contains(NavigationItem item)

{

      return (navigationItemCollection.Contains(item));

}

Another usage of the IOD - implementation over delegation: very simple and very powerfully

The main UI look code logic is very simple (turning on and off the pics) and contained in the presenter.redraw method

/// <summary>

///  Initialize visibility of pictures

/// </summary>

private void redraw()

{

      if (navigationItemCollection.Count == 0) return;

      // default enabled pictures

      view.BackButtonPicture = Images.back_enb;

      view.ForwardButtonPicture = Images.forw_enb;

      view.IsDropDownMenuVisible = true;

      view.IsBackButtonVisible =

            CurrentIndex != 0;

      view.IsForwardButtonVisible =

            CurrentIndex !=

            navigationItemCollection.Count - 1;

}

The last important thing which needs to be mentioned is that the presenter exposes the

public event EventHandler<CurrentItemChangedEventArgs>CurrentItemChanged;

event which is generic event handler triggered by the change of iterator current position for the customized CurrentItemChangedEventArgs

Illustration 16. Event arguments

The event is been propagated to control level by implementing the view as a observer of a presenter who is raising the event.

 

The result

Reason why I've blogged about this is that I'll use this control in my next post about Adapter and Command design pattern, but for the sake of making this article complete I've made very simple (but illustrative enough) example.

This testing project would be based on a simple list control where we would add some items and then walk through items by using our navigator

Illustration 17. Initial look of the test project
navigator disabled because there are no items

Illustration 18. One item added   - active the only one       
navigator disabled because there is only one item (nothing to navigate) but he menu item is enabled because there is a navigation item to be shown (Note that the correct tag value is shown: Item 0)

 

Illustration 19. One item added   - active the last one      
navigator enabled and enables the back and forward buttons because there is one item before and after (Note that the correct tag value is shown: Item 1)

Illustration 20. Two items - active the Frost one
after clicking on back button of navigator navigator is enabled and enables the forward buttons because there is only one item after  (Note that the correct tag value is shown: Item 0)

Illustration 21. Three item added   - active the middle one       
after adding another item and clicking forward button navigator is enabled and shows the back and forward buttons because there is one item before and after (Note that the correct tag value is shown: Item 1)

Illustration 22. Three item added   - menu active

after clicking on a menu all three items are been presented and clicking on any of them moves the navigator to that step

    Code used in this testing example is very simple:

a) hooking up control changed event is done like this                              

// add method to delegate event handler

IE7NavigationControl.CurrentItemChanged +=

      new EventHandler<CurrentItemChangedEventArgs>

      (IE7NavigationControl_CurrentItemChanged);

b) adding item to navigator

menuItemListBox.Items.Add(menuItemtext.Text);

NavigationItem navigationItem

      = new NavigationItem(

            IE7NavigationControl.Count.ToString(),

            menuItemtext.Text,

            string.Format

            ("Item:{0}" ,

            IE7NavigationControl.Count.ToString())

      );

           

IE7NavigationControl.Add(navigationItem);

c) removing item from navigator

menuItemListBox.Items.RemoveAt(menuItemListBox.SelectedIndex);

IE7NavigationControl.RemoveAt(IE7NavigationControl.CurrentIndex);

d) handling method for a navigator control changed event

menuItemListBox.SelectedIndex =

      IE7NavigationControl.CurrentIndex;

infoLabel.Text =
      IE7NavigationControl.Current.Tag.ToString();

That is pretty simple isn't it and all the wizard control is been encapsulated to those three pictures. I would use this control in my next article about command and adapter pattern so you would have more time to observe this control then

Attachments

Source code of the IE7Navigator control used in this example