Wat gaan we behandelen?

Transcriptie

1 Wat gaan we behandelen? Module 1: Introductie tot Joomla! CMS Module 2: Joomla! Templates Module 3: Elementen van het web Module 4: Basis van een template Module 5: Begin constructie Module 6: Positionering Module 7: Design Module 8: PHP code Module 9: Administrator Templates Module 10: Joomla! Framework 3 3

2 Joomla! 1.5 Templates Dezelfde functionaliteit met nieuwe code Extra controle via template parameters Meerdere CSS files vanuit templatebeheer Component templating 12 Onder Joomla 1.5 is het nodige veranderd binnen het templating systeem. Oude code is veranderd in nieuwe code, waarbij vooral op de achtergrond voor de Joomla! programmeurs veel is veranderd. Een oude statement als mosloadmodules() is vervangen met <jdoc:include type='modules'>. Een eindgebruiker heeft nu meer controle over het gedrag van een template via makkelijk te configureren parameters, zoals dat ook al bij modulen het geval was. Als een template support heeft voor zowel een resolutie van 800x600 als een resolutie van 1024x768, dan kan de eindgebruiker deze keuze zelf maken vanuit de Joomla! Administrator. Een meer geavanceerde feature, die de toekomst van Joomla! erg zal bepalen, is het concept van component templating. Een nadeel van Joomla! was altijd dat hoezeer een template zelf ook XHTML compliant was, de uiteindelijke webpagina bevatte altijd nog tabellen zoals die gedefinieerd waren in componenten. Met de komst van Joomla! 1.5 wordt binnen een component het MVC (Model View Controller) model geïntroduceerd, waarmee de presentatie nog meer wordt gescheiden van de functionaliteit. Een component definieert zelf een of meerdere views, die de data vanuit het model op een andere manier representeren. Zo kan een lijst van gegevens in een HTML tabel gestopt worden, maar ook in een unordered list <ul> of met behulp van <span> of <div> tags. De view bepaald welke HTML code uiteindelijk wordt gegenereerd. Het nieuwe van Joomla! 1.5 is dat mocht een bepaalde view binnen het component niet volstaan het mogelijk is om een view aan te maken binnen het template! Op deze manier kan een component zonder problemen geüpgrade worden, terwijl de eigen view gehandhaafd blijft. Over het algemeen is hier echter wel een grondige HTML kennis nodig. 12

3 class & id class definieert een herbruikbare stijl (met een punt) id definieert een uniek XHTML element (met een hekje) <div class= blue >... </div> div.blue { background-color: blue ; <div id= footer >... </div> div#footer { font-size: 8px ; Joomla! Templates - module 3 36 Binnen CSS 2 is ook het concept van DOM (Document Object Model) ontstaan waarmee meerdere lagen in een XHTML document beschreven kunnen worden. Dankzij DOM kan bijvoorbeeld een stijl gedefinieerd worden voor alle links binnen een container met de naam X, zonder dat links buiten de container X hier last van hebben. 36

4 <jdoc> tags <jdoc:include type= XXX name= XXX style= XXX /> JDocument <jdoc:include> tags: lowercase (kleine letters) voorzien van type parameter eindigend op /> zoals alle XML tags 75 Een JDocument tag wordt uiteindelijk door Joomla! vervangen met de nodige HTML code. Dit gedrag kan worden beïnvloed door het toevoegen van parameters aan de <jdoc:include> tag. De hele tag moet altijd in kleine letters gedefinieerd zijn. Ook moet de tag altijd een type parameter bevatten. Het type kan een van de volgende zijn: head (alleen in de HTML header), component (voor de output van componenten zoals com_content, verantwoordelijk voor het tonen van artikelen), modules (voor het tonen van meerdere modules op dezelfde positie) en module (voor het tonen van de eerste module op een bepaalde positie). Er is ook nog een apart type message dat gebruikt kan worden voor het tonen van berichten afkomstig uit Joomla denk maar aan een bevestiging dat een artikel na wijziging succesvol is opgeslagen. Bij <jdoc> tags van het type modules of module is een name parameter ook verplicht. Deze geeft de module positie aan. Een style parameter kan ook worden toegevoegd, welke invloed heeft op de manier waarop HTML wordt gegenereerd. 75

5 Zelf een split menu maken (3): twee modules 96 Terwijl er bij split menu's gebruik wordt gemaakt van een enkel menu, wordt er juist gebruik gemaakt van twee of meerdere menu modules. Per menu module kan het startniveau en eindniveau ingesteld worden. Menu-items die geen parent-item hebben bevinden zich op niveau 0. Menu-items die wel een of meerdere parents hebben bevinden zich op niveau 1 of hoger. Door het start- en eindniveau te definiëren wordt het oorspronkelijke menu opgesplitst in meerdere menu modules. Voor iedere menumodule zijn de gebruikelijke instellingen mee te geven (menustijl, template positie, titel). Het belangrijke bij split menu's om in ieder geval als menu hetzelfde menu te kiezen. 96

6 Rounded DIVs (6): CSS code div#module { background: transparent url(../images/module_tl.png) no-repeat top left ; div#module div { background: transparent url(../images/module_tr.png) no-repeat top right ; div#module div div { background: transparent url(../images/module_bl.png) no-repeat bottom left ; div#module div div div { background: transparent url(../images/module_br.png) no-repeat bottom right ; div#module div div div div { background: none; 110 Het echte inpassen van alle modules gebeurt binnen de CSS definities. Per module worden 4 DIVs gebruikt die ieder hun eigen achtergrondplaatje krijgen. De DIVs hebben in principe dezelfde hoogte en breedte, echter de verschillende achtergrondafbeeldingen verschillen in grootte. Belangrijk is ook dat uiteindelijk de laatste DIV slechts een klein achtergrondplaatje toont, maar dat het wel de bedoeling is dat de achtergrondplaatjes van de onderliggende DIVs zichtbaar zijn. De achtergrondkleur van de DIVs moet dus transparent zijn. Ook moet de achtergrondafbeelding niet herhaald worden dus de parameter no-repeat is ook een vereiste. Het is in principe mogelijk om de eerste module (div#module) wel een achtergrondkleur mee te geven, wat misschien nodig is als de plaatjes met ronde hoeken bijvoorbeeld gedeeltelijk transparant zijn. In het overzicht staat ook een vijfde DIV me specifiek geen achtergrond. De reden hiervoor is dat de vierde DIV specificatie de browser verteld dat een div binnenin een div binnenin een div binnenin een module-div als achtergrond het plaatje moet gebruiken module_br.png. Maar dit geldt ook voor alle DIVs die de vierde DIV kan bevatten. Om deze recursiviteit te voorkomen is een vijfde DIV specificatie toegevoegd. 110

7 PNG transparantie De PNG standaard ondersteunt transparantie, maar Internet Explorer slechts gedeeltelijk PNG is een afkorting van Portable Network Graphics en staat voor een formaat plaatje waarin een bitmap opgeslagen kan worden met een compressie algoritme zonder dat de kwaliteit van het plaatje achteruit gaat. Een soortgelijke techniek wordt ook toegepast in JPG en GIF formaat, maar het voordeel van PNG is dat het gebaseerd is op een open standaard en open patent, zodat derde partijen makkelijk het formaat kunnen toepassen en uitbreiden. Binnen een PNG zijn er een aantal zaken mogelijk zoals compressie (via het zlib/gzlib algoritme), kleuren indexatie (waarbij gekozen kan worden tussen grijstinten (greyscale) of volledige kleuren, en verschillende bitdiepten) en transparantie. Bij transparantie kunnen de verschillende pixels die worden beschreven in de kleurenindex zowel volledig transparant of non-transparant zijn, maar ook gedeeltelijk transparant (wat ook wel alpha-transparantie wordt genoemd). Volledige transparantie (zoals vergelijkbaar met transparantie binnen GIFs) wordt momenteel ondersteund door alle gangbare transparanties, terwijl alpha-transparantie wordt ondersteund door vrijwel all browsers met uitzondering van Microsoft Internet Explorer. Voor IE 5 en hoger is er echter wel een zogenaamde IE hacks beschikbaar gebaseerd op CSS manipulatie via JavaScript, waarbij DirectX support binnen de browser wordt misbruikt om de PNG transparantie als nog correct te vertalen. Met Internet Explorer 7 zou alpha-transparantie volledig worden ondersteund, ware het niet dat problemen in de PNG indexatie (gamma-indexatie en kleurcorrecties) als nog voor problemen zorgen. Animatie zoals dat inherent is aan bijvoorbeeld het GIF formaat, is niet aanwezig binnen de PNG standaard zelf, maar binnen een parallelle standaard met de naam MNG. 114

8 Parameter voorbeeld (3): PHP logica <?php if( $this->get( 'resolution' ) == 800 ) { $container_id = container800 ; else { $container_id = container1024 ;?>... <div id= <?php echo $container_id?> > Afhankelijk van de keuze van de Joomla! beheerder krijgt de website een <div> die 800 pixels ofwel 1024 pixels breed is. Zo een <div> wordt vaak de container genoemd, en de breedte is natuurlijk in CSS te bepalen. Per breedte wordt er daarom een aparte container definitie aangeroepen ieder met een eigen CSS ID. Binnen de PHP logica moet alleen een match gemaakt worden tussen de uitgelezen parameter en de CSS ID. Binnen CSS kunnen bijvoorbeeld de volgende definities opgenomen zijn: div#container800 { width: 700px ; min-height: 500px ; div#container1024 { width: 900px ; min-height: 700px; De daadwerkelijke breedte en hoogte van de container zijn in bovenstaand voorbeeld bewust kleiner gemaakt dan de breedte en hoogte van het scherm, om rekening te houden met eventuele borders en paddings van de webpagina zelf maar ook de randen van de webbrowser. 133

9 Voorbeeld: com_content Verantwoordelijk voor artikel weergave Meerdere views (blog layout, frontpage) Volledig herschreven en voorbereid op nieuwe Joomla 1.5 templating mogelijkheden 147 Als voorbeeld wordt het standaard Joomla! component com_content genomen. Dit component is verantwoordelijk voor het belangrijkste onderdeel van Joomla!: Het tonen van artikelen binnen de webpagina. Het is tergelijkertijd de showcase voor de functionaliteit van component templating. In de directory components/com_content/views zijn verschillende views aangemaakt waarmee artikelen getoond kunnen worden: De view article laat een volledig artikel zien met alle parameters zoals die in de Joomla! Administrator in te stellen zijn. De views section en category laten alle artikelen (inclusief previews met Lees meer links) binnen respectievelijk een sectie of een categorie zien, waarbij er verdere keuze is tussen een standaard-lijst of een zogenaamde blog-layout. De view frontpage laat natuurlijk de voorpagina van Joomla! zien met allerlei artikelen, terwijl archive een lijst van gearchiveerde items laat zien. 147

10 Appendix I: MooTools effects binnen Joomla! 1.5 als met op de titel van de div-box klikt, klapt de div-box zich met een mooi effect uit. JavaScript bestand binnen template Maak een JavaScript bestand "js/slideshow.php" aan binnen de template-directory. <script type="text/javascript"> window.addevent('domready', function() { var textslide1 = new Fx.Slide('slide1'); $('toggle1').addevent('click', function(e){ e = new Event(e); textslide1.toggle(); e.stop(); ); var textslide2 = new Fx.Slide('slide2'); $('toggle2').addevent('click', function(e){ e = new Event(e); textslide2.toggle(); e.stop(); ); ); </script> Initialiseer binnen de template ("index.php") de MooTools libraries. <?php HTML::_('behavior.mootools');?> Joomla! artikel Maak een Joomla! artikel aan met bijvoorbeeld de volgende inhoud. Hiervoor moet ofwel de WYSIWYGeditor uitgeschakeld worden, ofwel de HTML-broncode via de WYSIWYG-editor gewijzigd worden. {jumi [templates/mijn_template/js/slideshow.php] <div class="slide_header"> <a id="toggle1" href="#" name="toggle1">toon slide 1</a> </div> <div id="slide1" class="slide"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent urna. Quisque sed tortor at nulla euismod porta. Proin scelerisque bibendum felis. Vestibulum vel lorem a tortor congue suscipit. Morbi tellus turpis, lobortis vitae, laoreet sit amet, suscipit vel, elit. Fusce et lectus. Nam aliquet eros ut diam. Maecenas magna. Proin aliquet ullamcorper tortor. Aenean ante mauris, semper vel, cursus at, adipiscing eget, urna. Phasellus ligula. Phasellus quis nunc et libero suscipit pulvinar. Maecenas sagittis blandit diam. </div> <div class="slide_header"> <a id="toggle2" href="#" name="toggle2">toon slide 2</a> </div> <div id="slide2" class="slide"> Proin vitae libero nec tellus egestas varius. Maecenas malesuada. Quisque lacinia quam at velit. Pellentesque magna tortor, blandit a, volutpat convallis, dignissim commodo, metus. Donec in sapien ac purus tempor condimentum. Aenean enim nunc, aliquet eget, dictum eget, blandit sed, lacus. Praesent elit elit, iaculis in, fermentum ut, mattis nec, massa. Duis lectus. Suspendisse potenti. Donec vel felis. Curabitur in purus non quam faucibus cursus. Pellentesque eleifend gravida orci. </div> CSS styling Via de CSS-klassen "slide" en "slide_header" is iedere slide vorm te geven. De volgende CSS-code geeft een simpele aanmaak aan iedere slide mee: Joomla! Templates - Appendix I - 2 van 6

11 Appendix II: Joomla! 1.5 template overrides <tr> <td width="70%" valign="top" colspan="2"> <span class="small"> <?php JText::printf( 'Written by', ($this->article->created_by_alias? $this->article->created_by_alias : $this->article->author) );?> </span> </td> </tr> <?php endif;?> De PHP-code bepaald allereerst met een if-endif statement of de naam van de auteur wel of niet getoond moet worden. Dit wordt gedaan door de parameter "show_author" uit te lezen - deze parameter is ofwel ingesteld via de algemene instellingen van het component "com_content", ofwel via de parameters van een individueel artikel, ofwel via de parameters van het gebruikte menu-item. Als de parameter het tonen van de naam heeft uitgeschakeld, of als de naam van de auteur geen waarde heeft, wordt het stuk PHP/HTML binnen de if-endif statement niet getoond. De verandering Verderop in de PHP-code is het volgende stuk code terug te vinden, waarmee de inhoud van het artikel wordt getoond: <tr> <td valign="top" colspan="2"> <?php if (isset ($this->article->toc)) :?> <?php echo $this->article->toc;?> <?php endif;?> <?php echo $this->article->text;?> </td> </tr> Door het code-segment met "show_author" hieronder te zetten, wordt de naam van de auteur onder de tekst van het artikel geplaatst. Waarschuwing Bij het verplaatsen van code-segmenten is het altijd belangrijk om natuurlijk het juiste code-blok in zijn geheel te copieren, terwijl het ook belangrijk is om dat code-blok op de juiste plek neer te zetten, bijvoorbeeld binnen het juiste if-endif blok. <?php if... endif;?> Als de PHP-code binnen het layout-bestand niet meer correct is, dan zal de PHP-parser binnen de webserver een error geven (vaak een PHP Fatal Error). Voorzichtigheid is dus geboden. 5. Voorbeeld: Artikel-sortering op basis van dag (frontpage) De Frontpage Layout van het component "com_content" toont op de voorpagina een lijst van alle artikelen die in de database als "frontpage article" zijn gemarkeerd. Via parameters is in te stellen hoeveel artikelen over de gehele breedte worden getoond ("leading articles"), hoeveel artikelen hierna in een blog-indeling worden getoond en hoeveel artikelen in een lijst met links worden getoond. Stel dat de volgende indeling nodig is: In plaats van een blog-layout moet er alleen een lijst worden getoond van de artikelen, maar deze lijst moet een overzicht van alle dagen tonen, met per dag het aantal artikelen dat op die dag zijn aangemaakt. Via de parameters is in te stellen dat er geen "leading articles" worden getoond en ook geen "intro artikelen". Alle "frontpage articles" worden dan getoond als links. Joomla! Templates - Appendix II - 3 van 7

12 Appendix II: Joomla! 1.5 template overrides functie "print_r()" om uit te vinden wat voor informatie is opgeslagen in die $link-variabele. <?php foreach ($this->links as $link) :?>... <?php print_r( $link );?>... <?php endforeach;?> Door de pagina nu te verversen, kunnen we in de broncode van de browser nu extra informatie vinden over iedere $link-variabele. Na enig zoeken vinden we per $link extra onderdelen zoals "introtext" en "created". Hier gaan we mee aan de slag. De datum toepassen Als eerste de datum. Per $link-variabele kunnen we in onze override $link->created gebruiken om de datum te tonen. Maar deze datum is niet mooi vormgegeven :00:00 Via de volgende code kunnen we dit een wat vriendelijker formaat omzetten: JHTML::_('date', $link->created, JText::_('DATE_FORMAT_LC1')); Dit geeft als resultaat: donderdag, 12 oktober 2006 Nu komt het volgende probleem: We willen niet per artikel de datum tonen, maar juist per dag. Dat betekent dus dat we per dag meerdere artikelen kunnen tonen. De oplossing vereist een beetje programmeurs-logica: Alle artikelen worden op de frontpage gesorteerd op basis van de aanmaakdatum. Als ieder artikel een datum bevat, dan is de eerste stap om simpelweg voor ieder artikel de datum te tonen: <table cellpadding="2" cellspacing="0" border="0"> <?php foreach ($this->links as $link) :?> <?php $item_date = JHTML::_('date', $link->created, JText::_('DATE_FORMAT_LC1'));?> <tr> <th align='left'><?php echo $item_date?></th> </tr> <tr> <td> <a class="blogsection" href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($link->slug, $link->catslug, $link->sectionid));?>"> <?php echo $link->title;?></a> </td> </tr> <?php endforeach;?> </table> De volgende stap is nu om alleen bij het eerste artikel van dag 1 de datum te tonen, maar voor alle andere artikelen van dag 1 juist niet. We maken hierbij gebruik van een nieuwe variabele $current_date. Bij het eerste artikel stellen we deze variabele gelijk aan de datum van dat artikel. Aangezien voor de hierop volgende artikelen van dag 1 de datum hetzelfde is, controleren we of de variabele $current_date verandert. Alleen als dat het geval is dan tonen we opnieuw de datum. <table cellpadding="2" cellspacing="0" border="0"> <?php $current_date = '';?> <?php foreach ($this->links as $link) :?> <?php $item_date = JHTML::_('date', $link->created, JText::_('DATE_FORMAT_LC1')); Joomla! Templates - Appendix II - 5 van 7