SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Downloaden Sie, um offline zu lesen
DESIGN	
  +	
  DIPLOMATIE	
  
                            Wir	
  pflegen	
  gute	
  Beziehungen.	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  




              Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  ;-­‐)
                                                             	
  
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	
  
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	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  




                                TemplaVoila?	
  FCE?	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

TemplaVoila?	
  
                             • Alterna]ver	
  Template-­‐Mechnismus	
  
                             • Templates	
  können	
  in	
  der	
  Regel	
  ohne	
  Anpassung	
  integriert	
  
                               werden	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

TemplaVoila?	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

FCE?	
  

                             • Flexible	
  Content	
  Element	
  
                             • Wird	
  in	
  der	
  Regel	
  verwendet	
  für	
  
                               • mehrspal]ge	
  Container	
  
                               • besondere	
  Inhaltselemente	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

FCE?	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

FCE?	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  




                    Inhaltselemente	
  „advanced“
                                                	
  
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	
  
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	
  

                             }	
  
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>	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

Inhaltselemente	
  „advanced“	
  
                             	
  
                             Möglichkeiten	
  mit	
  Standard-­‐Elementen	
  -­‐	
  
                             Layout	
  
                             	
  
                             • über	
  TS	
  unterscheidbar	
  und	
  Output	
  entsprechend	
  
                                  steuerbar	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

Inhaltselemente	
  „advanced“	
  
                             	
  
                             Möglichkeiten	
  mit	
  Standard-­‐Elementen	
  -­‐	
  
                             Layout	
  
                             	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  




        Backend-­‐Layouts	
  mit	
  FLUIDTEMPLATE	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

Backend-­‐Layouts	
  mit	
  FLUIDTEMPLATE	
  
                             	
  
                             • Backend-­‐Layout	
  über	
  den	
  „Grid	
  wizard“	
  anlegen	
  
                                    (im	
  System-­‐Ordner	
  „Allgemeine	
  Datensatzsammlung“)	
  
                             	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

Backend-­‐Layouts	
  mit	
  FLUIDTEMPLATE	
  
                             	
  
                             • Neues	
  Backend-­‐Layout	
  in	
  den	
  Seiteneigenschanen	
  
                                  über	
  den	
  Reiter	
  „Erscheinungsbild“	
  auswählen	
  
                             	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

Backend-­‐Layouts	
  mit	
  FLUIDTEMPLATE	
  
                             	
  
                             • Ansicht	
  im	
  Backend	
  entspricht	
  dem	
  ausgewählten	
  
                                  Backend-­‐Layout	
  
                             	
  
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	
  
               	
  }	
  
 }	
  
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	
  
            	
  }	
  
 }	
  
 	
  
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>	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  




               MehrspalQge	
  Struktur-­‐Elemente	
  
                    mit	
  „gridelements“   	
  
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	
  
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	
  
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>	
  
         	
  }	
  
 }	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  




                             FCE	
  mit	
  extbase/fluid	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

FCE	
  mit	
  extbase/fluid	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

FCE	
  mit	
  extbase/fluid	
  
                             EXT:extension_builder	
  installieren	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

FCE	
  mit	
  extbase/fluid	
  

• Domain	
  Modelling	
  wählen	
  
• Extension-­‐Infos	
  angeben	
  
• Personen-­‐Daten	
  angeben	
  
• Speichern	
  
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/	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

FCE	
  mit	
  extbase/fluid	
  
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	
  
);	
  

?>	
  
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);	
  
              	
  }	
  
}	
  
?>	
  
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>	
  
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)	
  
}	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  

FCE	
  mit	
  extbase/fluid	
  
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	
  
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	
  
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">	
  
Der	
  Weg	
  weg	
  von	
  TemplaVoila	
  -­‐	
  #t3cs12	
  




                Danke	
  für	
  die	
  Aufmerksamkeit!
                                                     	
  
                                 Fragen?   	
  
Danke	
  für	
  die	
  
Aufmerksamkeit!	
  Fragen?	
  

Weitere ähnliche Inhalte

Andere mochten auch

Managing expectations can we really call on our big blue brother- busch
Managing expectations  can we really call on our big blue brother- buschManaging expectations  can we really call on our big blue brother- busch
Managing expectations can we really call on our big blue brother- busch
Leishman Associates
 
Linked Data Techniques for MOF compliant Models
Linked Data Techniques for MOF compliant ModelsLinked Data Techniques for MOF compliant Models
Linked Data Techniques for MOF compliant Models
Gerd Groener
 
Example of-child-protection-policy-for-voluntary-organisations
Example of-child-protection-policy-for-voluntary-organisationsExample of-child-protection-policy-for-voluntary-organisations
Example of-child-protection-policy-for-voluntary-organisations
Marivic Aloc
 
Uranium mining and milling in namibia swiegers
Uranium mining and milling in namibia  swiegersUranium mining and milling in namibia  swiegers
Uranium mining and milling in namibia swiegers
Leishman Associates
 
【Maclean liu技术分享】拨开oracle cbo优化器迷雾,探究histogram直方图之秘 0321
【Maclean liu技术分享】拨开oracle cbo优化器迷雾,探究histogram直方图之秘 0321【Maclean liu技术分享】拨开oracle cbo优化器迷雾,探究histogram直方图之秘 0321
【Maclean liu技术分享】拨开oracle cbo优化器迷雾,探究histogram直方图之秘 0321
maclean liu
 
Gebruiksaanwijzing platformweegschaal
Gebruiksaanwijzing platformweegschaalGebruiksaanwijzing platformweegschaal
Gebruiksaanwijzing platformweegschaal
laurenztack
 
Forward Progress Energy Field
Forward Progress Energy FieldForward Progress Energy Field
Forward Progress Energy Field
Mario Pinardo
 
Parnassus data技术白皮书v0.1
Parnassus data技术白皮书v0.1Parnassus data技术白皮书v0.1
Parnassus data技术白皮书v0.1
maclean liu
 

Andere mochten auch (20)

Managing expectations can we really call on our big blue brother- busch
Managing expectations  can we really call on our big blue brother- buschManaging expectations  can we really call on our big blue brother- busch
Managing expectations can we really call on our big blue brother- busch
 
20110419 JAWSUG Fukuoka
20110419 JAWSUG Fukuoka20110419 JAWSUG Fukuoka
20110419 JAWSUG Fukuoka
 
Devon house
Devon houseDevon house
Devon house
 
Parnassus data recovery manager for oracle database user guide v0.3
Parnassus data recovery manager for oracle database user guide v0.3Parnassus data recovery manager for oracle database user guide v0.3
Parnassus data recovery manager for oracle database user guide v0.3
 
New Zealand Franchising Confidence Index | July 2014
New Zealand Franchising Confidence Index | July 2014New Zealand Franchising Confidence Index | July 2014
New Zealand Franchising Confidence Index | July 2014
 
诗檀软件 Oracle开发优化基础
诗檀软件 Oracle开发优化基础 诗檀软件 Oracle开发优化基础
诗檀软件 Oracle开发优化基础
 
Linked Data Techniques for MOF compliant Models
Linked Data Techniques for MOF compliant ModelsLinked Data Techniques for MOF compliant Models
Linked Data Techniques for MOF compliant Models
 
Example of-child-protection-policy-for-voluntary-organisations
Example of-child-protection-policy-for-voluntary-organisationsExample of-child-protection-policy-for-voluntary-organisations
Example of-child-protection-policy-for-voluntary-organisations
 
Meet harry
Meet harryMeet harry
Meet harry
 
____yy_a_life_that_matters
  ____yy_a_life_that_matters  ____yy_a_life_that_matters
____yy_a_life_that_matters
 
Uranium mining and milling in namibia swiegers
Uranium mining and milling in namibia  swiegersUranium mining and milling in namibia  swiegers
Uranium mining and milling in namibia swiegers
 
Surf oral
Surf oralSurf oral
Surf oral
 
Miten toteutan informaation visualisoinnin?
Miten toteutan informaation visualisoinnin?Miten toteutan informaation visualisoinnin?
Miten toteutan informaation visualisoinnin?
 
【Maclean liu技术分享】拨开oracle cbo优化器迷雾,探究histogram直方图之秘 0321
【Maclean liu技术分享】拨开oracle cbo优化器迷雾,探究histogram直方图之秘 0321【Maclean liu技术分享】拨开oracle cbo优化器迷雾,探究histogram直方图之秘 0321
【Maclean liu技术分享】拨开oracle cbo优化器迷雾,探究histogram直方图之秘 0321
 
Gebruiksaanwijzing platformweegschaal
Gebruiksaanwijzing platformweegschaalGebruiksaanwijzing platformweegschaal
Gebruiksaanwijzing platformweegschaal
 
Installatie
InstallatieInstallatie
Installatie
 
Finding AHS Centaur- mearns
Finding AHS Centaur- mearnsFinding AHS Centaur- mearns
Finding AHS Centaur- mearns
 
Forward Progress Energy Field
Forward Progress Energy FieldForward Progress Energy Field
Forward Progress Energy Field
 
Parnassus data技术白皮书v0.1
Parnassus data技术白皮书v0.1Parnassus data技术白皮书v0.1
Parnassus data技术白皮书v0.1
 
the web is open: technologies, data, people
the web is open: technologies, data, peoplethe web is open: technologies, data, people
the web is open: technologies, data, people
 

Der Weg weg von TemplaVoila

  • 1. DESIGN  +  DIPLOMATIE   Wir  pflegen  gute  Beziehungen.  
  • 2. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Der  Weg  weg  von  TemplaVoila  ;-­‐)  
  • 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. 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. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   TemplaVoila?  FCE?  
  • 6. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   TemplaVoila?   • Alterna]ver  Template-­‐Mechnismus   • Templates  können  in  der  Regel  ohne  Anpassung  integriert   werden  
  • 7. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   TemplaVoila?  
  • 8. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE?   • Flexible  Content  Element   • Wird  in  der  Regel  verwendet  für   • mehrspal]ge  Container   • besondere  Inhaltselemente  
  • 9. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE?  
  • 10. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE?  
  • 11. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Inhaltselemente  „advanced“  
  • 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. 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. 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. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Inhaltselemente  „advanced“     Möglichkeiten  mit  Standard-­‐Elementen  -­‐   Layout     • über  TS  unterscheidbar  und  Output  entsprechend   steuerbar  
  • 16. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Inhaltselemente  „advanced“     Möglichkeiten  mit  Standard-­‐Elementen  -­‐   Layout    
  • 17. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Backend-­‐Layouts  mit  FLUIDTEMPLATE  
  • 18. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Backend-­‐Layout  über  den  „Grid  wizard“  anlegen   (im  System-­‐Ordner  „Allgemeine  Datensatzsammlung“)    
  • 19. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Neues  Backend-­‐Layout  in  den  Seiteneigenschanen   über  den  Reiter  „Erscheinungsbild“  auswählen    
  • 20. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Backend-­‐Layouts  mit  FLUIDTEMPLATE     • Ansicht  im  Backend  entspricht  dem  ausgewählten   Backend-­‐Layout    
  • 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. 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. 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. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   MehrspalQge  Struktur-­‐Elemente   mit  „gridelements“  
  • 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. 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. 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. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE  mit  extbase/fluid  
  • 29. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE  mit  extbase/fluid  
  • 30. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE  mit  extbase/fluid   EXT:extension_builder  installieren  
  • 31. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE  mit  extbase/fluid   • Domain  Modelling  wählen   • Extension-­‐Infos  angeben   • Personen-­‐Daten  angeben   • Speichern  
  • 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. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE  mit  extbase/fluid  
  • 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. 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. 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. 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. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   FCE  mit  extbase/fluid  
  • 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. 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. 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. Der  Weg  weg  von  TemplaVoila  -­‐  #t3cs12   Danke  für  die  Aufmerksamkeit!   Fragen?  
  • 43. Danke  für  die   Aufmerksamkeit!  Fragen?