deel. Aan elk van deze
elementen wordt een "class" toegekend. Met behulp van de class naam bepaalt het CSS stylesheet de opmaak van het element. Dit is een hele slimme opzet voor een menu, omdat elk element uit een minimum aantal HTML codes bestaat (goed voor TypoScript implementatie) en gemakkelijk kan worden herhaald (noodzakelijk wanneer het menu dynamisch wordt). Uitdaging: We moeten het hier geleverde voorbeeldmenu vervangen door één dat dynamisch gegenereerd wordt! 3. Dit is wat voorbeeldtekst van Raphaël voor in het template bestand, om een juiste visuele indruk te krijgen. Zie je hoe er in de opmaak
en
tags worden gebruikt (gebruikmakend van de class "bodytext")? – Dit is slim, omdat de later door TYPO3 ingevoegde dynamische content deze tags / classen ook voor de opmaak zal gebruiken! (Raphaël moet stiekem toch van te voren wat TYPO3 ervaring hebben opgedaan, hè?) Uitdaging: Wij moeten de voorbeeld content vervangen door een dynamisch gegenereerde pagina content. 4. Deze break tag zorgt voor een beetje extra ruimte onder de content, zodat de footer niet te dicht bij de body van de pagina staat. Tenslotte willen we je er op wijzen dat de tabelcellen met de positie van het menu en van de content, een id attribuut als tag hebben. Deze worden niet alleen door het stylesheet gebruikt! Er zit een slimmigheidje achter deze id attributen! Maar eerst wat HTML templates theorie:
Training voor Ontwikkelaars - 9
Basiskennis TEMPLATE cObject Maak eerst een nieuw bestand aan, fileadmin/template/test.html, met de volgende content:
Untitled Header of the page
(Dit kun je vinden in de training extension map onder "misc/test.html") Plaats dit vervolgens in het Setup veld van je template record: # Template content object: temp.mainTemplate = TEMPLATE temp.mainTemplate { template = FILE template.file = fileadmin/template/test.html } # Default PAGE object: page = PAGE page.typeNum = 0 page.10 < temp.mainTemplate
Hierdoor wordt een cObject van het type "TEMPLATE" op de positie "page.10" gezet. De "template" eigenschap van het template cObject wordt gedefinieerd als een ander cObject van het type "FILE" dat het nieuwe bestand, "fileadmin/template/test.html", leest. Hier vindt je eigenschappen van het TEMPLATE cObject **e. Als je nu de veranderingen in het Setup veld opslaat en op frontend drukt, zou je het volgende moeten zien:
Door in de broncode te kijken, zien we dat in feite het TEMPLATE cObject net het bestand heeft gelezen, en er een ruwe versie van heeft aangemaakt:
Training voor Ontwikkelaars - 10
Nu komt het mooie van het template cObject; het leest niet alleen een HTML bestand – het maakt het ons ook mogelijk “subparts” er uit te selecteren en ze te vervangen door dynamische content! Een subpart wordt gedefinieerd als de content tussen twee soortgelijke marker strings, omgeven door ### en ingesloten door HTML commentaar (dit is optioneel). Het "test.html" bestand heeft twee subparts, het "DOCUMENT_BODY" subpart en het "INSIDE_HEADER" subpart. Zoals je kunt zien zijn de subpart markers ingesloten door HTML commentaar tags en dus niet zichtbaar.
Probeer nu het Setup veld van het template record als volgt te veranderen: # Template content object: temp.mainTemplate = TEMPLATE temp.mainTemplate { template = FILE template.file = fileadmin/template/test.html workOnSubpart = DOCUMENT_BODY subparts.INSIDE_HEADER = TEXT subparts.INSIDE_HEADER.value = HELLO WORLD! } # Default PAGE object: page = PAGE page.typeNum = 0 page.10 < temp.mainTemplate
Druk op frontend en de HTML broncode zou er als volgt uit moeten zien: Training voor Ontwikkelaars - 11
Dit komt door onze veranderingen in de eigenschappen van het TEMPLATE cObject; •
De eerste en belangrijkste was dat het TEMPLATE cObject de opdracht kreeg alleen aan het subpart dat door "###DOCUMENT_BODY###" werd gemarkeerd te werken – dus de overbodige header en body tags zijn er uit gehaald!
•
Vervolgens werd het subpart gemarkeerd "###INSIDE_HEADER###" vervangen door de content zoals gegeven door het TEXT cObject, gedefinieerd voor de eigenschap "subparts.INSIDE_HEADER" van het TEMPLATE cObject.
Dit zou vrij gemakkelijk te volgen moeten zijn. Vanaf dit punt hoeven we alleen nog maar het bronbestand naar het template van Raphaël te verwijzen, fileadmin/template/main/template_1.html, soortgelijke subpart markers in te voegen en dan het voorbeeldmenu en de voorbeeld content te vervangen door de dynamisch gegenereerde menu’s en de content elementen van de werkelijke pagina.
Het template Auto-parser Extension De meest voor de hand liggende keuze is wellicht het template van Raphaël te bewerken. Ik heb echter geleerd dat je er in het algemeen niet op kunt vertrouwen dat een HTML editor HTML commentaar in het document niet verwijdert of verplaatst, als Raphaël het template bestand later verandert. Stel je voor dat Raphaël een paar veranderingen in het template aanbrengt met DreamWeaver en de subpart markers worden onopgemerkt verwijdert – dan werkt het template gelijk niet meer! Bovendien zijn de paden die verwijzen naar het stylesheet en de afbeeldingen in het template van Raphaël relatieve paden ten opzichte van [domain]/fileadmin/template/main/ - not [domain]/, de HTML content zal hier worden geplaatst door de frontend engine van TYPO3! Hierdoor zouden er prefixes nodig voor alle paden! Dit vraagt om een betere oplossing. Importeer en installeer nu de template Auto-parser extension - het maakt al je dromen waar...
Installatie van de extension Ga naar de Extension Manager, en importeer de extension vanuit de online repository:
Zoek de extension "automaketemplate", klik op het import icoon:
Als het gelukt is, is dit het resultaat:
Training voor Ontwikkelaars - 12
Ga terug, selecteer "Available Extensions to Install" en installeer de extension:
Nadat je op de "Make updates" knop hebt gedrukt, ga je terug naar het template module en controleer je de Object Browser:
Deze extension zou een USER cObject moeten hebben toegevoegd aan het objectpad "plugin.tx_automaketemplate_pi1", zoals je hierboven kunt zien. Dit cObject kan nu door ons worden gebruikt in plaats van de FILE cObject om het template bestand van Raphaël te lezen en de HTML opmaak automatisch aan te passen en subpaden te corrigeren!
Configuratie van het Template Auto-parser Net zoals voor elke extension waarover we iets willen weten, moeten we de handleiding voor de extension op typo3.org raadplegen. Klik op deze link om de tabel met eigenschappen voor het cObject op te roepen **t. Om heel duidelijk voor je te maken wat het Template Auto-parser doet, zal ik de output van de plugin invoegen als de enige content op de pagina, en zal ik ook het PAGE object "page" configureren om niet de gebruikelijke header en footer content als output te leveren. Dit is het Setup veld template record content: # Configuring the Auto-Parser: plugin.tx_automaketemplate_pi1 { # Read the template file: content = FILE content.file = fileadmin/template/main/template_1.html # Here we define which elements in the HTML that # should be wrapped in subpart-comments: elements { BODY.all = 1 BODY.all.subpartMarker = DOCUMENT_BODY HEAD.all = 1 HEAD.all.subpartMarker = DOCUMENT_HEADER HEAD.rmTagSections = title TD.all = 1 } Training voor Ontwikkelaars - 13
# Prefix all relative paths with this value: relPathPrefix = fileadmin/template/main/ } # Default PAGE object: page = PAGE page.typeNum = 0 page.config.disableAllHeaderCode=1 page.10 =< plugin.tx_automaketemplate_pi1
Sla het template op en druk op frontend. Je zou precies moeten zien hoe de fileadmin/template/main/template_1.html er uit ziet:
Ja, en...? – denk je. Maar dit is al heel wat en als je naar de broncode kijkt, zul je zien waarom:
Training voor Ontwikkelaars - 14
Zoals je ziet, zijn er hoofdzakelijk twee dingen gebeurd: •
Een groot aantal blokken in het template zijn automatisch omgeven door subparts! (1+2)
•
Alle relatieve links/referenties worden voorafgegaan door de prefix "fileadmin/template/main/" (3)
Dit is omdat het template Auto-parser geconfigureerd is om met zulke “elementen” te werken: ... elements { BODY.all = 1 BODY.all.subpartMarker = DOCUMENT_BODY HEAD.all = 1 HEAD.all.subpartMarker = DOCUMENT_HEADER HEAD.rmTagSections = title TD.all = 1 } ...
("Elementen” zijn allemaal tags met een aparte tag aan het begin en aan het einde, bijv. de
tag. Tags zonder eind tag, bijv. ![]() , moeten worden gedefinieerd door de "single property" van het template Auto-parser) Training voor Ontwikkelaars - 15
De configuratie van de elementen zegt dus dat •
a) het element moet worden omgeven door de subpart marker "###DOCUMENT_BODY###"
•
b) het element moet worden omgeven door de subpart marker "###DOCUMENT_HEADER###". Verder dienen bestanddelen te worden verwijderd. (We willen niet dat de <title> tag van het template van Raphaël wordt herhaald op onze TYPO3 pagina’s...)<br />
<br />
•<br />
<br />
c) Alle gevonden <td> elementen moeten worden omgeven door markers – maar omdat er geen subpart marker waarde is gedefinieerd, worden alleen <td> tags met een "id" of "class" attribuut omgeven door markers en wel door een subpart marker die overeenkomt met de id/class waarde. Daarom zal de content binnenin de tag <td id="menu_1"> worden omgeven door de subpart markers "<!--###menu_1###-->...<!--###menu_1###-->".<br />
<br />
Wat hebben we hier nu aan? Het antwoord hierop is dat Raphaël met de Auto-parser templates kan maken die gebaseerd zijn op moderne CSS stijltechnieken met een bewust gebruik van id en class attributen in de HTML elementen, en tegelijkertijd functioneren die attributen als de “markers” die door TYPO3 worden gebruikt om delen van het template te vervangen door dynamische content! Gemakkelijk voor Raphaël (de ontwerper), minder gedoe voor Benoit (de ontwikkelaar) en goed voor de financiën van Picouto want er wordt minder tijd besteed aan conversies en handmatige codering van templates met subpart markers!<br />
<br />
We combineren alles Bestudeer de onderstaande illustratie. Dit is wat we willen bereiken:<br />
<br />
Het template bestand wordt door de Auto-parser gelezen, de output gaat naar het template cObjecten dat subparts vervangt en wordt uiteindelijk ingevoegd in de body en header bestanddelen van de TYPO3 pagina. Dit wordt gedaan door het onderstaande TypoScript dat in het Setup veld van jouw template record is ingevoerd. Het is een hele reeks, maar probeer er wat tijd voor uit te trekken om het te begrijpen:<br />
<br />
Training voor Ontwikkelaars - 16<br />
<br />
# Configuring the Auto-Parser for main template: plugin.tx_automaketemplate_pi1 { # Read the template file: content = FILE content.file = fileadmin/template/main/template_1.html # Here we define which elements in the HTML that # should be wrapped in subpart-comments: elements { BODY.all = 1 BODY.all.subpartMarker = DOCUMENT_BODY HEAD.all = 1 HEAD.all.subpartMarker = DOCUMENT_HEADER HEAD.rmTagSections = title TD.all = 1 } # Prefix all relative paths with this value: relPathPrefix = fileadmin/template/main/ } # Main TEMPLATE cObject for the BODY temp.mainTemplate = TEMPLATE temp.mainTemplate { # Feeding the content from the Auto-parser to the TEMPLATE cObject: template =< plugin.tx_automaketemplate_pi1 # Select only the content between the <body> tags workOnSubpart = DOCUMENT_BODY # Substitute the ###menu_1### subpart with some example content: subparts.menu_1 = TEXT subparts.menu_1.value = HELLO WORLD - MENU # Substitute the ###content### subpart with some example content: subparts.content = TEXT subparts.content.value = HELLO WORLD - CONTENT } # Main TEMPLATE cObject for the HEAD temp.headTemplate = TEMPLATE temp.headTemplate { # Feeding the content from the Auto-parser to the TEMPLATE cObject: template =< plugin.tx_automaketemplate_pi1 # Select only the content between the <head> tags workOnSubpart = DOCUMENT_HEADER }<br />
<br />
# Default PAGE object: page = PAGE page.typeNum = 0 # Copying the content from TEMPLATE for <body>-section: page.10 < temp.mainTemplate # Copying the content from TEMPLATE for <head>-section: page.headerData.10 < temp.headTemplate<br />
<br />
Dit leidt allemaal tot de bovenstaande boomstructuur.<br />
<br />
Training voor Ontwikkelaars - 17<br />
<br />
Zoals je ziet zijn de "temp.mainTemplate" en "temp.headTemplate" cObjecten gekopieerd naar hun respectievelijke posities in de objectboom. Voor elk geldt dat er een referentie naar het USER cObject van het template Auto-parser plugin in zit. Je ziet dat het objectpad "page.headerData" een numerieke serie is van content objecten die de content voor het <head> bestanddeel van de pagina definiëren. Dit is hoe er content wordt ingevoegd tussen de <head> tags van de door TYPO3 gegenereerde pagina’s.<br />
<br />
Resultaat Het resultaat ziet er zo uit:<br />
<br />
Je ziet dat de menu en content gedeeltes zijn vervangen door content van de TEXT cObjecten, die er alleen maar waren als voorbeeld! De HTML broncode ziet er zo uit:<br />
<br />
Training voor Ontwikkelaars - 18<br />
<br />
1. Het <head> bestanddeel is ingevoegd, zonder de <title> tag 2. Het <body> bestanddeel is ingevoegd, content vervanging is uitgevoerd 3. De ###header_1### en ###footer### subparts werden niet vervangen omdat ze helemaal niet waren gedefinieerd in het "temp.mainTemplate" TEMPLATE cObject! Dit is dus geen fout. 4. De ###menu_1### en ###content### subparts werden goed vervangen, zoals we hadden verwacht omdat in feite het "temp.mainTemplate" TEMPLATE cObject geconfigureerd was om dit te doen.<br />
<br />
Samenvatting TYPO3 haalt dus automatisch de <head> en <body> content uit het template van Raphaël, corrigeert relatieve paden naar afbeeldingen, links, formulieren en stylesheets, zorgt voor vervanging voor dynamische content en voegt ieder deel in het <head> en<body> bestanddeel van de output page van TYPO3 in. We hebben nu een functionerende hoofdstructuur - we hoeven alleen nog maar wat dynamische content aan de menu en content delen toe te voegen! TypoScript cObjecten voor menu's en content elementen is het meest efficiënt hiervoor.<br />
<br />
Het menu aanmaken Het “level2” menu aan de linkerkant van het template moet dynamisch gegenereerd worden om de paginastructuur van het backend te weerspiegelen. Alhoewel Raphaël een mooie, schone template voor ons heeft ontworpen met heel eenvoudige HTML opmaak voor de menubestanddelen, is het niet de beste benadering om te proberen deze delen door Auto-parser subparts te laten selecteren; nee, we moeten hier harde codering invoegen! Dit betekent dat dhr. Benoit handmatig in het template van Raphaël moet kijken, zorgvuldig identificeren waar een enkelvoudig menu bestanddeel uit bestaat, dan deze bestanddelen moet selecteren en ze in het template record gebruiken om het object te construeren voor het genereren van het menu. Het betekent ook dat Raphaël de basisstructuur van het menu niet kan veranderen zonder dat Benoit dezelfde veranderingen in het template record doorvoert! Maar als Raphaël het echt slim heeft aangepakt, hoeft dat ook niet; CSS stijlen moeten voor alle visuele effecten worden gebruikt.<br />
<br />
Menu objecten en bestanddeel status Ten eerste is het HMENU object het object dat we gebruiken om menu’s te genereren. Dit object roept “menu objecten” van het type TMENU of GMENU of GMENU_LAYERS etc. aan voor elk menu niveau dat we willen (welke je gebruikt, hangt af Training voor Ontwikkelaars - 19<br />
<br />
van het soort menu waar je naar toe wil – tekstueel, grafisch, cascading lagen etc.). Voor elk "menu object" (dat was bijv. een TMENU of GMENU), definieer je algemene eigenschappen voor het desbetreffende niveau en daarnaast bestanddeelspecifieke eigenschappen (bijv. breedte en hoogte van een GMENU grafisch bestanddeel). De bestanddeelspecifieke eigenschappen worden altijd gedefinieerd voor een specifieke status van het bestanddeel. De normale status (NO) moet altijd gedefinieerd zijn, maar daarnaast kunnen we bijv. een actieve status van het bestanddeel definiëren (ACT) – dit betekent "hoe moet het menu bestanddeel er uit zien als we op een gelijkwaardige pagina zijn of één eronder". Het doel van deze training is echter niet om uitvoerig op het HMENU cObject in te gaan en alle aanverwante kwesties. Zie hiervoor TypoScript by Example. Bekijk nu de HTML broncode van het template van Raphaël:<br />
<br />
Zoals je kunt zien, heeft hij een <div> tag voor elk menu bestanddeel gebruikt, ongeacht het niveau of de status. Het onderscheid wordt volledig bepaald door de waarde van het class attribuut! Dit is een slim ontwerp, omdat de HTML opmaak zó eenvoudig wordt dat Benoit zelfs nog meer tijd bespaart bij de implementatie! :-) En de volledige, visuele besturing vindt buiten TYPO3 plaats - in het CSS stylesheet. Zie ook hoe Raphaël een ontwerp voor “actieve” menu bestanddelen heeft toegevoegd. De implementatie van dit menu is heel eenvoudig. Het gaat als volgt: Definieer eerst een tijdelijk object ergens bovenin het template record (vòòr de definitie van "temp.mainTemplate"): # Menu 1 cObject temp.menu_1 = HMENU # First level menu-object, textual temp.menu_1.1 = TMENU temp.menu_1.1 { # Normal state properties NO.allWrap = <div class="menu1-level1-no"> | # Enable active state and set properties: ACT = 1 ACT.allWrap = <div class="menu1-level1-act"> } # Second level menu-object, textual temp.menu_1.2 = TMENU temp.menu_1.2 { # Normal state properties NO.allWrap = <div class="menu1-level2-no"> | # Enable active state and set properties: ACT = 1 ACT.allWrap = <div class="menu1-level2-act"> }<br />
<br />
</div> | </div><br />
<br />
</div> | </div><br />
<br />
Je ziet hoe de rode regels de geselecteerde HTML opmaak bevatten, die dhr. Benoit van het template van dhr. Raphaël haalde. Nu is het met harde code opgenomen in het template record. Het enige wat je nu nog hoeft te doen, is te zorgen dat het "menu_1" subpart van de "temp.mainTemplate" cObject verwijst naar dit object: ... # Main TEMPLATE cObject for the BODY temp.mainTemplate = TEMPLATE temp.mainTemplate { # Feeding the content from the Auto-parser to the TEMPLATE cObject: template =< plugin.tx_automaketemplate_pi1 # Select only the content between the <body> tags workOnSubpart = DOCUMENT_BODY # Substitute the ###menu_1### subpart with dynamic menu: subparts.menu_1 < temp.menu_1 # Substitute the ###content### subpart with some example content: subparts.content = TEXT subparts.content.value = HELLO WORLD - CONTENT Training voor Ontwikkelaars - 20<br />
<br />
...<br />
<br />
(De rode regels geven de verandering weer!) ... en het resultaat spreekt voor zich:<br />
<br />
De (onderstaande) paginastructuur zie je duidelijk terug in het bovenstaande menu!<br />
<br />
En hoe gemakkelijk is het nu om het menu ontwerp te veranderen? Probeer maar eens het stylesheet in "fileadmin/template/main/res/stylesheet.css" te bewerken:<br />
<br />
Training voor Ontwikkelaars - 21<br />
<br />
Je ziet het! Door deze benadering kun je de hoofdfactoren die de grafische vormgeving bepalen – het HTML template en stylesheet – buiten TYPO3 plaatsen zodat dhr. Raphaël, de HTML/CSS ontwerper, hier direct en buitengewoon gemakkelijk bij kan. En alles wat dhr. Benoit hoefde te doen, was binnen het template record een beetje te programmeren met TypoScript - hij configureerde gewoon de frontend engine zo dat deze de ontwerpen van Raphaël op de manier gebruikt die het beste past bij hun favoriete ontwikkelingsstijl! We verwijzen je naar TypoScript aan de hand van Voorbeelden als je meer wilt uitproberen met het HMenuobject en aanverwante zaken**f. Training voor Ontwikkelaars - 22<br />
<br />
Pagina content invoegen De meest populaire manier om pagina content in TYPO3 te beheersen, is door content elementen aan te maken op een pagina in de tabel tt_content. In feite ken ik niemand die deze benadering niet gebruikt omdat deze zo flexibel, krachtig en gemakkelijk te implementeren is. Maar het kan een tikkeltje botsen met je huidige opvattingen over het gebruik van HTML templates rondom gestructureerde content. Content elementen hebben talloze vooraf gedefinieerde types (Text, Text w/image, Bulletlist, Table, Login box, etc), en een statisch template met vooraf gedefinieerd TypoScript zal gewoonlijk de elementen “out-of-the-box” voor je verzorgen. Dit is echt geweldig! Omdat content elementen een type hebben en voor elk type vele extra opties, is het onmogelijk om de content elementen te verkrijgen door een vaststaand HTML template per element-type. Het werkt gewoon niet en dat zul je zelf ook ontdekken als je hier een beetje mee gespeelt hebt. Daarom worden er cObjecten in combinatie met PHP-functies gebruikt voor content met complexe condities. Als we dus de content elementen niet met HTML templates kunnen ontwerpen, hoe dan wel? Als je nu terug gaat naar de laatste benadering voor het verkrijgen van content elementen– dat is de extension "css_styled_content" – dan zal alle content worden omgeven door primitieve HTML elementen – en daarmee worden de ontwerpbeslissingen lekker aan je externe CSS stylesheet overgelaten! Laten we eens kijken hoe dat werkt. Laten we allereerst een content element aanmaken.<br />
<br />
Een content element In de "List module", klik op het pagina-icoon van de pagina "License C", selecteer vervolgens "New" en klik dan, in het rechter frame, op de content wizard link:<br />
<br />
Selecteer "Text with image to the right" en vervolgens de kolom "Normal":<br />
<br />
Nadat je de content in het element hebt ingevoerd en opgeslagen, zou je ongeveer het volgende moeten zien:<br />
<br />
Training voor Ontwikkelaars - 23<br />
<br />
We hebben nu dus een content element geplaatst op de pagina "License C":<br />
<br />
Een statische template opnemen Om het content element weer te geven, moeten we een statische template opnemen, dat alle honderden regels TypoScript code levert, die alles voor ons zullen doen. Dit wordt gedaan door het hele template record te bewerken. Het eerste wat je echter moet doen is de extension "css_styled_content" installeren:<br />
<br />
Training voor Ontwikkelaars - 24<br />
<br />
Je hoeft alleen maar op de "Install" knop te drukken, en op de "accept" knop op de volgende pagina. (NB: Op het tijdstip van schrijven (januari 2004) is de "CSS styled content" plugin nog NIET af! Het staat in de topdrie van de prioriteitenlijst van Kasper, en de ontwikkeling ervan volgt onmiddellijk op de snowboard tour.) Terug naar het template: Druk op deze link in de Template module:<br />
<br />
Je zou dan moeten zien dat het "CSS Styled Content" statische bestand beschikbaar wordt in de box "Include Static (from extensions)":<br />
<br />
Klik het aan, sla het template op en ga naar de Template Analyzer:<br />
<br />
In de "Template Analyzer" zie je de hiërarchie van template records en statische templates die kunnen worden toegevoegd aan de huidige "main template record". Door de statische template mee te nemen in de selectie zal het gewoon worden meegenomen voordat de TypoScript code in de template record "NEW SITE" wordt aangemaakt. Dit betekent dat elk object dat binnen het "EXT:css_styled_content/....." statische template gedefinieerd is, gekopieerd kan worden en in het NEW SITE template record kan worden gebruikt. Dit zullen we nu doen omdat het opgenomen statische template een object, "styles.content.get", heeft dat een content object is dat alle content elementen van de "Normal" kolom van de huidige pagina selecteert: Verander dus dit deel van de definitie van het "temp.mainTemplate" object in het template record: ... Training voor Ontwikkelaars - 25<br />
<br />
# Main TEMPLATE cObject for the BODY temp.mainTemplate = TEMPLATE temp.mainTemplate { # Feeding the content from the Auto-parser to the TEMPLATE cObject: template =< plugin.tx_automaketemplate_pi1 # Select only the content between the <body> tags workOnSubpart = DOCUMENT_BODY # Substitute the ###menu_1### subpart with dynamic menu: subparts.menu_1 < temp.menu_1 # Substitute the ###content### subpart with some example content: subparts.content < styles.content.get ...<br />
<br />
Als je de frontend voor de pagina “Licence C” vernieuwt, zou je het volgende moeten zien:<br />
<br />
In de HTML broncode zien we dit:<br />
<br />
Training voor Ontwikkelaars - 26<br />
<br />
1. Zoals je ziet was de header van het content element opgemaakt in <h1> tags. Als je andere "Layout" types voor de header selecteert, wordt de weergave bijv. <h2> (voor Layout 2). 2. Elke regel bodytext is omgeven door <p> tags waarbij de class is ingesteld op "bodytext". Op deze manier kun je de stijl van de pagina content of content elementen in je stylesheet specifiek bepalen! Je ziet hoe slim Raphaël geweest is door de proef content in het template bestand zo te ontwerpen dat er <p class="bodytext"> tags worden gebruikt! 3. Ieder ingevoegd van element zal een <a> tag hebben waarvan de waarde van de naam is ingesteld op de "uid" van het content element. Dit zijn ankerpunten die in de URL kunnen worden gebruikt om direct naar een bepaalde positie op een pagina te gaan. 4. Dit is hoe het HMenuobject het level2 menu aanmaakt. Je ziet hoe de link automatisch naar de juiste pagina verwijst en dat er zelfs een extra onFocus handler is ingesteld.<br />
<br />
De Objectboom? Nu dan, door dit zogenaamde content element, "styles.content.get", te kopiëren, wat zijn we eigenlijk aan het toevoegen aan de objectboom? Laten we eens kijken met de Object Browser:<br />
<br />
Training voor Ontwikkelaars - 27<br />
<br />
We zien twee interessante zaken: 1. Het objectpad "styles.content.get" had kennelijk een cObject van het type CONTENT. Afgaande op de attributen lijkt het een redelijke conclusie dat het records van de tabel "tt_content" selecteert, en dat deze per veld worden geordend, "sorting". Voor meer informatie bekijk hier het CONTENT cObject **e. 2. Ten tweede werd er een geheel nieuw TLO (Toplevel Object) gedefinieerd- "tt_content". Het CONTENT cObject dat records selecteert van "tt_content" (#1) zal dit TLO (tevens gedefinieerd als een cObject) gebruiken als een defaultwaarde om elk gevonden record mee aan te maken! Zoals we zien is "tt_content" TLO gedefinieerd als een USER cObject waarbij een PHP functie van de "css_styled_content" extension wordt benut-wat me juist lijkt omdat dat de extension is die we hiervoor hebben geïnstalleerd! Om meer hierover te weten te komen moet je de documentatie voor de "css_styled_content" extension raadplegen**. Als je heel erg nieuwsgierig bent kun je ook in de class "tx_cssstyledcontent_pi1" kijken en de logica ervan bestuderen. Hier is een stukje van de functie "main" (): function main($content,$conf) $this->conf = $conf;<br />
<br />
{<br />
<br />
// This value is the Content element Type - determines WHAT kind of element to render... $CTypeValue = (string)$this->cObj->data["CType"]; $content=""; switch($CTypeValue) { case "header": $content = $this->getHeader().$this->render_subheader(); break; case "bullets": $content = $this->getHeader().$this->render_bullets(); break; case "table": $content = $this->getHeader().$this->render_table(); break; Training voor Ontwikkelaars - 28<br />
<br />
...<br />
<br />
case "text": $content = $this->getHeader().$this->render_text(); break; case "image": $content = $this->getHeader().$this->render_image(); break; case "textpic": $content = $this->render_textpic(); break;<br />
<br />
Een XHTML compatibele website Als je XHTML compatibele websites wilt maken, kun je dat ook met TYPO3. Versie 3.6.0 van TYPO3 voldoet, voor zover mogelijk, aan XHTML compatibiliteit (niveau: XHTML transitional). Voor deze training moet je er zeker van zijn dat de gebruikte HTML templates XHTML compatibel zijn. Dit is natuurlijk de eerste stap, en iets waar je jezelf van verzekerd moet hebben. De volgende stap is ervoor te zorgen dat TYPO3 een XHTML doctype in de output genereert. Dit is gemakkelijk te doen door gewoon de volgende TypoScript regel in het Setup veld van het main template record te op te nemen: page.config.doctype = xhtml_trans<br />
<br />
Bovendien dienen de menu's ook compatibel te zijn. Vooralsnog worden bijzondere tekens, zoals “&”, precies zo weergegeven. Dit moet je vermijden. De TypoScript code van het menu moet worden veranderd door vier extra regels (hier weergegeven in rood) toe te voegen: # Menu 1 cObject temp.menu_1 = HMENU # First level menu-object, textual temp.menu_1.1 = TMENU temp.menu_1.1 { # Normal state properties NO.allWrap = <div class="menu1-level1-no"> | NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap = <div class="menu1-level1-act"> } # Second level menu-object, textual temp.menu_1.2 = TMENU temp.menu_1.2 { # Normal state properties NO.allWrap = <div class="menu1-level2-no"> | NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap = <div class="menu1-level2-act"> }<br />
<br />
</div><br />
<br />
| </div><br />
<br />
</div><br />
<br />
| </div><br />
<br />
Hierdoor worden de menu labels door de PHP functie htmlspecialchars() geleid, die bijv. “&” naar “&" omzet; Nadat je dit gedaan hebt, kun je de site testen met bijv. Opera 7, dat een hele handige shortcut heeft voor compatibiliteitstesten: Je hoeft alleen maar rechts te klikken op de HTML pagina, kies “Frame” en vervolgens “Validate source”:<br />
<br />
Training voor Ontwikkelaars - 29<br />
<br />
Opera stuurt dan automatisch de broncode van de pagina voor je naar “http://validator.w3.org/” en, als het goed gaat, zou je het volgende op je beeldscherm moeten zien:<br />
<br />
Training voor Ontwikkelaars - 30<br />
<br />
Nu alles wat netter We hebben onze website nu af. Dhr. Benoit en dhr. Raphaël hebben hun taken afgerond en misschien heeft ondertussen dhr. Picouto zelfs alle content elementen voor elke pagina in de boom hebben geleverd. We weten het niet, maar de basisstructuur van de website is er, gebaseerd op een heel gewoon HTML bestand dat in de map "fileadmin/template/main/" is geplaatst, waarbij, indien nodig, alleen de menu en content gedeeltes dynamisch worden vervangen.<br />
<br />
Betere template structuur Het enige wat we nog moeten doen, is het template record wat beter organiseren. Alhoewel we de gebruikte hoeveelheid TypoScript tot een minimum hebben beperkt, is het makkelijk te zien dat een dergelijk template record heel snel groot en onhandig wordt. Dit kan worden opgelost door het te vervangen door een serie template records die worden opgenomen: Ten eerste zou je een hele nieuwe pagina kunnen maken in de "root-level" van de paginaboom. Selecteer het type "sysFolder" (als in "opslagruimte voor elk database element dat je maar wilt") en noem het Template Storage. Dan maak je als volgt drie template records aan:<br />
<br />
Vink "Clear" nergens aan! Kopieer alleen de juiste "temp.xxxx" object definities van de "NEW SITE" template hierheen. In Training voor Ontwikkelaars - 31<br />
<br />
deze lijst is de volgorde onbelangrijk. De volgende stap is om deze drie templates in de "NEW SITE" main template op te nemen. Bewerk dus de "NEW SITE" template:<br />
<br />
De volgorde is nu wel belangrijk: het eerstgenoemde template wordt het eerste opgenomen en omdat het template record "ext: Main TEMPLATE cObject" kopieën maakt van bijv. het "temp.menu_1" object, moet het als laatste worden opgenomen. Sla het template record op en bekijk de nieuwe structuur met de Template Analyzer:<br />
<br />
Je ziet dat het statische template als eerste is opgenomen, dan de drie "basis templates" uit onze opslagmap en tenslotte het main template record. Je kunt van elk de titel aanklikken en er onder naar de content kijken.<br />
<br />
Training voor Ontwikkelaars - 32<br />
<br />
Enkele HTML ontwerp overwegingen Je zult in dit deel van de training gemerkt hebben, dat het mogelijk is om op een hele gemakkelijke wijze een HTML template van een grafische vormgever te implementeren, terwijl je zeker bent van compatibiliteit met zijn oorspronkelijke werk in de omgekeerde richting (omdat het handmatig invoegen van markers in zijn HTML template onnodig is). Bovendien komt er alleen maar bekende technologie zoals HTML en CSS bij kijken -er hoeven geen verwarrende XLST stylesheets te worden gemaakt (hoewel dhr. Benoit XSLT kan gebruiken op PHP-niveau, als hij dat zou willen). Maar alhoewel dhr. Raphaël, de ontwerper, vrijwel volledig vrij is in zijn ontwerp moet hij toch nog steeds de grondbeginselen van dynamische en statische content begrijpen.<br />
<br />
Geef duidelijk aan welke delen dynamisch en welke statisch zijn Dhr. Raphaël moet vooral begrijpen -waarschijnlijk met het hele webteam-welke delen van de pagina statische delen zijn en welke dynamisch. Statische delen zijn alle delen waar TYPO3 NIETS mee doet. Het is echter de bedoeling dat de dynamische delen wel worden vervangen door content afkomstig uit de databronnen van TYPO3. Bij de identificatie van dynamische delen moet Raphaël op twee dingen letten: •<br />
<br />
Het deel moet worden ingesloten door een enkelvoudig HTML element. Dit kan een <div> element, een <td> element of een <span> element zijn.<br />
<br />
•<br />
<br />
Het insluitende element moet of een id- of een class attribuut bevatten, dat door de configuratie van de Template Autoparser plugin kan worden gevonden en omgeven door subpart markers. Bijv. <td id="content"> voor de tabelcel waarin de content moet worden geplaatst.<br />
<br />
Training voor Ontwikkelaars - 33<br />
<br />
Het geeft helemaal niet als er proef content in het template bestand blijft - dit wordt immers toch vervangen door dynamische content.<br />
<br />
Vereenvoudig de HTML opmaak, gebruik CSS stylesheets We bevinden ons nu in het jaar 2004 en het is echt tijd om afscheid te nemen van de <font> tag en bgcolor attributen en alles in een extern stylesheet te plaatsen. Met het oog op een CMS implementatie zorgt dit ervoor dat zo veel mogelijk externe technologie wordt gebruikt en CMS specifieke technologie (zoals TypoScript template records) slechts waar strikt noodzakelijk. In dit onderdeel van de training is het level2 menu het beste voorbeeld: <!-- Menu table cell: --> <td id="menu_1"> <div class="menu1-level1-no"><a href="#" rel="nofollow">Menu item 1</a></div> <div class="menu1-level1-no"><a href="#" rel="nofollow">Menu item 2</a></div> <div class="menu1-level1-act"><a href="#" rel="nofollow">Menu item 3 (act)</a></div> <div class="menu1-level2-no"><a href="#" rel="nofollow">Level 2 item</a></div> <div class="menu1-level2-no"><a href="#" rel="nofollow">Level 2 item</a></div> <div class="menu1-level2-act"><a href="#" rel="nofollow">Level 2 item (act)</a></div> <div class="menu1-level1-no"><a href="#" rel="nofollow">Menu item 2</a></div> </td><br />
<br />
Laten we een enkelvoudig element bekijken (hierboven in rood). Een andere manier om dit te implementeren zou zijn: <!-- Menu table cell: --> <td id="menu_1"> <!-- Menu item level 1, begin --> <table border="0" cellpadding="0" cellspacing="0" width="95%"><tr> <td bgcolor="#eeeeee"><font face="verdana" size="2"> <a href="#" class="menu1-items" rel="nofollow">Menu item 1</a> </font></td> </tr> Training voor Ontwikkelaars - 34<br />
<br />
<tr><br />
<br />
</td><br />
<br />
<td><img src="gray_dotted_line.gif" width="180" height="1" alt=""/></td> </tr> </table> <!-- Menu item level 1, end --> ...<br />
<br />
Bedenk dat de definitie van het TMENUITEM object in het template record inhield dat de elementen door dit eenvoudige <div> bestanddeel worden omgeven: temp.menu_1.1 { # Normal state properties NO.allWrap = <div class="menu1-level1-no"> | </div> ...<br />
<br />
... en ja hoor, je raadt het al, het bovenstaande betekent dat de elementen ongeveer door het volgende moeten worden omgeven: temp.menu_1.1 { # Normal state properties NO.allWrap ( <table border="0" cellpadding="0" cellspacing="0" width="95%"><tr> <td bgcolor="#eeeeee"><font face="verdana" size="2"> | </font></td> </tr> <tr> <td><img src="gray_dotted_line.gif" width="180" height="1" alt=""/></td> </tr> </table> ) ...<br />
<br />
En zelfs dat zou niet genoeg zijn: Je zou ook de class naam van de A tag met behulp van een andere eigenschap van het NO status object moeten toevoegen, en het "gray_dotted_line.gif" bestand zou als prefix het correcte bestandspad moeten krijgen - zoals bijvoorbeeld "fileadmin/template/main/".<br />
<br />
Gebruik geen class attributen voor dynamische links Veel ontwerpers zullen geneigd zijn te denken dat een class attribuut voor de <A> tag de beste HTML opmaak is om hun menu elementen en andere links te markeren. Voorbeeld: <!-- Menu table cell: --> <td id="menu_1"> <div><a href="#" class="menu1-level1-no" rel="nofollow">Menu item 1</a></div> ... </td><br />
<br />
Dat klopt echter niet omdat juist de <A> tag automatisch wordt gegenereerd door TYPO3! Dus om dit te laten werken voor ons TMENUITEM zouden we extra TypoScript eigenschappen nodig hebben: temp.menu_1.1 { # Normal state properties NO.allWrap = <div> |</div> NO.ATagParams = class="menu1-level1-no" ...<br />
<br />
Dit voegt meer complexe TypoScript eigenschappen toe en vermindert de flexibiliteit van het stylesheet. Als je bijvoorbeeld in dit geval wil vastleggen hoe de link van CSS wordt weergegeven, kun je het volgende gebruiken. A.menu1-level1-no { color: navy; } A.menu1-level1-no:hover { color: red; }<br />
<br />
... maar dit kan weer niet als het <div> element er omheen wordt gebruikt omdat dat geen class- of id tag heeft! Als je echter de oorspronkelijke manier blijft gebruiken, waarbij het <a> element geen class attribuut heeft, maar het <div> element wel, dan zou je zowel de <div>-laag als alle links daarin kunnen vastleggen: DIV.menu1-level1-no { padding: 2px 2px 2px 2px; } DIV.menu1-level1-no A { color: navy; } DIV.menu1-level1-no A:hover { color: red; }<br />
<br />
Geen row/colspans! Dit is waarschijnlijk de grootste bedreiging voor dynamische content - het gebruik van colspan als je een dynamisch object maakt! Dit is dus uitgesloten. Bestudeer bijvoorbeeld de volgende menu opzet: <tr><br />
<br />
Training voor Ontwikkelaars - 35<br />
<br />
<!-- Menu table cell: --> <td class="menu1-level1-no"><a href="#" rel="nofollow">Menu item 1</a></td><br />
<br />
</tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr><br />
<br />
<!-- Page Content Area table cell: --> <td id="content" rowspan="7"> . . . </td> <td class="menu1-level1-no"><a href="#" rel="nofollow">Menu item 2</a></td> <td class="menu1-level1-act"><a href="#" rel="nofollow">Menu item 3 (act)</a></td> <td class="menu1-level2-no"><a href="#" rel="nofollow">Level 2 item</a></td> <td class="menu1-level2-no"><a href="#" rel="nofollow">Level 2 item</a></td> <td class="menu1-level2-act"><a href="#" rel="nofollow">Level 2 item (act)</a></td> <td class="menu1-level1-no"><a href="#" rel="nofollow">Menu item 2</a></td><br />
<br />
Het is vrijwel onmogelijk dit in te voeren! Het eerste menu bestanddeel is in dezelfde tabelrij als de contentcel, de andere zes menu bestanddelen hebben aparte tabelrijen. Bovendien heeft de tabelcel met de content een colspan="7" attribuut nodig voor de verdeling over alle rijen van het menu! Ontwerptechnisch gezien is dit duidelijk een heel slechte keuze: 1. de menu opmaak bevindt zich op verschillende punten in de HTML code 2. er is een afhankelijkheid tussen het colspan attribuut en het aantal menu bestanddelen (dat dynamisch is!) Ontwerpers moeten zich dus verre houden van dit soort ontwerpen. In plaats daarvan moeten ontwerpers zoals dhr. Raphaël gemakkelijk te herhalen opmaak voor dynamische elementen leren. Dit zijn goede voorbeelden: Bijvoorbeeld zoals in onze huidige template: <!-- Menu table cell: --> <td id="menu _1"> <div class="menu 1-level1-no"><a href="#" rel="nofollow">Menu item 1</a></div> <div class="menu 1-level1-no"><a href="#" rel="nofollow">Menu item 2</a></div> <div class="menu 1-level1-act"><a href="#" rel="nofollow">Menu item 3 (act)</a></div> ... </td><br />
<br />
Alternatief met een tabel: <!-- Menu table cell: --> <td id="menu_1"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td class="menu1-level1-no"><a href="#" rel="nofollow">Menu item 1</a></td></tr> <tr><td class="menu1-level1-no"><a href="#" rel="nofollow">Menu item 2</a></td></tr> <tr><td class="menu1-level1-act"><a href="#" rel="nofollow">Menu item 3 (act)</a></td></tr> ... </table> </td><br />
<br />
We zouden nog ingewikkelder voorbeelden kunnen geven, zoals het eerdere voorbeeld waarbij elk element in een tabel werd bewerkt! Het gaat niet om de hoeveelheid HTML per bestanddeel -het gaat om de herhaalbaarheid van de opmaak! Dhr. Raphaël moet dit soort zaken begrijpen, zodat dhr. Benoit geen uren kwijt is vanwege een gebrekkige HTML structuur en uiteindelijk zou dhr. Picouto zelfs zo blij kunnen zijn met de snelheid van de ontwikkeling die wordt bereikt door de symbiotische samenwerking tussen Raphaël en Benoit, dat hij ze trakteert op lunch!<br />
<br />
Training voor Ontwikkelaars - 36<br />
<br />
Tenslotte Ben je na het volgen van deze training geïnteresseerd in andere trainingen in TYPO3, ga dan verder met de twee andere beschikbare trainingen: TYPO3 Training voor Editors en TYPO3 Training voor Ontwikkelaars. Vragen? Neem dan contact op via mijn e-mail adres hans@alternet.nl of op het telefoonnummer (078) 635 1200. Hartelijk dank voor het volgen van deze training! Ing. Hans A. Olthoff AlterNET Internet B.V.<br />
<br />
Training voor Ontwikkelaars - 37<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/training-voor-ontwikkelaars" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Training voor Ontwikkelaars"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
| 
