神马文学网1.2. Part 2: Creating a Template Selector
来源：百度文库 编辑：神马文学网 时间：2024/04/26 01:37:27
1.2. Part 2: Creating a Template Selector
Introduction
Mostwebsites will do fine having only one main template and nothing more.Normally alternative designs are only about substitution of a singleimage or a stylesheet and most likely such changes are supposed to workwithin a certain level of the page tree. For instance a customerservice section might have its own header image to set the environmentof that section. Or another common feature is to have a totallydifferent template for the frontpage, possibly some kind of entrancechoice. These features can often be done without invoking a whole newtemplate file (except from the unique front page of course) but simplyby setting some conditional properties inside the template record.
The challenge
Howeverwe will now take the basic example from the previous section in thistutorial and expand it heavily so that instead of one template file wecan select from any number of template files per page and per section.Further we want the content area to be more flexible having differentsub-templates for columns, news sections etc. And all this should bemade so flexible that new templates can be added by Mr. Raphael (thedesigner) simply by creating the file in the right location! At thesame time the non-technical authors/editors should be able to selectfrom these templates on a per-page basis in a visually intuitive way.
The technical outlines
The illustration below outlines what we need in order to achieve our goal:
Asyou can see the main structure (light blue section) is the same as inthe previous section. However the template file delivered to the"plugin.tx_automaketemplate_pi1" USER cObject must be selected based onwhich template file is selected for the current page/template.
Furtherthe insertion of page content elements must be done based on thecurrently selected content area template which will be combined withcontent from one or more columns by a TEMPLATE cObject (the lightyellow section).
In the backend we need to add selector boxes forthe templates in the page records. The content of these selectors mustbe dynamically loaded by some logic that looks up template files from adesignated location in the file system. Thus Mr. Raphael can add newtemplates by the act of just creating a new template file there!
The selectors should be equipped with icons representing the template options visually, something like this:
Skill level
Intermediateto advanced web developer. Requires skills with PHP. Developerexperience with TYPO3 and extension development is highly recommended.
Tocomplete this section of the tutorial you should be a developer mindedtype of person. It requires you to know PHP and furthermore I‘ll beless explicit than in the previous section. So you will have to enableyour brain during this section and figure out what‘s between the linesonce in a while.
Preparations
Tocomplete this section of the tutorial you should perform these steps nomatter if you went through the previous section or not:
Copy files: Remove old content in the fileadmin/template/ folder, then copy the content from the folder "part2/" of this tutorial extension to fileadmin/template/. You should now have a directory structure with content equal to this:
Create page tree: Unless you did the previous section of the tutorial you need to create a page structure in the database. The easiest way to do this is to import the trd-file "part1_result_pagetree.t3d" by following these steps:
Copy the file "part1/part1_result_pagetree.t3d" from the tutorial extension to "fileadmin/"
In the backend, create a new page on root level, call it "Import folder " and select the type "sysFolder".
Click the page/sysFolder icon of the new page, select "More options...", select "Import from .t3d".
Select the t3d file in the selectorbox, press preview. You should now see something like this:
Press "Import": Now, the page tree starting with "Root page" should be created inside the "Import folder".
Cut the "Root page" and paste it into the root of the tree so you get "Root page" as the first page in the tree from the top.
The "Import folder" still contains three template records which are related to the main template record on the "Root page" - let them stay in the "Import folder" and rename the folder to "Template Storage".
Install Kickstart Wizard: Make sure the Kickstart Wizard extension ("extrep_wizard") is installed:
Investigating the source material
Beforewe move on with the creation of the extension it‘s very important toanalyse the material we have at hand here. What we will do now is akind of reverse-enginering where we take a set of templates and figureout what subparts we will need. Normally you would work the other wayaround: You would define what you need, then let the designer loose.For instance you might say "I want a template with two columns, one forNORMAL column content and one for RIGHT column content." - and thedesigner would make that by creating a template which has two tablecells with id attributes that will place the subparts for NORMAL andRIGHT column content at the right position.
The main templates
Themain templates Mr. Raphael made are stored in the folder"fileadmin/template/main/". There are currently two main templatesthere:
template_1.html:
This is the same template as in Part 1 of this tutorial.
template_2.html:
Thisis an alternative main template. It includes a "path-menu" (Root page> First page > ....), a horizontal menu of current-page sub itemsand a content area which spreads over the full width of the page.
Foreach of these templates Raphael also made a little icon. He gave theicons the same name as the template file, but with the "gif" extensioninstead:
template_1.gif:
template_2.gif:
As you can see these icons are designed to reflect the overall structure of the main templates.
Now, lets just look inside of the template_2.html file for a second:
Notice the title of the document - we will use this for the main template selector box!
This template uses an additional stylesheet!
The template has a "path-menu" in a table cell with the id "path"
The main menu is contained in a table row with id "menu_2" (#5) and each element is wrapped in a element.
"menu_2" is the id of the table row (see #4)
The class "oddcell" is used for every second menu item - this will produce alternating background colors
The class "menu2-level1-act" is used to define the style for active elements in the menu.
The id "content" is used - as with template_1.html - for the table cell defining the content area of the main template.
Content area templates
Inthe folder "fileadmin/templates/sub/" we find four templates fordifferent layouts of the content area of either of the main templates.Thus we have two main templates times four content area templates - atotal of 8 possible combinations!
Layout
Info
ct_1.html
Single Large Content Area (default)
Icon:
ct_2.html
Wide Main Column, narrow right column.
Icon:
ct_3.html
Three even Columns (left + normal + right)
Icon:
ct_4.html
Single Large Content Column with News Section in Upper Right Corner.
Icon:
Asyou can see only the content area changes in Mr. Raphaels templates. Infact the menu and header image are just a background image insertedtemporarily so that the content area designs could be evaluated in theright context!
Lets take a look at the source code of the template file ct_1.html:
Each template file has a page title which is carefully describing the template properties - this will in fact be the title used for the selector box inside of TYPO3s backend.
This
Introduction
Mostwebsites will do fine having only one main template and nothing more.Normally alternative designs are only about substitution of a singleimage or a stylesheet and most likely such changes are supposed to workwithin a certain level of the page tree. For instance a customerservice section might have its own header image to set the environmentof that section. Or another common feature is to have a totallydifferent template for the frontpage, possibly some kind of entrancechoice. These features can often be done without invoking a whole newtemplate file (except from the unique front page of course) but simplyby setting some conditional properties inside the template record.
The challenge
Howeverwe will now take the basic example from the previous section in thistutorial and expand it heavily so that instead of one template file wecan select from any number of template files per page and per section.Further we want the content area to be more flexible having differentsub-templates for columns, news sections etc. And all this should bemade so flexible that new templates can be added by Mr. Raphael (thedesigner) simply by creating the file in the right location! At thesame time the non-technical authors/editors should be able to selectfrom these templates on a per-page basis in a visually intuitive way.
The technical outlines
The illustration below outlines what we need in order to achieve our goal:
Asyou can see the main structure (light blue section) is the same as inthe previous section. However the template file delivered to the"plugin.tx_automaketemplate_pi1" USER cObject must be selected based onwhich template file is selected for the current page/template.
Furtherthe insertion of page content elements must be done based on thecurrently selected content area template which will be combined withcontent from one or more columns by a TEMPLATE cObject (the lightyellow section).
In the backend we need to add selector boxes forthe templates in the page records. The content of these selectors mustbe dynamically loaded by some logic that looks up template files from adesignated location in the file system. Thus Mr. Raphael can add newtemplates by the act of just creating a new template file there!
The selectors should be equipped with icons representing the template options visually, something like this:
Skill level
Intermediateto advanced web developer. Requires skills with PHP. Developerexperience with TYPO3 and extension development is highly recommended.
Tocomplete this section of the tutorial you should be a developer mindedtype of person. It requires you to know PHP and furthermore I‘ll beless explicit than in the previous section. So you will have to enableyour brain during this section and figure out what‘s between the linesonce in a while.
Preparations
Tocomplete this section of the tutorial you should perform these steps nomatter if you went through the previous section or not:
Copy files: Remove old content in the fileadmin/template/ folder, then copy the content from the folder "part2/" of this tutorial extension to fileadmin/template/. You should now have a directory structure with content equal to this:
Create page tree: Unless you did the previous section of the tutorial you need to create a page structure in the database. The easiest way to do this is to import the trd-file "part1_result_pagetree.t3d" by following these steps:
Copy the file "part1/part1_result_pagetree.t3d" from the tutorial extension to "fileadmin/"
In the backend, create a new page on root level, call it "Import folder " and select the type "sysFolder".
Click the page/sysFolder icon of the new page, select "More options...", select "Import from .t3d".
Select the t3d file in the selectorbox, press preview. You should now see something like this:
Press "Import": Now, the page tree starting with "Root page" should be created inside the "Import folder".
Cut the "Root page" and paste it into the root of the tree so you get "Root page" as the first page in the tree from the top.
The "Import folder" still contains three template records which are related to the main template record on the "Root page" - let them stay in the "Import folder" and rename the folder to "Template Storage".
Install Kickstart Wizard: Make sure the Kickstart Wizard extension ("extrep_wizard") is installed:
Investigating the source material
Beforewe move on with the creation of the extension it‘s very important toanalyse the material we have at hand here. What we will do now is akind of reverse-enginering where we take a set of templates and figureout what subparts we will need. Normally you would work the other wayaround: You would define what you need, then let the designer loose.For instance you might say "I want a template with two columns, one forNORMAL column content and one for RIGHT column content." - and thedesigner would make that by creating a template which has two tablecells with id attributes that will place the subparts for NORMAL andRIGHT column content at the right position.
The main templates
Themain templates Mr. Raphael made are stored in the folder"fileadmin/template/main/". There are currently two main templatesthere:
template_1.html:
This is the same template as in Part 1 of this tutorial.
template_2.html:
Thisis an alternative main template. It includes a "path-menu" (Root page> First page > ....), a horizontal menu of current-page sub itemsand a content area which spreads over the full width of the page.
Foreach of these templates Raphael also made a little icon. He gave theicons the same name as the template file, but with the "gif" extensioninstead:
template_1.gif:
template_2.gif:As you can see these icons are designed to reflect the overall structure of the main templates.
Now, lets just look inside of the template_2.html file for a second:
Notice the title of the document - we will use this for the main template selector box!
This template uses an additional stylesheet!
The template has a "path-menu" in a table cell with the id "path"
The main menu is contained in a table row with id "menu_2" (#5) and each element is wrapped in a
"menu_2" is the id of the table row (see #4)
The class "oddcell" is used for every second menu item - this will produce alternating background colors
The class "menu2-level1-act" is used to define the style for active elements in the menu.
The id "content" is used - as with template_1.html - for the table cell defining the content area of the main template.
Content area templates
Inthe folder "fileadmin/templates/sub/" we find four templates fordifferent layouts of the content area of either of the main templates.Thus we have two main templates times four content area templates - atotal of 8 possible combinations!
Layout
Info
ct_1.html
Single Large Content Area (default)
Icon:
ct_2.html
Wide Main Column, narrow right column.
Icon:
ct_3.html
Three even Columns (left + normal + right)
Icon:
ct_4.html
Single Large Content Column with News Section in Upper Right Corner.
Icon:
Asyou can see only the content area changes in Mr. Raphaels templates. Infact the menu and header image are just a background image insertedtemporarily so that the content area designs could be evaluated in theright context!
Lets take a look at the source code of the template file ct_1.html:
Each template file has a page title which is carefully describing the template properties - this will in fact be the title used for the selector box inside of TYPO3s backend.
This