Mobile MVC and multipanel UI

  • Article

Recently I have received a few questions on a possibility of using the Mobile MVC framework with a "single form/multiple panels" technique when creating a mobile UI's. This technique of having a single form with multiple panels instead of multiple forms is an old practice that existed at the time of eVB. At the time each form load was taking a measurable amount of time and developers were trying to make navigation from view to view to be a more user friendly experience. 

The Mobile MVC was created to support "single form/multiple panels" technique as well. It contains the ViewControl class that should be used to become a view and host other controls. I've updated the Mobile MVC solution to include the MultiPanelTest project that demonstrates the usage of the ViewControl. The project contains a single form - MainForm that hosts the views. The add a view, I added UserControl to the project, placed the controls and changed the code to inherit from the ViewControl instead of UserControl. The Visual Studio will conveniently create for us the (View).Designer.cs class as well.

public partial class LoginView : ViewControl

{

        public LoginView()

        {

            InitializeComponent();

        }

}

In most cases I've just copied the existing code from the MVCTestClientContainer project into the LoginView, SearchView and their corresponding LoginController and SearchController classes. I've also added the following method to the ApplicationManager class:

public static void InitializeViews(Form form)

{

    LoginController loginController = container.Resolve<LoginController>();

    loginController.Initialize();

    Control view = loginController.View as Control;

    view.Size = new Size(240, 250);

    form.Controls.Add(view);

  view.Hide();

  SearchController searchController = container.Resolve<SearchController>();

   Control searchView = searchController.View as Control;

    searchView.Size = new Size(240, 250);

    form.Controls.Add(searchView);

    searchView.Hide();

}

This method is used to add views to the host form and is called from the MainForm's constructor. Other than that the code is stayed the same. Feel free to download the latest from the codeplex.

However before you jump and start using "single form/multiple panels" technique, a few important things should be taken into consideration.  First of all, a multiple controls and all associated umnanaged recources (window handles, message pumps, graphic contexts etc...) would be created. Eeach would take device's memory and processor cycles plus the data required to populate the contols. So you should always measure how your application would be affecting the performance of the device or how it would behave in a more memory constrained scenarios.

Secondly, this techinque could affect the load time of your form when it's shown the first time. You may need to show a splash screen to a user to make him/her know that something is happening.