ELBA approach
The Element Layout Block Approach (ELBA) makes site building a lot easier by decoupling functional elements from the actual layout. Although a bit harder to understand at first, ELBA provides a much more scalable and future-proof model, since it avoids having to update many render templates when businesslogic or design changes over time.
ELBA make extensive use of the possibilities System translations provide, by ripping SXML out of the RenderTemplates and dividing it into building blocks that can be overridden by contenttype-specific rendertemplates.
Channels, Contenttypes and Rendertemplates
Within Smartsite iXperion, content is stored in items of a certain Contenttype. A Contenttype is an abstraction of the information that should be stored. Information is published on a Channel. Per Channel-Contenttype combination a Rendertemplate can be created that defines how that Contenttype should be presented to the visitors of the site. Macros and Vipers are used in the Rendertemplate to display information from the Smartsite CMS. This information is embedded in a structured language like HTML.
HTML, Lay-out, Design and Styling.
When you take an abstract look at a website, it contains different kinds of elements: navigation, title, text, images, etc. These elements re-appear on each page: every page uses the same lay-out. Lay-out is like a collection of containers where each container has its own type of content: the title, the text, the navigation, etc. Lay-out is defined using HTML. HTML div elements, or old-fashioned tables, are used to create a structure in which the content is stored. Within a Smartsite iXperion site, this is not different. Within a Rendertemplate HTML and Macros/Vipers are combined to serve a structured page. CSS is used to style the page according to the design.
One of the challenges is how to facilitate the small differences between different contenttypes. Many different approaches have been used in the past, but no approach has ever entirely clean and easy to implement.
Separating Lay-out and Information
The ELBA approach is based on the separation of lay-out and elements. When you have a look of a rendertemplate, for example item 18, you will notice that it uses only one translation: BaseLayout. This translation of translationtype System looks something like this:
| Smartsite SXML |
Copy Code
|
|---|---|
<body> <div id="container"> <div id="subtoppane"> title() navigationtop() </div> <div id="middlepane"> <div id="leftpane"> menu() </div> <div id="rightpane"> content() </div> </div> </body> |
|
As you notice, this translation contains the HTML used for the structure, the lay-out, of the site. Within this structure different (system-)translations appear. These parts are called Elements and contain the information for this site like the title, the navigation, the content, etc.. All elements are stored below the folder Elements (item 61) and grouped in several sub-folders. Each of the Elements is a translation of translationtype System. Each of the elements has its own implementation. For example, the NavigationTop element implements the Parents macro to display the hierarchic path back to the root of the site.
Not in this Contenttype
A simple example can be found within folder 110, which contains the Rendertemplate of the contenttype Portal Web Page. Once this contenttype is rendered, the information from the element NavigationTop should not be displayed. This is now very simple to do using Rendertemplate Local Translations. Within folder 110, an item of contenttype Rendertemplate is created. This Rendertemplate uses the BaseLayout translation. Next, an item of contenttype Translation is added. Its translationtype is set to Local, its name is set to NavigationTop and its content is set to.......nothing. And there you are.
Once the item of contenttype Portal Web Page is rendered, the first translation is executed: BaseLayout. Next, all the elements/translations within the BaseLayout are executed. When the NavigationTop element is executed, Smartsite notifies the Local Rendertemplate variant and uses this one instead of the System translation. Result: no hierarchic navigation at the top of the page.
ELBA Benefits
- Want to add some extra information within all contenttype except one.
Create a new element of contenttype Translation with translationtype System. Update the BaseLayout translation. Add an empty Rendertemplate Local Translation to the folder containing the Rendertemplate for the contenttype you don't want to give this new functionallity - Want to create a new lay-out
Change the BaseLayout translation and create new CSS. Re-use the elements and..... ready - Want to change the implementation of one of the building block (translations)? Go right ahead!
Etc... - Want to add another base-layout? Create new ones like: TwoColumnLayout, ThreeColumnLayout, ManualLayout, MobileDeviceLayout or AjaxBasedLayout.
With these "lay-out" translations you can still re-use your elements.
Conclusion
ELBA provides an efficient and clean alternative for site building. It is not required to build your Rendertemplates this way, it is just an example. The same arguments go for the security implementation. Two example roles, two example groups and two example users are added. Feel free to use, change or delete them.