.NET and me Coding dreams since 1998!

18Oct/061

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


IE7 Navigator control schema


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


 Disabled look of the control


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)


Back enabled picture Back hover picture Back click picture


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


Forward enabled picture Forward hover picture Forward click picture  


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


Drop down hover Drop Down menu click picture


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


Navigation item 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


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


Intial screen


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)


Activ only menu


 


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)


Both buttons are active


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


drop down menu


    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 


 


Comments (1) Trackbacks (0)
  1. Great little article. Just one problem, it does not draw correctly when the DPI is greater than 96 i.e. Mine is 144


Leave a comment

No trackbacks yet.