Prism Developer's Guide - Part 8, Navigation

Table of contents

1. Introduction
2. Initializing Prism Applications
3. Managing Dependencies Between Components
4. Development of modular applications
5. Implementing the MVVM Pattern
6. Advanced MVVM Scenarios
7. User Interface Creation
   
   1. User Interface Guidelines
8. Navigation
   1. View-Based Navigation
9. The interaction between loosely coupled components

During user interaction, the application UI can undergo significant changes, depending on what actions the user should perform and what data he is working with. The process when an application coordinates user interface changes, often referred to as "navigation system ( navigation )».

Often, “navigation” means that some controls are removed, while others are added to the user interface. In others, this means updating the look of existing controls. For example, some controls can hide or collapse, while others, on the contrary, appear or unfold. Similarly, “navigation” may mean that the data displayed in some controls can be updated to reflect the current state of the application. For example, with the script " master-detail", the data displayed in the detail view is updated depending on which element is selected in the master view. All these scenarios can be regarded as" navigation ", as the user interface is updated to display the internal state of the application and which the task is being performed by the user at the current moment

Navigation in the UI can be both a result of user interaction and a reaction to changes in the internal state of the application. UI applications that do not require any complex logic, in other cases, complex business rules may be involved, for example, the application may not allow the user to exit from any form without making sure that the entered data is correct.

Implementing navigation in WPF and Silverlight can often be fairly straightforward, as both of these platforms provide built-in navigation support. However, the implementation of navigation can become quite complicated when using the MVVM template, or in composite applications that use several loosely coupled modules. Prism provides guidance on implementing navigation in such cases.

Navigation in Prism

The term “navigation” is defined as the process in which an application coordinates UI changes in response to user gestures, or changes to the internal state of an application.

Updates in the UI can be made either by deleting or adding controls to the visual tree, or by changing the state of elements already in it. Due to the flexibility of WPF and Silverlight, both of these approaches can be applied. But a large number of factors can influence which approach is more appropriate for your case.

Prism distinguishes between the two types of navigation described above. Navigation based on changing the state of existing controls is called state-based navigation.) ". Navigation based on adding or removing controls from the visual tree is called " view-based navigation ." Prism provides guidance on the implementation of these types of navigation, focusing on applications that use the MVVM pattern.

Navigation through the states ( State-Based the Navigation )

During state-based navigation, the view is updated both when the state of the model changes, and when the user interacts with the view itself. In this case, instead of replacing the view with another representation, its state simply changes. Depending on how the state of the view changes, this may be perceived by the user as navigation.

This navigation style works well in the following cases:

• The view needs to display the same data or functionality, but in a different form or format.
• A view must change its layout, or style, in response to a change in the state of the view model.
• The presentation should produce a modal or non-modal interaction with the user, without changing the context of the presentation.

This style is not suitable in cases where the UI must provide the user with data of a different type, or when the user must switch to another task. In such cases, it is best to create separate views (and presentation models) to represent the relevant data and tasks, and then navigate to them based on the views, which will be described later in this chapter. Similarly, such navigation is not suitable in cases where a large number of changes in the state of the user interface are required, since the resulting views will be too complicated and confusing. In this case, it will be more correct to implement navigation based on the views, between several views.

The following sections describe typical situations in which state-based navigation can be used. Each section refers to State-Based Navigation QuickStart , which is an instant messaging application that allows the user to correspond and manage their contacts.

Display data in various styles and formats

Often, your application may need to display the same information, but in different formats or styles. In this case, you can use state-based navigation to switch between different presentation styles, possibly using transition animations. For example, State-Based Navigation QuickStart allows the user to select a visual representation of his contacts - in plain text, or in the form of avatars. He can choose the type of view by clicking on the List or Avatars buttons . The view makes an animated transition between the two views, as shown in the illustration below.



Since the view operates on the same data, but with different display styles, the view model does not need to perform any actions while switching between these styles. This approach provides great flexibility to the user interface designer, since he does not need to work with the application code.

Behavior ( their behaviors ) the Microsoft implementation of the Expression the Blend facilitate this type of navigation in the view. Appendix State-Based Navigation QuickStart uses Expression Blend's DataStateBehavior to switch between visual states, defined in the visual state manager ( of visual state manager Have) using the radio buttons. One button includes the contacts in the form of a list, the other - in the form of avatars.

When the user clicks the radio button Contacts , or Avatar , the visual state switches between ShowAsList and ShowAsIcons state. Flip transition animations are also defined in the visual state manager.

Another example of using this style of navigation is presented in State-Based Navigation QuickStart , when the user switches to a view with additional information about the selected contact, as shown in the following illustration.



This is also easily implemented using Expression Blend's DataStateBehavior, however, in this case, the behavior is tied to the property of ShowDetails the view model, due to which switching between visual states ShowDetails andShowContacts using flip transition animations.

Application Status Display

Similarly, a presentation in an application can sometimes change its layout, or style, depending on a change in the internal state of the application, which, in turn, can be represented through the properties of the presentation model. An example of such a scenario is given in State-Based Navigation QuickStart , where the client connection status is provided through a property ConnectionStatusin the view model Chat . When the connection status changes, the view is updated (by the property change event), as shown in the illustration below.



To implement such a state switch, the behavior declared in the view is DataStateBehaviortied to the property of ConnectionStatusthe view model.

Note that the connection status can be changed both by the user through the visual interface and by the application, depending on the internal logic, or the occurrence of any event. For example, an application can go into the “unavailable” state if the user does not interact with the view for a certain time, or if the user's calendar reports that he is in a meeting. State-Based Navigation QuickStart simulates this behavior by randomly switching a timer state. When the state changes, the property of the view model is updated, after which the view is notified of this through the property change event. The user interface is updated to reflect changes in connection status.

All previous examples included the declaration of visual states in a view, and switching between them as a result of user interaction with the view, or by changing the value of the properties declared in the view model. This approach allows UI designers to implement visual behavior in a navigation style without the need for changing views or changing any source code for the application. This approach is applicable when a view needs to display the same data in different styles, or with different markups. It is not suitable in situations where you want to display data of different types, or other application functionality, as well as when you need to navigate to other parts of the application.

User interaction

Quite often, an application needs to interact with a user in a limited way. In such situations, it may be easier to use state-based navigation in the current context, rather than moving to a new view. For example, in State-Based Navigation QuickStart, a user can send a message to a contact by clicking on the Send Message button . After that, the view displays a pop-up message that allows the user to enter the desired message, as shown below. Since user interaction is limited and logically related to the context of the parent view, it is much easier to implement it using state-based navigation.



To achieve this behavior, State-Based Navigation QuickStartimplements a command SendMessagethat is attached to the Send Message button . When this command is invoked, the view model interacts with the view to display a pop-up window. This is achieved using the Interaction Request pattern described in Chapter 5, “ Implementing the MVVM Pattern ”.

The following code shows how a view in State-Based Navigation QuickStart uses the interaction request object SendMessageRequestprovided by the view model. When an interaction request event occurs, the view is SendMessageChildWindowdisplayed in a pop-up window.

To be continued.