-section per menu item. Each of these

-elements has a class assigned to it. By this class name the design of the element is controlled in the CSS stylesheet.This is a very clever way to create a menu since each element consists of a minimum amount of HTML-code (good for TypoScript implementation), they are easily repeatable (necessary when the menu will be dynamic). **Challenge:** We must substitute the dummy-menu here with a dynamically generated one! This is dummy content that Raphael put into the template file just to get the visual impression right. Notice how it is formatted with

and
tags (using the class "bodytext") - this is clever since the dynamic content inserted by TYPO3 later on will use those tags / classes for formatting as well! (Raphael must have cheated with some TYPO3 experience on beforehand, eh?) Challenge: We must substitute the dummy-content with dynamically generated page content. Now the tutorial files are safely in place. Next step - installing the needed extensions. .. _Install-TemplaVoila-and-CSS-Styled-Content: Install “TemplaVoila” and “CSS Styled Content” ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The next step is to install TemplaVoila which will be our template- and content rendering engine. Further we need “CSS Styled Content” which will render the regular content elements as for other normal TYPO3 websites. If you didn't do it yet, import “TemplaVoila” from TER (TYPO3 Extension Repository) through the EM. When that is done, install the two extensions: |img-7| For TemplaVoila you should make sure to enable the Page Template Selector in the update screen: |img-8| Press “Update” and all database tables and fields will automatically be created for you! After you installed TemplaVoila, please reload the whole backend since the extension contains backend modules. .. _css-styled-content: “css\_styled\_content” """""""""""""""""""""" Now, install CSS Styled Content extension: |img-9| .. _The-Storage-Folder: The Storage Folder ^^^^^^^^^^^^^^^^^^ Now you are about to create an important element for the website - the “Storage Folder”. Normally you store elements related to a page on the page itself, eg. Content Elements or maybe even frontend users. However you will often find that for a website you need some general purpose page to place records which are related to the whole site and not just single pages - this is what we call a Storage Folder; A “SysFolder” page defined to be a general purpose storage page for elements related to a website in a branch of the page tree. Steps involved in creating a SysFolder are these: - Create a page in the page tree of the type “SysFolder”. You might want to place this page as the last page on the first level of the website branch. - Create a relation for “General Storage Folder” from the page header of the website root page to the new sysFolder page. |img-10| Above screenshot shows the created storage folder. But to make it the storage folder of the website starting from “Root page” we need to edit the page header of “Root page”: |img-11| That's it. .. _Create-the-TypoScript-Template-Record: Create the TypoScript Template Record ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Next, we create a root template record on the “Root page” page. For details you can refer to “MTB/1” where this process is outlined in details. The point is that you end up with a “Template” record with this contents: |img-12| |img-13| The information you see in the “Setup” field is called “Template TypoScript” - it is configuration code that TYPO3s frontend engine (extension “cms”) interprets in order to render the website pages. In the above case the text “HELLO WORLD” is outputted. If you know about TypoScript in a historical perspective you know that a) the Setup field might end up being hundreds and hundreds of lines long, b) after a while slightly confusing to manage and c) requiring a lot of TypoScript knowledge, basically all of `TSref <../../doc_core_tsref/doc/manual.sxw>`_ . If you know how we did in the MTB/1 tutorial you saw that the amount of TypoScript was not that frightening. In fact we just configured the extension “automaketemplate” to read an external HTML file and insert dynamic content at certain locations. That configuration was only like hundred lines or so (except menus). Far less than the “nightmares” of past times. If you read on in this document you will see how we do not even add a single line - we just change the last two: |img-14| So, all you initially need in order to use TemplaVoila in terms of TypoScript is a code listing like this: :: # Default PAGE object: page = PAGE page.typeNum = 0 page.10 = USER page.10.userFunc = tx_templavoila_pi1->main_page (Admittedly, a little more will be added later since we also have to define the menu....) Make sure to save this code listing. If you view the website now you should see a blank page with nothing in the body. Now, the next step is to create a TemplaVoila Template Object for the page template. .. _Creating-the-Template-Object-for-the-page-template: Creating the Template Object for the page template ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Go to the File > Filelist module, click the “template/main/” folder and then click the icon of the file “template\_page.html”: |img-15| This will bring you to the mapping interface of TemplaVoila: |img-16| In this interface we will create a Data Structure (DS) for the page template and at the same time map that DS to the HTML elements of this template file and finally store the mapping information in a Template Object (TO) created along with the DS. .. _Data-Structures-DS-and-Template-Objects-TO: Data Structures (DS) and Template Objects (TO) """""""""""""""""""""""""""""""""""""""""""""" You can read more technical information about Data Structures in the document “TYPO3 Core API” and the documentation of “TemplaVoila”. However, to give a quick distinction between DS and TO: - A Data Structure (DS) says which “fields” we can map to a HTML template. - A Template Object (TO) says which HTML elements the fields from the DS maps to. By this definition we can see that a TO always refers to a DS which tells the TO which fields can be mapped and by which rules and hierarchies. It also means that you can have many TOs referring to the same DS - thus more templates for the same data! .. _Creating-the-Data-Structure-of-Main-Dish-son: Creating the Data Structure of “Main Dish & son” """""""""""""""""""""""""""""""""""""""""""""""" In our tutorial the Data Structure needed for the page template is: Definition of the overall element containing the page - that is obviously the tag! - Menu: Define container element for the menu to the left - Content: Define container element for the content cell. Such a DS could be manually created by hand if you know the syntax of the DS XML, . However, the whole point of what we are doing just now is that TemplaVoila offers a visual point'n'click tool for automatic kickstarting such a Data Structure! It works like this: Add an element representing the menu: |img-17| (The name “field\_menu” is prefixed “field\_” which is a best-practice convention. You can use other field names if you like.) This gives you a form by which you can enter details for the new element: |img-18| You can enter information like we have done above. Here are a few hints about options not so obvious. For details you should refer to the TemplaVoila documentation. - Mapping Type: Here you select the behavior of the element in terms of mapping to HTML. Select “Element” - Editing Type: This selects a preset for the field content. In our case we want to insert content from a TypoScript Object Path - which we will define to be the HMENU cObject later! - Mapping rules: Since the menu should probably be contained inside an HTML element like
or etc. we define the rule “\:inner” which means that we can map the menu to be inside* whatever element in the template. After pressing “Add” you will see this: |img-19| You can repeat this process for the page content: |img-20| In this case we selected the Editing Type preset to be “Content Elements” - this will give us the ability to insert content elements in this field later. After pressing “Add” we now have a data structure reflecting what we wrote earlier - basically a menu and content cell: |img-21| .. _Mapping-the-DS-to-the-HTML-content: Mapping the DS to the HTML content """""""""""""""""""""""""""""""""" After having created the DS (which you could also have done on the fly when mapping if you liked that better) you have to map the elements in it to HTML elements in the template file. Click “Map” for the “ROOT” element, then click the “” tag icon in the “Mapping Window”: |img-22| This brings you a little form for the “ROOT” element where you can select mapping type: |img-23| For all “block-elements” (my name for HTML elements which has a beginning and an end, eg. ... or
...
, contrary to eg. ) you can select INNER or OUTER mapping. This means whether we capture the content of the tag inside the tag (excluding the tag) or outside the tag (including the tag). Since we only want the contents of the tag excluding the tag we select “INNER”. |img-24| The result is this: |img-25| The DS listing now shows that the “ROOT” element has successfully been mapped to the tag of the template! And since the “ROOT” element in the DS is parent element to the menu and content area elements we can now perform mapping of those DS elements as well. Click the “Map” button for the “field\_menu” element in the DS. Then click the “” tag icon representing the tag inside of which our dummy menu of the template was found: |img-26| Notice that we do not have other options that “INNER” this time: |img-27| This is as expected because we made a rule that any element selected can only be mapped by the “INNER” mode - thus keeping the tag in the template and substituting only the contents with dynamic content. So again, create an “INNER” mapping for the element: |img-28| Now, do the final mapping of the “Page content” DS element: |img-29| Like with the other elements, just map it to “INNER” again. You should see this result: |img-30| You can always verify a mapping by clicking the “HTML-path” link. This will shown only the mapped portion of the template marked-up: |img-31| .. _Previewing-the-mapping: Previewing the mapping """""""""""""""""""""" Since we entered a little sample data for our entries in the Data Structure we will be able to perform a simple preview of how a substitution in the template will look. Simply press the “Preview” button: |img-32| This will render this “Mapping Window” for you: |img-33| .. _Saving-the-DS-and-TO: Saving the DS and TO """""""""""""""""""" Until now all you have done has been stored in the session data for your backend user profile. To complete the job you have just done you must click the “Save” button... |img-34| ... and then - Enter a title of the DS / TO (can be changed later) - Enter a type, in this case “Page template” (tells TYPO3 that this Data Structure is for a whole page). You should set this correctly now! - Select a Storage Folder to store it in - and you should only have one at this point in time.If you do not see a storage folder in the selector box you have a problem - you didn't configure the Storage Folder correctly according to the steps outlined earlier in this document!) |img-35| If everything went well you should see this acknowledgment: |img-36| And in the “Storage Folder” page you will find the DS and TO records just created! |img-37| .. _Applying-the-TO-as-page-template: Applying the TO as page template ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Let's summarize what we have done till now: - Template Files: Placed pre-made HTML files from a designer in “fileadmin/template/main/” - Extensions: Installed TemplaVoila and CSS Styled Content - Storage Folder: Configured a storage folder for the website. - TypoScript Template record: We created a simple TypoScript Template record in the root of the website - only containing a USER cObject triggering TemplaVoila. - Create DS/TO: Creating a Data Structure (DS) and Template Object (TO) for the main page template All we need now is to select the newly created TO as the page template to be used. This is very easy. Just edit the page header of “Root page”: |img-38| This selects the DS for the page template - this is needed as a first step in order to tell TYPO3 which “features” the page will have (in this case two things; a menu and page content). Now, save the page header. After that you will have to select the “Template Design” (the TO record): |img-39| Then save - maybe even click “Save Document and View”: |img-40| ... and as a reward you will see this: |img-41| Yes, the template is used! But, reward? At least we are not at the end yet! What we miss is: - Setting up css\_styled\_content for content rendering - Adding page content - Creating the dynamic menu - Setting the stylesheet and body tag .. _Setting-up-css-styled-content-for-content-rendering: Setting up css\_styled\_content for content rendering ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Before content elements can be rendered we need a static TypoScript template to do that for us. This is known from all other implementations of TYPO3 so there is nothing new here; just edit the Template Record and add the “CSS Styled Content” static template file: |img-42| Save and close. .. _Adding-page-content: Adding page content ^^^^^^^^^^^^^^^^^^^ One of the new things that comes with TemplaVoila is a totally new concept for integrating page content. Normally we use the concept of organizing content elements in columns on a page. Thus the content elements gets shown because they belong to a page and to a column. In TemplaVoila content elements should still belong to the page they are shown on but the relation goes from the page (or higher level content element) to the content element inserted! This is the inverse direction of what you are used to, since normally content elements refer to their parent page and column! We'll add a little more details to this later. For now, just lean back and enjoy the new Page module: WARNING: At this point the page module is under construction. Therefore screenshots are far from finished! To create content a page page, just click the new icon: |img-43| This inserts a new content element. Edit that: |img-44| Here we added some of the dummy text from the template file: |img-45| Close, and you will see this: |img-46| This is the way to add content to the page with TemplaVoila. You can insert more elements, you can copy/cut/paste them around, even make references to elements on other pages and you can also nest elements - this is shown later. You can click the “View” icon to see the site now: |img-47| Still not that pretty - we clearly miss the stylesheet. Well... .. _Behind-the-scenes-of-TemplaVoila-s-new-Content-Element-management: Behind-the-scenes of TemplaVoila's new Content Element management """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" This is for the interested developers; how does TemplaVoila manage the relations from pages to content elements? Well, first of on a user level all that should be taken care solely by the new “Web > Page” module you have just used. But behind the scenes you can look into the page header and see that a new field has been added which allows you to add content elements to the page: |img-48| You can in fact modify the structure shown visually by the Web > Page module by adding relations to content elements manually with this form! But... that is not what you want to try and explain the average user! FlexForm and the Data Structure behind Another note on this is that the contents of this form is not going into a dedicated table cell - it is going into an XML structure in a database field of the page record (tx\_templavoila\_flex) which can potentially contain many more fields defined by the Page Template Data structure you have just created. This is one of the really thrilling and brilliant features of Data Structures. The concept is called “FlexForms” and this field is just one of those. Very beautiful stuff. Basically the Data Structure we created along with the Template Object defines this. If you go to the “Storage Folder” page with the List module, click the DS records icon, in the context menu select “TemplaVoila” you will have a chance to see the XML of the DS: |img-49| If you study this XML code you will find that for the field name “field\_content” there is a section defining some “TCEforms” values (lines 35-46) - in fact this is what rendered the field with relations to the Content Elements: :: 1: 2: 3: .... 20: 21: .... 35: 36: 37: group 38: db 39: tt_content 40: 5 41: 200 42: 0 43: 1 44: 45: Page content 46: 47: 48: 49: 50: Peaking into the value of the “tx\_templavoila\_flex” field of the page record also reveals an XML structure - . It looks like this: :: 1: 2: 3: 4: sDEF 5: 6: 7: 8: 9: 10: 1 11: 12: 13: 14: 15: Notice the value between the tags - that is the uid of the content element “Buy PaperShredder(tm) Gizmo with 30-days money-... ” Rendering the content elements One thing is to create the relations to the content elements. Another thing is how they are rendered. Apparently the good old static TypoScript templates like “CSS Styled Content” are still used - but how? The answer is also in the Data Structure created. Look at the lines 29-33 (gray background): :: .... 21: 22: 23: Page content 24: Map this to the container element for page content 25: 26: [Here goes my page content. Here goes my page content. Here goes my page content. Here goes my page content. Here goes my page content. Here goes my page content. Here goes my page content. ] 27: 28: ce 29: 30: 10= RECORDS 31: 10.source.current=1 32: 10.tables = tt_content 33: 34: .... Those lines contains TypoScript code which looks quite as we have seen it before: It's a RECORD cObject, rendering elements from the “tt\_content” table, taking the uids from the “current value” - which seems to be loaded with the content of tag in the scope where this TypoScript is used for processing (which is inside the “tx\_templavoila\_pi1” plugin as you might be able to figure out from previous code listing). Want to know more: FlexForms, Data Structures and all that is documented fully in the `“TYPO3 Core API” <../../doc_core_api/doc/manual.sxw#%3CT3DataStructure%3E%7Coutline>`_ document. .. _Creating-the-dynamic-menu: Creating the dynamic menu ^^^^^^^^^^^^^^^^^^^^^^^^^ The menu we want in the left table cell will be done with exactly the same TypoScript code as used for the MTB/1 tutorial. Nothing is different here; TypoScript turns out to be quite effective for configuring menus and image generation. So, basically lets copy and paste the code listing from MTB/1 with one exception ; “temp.menu\_1” is changed to “lib.menu\_1”: :: # Menu 1 cObject lib.menu_1 = HMENU # First level menu-object, textual lib.menu_1.1 = TMENU lib.menu_1.1 { # Normal state properties NO.allWrap =
|
NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap =
|
} # Second level menu-object, textual lib.menu_1.2 = TMENU lib.menu_1.2 { # Normal state properties NO.allWrap =
|
NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap =
|
} (Taken from the chapter “Adding XHTML compliancy”) Copy this listing into the Setup field of the Template Record: |img-50| In MTB/1 we have to refer to or copy this definition of a HMENU object. In this case we need to do the same in principle - but the reference must be set in the Data Structure we just created! Here there will already be a dummy-pointer to “lib.myObject” - but we will change that! So what you do is click the DS records icon, select “Edit”: |img-51| In the field “Data Structure XML” you will find the DS XML and for the element “” there is “application” configuration for TemplaVoila which contains a default reference to “lib.myObject” - this is the object path from the TypoScript Template record which will render the contents for this field. So just change this to “lib.menu\_1” and you are set! |img-52| You may look at the page again: |img-53| It hasn't become nicer but at least the menu is there! .. _Setting-the-stylesheet-and-body-tag: Setting the stylesheet and tag ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The final step is to edit the Template Object which we were not able to do when we created the DS and TO; configuring inclusions from the header and tag! This is a walk in the park - just like most other things with TemplaVoila. Simply click the icon of the TO record, select “TemplaVoila”: |img-54| Then select the option “Select HTML header part”: |img-55| Then you select to include the two stylesheet definitions and the body tag. We don't want the charset definitions since TYPO3 will automatically render that for us (which is the case with most tags). As a rule of thumb you should include all