The following assumes that the reader is already experienced with Typo3’s modern templating.
This goal of this article will be to explain how we can adapt Core J2EE’s Composite View pattern within Typo3’s modern templating. The main difference is that instead of using Java and JSP, we will use Typo3’s backend with typoscript.
Let us start by describing the Composite View pattern, a design strategy for the presentation layer that allows developers to have multiple atomic subviews forming the single display page (or composite view).
One of the advantages of applying this pattern is that it allows designers and programmers the ability to treat subviews modularly. Treating subviews as such is quite practical since we can better focus our efforts without having to worry about their dependencies. For instance, by separating the visual portions of the view contents, different people can focus on developing each visual subpart without needing to take into account the other subparts. Furthermore, having modular visual components greatly enhances reusability, which comes in handy especially to avoid redundant inclusions in a website template. To best demonstrate this, I will be using http://www.valtech.ca/ as an example.
By using modern templating, the website has been divided into different subviews as indicated in the illustrations. Each subview in this website is (or is composed of) Typo3 content elements, typoscript components such as GMENUS, and template files.
For this pattern, we have to class the views into two types – static and dynamic. The following links will be used as examples on how both types of views are used :
Welcoming page: http://www.valtech.ca/
Product page: http://www.valtech.ca/general/internet/
Package page: http://www.valtech.ca/forfaits/emeraude/
As you might have noticed in all three pages, they share some common visual components. These are the static subviews.
Indicated in the blue sections, the static subviews include:
Static views are usually subviews that are typically identical in all pages and are also not updated very often.
As for the dynamic views, they are not as reused in all pages and they also usually contain different website content for each page using it. These views are basically the ones that make the welcoming, product, and package page differ from one another.
Indicated in the red sections, the dynamic views include:
-
the top menu for the welcoming page
-
the top menu for the product/package page
-
the search bar for the welcoming page
-
the search bar for the product/package page
-
the main content of the welcoming page (between the top menu and the product prices)
-
the main content of the product page, which has no menu
-
the main content of the package page, which has a menu
Using the composite view pattern, I can easily mix and match static/dynamic views to create different-looking pages as shown in the three links mentioned.
In order to accomplish this, the first step should be to start identifying the static subviews. Once the static views are all identified, we then insert them into a main template setup so that all the pages using it can include them. I usually store all the template setups inside a backend sysfolder. Let us call the main template setup Main Template (M.T).
Now we can begin by assigning the static views to it using the company logo as a bare bone example. For Valtech.ca, the logo is actually an image content element stored in a backend page. The following typoscript code shows us how to retrieve the logo (subview in the form of a content element) from any particular page:
# Setting the global contents:
# Obtain the logo from page containing global content elements
# @param pidInList : the id of the page containing the content
styles.content.getLogoContent = CONTENT
styles.content.getLogoContent {
table = tt_content
select.pidInList = 1
select.orderBy = sorting
select.where = colPos=0
select.languageField = sys_language_uid
renderObj.stdWrap.wrap =
|
}
#~
…
…
The above code tells Typo3 to get the logo from a page with id = 1, which stores all the global elements of the website. Now we also need to assign the content element to the main template, which is done by the following typoscript snippet within the same template setup:
# Assign contents to main template:
# Set the main subparts in the template
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/main_template.html
workOnSubpart = GLOBAL_CONTAINER
subparts.LOGO < styles.content.getLogoContent
marks.FIRST_PRODUCT< styles.content.getFirstProductContent
marks.SECOND_PRODUCT< styles.content.getSecondProductContent
subparts.NEWS_SECTION < styles.content.getNewsContent
subparts.FOOTER < styles.content.getFooterContent
}
#~
The bolded line assigns the Logo content element to the main template. To better see the big picture, I have also included some of the other static content elements below.
For reference, here is the mock html code snippet of the main template to work with the above:
<html>
<body>
…
…
Some content that will be overwritten by a subpart…
…
…
This subpart is for later on when we want to inject a dynamic view
…
…
</body>
</html>
Having assigned the elements, the main template now contains all the common static subviews, and consequently, we can apply Main Template (M.T.) to all the pages by using the “Include basis template” option using the Typo3’s Template module.
The second step would be to create sub-template setups with which we can use to insert our dynamic subviews into the main template also by assigning them using the “Include basis template” option. For Valtech.ca, I used a sub-template setup for each of the three pages to manage their dynamic views. For clarity, let us name them M.T. > welcome, M.T. > product, and M.T. > package. We will just be taking a look at M.T. > welcome for our example.
For this case, I created a more complex subview in the form of an html template file named welcome.html, which contains subparts and marks to be replaced by other content elements.
Let us include only the description on the left as shown in the screenshot. The typoscript to grab this content element for this description is as follows:
# Setting the dynamic contents:
# Obtain the description on the left
styles.content.getDescription = CONTENT
styles.content.getDescription {
table = tt_content
select.orderBy = sorting
select.where = colPos=3
select.languageField = sys_language_uid
renderObj.stdWrap.wrap =
|
}
#~
It is practically the same as the code for retrieving the company logo except that it takes the content associated to the current page the web user goes on instead. This is as we would expect since dynamic views usually do not share the same content.
The following typoscript then takes welcome.html and assigns the content element to it:
# Assign contents to a sub-template (or subview):
# Set the subparts in the center composite view
subTemplate.12 = TEMPLATE
subTemplate.12 {
template = FILE
template.file = fileadmin/templates/subviews/welcome.html
workOnSubpart = SUBVIEW_CONTAINER
subparts.INFO_SECTION < styles.content.getDescription
subparts.INFO_SECTION_HEADER < styles.content.getDescriptionTitle
marks.TEXT_UNDER_SEARCH < styles.content.getDescriptionUnderSearch
subparts.BANNER_TEXT < styles.content.getMiddleBannerTextLine
marks.SEARCH_BOX < plugin.tx_macinasearchbox_pi1
}
#~
Notice that I have also put in other elements inside welcome.html, which more completely forms the dynamic subview we have in the welcoming page.
Now in order to connect this dynamic subview (in the form of a sub-template file) to the main template, we simply do:
# Connect to the main basis template:
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/main_template.html
workOnSubpart = GLOBAL_CONTAINER
subparts.DYNAMIC_SUBVIEW < subTemplate.12
}
Recall in main_template.html that we have a subpart called DYNAMIC_SUBVIEW. This would be where our constructed dynamic subview would be inserted.
Finally, we have managed to construct a main template consisting of static subviews common to all pages. Within that main template, we also have the ability to insert different dynamic subviews in order to obtain three different pages. Taking advantage of the Typo3 hierachy and template inclusion options, we can assign the static subviews to many pages by including the main template at the parent node. The children pages can thus be customized by different dynamic subviews by assigning to them the sub-template setups. As a note, there are other preferable methods in applying these patterns such as making use of the Template Page Selector extension. That would be a topic for another article though.
If you want to specify a CSS class for each TYPO3 content (example: TEXT with IMAGE), you can add a new filed "Class" that will allow you to set the CSS class. Instructions:
There has always been a competition between Apple and Google, especially in terms of looks and design. For instance, Google’s new web browser, 
