04. Apr 2014

Flexible Inhalte mit Fluid in TYPO3

Gravatar: Berit Hlubek
Berit HlubekKommentare 0

Letztes Jahr haben wir in unserem Blogeintrag Gridelements professionell nutzen die versionierbare Nutzung der Extension erklärt. Wir nutzen Gridelements überwiegend zur Realisierung verschachtelter Inhaltselemente. Für individuelle Inhalte mit vorgegebenen Eingabemöglichkeiten, zum Beispiel eine Teaser-Box, haben wir auf Basis eines kleinen PHP Helpers eine Fluid-Lösung entwickelt.

Ein großer Vorteil dieses Vorgehens ist die fast ausschließliche Verwendung von TYPO3 Core-Funktionen. Theoretisch wäre auch eine Nutzung des TypoScript Objekts FLUIDTEMPLATE möglich, wodurch der PHP Helper entfallen könnte.

Fluid Renderer

Der Fluid Renderer ist der PHP-Teil und wir haben diesen in Form einer dokumentierten Extension ins TER gestellt: Fluid FCE

Wir haben diesen entwickelt um ein paar erweiterte Funktionen zu nutzen und Flexform-Inhalte auszugeben. Zur Verwendung des Renderers ist ein kleines TypoScript-Snippet erforderlich:

  1. lib.fceRenderer = USER
  2. lib.fceRenderer {
  3. userFunc = Tx_MyExtKey_Content_FceRenderer->render
  4. extbase.pluginName = MyExtKey
  5. flexformFields = pi_flexform
  6. partialRootPath = EXT: my_ext_key/Resources/Private/Partials
  7. layoutRootPath = EXT: my_ext_key/Resources/Private/Layouts
  8. }

TsConfig

  1. mod.wizards.newContentElement.renderMode = tabs
  2. mod.wizards.newContentElement.wizardItems.common {
  3. elements.myextkey_teaserBox {
  4. icon = ../../../../typo3conf/ext/my_ext_key/Resources/Public/Icons/standard-fce.png
  5. title = Teaser Box
  6. description = Box mit Bild, Überschrift, Fließtext und optionalem Link
  7. tt_content_defValues {
  8. CType = myextkey_teaserBox
  9. }
  10. }
  11. show := addToList(myextkey_teaserBox)
  12. }

In diesem Fall wurde das FCE für das Projekt my_ext_key erstellt. Für jedes weitere FCE wird jeweils ein Block startend ab der Zeile elements.myextkey_teaserBox erstellt und innerhalb der letzten Zeile der zugehörige Key mit einem Komma getrennt in die runden Klammern eingefügt.

TypoScript-Definition des Inhalts-Elements

Zu jedem FCE gehört ein kleiner Schnippsel TypoScript, welcher dem Element das Basis-TypoScript für das Rendering über den PHP Helper zuweist und den Pfad des Fluid Templates definiert.

  1. tt_content.myextkey_teaserBox < lib.fceRenderer
  2. tt_content.myextkey_teaserBox {
  3. file = EXT: my_ext_key/Resources/Private/Templates/Elements/TeaserBox.html
  4. }

TCA-Konfiguration

Pro Inhaltselement muss in der ext_tables.php oder einer vergleichbaren Datei die TCA-Konfiguration der benötigen Datenbankfelder hinterlegt werden. Ohne die Nutzung von Flexforms kann das wie folgt aussehen:

  1. # Add backend element
  2. t3lib_extMgm::addPlugin(array('Teaser Box', 'my_ext_key'), 'CType');
  3.  
  4. # Configure fields for teaser box
  5. $TCA['tt_content']['types']['my_ext_key_teaserBox']['showitem'] = '
  6. --palette--;LLL:EXT:cms/locallang_ttc.xml:palette.general;general,
  7. header;LLL:EXT:cms/locallang_ttc.xml:palette.header,
  8. bodytext;;9;richtext:rte_transform[flag=rte_enabled|mode=ts_css];,
  9. image,
  10. header_link,
  11. --div--;LLL:EXT:cms/locallang_ttc.xml:tabs.appearance,
  12. --palette--;LLL:EXT:cms/locallang_ttc.xml:palette.frames;frames,
  13. --div--;LLL:EXT:cms/locallang_ttc.xml:tabs.access,
  14. --palette--;LLL:EXT:cms/locallang_ttc.xml:palette.visibility;visibility,
  15. --palette--;LLL:EXT:cms/locallang_ttc.xml:palette.access;access,
  16. --div--;LLL:EXT:cms/locallang_ttc.xml:tabs.extended,
  17. tx_gridelements_container,
  18. tx_gridelements_columns,
  19. --div--;sys_language_uid,
  20. l18n_parent
  21. ';

Aufbau der Fluid-Templates

Für jedes FCE wird abschließend das passende Fluid-Template erstellt. Innerhalb des Templates kann auf jedes Feld zugegriffen werden, welches über das TCA definiert wurde.

Fluid Template

  1. <div class="box">
  2. <f:if condition="{header_link}">
  3. <f:then>
  4. <f:link.page parameter="{header_link}">
  5. <f:render partial="FluidContentElements/TeaserBox" arguments="{_all}" />
  6. </f:link.page>
  7. </f:then>
  8. <f:else>
  9. <f:render partial="FluidContentElements/TeaserBox" arguments="{_all}" />
  10. </f:else>
  11. </f:if>
  12. </div>

Fluid Partial

  1. <div class="box-content">
  2. <hgroup>
  3. <f:if condition="{header}">
  4. <h2><f:format.nl2br>{header}</f:format.nl2br></h2>
  5. </f:if>
  6. </hgroup>
  7. <f:if condition="{bodytext}">
  8. <f:format.html>{bodytext}</f:format.html>
  9. </f:if>
  10. </div>

Fazit

Für uns sind die Fluid FCEs zusammen mit der Nutzung der Extension gridelements eine ideale Kombination zum Aufbau von Webseiten die anspruchsvoll gestaltet aber dennoch redaktionell einfach zu pflegen sind.

Wir nutzen sie in jedem Projekt und haben bereits eine Sammlung an FCEs zusammen gestellt, die eine gute Basis bilden. Insbesondere die vollständige Versionierbarkeit stellt für uns einen großen Vorteil dar, denn sowohl für neue Projekte als auch für Deployment-Prozesse oder das Aufsetzen von Entwicklungs-Systemen fällt kein zusätzlicher Aufwand mehr an.

In einem zweiten Blog-Artikel werden wir auf die Nutzung von Flexforms und die Section/Container-Logik eingehen.

06. Mär 2014

Neuer Entwickler an Bord

Gravatar: Dominik Piekarski
Dominik Piekarski

Captain Picard bei den Entwicklern

Nicht der selbe Captain wie aus der Serie Raumschiff Enterprise bekannt, aber phonetisch ähnlich: Piekarski. Seit Sternzeit 15102013 unterstütze ich mit meinen 32 Jahren Lebenserfahrung die junge networkteam Crew in Sachen Programmierung.

Dabei nehme ich den Posten des PHP Entwicklers ein und kontrolliere auch umfangreiche Subsysteme wie SQL, JavaScript und HTML.

In Kiel wohne ich seit ungefähr 2006 und habe davor in Berlin gelebt. Mich haben die unendlichen Weiten der Ostsee und die unendlichen Möglichkeiten des Kitesurfens nach Kiel gezogen. Hier habe ich zunächst als Kitesurflehrer gearbeitet, mich anschließend für ein Studium an der FH Kiel entschieden und bin, nach einigen Zwischenstopps, letzten Endes bei networkteam gelandet. Hier freue ich mich auf die gemeinsame Zukunft und hoffe auf umfangreiche und anspruchsvolle Projekte.

28. Feb 2014

Wir sind Premium Sponsor der T3DD14

Gravatar: Lars Lehners
T3DD14 Logo

Neben der T3CON sind die TYPO3 Developer Days DAS offizielle Event für Entwickler, Integratoren und alle, die sich im TYPO3 Kosmos umtreiben. Im Gegensatz zu einer herkömmlichen Konferenz geht es hier jedoch nicht nur um Input und Austausch, sondern insbesondere auch um die Weiterentwicklung der TYPO3 Produkte (TYPO3 CMS, TYPO3 Flow und TYPO3 Neos). 

Das offizielle Event der TYPO3 Association ist also irgendwo zwischen Codesprint und Konferenz angesiedelt. Entwickler und Integratoren haben hier die Möglichkeit, Ihr Wissen aufzustocken und sich mit anderen Menschen aus der Community auszutauschen. Darüber hinaus wird die Entwicklung der TYPO3 Produkte z.B. in Workshops aktiv vorangetrieben.

Das Schöne an dieser Veranstaltung: Man trifft auf viele bekannte Contributer, Extension Entwickler und anderen spannende Personen aus dem TYPO3 Umfeld. Hier hat jeder Interessierte die Möglichkeit, sich mit Community Mitgliedern auszutauschen, die man sonst nur aus Blog-Artikeln, Foren-Beiträgen oder offiziellen TYPO3 News kennt. Auf den DevDays trifft sich das „Who ist Who“ der TYPO3 Community, „Socialising“ ist dabei ein wesentlicher Aspekt dieses Events.

Die TYPO3 Developer Days sprechen übrigens nicht nur Entwickler und Integratoren an. Die Zielgruppe umfasst alle Menschen aus dem TYPO3 Umfeld! Designer, Anwender, Konzepter und andere sind ebenfalls herzlich dazu eingeladen an diesem Event teil zu nehmen. Das Themenspektrum ist breit gefächert und nach unserer Erfahrung lohnt sich der Besuch auch für „Nicht-Entwickler“.

In diesem Jahr finden die DevDays in Eindhoven in den Niederlanden statt. Waren es im letzten Jahr in Hamburg noch rund 200 Teilnehmer, so wurde in diesem Jahr bereits Platz für bis zu 400 TYPO3 Enthusiasten geschaffen. Als Premium Sponsor unterstützen wir die Umsetzung des Events aktiv und freuen uns auf spannende Talks, frische Ideen und tolle Begegnungen.

Die Tickets sowie die Möglichkeit, sich mit einem eigenen Thema für einen Talk anzumelden, gibt es auf der offiziellen T3DD14-Website.

networkteam ist Premium Sponsor der TYPO3 Developer Days 2014
08. Jan 2014

Der #networktree

Gravatar: Sören Rohweder

Wir bedanken uns für die zahlreichen Ideen, mit denen wir unseren Weihnachtsbaum schmücken konnten und möchten einen kurzen Einblick in die Technik dahinter geben.

Die Technik hinter dem Weihnachtsbaum

Der networkteam networktree

So ein Weihnachtsbaum reagiert nicht von selbst auf Tweets aus dem Netz. So gab es auch hier Technik im Hintergrund, die dies ermöglichte. In diesem Fall war es eine Sammlung von mehreren Techniken die das Spiel möglich machten.

Erst einmal müssen die relevanten Tweets, aus den über 500 Milliarden Tweets die jeden Tag gesendet werden, herausgefiltert werden. Dies erfolgt durch eine nodejs Anwendung die mittels der Bibliothek nTwitter auf den Datenstrom von Twitter gelauscht hat. Immer wenn ein Tweet mit dem Hashtag #networktree gesendet wurde, informierte die Streaming API von Twitter unsere Anwendung über das Auftreten eines Tweets. Dieser wurde dann von der Anwendung weitergehend analysiert und für den Fall, dass es sich um einen für den Weihnachtsbaum relevanten Tweet handelt, wurde diese Information über unser Firmennetzwerk weiter gereicht.

Die Information wurde dann von einer Anwendung auf einem Arduino empfangen. Die Aufgabe des Arduinos war es das Signal, das ein Tweet gesendet wurde, aufzunehmen und daraufhin die Lichterkette zum Pulsieren zu bringen. Über ein PWM (Pulsweitenmodulation) Signal wurde dann die LED-Lichterkette in kurzen Intervallen An- bzw. Ausgeschaltet so das der Eindruck entsteht, dass die LEDs mal heller und mal dunkler leuchteten.  

Das Bild des Weichnachtsbaumes, welches als Livestrem zu sehen war, wurde mit einem iPhone aufgenommen und über WebSockets an einen Proxy (in Google Go geschrieben) weitergeleitet der dann den Stream für jeden Besucher kopierte und zur Verfügung stellte. Die Anzeige des Videos im Browser erfolgte über ein HTML5 Canvas-Element mit einem in JavaScript geschriebenen MPEG-Encoder.

Alles in allem hatten an diesem Projekt alle Entwickler und Grafiker viel Spaß beim Aufhängen der Ideen am Baum und bei der Entwicklung der Anwendung.

Vielleicht haben Sie ja in diesem Jahr auch eine etwas andere Idee für eine Weihnachtsaktion die aus dem Netz heraus ins RealLife übergeht.

Ein gesundes und erfolgreiches 2014 wünscht networkteam.

09. Dez 2013

Schmücken Sie den #networktree

Gravatar: Thorge Larson

Wir wünschen allen unseren Kunden und Partnern eine schöne Weihnachtszeit!

Damit es bei uns in der Agentur auch etwas weihnachtlich wird benötigen wir jedoch Ihre Hilfe: Twittern Sie uns mit #networktree, was wir an unseren Baum hängen sollen. Bei jedem Tweet fängt unser Baum an zu blinken und wir werden uns bemühen, diesen nach Ihren Wünschen zu schmücken. Von Apfel bis Zimtstern ist alles erlaubt!

Das Ergebnis können Sie sich jederzeit über unsere Webcam auf weihnachten.networkteam.com ansehen.

Frohe Weihnachten,
Ihr networkteam