Table of contents
Introduction
This document describes how to create views. A view is
composed of a view definition that defines the basic structure and components that
plug-in to areas. The view and component definitions are pretty light weight on
the server. They only define basic behavior and a client side widget responsible
for creating the user interface.
Components in a view
The parts used when assembling a view:
- View definition is responsible for settings up the main structure of a view.
- Component is a widget like a page tree or a gadget.
- Container is a component that may contain child components, for instance
a panel or a tab.
- Component definition is responsible for creating a component but also to
give information about a component, for instance when a user wants to add a component
to a page.
You can find example implementations of the following:
Loading a view
When a view is loaded the following flow is triggered:
- The HTML and some basic scripts are loaded for the page. This includes the global
menu, the module definitions and the Dojo/Dijit-libraries.
- The modules are started. The shell module is responsible for defining some basic
components like the epi.routes and epi.dependency.
- The definition of the current view is fetched through an aditional request returning
the structural composition of the view.
- The widgets making up the user interface are then created recursively based on the
view definition.
Altering a view
There are several ways that you can alter the content of a view. The first, and
most obvious, is of course to plug in a component into a container. The component
definition describes an array of strings with the plug-in paths, or areas, that
the component can plug in to automatically. If any of these paths matches the PlugInPath
property of a panel, then the component will be created and added to the container.
Once all the components have been added to the containers a chain of view transformers
are applied to the view. The purpose of a view transformer is to alter a view before
it is rendered by, for example, adding or removing components. EPiServer provides
a few default view transformers, but it is also possible to add your own.
The default view transformers are:
- Personalization view transformer replaces components for personalized areas with
the users personalized components.
- Configuration view transformer makes it possible to add or remove components for
a view through configuration.
- Deterministic GUID transformer makes sure that a component always gets the same
unique identifier each time the view is created.
An example
System overview of views and components
This example shows how the view is assembled on the server. In this example we
will show a view that has four pluggable areas.
Components are plugged into areas
Components that want to plug in to areas automatically are
added to one or several of their respective areas.
Changing a view through configuration
Configuration adds and removes components for the different panels.
This configuration is done per view but it is also possible to configure
that a specific component should replace another component globally through
the IOC container.
Changing a panel through personalization
If the view contains personalizable panels and the user has personalized
these the contents for the panel will be replaced with the personalized content.
Do you find this information helpful? Please log in to provide feedback.