Creating a View

Introduction

The following example shows how to create the dashboard view:

CopyC#

using EPiServer.Framework.Localization;
using EPiServer.Shell.ViewComposition;
using EPiServer.Shell.ViewComposition.Containers;
using EPiServer.Shell.Web;

namespace EPiServer.Shell.UI.Models
{
    [CompositeView]
    public class DashboardViewModel : ICompositeView
    {
        private IContainer _rootContainer;
        private readonly LocalizationService _localizationService;

        /// <summary>
        /// Initializes a new instance of the <see cref="DashboardViewModel"/> class.
        /// </summary>
        /// <param name="localizationService">The localization service used for getting localized resources.</param>
        public DashboardViewModel(LocalizationService localizationService)
        {
            _localizationService = localizationService;
        }

        /// <summary>
        /// Gets the root <see cref="IContainer"/> that contains the different panels for the view.
        /// </summary>
        /// <value>The container.</value>
        public IContainer RootContainer
        {
            get
            {
                if (_rootContainer == null)
                {
                    _rootContainer = new BorderContainer();

                    TabContainer tabContainer = new TabContainer
                        {
                            ContainersPlugInArea = PlugInArea.DashboardRoot,
                            PlugInArea = PlugInArea.DashboardRoot,
                            ContainerType = ContainerType.User
                        };

                    var defaultTab = new ComponentContainer
                        {
                            PlugInArea = PlugInArea.DashboardDefaultTab,
                            ComponentCategory = "dashboard"
                        };
                    defaultTab.Settings["numberOfColumns"] = 2;
                    defaultTab.Settings["title"] = LocalizationService.Current.GetString("/episerver/shell/ui/resources/tabcontainer/newtabname");
                    defaultTab.Settings["closable"] = true;
                    tabContainer.Components.Add(defaultTab);

                    ((BorderContainer)_rootContainer).Add(tabContainer, new BorderSettingsDictionary(BorderContainerRegion.Center));

                    _rootContainer.Settings.Add("id", Name + "_rootContainer");
                    _rootContainer.Settings.Add("persist", "true");//Persist window size on client
                }
                return _rootContainer;
            }
        }

        /// <summary>
        /// Gets the name of the view. Used or finding views.
        /// </summary>
        /// <value>The name.</value>
        public string Name
        {
            get { return "/episerver/dashboard"; }
        }


        /// <summary>
        /// Creates a new instance of the view.
        /// </summary>
        /// <returns>A new instance of the view.</returns>
        public ICompositeView CreateView()
        {
            return new DashboardViewModel(_localizationService);
        }


        /// <summary>
        /// Gets a localized title for this view
        /// </summary>
        public string Title
        {
            get { return _localizationService.GetString("/episerver/shell/ui/resources/dashboardview/title"); }
        }
    }
}