News
Keine Nachrichten in dieser Ansicht.
Advertisement
Flexible Content Element | Diskussion
Letzte Änderung: 31.05.2009 11:50 (CID: 258) von aNj aNj
Optionen
Flexible Content Element
| Inhaltsverzeichnis |
1 Flexible Content Element
1.1 Was sind Flexible Content Elements?
Flexible Content Elements, FCE (Flexible Inhaltselemente) sind dazu da eigene Inhaltselemente in Typo3 zu erstellen. Diese können mit Benutzerdefinierter Datenverarbeitung sowie Darstellungsverarbeitung nach dem TemplaVoila-Prinzip erstellt werden. Der Hauptgrund für FCEs ist die häufige Verwendung von gleichen Inhaltselementen wie z.B. eine "Firmenreferenz" oder ein "Kontakt".
Das "neue" Prinzip Inhaltselemente zu erstellen, erleichtert nicht nur die Arbeit für den Entwickler, der ein neues Inhaltselement "zusammen klicken" kann, sondern bietet dem Redakteur ebenfalls Vorteile durch die vordefinierten Felder im Backend. Diese Felder können wiederum mit verschiedenen Validierungen oder einer speziellen Verarbeitung des angegebenen Wertes mittels TypoScript realisiert werden. Für den Redakteur ergeben sich Vorteile bei der Eingabe, da sich FCEs visuell und funktional in die Typo3 Oberfläche integrieren. Durch die vorgegebenen Eingabefelder entstehen automatisch weniger Spielräume für Redakteure, wodurch ebenfalls die Corporate Identity der Firmenpräsenz gewahrt wird. Ein weiterer Vorteil ist die geringere Vorkenntnis der richtigen Formatierung. Im Gegensatz zu einem gewöhnlichen Text-Element, wo man meist alle Spielräume der Formatierungen zur Verfügung hat, zwingt ein FCE die Darstellung allein durch die Vorgabendefinition im FCE.
1.2 Hello World FCE
2 Beispiele
2.1 Bild verwenden
Wenn das eingefügte Bild auf eine bestimmte Größe skaliert und beim Anklicken die Originalgröße angezeigt werden soll, muss man den folgenden Code zusätzlich in das DataStructure einfügen. Nach dem Einfügen passen Sie noch die Breite (width) und die Höhe (height) für die Darstellung an.
2.1.1 CODE
10.imageLinkWrap = 1
10.imageLinkWrap {
bodyTag = <body style="background-color:#fff;">
wrap = <a href="javascript:close();"> | </a>
width = 800m
height = 600m
effects=
JSwindow = 1
JSwindows.newWindow = 0
JSwindows.newWindow.expand = 17,20
enable = 1
typolink.parameter.field=image_link
typolink.extTarget = _blank
}
2.2 Zugriff auf Felder innerhalb einer Data Structure
Der Zugriff innerhalb der Data Structure (DS) ist recht einfach in TemplaVoila. Die Felder können direkt mit ihrem Namen mittels TypoScript angesprochen werden.
2.2.1 CODE
<TypoScript>
<![CDATA[
10 = TEXT
10.field = field_meinFeldName
]]>
</TypoScript>
Möchte man aus selbstgebauten Feldern die Inhalte für das Zusammenbauen eines
Links nutzen so kann man auch folgenden Code verwenden.
Zunächst wird ein Bild erzeugt, welches mit einem Typolink versehen wird.
Das besondere daran ist das mittels {field:field_meinFeld} auf das
gewünschte Feld zugegriffen werden kann. Damit diese Felder auch von Typoscript mit den
Inhalten gefüllt werden muss man unbedingt typolink.parameter.insertData = 1
setzen.
2.2.2 CODE
20 = IMAGE
20{
file = fileadmin/meinBild.jpg
imageLinkWrap = 1
imageLinkWrap {
enable = 1
typolink{
title = Blinklist
parameter = http://ziel.de/go.php&Url={field:field_url}
parameter.insertData = 1
wrap = <li> | </li>
}
}
}
2.3 If Abfrage
Die if-Abfrage in TemplaVoila ist über ein "Workaround" möglich. Folgendes Beispiel zeigt wie man ein Standardbild setzen kann, wenn kein Bild in TV gesetzt wurde. Man setzt zuerst ein Objekt mit einem Standardbild. Wenn also in "current" keine Infomation ankommt, wird dieses Objekt (5) weiterhin bestehen bleiben und das eigentliche 10er Objekt bleibt leer.
2.3.1 CODE
5 = IMAGE
5.file = uploads/tx_templavoila/defaultpicture.gif
5.file.maxW = 100
5.file.maxH = 100
5.if.value.current = 1
5.if.equals =
10 = IMAGE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.file.maxW = 100
10.file.maxH = 100
2.4 Select Anweisung innerhalb einer FCE
Wenn man ein Typolink Feld in TemplaVoila erstellt, kann es standardmäßig nur auf Seiten oder Seiteninhalte verlinkt werden. Folgendes Beispiel zeigt wie man ein in TemplaVoila erstelltes Feld dazu bringen kann eine bestimmte Auswahl darzustellen. In diesem Beispiel wird die Auswahl auf die Frontendbenutzer gesetzt, die sich in einem Ordner mit der PID 1 befinden (pidInList = PID des Ordners). Die Selektion liefert die eindeutige ID des Benutzers. Diese ID wird im Zusammenspiel mit der Erweiterung tx_newloginbox_pi3 dazu genutz, einen Link auf die Visitenkarte des Benutzers zu setzen.
2.4.1 CODE der Data Structure
<field_linktoauthor type="array">
<tx_templavoila type="array">
<title>Author</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>input</eType>
<TypoScript><![CDATA[
temp.name = CONTENT
temp.name{
table = fe_users
select {
#ID des Benutzerordners
pidInList = 1
orderBy = name
andWhere.current = 1
andWhere.wrap = uid=|
}
renderObj=COA
renderObj{
10=TEXT
10.field=name
}
#11 = pid der Teamliste
stdWrap.typolink.parameter = 11
stdWrap.typolink.additionalParams.current = 1
stdWrap.typolink.additionalParams.wrap=&tx_newloginbox_pi3[showUid]=|
}
10 < temp.name]]></TypoScript>
<proc type="array">
<HSC type="integer">0</HSC>
</proc>
</tx_templavoila>
<TCEforms type="array">
<config type="array">
<type>group</type>
<internal_type>db</internal_type>
<allowed>fe_users</allowed>
<size>1</size>
<maxitems>1</maxitems>
<minitems>0</minitems>
</config>
<label>Author</label>
</TCEforms>
</field_linktoauthor>
2.5 GIFBuilder
Mit diesem Beispiel lässt sich mit Hilfe des GIFBUILDERS der übergebene Text in ein Bild verwandeln. Durch die Angabe von "value.current = 1" landet der Wert im 10er Objekt und wird dort mit der Schriftart DAX-BOLD.TTF gerendert.
2.5.1 CODE
10 = IMAGE
10.file = GIFBUILDER
10.file {
XY = 165, 17
backColor = #162F69
10 = TEXT
10 {
value.current = 1
fontColor = #FFFFFF
fontFile = fileadmin/fonts/DAX-BOLD.TTF
fontSize = 13
niceText = 1
offset = 14, 13
}
}
3 FCEs und eigene Extension
3.1 Werte Übergeben
Wenn man mit TemplaVoila ein FCE baut, welches mit der eigenen Erweiterung zusammen arbeiten soll, muss man es über das Content Objekt stdWrap verarbeiten. Im folgenden Beispiel wird kurz diese Möglichkeit besprochen. Der in der DataStructure angegebene Wert wird in der Variable $Var in der eigenen Erweiterung zur Verfügung stehen.
3.1.1 CODE Erweiterung
$Var = $this->cObj->stdWrap ( $this->conf['Konf.']["unterKonf"],
$this->conf[H1.']["S2."]);
3.1.2 CODE Data Structure
10 < plugin.tx_meineErweiterung_pi1
10{
Konf{
unterKonf.current = 1
}
}
3.2 Globale Überschriften verwenden
Wenn man in einem Flexiblen Content Elementen ein FELD als INPUT definiert, und dessen Wert im gleichen Format wie die Standardüberschrift zeigen möchte, muss man ledeglich das Content Objekt lib.stdheader zuweisen.
Man kann einmalig im Roottemplate
die Überschriften festsetzen und in dem FCE weist man dem oben definiertem INPUT FELD eine überschrift zu:
lib.stdheader.10.1 steht für den HTML TAG H1 lib.stdheader.10.2 steht für den HTML TAG H2 usw.
3.2.1 CODE
<field_headline type="array">
<tx_templavoila type="array">
<title>Headline</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>input</eType>
<TypoScript>
<![CDATA[
10 < lib.stdheader.10.1
]]>
</TypoScript>
<proc type="array">
<HSC type="integer">0</HSC>
</proc>
</tx_templavoila>
<TCEforms type="array">
<config type="array">
<type>input</type>
<size>48</size>
<eval>trim</eval>
</config>
<label>Headline</label>
</TCEforms>
</field_headline>
3.3 Elternteil / Elternseite (Parent) mittels DS ansprechen
Seit der Version 1.0.1 von TemplaVoila ist es auch möglich das Elternteil (Parent) innerhalb einer Datastructure mit TypoScript anzusprechen.
Ein Einfaches Beispiel eines Zugriffs mittels des Registers: register:tx_templavoila_pi1.parentRec.uid
3.3.1 CODE
<TypoScript><![CDATA[
10 = TEXT
10.data = register:tx_templavoila_pi1.parentRec.uid
10.wrap = das "uid" Feld des Elternteils ist: |
]]></TypoScript>
Das nächste Beispiel nutzt den "parentRec" um den Titel der Elternseite einzulesen. Mit einem Datenbank Select auf die pages Tabelle und dem Register register:tx_templavoila_pi1.parentRec.pid, wird das Titel element geholt und der Wert anschließend mit den H1 Tags gewrappt.
3.3.2 CODE
<TypoScript><![CDATA[
5 = CONTENT
5{
table = pages
select{
andWhere {
data = register:tx_templavoila_pi1.parentRec.pid
wrap = uid=|
}
}
renderObj = COA
renderObj {
10 = TEXT
10.wrap = <h1>|</h1>
10.field = title
}
}
]]></TypoScript>
3.4 Wrap nur wenn ein Wert angegeben wurde
Im nächsten Beispiel wird um das FCE Feld "field_tel", daß für eine Telefonnummer genutzt wird, ein wrap gelegt. Der Wrap soll nur ausgegeben werden, wenn eine Telefonnummer im Backend angegeben wurde.
3.4.1 CODE
<field_tel type="array">
<tx_templavoila type="array">
<title>Telefon</title>
<sample_data type="array">
<numIndex index="0"></numIndex>
</sample_data>
<eType>input</eType>
<TypoScript>
10 = TEXT
10.current = 1
10.wrap = Tel.|
10.if {
isTrue.field = field_tel
}
</TypoScript>
<proc type="array">
<HSC type="integer">1</HSC>
</proc>
</tx_templavoila>
<TCEforms type="array">
<config type="array">
<type>input</type>
<size>48</size>
<eval>trim</eval>
</config>
<label>Telefon</label>
</TCEforms>
</field_tel>