Der Weg weg von TemplaVoila

17,599 views
17,345 views

Published on

Kurze Einführung zu Templating in TYPO3. BackendLayouts mit FLUIDTEMPLATE, Mehrspalten-Container mit der Extension gridelements und flexible Inhaltselemente (FCE) mit extbase/fluid.

Published in: Technology, Business
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
17,599
On SlideShare
0
From Embeds
0
Number of Embeds
907
Actions
Shares
0
Downloads
125
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Der Weg weg von TemplaVoila

  1. 1. DESIGN  +  DIPLOMATIE   Wir  pflegen  gute  Beziehungen.  
  2. 2. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Der  Weg  weg  von  TemplaVoila  ;-­‐)  
  3. 3. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Wer  bin  ich?   • Tobias  Liegl   • TwiCer:  @chapi   • arbeitet  bei  JANDA+ROSCHER  in  Regensburg   • www.janda-­‐roscher.de   • schreibt  auf  typo3blogger.de  
  4. 4. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Session-­‐Überblick   • TemplaVoila?  FCE?   • Inhaltselemente  „advanced“   • Backend-­‐Layouts  mit  FLUIDTEMPLATE   • Mehrspal]ge  Struktur-­‐Elemente  mit  „gridelements“   • FCE  mit  extbase/fluid  
  5. 5. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   TemplaVoila?  FCE?  
  6. 6. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  TemplaVoila?   • Alterna]ver  Template-­‐Mechnismus   • Templates  können  in  der  Regel  ohne  Anpassung  integriert   werden  
  7. 7. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  TemplaVoila?  
  8. 8. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE?   • Flexible  Content  Element   • Wird  in  der  Regel  verwendet  für   • mehrspal]ge  Container   • besondere  Inhaltselemente  
  9. 9. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE?  
  10. 10. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE?  
  11. 11. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Inhaltselemente  „advanced“  
  12. 12. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Inhaltselemente  „advanced“     Möglichkeiten  mit  Standard-­‐Elementen     • Einrückung  und  Rahmen   • über  TS  konfigurierbar   • z.  B.  zus.  DIV  um  bestehenden  HTML-­‐Code  
  13. 13. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Inhaltselemente  „advanced“     Möglichkeiten  mit  Standard-­‐Elementen  -­‐   Einrückung  und  Rahmen     #  Im  PageTS   TCEFORM.tt_content.section_frame  {    addItems.2  =  Produkt-­‐Element  (Bilder  mit  Rahmen)    addItems.3  =  Teaser-­‐Box  gelb  (Startseite)    addItems.10  =  Teaser-­‐Box  blau  (Startseite)        #  remove  additional  options    removeItems  =  1,  4,  5,  6  ,  11,  12,  20,  21   }  
  14. 14. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Inhaltselemente  „advanced“     Möglichkeiten  mit  Standard-­‐Elementen  -­‐   Einrückung  und  Rahmen     #  Im  TS-­‐Setup   C_content.stdWrap.innerWrap.cObject.2  =  TEXT   C_content.stdWrap.innerWrap.cObject.2.value  =  <div  class="productBox">|</div>   C_content.stdWrap.innerWrap.cObject.3  =  TEXT   C_content.stdWrap.innerWrap.cObject.3.value  =  <div  class="teaserBox">|</div>   C_content.stdWrap.innerWrap.cObject.10  =  TEXT   C_content.stdWrap.innerWrap.cObject.10.value  =  <div  class="teaserBoxAlt">|</div>  
  15. 15. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Inhaltselemente  „advanced“     Möglichkeiten  mit  Standard-­‐Elementen  -­‐   Layout     • über  TS  unterscheidbar  und  Output  entsprechend   steuerbar  
  16. 16. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Inhaltselemente  „advanced“     Möglichkeiten  mit  Standard-­‐Elementen  -­‐   Layout    
  17. 17. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Backend-­‐Layouts  mit  FLUIDTEMPLATE  
  18. 18. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Backend-­‐Layout  über  den  „Grid  wizard“  anlegen   (im  System-­‐Ordner  „Allgemeine  Datensatzsammlung“)    
  19. 19. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Neues  Backend-­‐Layout  in  den  Seiteneigenschanen   über  den  Reiter  „Erscheinungsbild“  auswählen    
  20. 20. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Ansicht  im  Backend  entspricht  dem  ausgewählten   Backend-­‐Layout    
  21. 21. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Verknüpfung  mit  dem  Frontend   page  =  PAGE   page.10  =  FLUIDTEMPLATE   page.10  {    file.stdWrap.cObject  =  CASE    file.stdWrap.cObject  {      #  slide  the  template      key.data  =  levelfield:-­‐1,  backend_layout_next_level,  slide      key.override.field  =  backend_layout      #  default  template  file      default  =  TEXT      default.value  =  fileadmin/templates/index.html      #  template  file  for  backend-­‐layout  with  ID  2      2  =  TEXT      2.value  =  fileadmin/templates/subpage.html    }   }  
  22. 22. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Inhalte  für  das  Template  vorbereiten   lib.field_header  <  styles.content.get   lib.field_header.select.where  =  colPos  =  2       page.10  {    variables  {      content  <  styles.content.get    }   }    
  23. 23. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Die  Template-­‐Datei       <div  id="header">    <f:cObject  typoscriptObjectPath="lib.field_header"  />   </div>   <div  id="content">    {content  -­‐>  f:format.raw()}   </div>  
  24. 24. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   MehrspalQge  Struktur-­‐Elemente   mit  „gridelements“  
  25. 25. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  MehrspalQge  Struktur-­‐Elemente  mit  „gridelements“     • Extension  von  Jo  Hasenau   • Im  TER  erhältlich   • Alterna]ve  zur  Extension  mul]column   • Gute  Zusatzfeatures  von  gridelements   • Drag&Drop  für  das  Backend   • Drag-­‐In  Wizard  für  Inhaltselemente   • „Elemente  verknüpfen“  ähnlich  wie  bei  TemplaVoila  
  26. 26. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  MehrspalQge  Struktur-­‐Elemente  mit  „gridelements“     • Mehrspal]ge  Raster-­‐Elemente   • Erstellung  funk]oniert  analog  zu  Backend-­‐Layouts   • Mitgeliefertes  sta]sches  Template  einbinden  
  27. 27. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  MehrspalQge  Struktur-­‐Elemente  mit  „gridelements“     • Ausgabesteuerung  nur  per  TS  –  kein  HTML-­‐Template  nö]g   tt_content.gridelements_pi1.20.10.setup  {    #  ID  of  gridelement    1  <  temp.gridelements.defaultGridSetup    1  {      columns  {        #  colPos  ID        11  <  .default        11.wrap  =  <div  class="firstcol">|</div>        #  colPos  ID        12  <  .default        12.wrap  =  <div  class="secondcol">|</div>      }      wrap  =  <div  class="element2cols">|</div>    }   }  
  28. 28. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE  mit  extbase/fluid  
  29. 29. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  
  30. 30. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid   EXT:extension_builder  installieren  
  31. 31. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  • Domain  Modelling  wählen  • Extension-­‐Infos  angeben  • Personen-­‐Daten  angeben  • Speichern  
  32. 32. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  -­‐  /ext_tables.php    //  Fügt  Element  im  Backend  hinzu  //  Titel,  tt_content  Eintrag,  Content  Type  (kein  Plugin)  t3lib_extMgm::addPlugin(array(Ansprechpartner,  contentelements_contactbox),  CType);  //  Felder  konfigurieren  $TCA[tt_content][types][contentelements_contactbox][showitem]  =  CType;;4;button;1-­‐1-­‐1,  header,  bodytext;;9;richtext:rte_transform[flag=rte_enabled|mode=ts_css];,  image,      -­‐-­‐div-­‐-­‐;LLL:EXT:cms/locallang_tca.xml:pages.tabs.access,  starttime,  endtime,  fe_group;      Dokumenta]on  hCp://typo3.org/documenta]on/document-­‐library/core-­‐documenta]on/doc_core_tca/current/  
  33. 33. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  
  34. 34. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  -­‐  /ext_localconf.php  <?php  if  (!defined  (TYPO3_MODE))  {    die  (Access  denied.);  }  Tx_Extbase_Utility_Extension::configurePlugin  (    //  unique  plugin  name    $_EXTKEY,    ContentRenderer,    //  accessible  controller-­‐action-­‐combinations    array  (  Elements  =>  contactbox  ),    //  non-­‐cachable  controller-­‐action-­‐combinations  (they  must  already  be  enabled)    array  (  Elements  =>    )  );  t3lib_extMgm::addTypoScript($_EXTKEY,setup,          [GLOBAL]  tt_content.contentelements_contactbox  <  tt_content.list.20.contentelements_contentrenderer  tt_content.contentelements_contactbox.switchableControllerActions.Elements.1  =  contactbox,          true  );  ?>  
  35. 35. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  -­‐  /Classes/Controller/ElementsController.php  <?php  /**    *  Elements  Controller    */  class  Tx_Contentelements_Controller_ElementsController  extends  Tx_Extbase_MVC_Controller_ActionController  {    /**      *  Displays  the  element      *      *  @return  string  The  rendered  view      */    public  function  contactboxAction()  {        //  get  data  of  the  content  object      $data  =  $this-­‐>request-­‐>getContentObjectData();        //  assign  the  data  to  the  fluid  template      $this-­‐>view-­‐>assign(data,  $data);    }  }  ?>  
  36. 36. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  -­‐  /Resources/Private/Templates/Elements/Contactbox.html      <div  class="contactbox">    <h4>{data.header}</h4>        <f:if  condition="{data.image}">      <f:image  src="uploads/pics/{data.image}"  alt=""  width="76"  />    </f:if>        <f:format.html>{data.bodytext}</f:format.html>  </div>  
  37. 37. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  –  Page  TS    #  render  content  element  selec]on  in  tabs  mod.wizards.newContentElement.renderMode  =  tabs  mod.wizards.newContentElement.wizardItems.common  {    elements.contentelements_contactbox  {      icon  =  gfx/c_wiz/user_defined.gif      ]tle  =  Ansprechpartner      descrip]on  =  Ansprechpartner  mit  Bild      C_content_defValues  {        CType  =  contentelements_contactbox      }    }    show  :=  addToList(contentelements_contactbox)  }  
  38. 38. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  
  39. 39. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid   • Um  ein  zusätzliches  Element  hinzuzufügen  nur  noch:   • ext_tables.php  anpassen   • Methode  im  Controller  duplizieren   • Template  anlegen   • ext_localconf.php  anpassen   • PageTS  anpassen  
  40. 40. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid   • Vorteile   • geht  rela]v  schnell   • Kontrolle  über  HTML-­‐Code   • Templates  mit  Fluid   • Inhaltselement  einfach  auswählbar   • Typ  des  Inhaltselements  einfach  zu  wechseln  
  41. 41. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12  FCE  mit  extbase/fluid  –  Felder  reichen  nicht  aus?  Flexform!       /ext_tables.php  um  FlexForm  erweitern   $TCA[tt_content][columns][pi_flexform][config][ds] [,contentelements_contactbox]  =  FILE:EXT:‘.$_EXTKEY./Configuration/FlexForms/ flexform_contactbox.xml;       /ConfiguraQon/FlexForms/flexform_contactbox.xml   Variablen  im  Flexform  mit  „sevngs.“  bezeichnen   wg.  einfacher  Verwendung  in  Fluid  Templates   <settings.products  type="array“>   Template  anpassen   Variablen  im  Flexform  mit  „sevngs.“  können  in  Fluid  Templates   direkt  wieder  mit  „sevngs.“  abgegriffen  werden   <f:for  each="{settings.products}"  as="productContainer">  
  42. 42. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Danke  für  die  Aufmerksamkeit!   Fragen?  
  43. 43. Danke  für  die  Aufmerksamkeit!  Fragen?  

×