28. Aug 2013

Verwendung von Custom Views in Flow

Gravatar: Kai Möller geb. Lassen
Kai Möller geb. LassenKommentare 0

Aufgabe: Ausgabe von Daten in verschiedenen Views (Fluid Template / JSON) unter Verwendung der selben Action-Methode.

Beispiel: Nehmen wir einmal an, wir haben eine Liste von Artikeln. Jeder Artikel beinhaltet neben Titel und Beschreibung auch ein Bild, welches als Thumbnail in einer bestimmten Größe ausgegeben werden soll. Die Darstellung soll sowohl in HTML (Fluid TemplateView) als auch in JSON (Flow JsonView) erfolgen.

Für die Darstellung des Fluid TemplateView geht man wie gewohnt vor. Innerhalb der Action-Methode werden Variablen definiert und an das Template weitergegeben. Im Template erfolgt dann die Formatierung mittels HTML. Das Rendering der Thumbnails in der passenden Größe kann über den ImageViewHelper des TYPO3.Media Package erreicht werden.

Für die Darstellung des JSON gibt es zwei Herangehensweisen: Entweder der JsonView wird innerhalb der Action-Methode konfiguriert (Flow JsonView) oder man verwendet einen CustomView und definiert dort wie das JSON aussehen soll. 

Der Nachteil bei der Verwendung des Flow JsonView ist, dass View-spezifische Aufgaben im Controller verbleiben und dieser dadurch schnell unübersichtlich wird.
In unserem Beispiel werden z.B. Thumbnails mit einer bestimmten Größe aus den im Artikel hinterlegten Bildern erstellt und ihre Url an den JsonView übergeben. Dies ist eigentlich eine Aufgabe, die vom View erledigt werden sollte.

Die Action-Methoden sowie die beiden Views unter Verwendung des Flow JsonView sehen folgendermaßen aus (siehe dazu auch den Abschnitt zu Json View in der Flow Dokumentation):

ArticleController unter Verwendung des JsonView

  1. namespace Networkteam\Blogexample\Controller;
  2.  
  3. class ArticleController extends \TYPO3\Flow\Mvc\Controller\ActionController {
  4.  
  5. /**
  6. * @Flow\Inject
  7. * @var \Networkteam\Blogexample\Domain\Repository\ArticleRepository
  8. */
  9. protected $articleRepository;
  10.  
  11. /**
  12. * @var \TYPO3\Flow\Resource\Publishing\ResourcePublisher
  13. * @Flow\Inject
  14. */
  15. protected $resourcePublisher;
  16.  
  17. /**
  18. * @var array
  19. */
  20. protected $viewFormatToObjectNameMap = array('json' => 'TYPO3\Flow\Mvc\View\JsonView');
  21.  
  22. /**
  23. * list articles for json and html
  24. */
  25. public function indexAction() {
  26. $format = $this->getControllerContext()->getRequest()->getFormat();
  27. $articles = $this->articleRepository->findAll();
  28.  
  29. switch ($format) {
  30. case 'json':
  31. // set urls for image thumbnails of each article
  32. foreach($articles as $article) {
  33. $imgUrl = '';
  34. $imgMaxWidth = $imgMaxHeight = 150;
  35. $articleImage = $article->getImage();
  36.  
  37. // scale image to given maxWith and maxHeight and resulting ratio
  38. if ($articleImage) {
  39. $imgWidth = $articleImage->getWidth() > $imgMaxWidth ? $imgMaxWidth : $articleImage->getWidth();
  40. $imgHeight = $imgWidth * ($imgMaxHeight / $imgMaxWidth);
  41. $imgUrl = $this->resourcePublisher->getPersistentResourceWebUri($articleImage->getThumbnail($imgWidth, $imgHeight, $articleImage::RATIOMODE_OUTBOUND)->getResource());
  42. }
  43.  
  44. $customArticles[] = array(
  45. 'title' => $article->getTitle(),
  46. 'date' => $article->getDate(),
  47. 'author' => $article->getAuthor(),
  48. 'content' => $article->getContent(),
  49. 'image' => $articleImage,
  50. 'imgUrl' => $imgUrl
  51. );
  52. }
  53.  
  54. // set vars for use in json view
  55. $this->view->assignMultiple(array(
  56. 'changed' => FALSE,
  57. 'timestamp' => time(),
  58. 'articles' => $customArticles
  59. ));
  60.  
  61. // set variables to render. By default only the variable 'value' will be rendered
  62. $this->view->setVariablesToRender(array('changed', 'timestamp', 'articles'));
  63.  
  64. // configure the json view
  65. $this->view->setConfiguration(array(
  66. 'articles' => array(
  67. '_descendAll' => array(
  68. '_exclude' => array('image')
  69. )
  70. )
  71. ));
  72. break;
  73.  
  74. case 'html':
  75. // configure the html view here
  76. $this->view->assign('articles', $articles);
  77. break;
  78. }
  79. }
  80. }

Resources/Private/Templates/Article/Index.html

  1. {namespace m=TYPO3\Media\ViewHelpers}
  2.  
  3. <f:layout name="Default" />
  4.  
  5. <f:section name="Title">Index view of Article controller</f:section>
  6.  
  7. <f:section name="Content">
  8. <h1>List of articles</h1>
  9. <p>Some data set by the controller:</p>
  10. <f:for each="{articles}" as="article">
  11. <dt>Title:</dt>
  12. <dd>{article.title}</dd>
  13.  
  14. <dt>Date:</dt>
  15. <dd><f:format.date format="d.m.Y - H:i:s">{article.date}</f:format.date></dd>
  16.  
  17. <dt>Author:</dt>
  18. <dd>{article.author}</dd>
  19.  
  20. <dt>Content:</dt>
  21. <dd>{article.content}</dd>
  22.  
  23. <f:if condition="{article.image}">
  24. <dt>Image:</dt>
  25. <dd><m:image image="{article.image}" maximumWidth="150" alt="{article.image.title}" /></dd>
  26. </f:if>
  27. </dl>
  28. </li>
  29. </f:for>
  30. </ul>
  31. </f:section>

Der Custom View

Man sieht sehr deutlich, wie viel Code bereits in der Action-Methode steckt. Schöner geht es mit einem CustomView. Ähnlich wie beim Fluid TemplateView und JsonView können Packages eigene Views mitbringen. Der Action-Controller kann über die Instanzvariablen $defaultViewObjectName und $viewFormatToObjectNameMap so konfiguriert werden, dass er für bestimmte Formate eigene Views verwendet (Man sehe sich hierzu die Klasse \TYPO3\Flow\Mvc\Controller\ActionController genauer an).

Die eigenen Views werden im Ordner "View/ControllerName/" des Application Package abgelegt (siehe auch TYPO3 Flow Ordner Struktur).

Der Name des CustomView besteht immer aus dem Namen der Action und dem MIME-MediaType. In unserem Beispiel sieht das folgendermaßen aus:
Der ArticleController beinhaltet die customAction() Methode. Der MIME Type soll JSON sein. Der resultierende Klassennamen der CustomView ist damit CustomJson.

Soll das Ausgabeformat reiner Text sein (MIME Type TXT), müsste die View-Klasse CustomTxt heißen. Grundlage für die Namenskonvention ist der MIME MediaType. Die unterstützen Formate können in der Klasse \TYPO3\Flow\Utility\MediaTypes nachgelesen werden.

Der Vorteil bei der Verwendung des CustomView ist, dass die Action-Methode sehr sauber und übersichtlich bleibt. Alle View-spezifischen Aufgaben verbleiben im jeweiligen View.

Der Aufbau eines CustomView gestaltet sich folgendermaßen: Die View Klasse leitet von \TYPO3\Flow\Mvc\View\AbstractView ab welche wiederum das \TYPO3\Flow\Mvc\View\ViewInterface implementiert. Daher muss nur die render() Methode für den CustomView implementiert werden.

Innerhalb der render() Methode kann nun die JSON-Ausgabe als String zusammengebaut und zurückgegeben werden. Dabei stehen beispielsweise in $this->variables alle Variablen zur Verfügung, welche in der Action-Methode mit $this->view->assign() zugewiesen wurden. Des Weiteren kann auf den ControllerContext zugegriffen werden, über welchen unter anderem der Content-Type Header gesetzt werden kann.

Ebenfalls erfolgt die Generierung der Thumbnail-Url innerhalb des Views (siehe Methode articleToArray()).

Somit gestaltet sich die Action-Methode sehr sauber und aufgeräumt und die Formatierung von HTML und JSON kann einfach in den jeweiligen Views erfolgen.

ArticleController unter Verwendung des CustomView

  1. namespace Networkteam\Blogexample\Controller;
  2.  
  3. class ArticleController extends \TYPO3\Flow\Mvc\Controller\ActionController {
  4.  
  5. /**
  6. * @Flow\Inject
  7. * @var \Networkteam\Blogexample\Domain\Repository\ArticleRepository
  8. */
  9. protected $articleRepository;
  10.  
  11. /**
  12. * list articles
  13. */
  14. public function customAction() {
  15. $articles = $this->articleRepository->findAll();
  16. $this->view->assign('articles', $articles);
  17. }
  18. }

View/Article/CustomJson.php

  1. namespace Networkteam\Blogexample\View\Article;
  2.  
  3. class CustomJson extends \TYPO3\Flow\Mvc\View\AbstractView {
  4.  
  5. /**
  6. * @var \TYPO3\Flow\Resource\Publishing\ResourcePublisher
  7. * @Flow\Inject
  8. */
  9. protected $resourcePublisher;
  10.  
  11. /**
  12. * @return string
  13. */
  14. public function render() {
  15. $data = array(
  16. 'changed' => FALSE,
  17. 'timestamp' => time(),
  18. 'articles' => array()
  19. );
  20.  
  21. # set Content-Type
  22. $this->controllerContext->getResponse()->setHeader('Content-Type', 'application/json');
  23.  
  24. # get variables form controller action
  25. $articles = $this->variables['articles'];
  26.  
  27. foreach($articles as $article) {
  28. $data['articles'][] = $this->articleToArray($article, 150, 150);
  29. }
  30.  
  31. return json_encode($data);
  32. }
  33.  
  34. /**
  35. * @param \Networkteam\Blogexample\Domain\Model\Article $article
  36. * @param integer $imgMaxWidth
  37. * @param integer $imgMaxHeight
  38. * return array
  39. */
  40. protected function articleToArray(\Networkteam\Blogexample\Domain\Model\Article $article, $imgMaxWidth = NULL, $imgMaxHeight = NULL) {
  41. $imgUrl = '';
  42. $articleImage = $article->getImage();
  43.  
  44. // scale image to given maxWith and maxHeight and resulting ratio
  45. if ($articleImage) {
  46. $imgWidth = $articleImage->getWidth() > $imgMaxWidth ? $imgMaxWidth : $articleImage->getWidth();
  47. $imgHeight = $imgWidth * ($imgMaxHeight / $imgMaxWidth);
  48. $imgUrl = $this->resourcePublisher->getPersistentResourceWebUri($articleImage->getThumbnail($imgWidth, $imgHeight, $articleImage::RATIOMODE_OUTBOUND)->getResource());
  49. }
  50.  
  51. return array(
  52. 'title' => $article->getTitle(),
  53. 'date' => $article->getDate(),
  54. 'author' => $article->getAuthor(),
  55. 'content' => $article->getContent(),
  56. 'imgUrl' => $imgUrl
  57. );
  58. }
  59. }

Routing

Wie wird nun aber bei Aufruf der indexAction() bzw. customAction() festgelegt welcher View gerendert werden soll?

Über den @format Parameter der einzelnen Routen wird festgelegt welcher View für das Rendering der Route zuständig ist.

Dadurch, dass die Klasse View\Article\CustomJson.php vorhanden ist, wird für die customAction-Route mit @format = json dieser CustomView verwendet.

Bei der indexAction-Route mit @format = json ist innerhalb des ArticleController definiert welcher View für das Format zuständig ist: $viewFormatToObjectNameMap = array('json' => 'TYPO3\Flow\Mvc\View\JsonView');

Für beide Routen mit @format = html wird ein TYPO3\Fluid\View\TemplateView verwendet, da dies der Default ist (siehe $defaultViewObjectName in TYPO3\Flow\Mvc\Controller\ActionController).

Configuration/Routes.yaml

  1. -
  2. name: 'Article list'
  3. uriPattern: 'blogexample/articles.{@format}'
  4. defaults:
  5. '@package': 'Networkteam.Blogexample'
  6. '@controller': 'Article'
  7. '@action': 'index'
  8. '@format': 'html'
  9.  
  10. -
  11. name: 'Article list with custom view'
  12. uriPattern: 'blogexample/custom/articles.{@format}'
  13. defaults:
  14. '@package': 'Networkteam.Blogexample'
  15. '@controller': 'Article'
  16. '@action': 'custom'
  17. '@format': 'html'

Beispiel Package auf GitHub

Der gesamte Code des Artikels ist noch einmal als Beispiel im folgenden Package auf Github zu finden:

https://github.com/networkteam/Networkteam.Blogexample

Fazit:

Mit CustomViews kann in TYPO3 Flow der Controller aufgeräumt werden und Logik für den View in eigene PHP-Klassen ausgelagert werden. Das sorgt für eine bessere Erweiterbarkeit  und einfachere Wartung in der Zukunft.

12. Aug 2013

15 Jahre networkteam

Gravatar: Berit Hlubek

Unsere Jubiläumsfeier hat bei herrlichem Sonnenschein mit einem Empfang in der Cocktail-Bar "Trafo" für unsere Kunden der letzten 15 Jahre gestartet und ging abends nahtlos in die Party mit Freunden und Partnern der TYPO3- und Agentur-Welt über.

Nach ausführlichen Vorbereitungen in den letzten Wochen konnte unsere Feier mit gezielten kleinen Besonderheiten punkten. Über unsere eigens erstellte Gästeliste basierend auf dem PHP Framework TYPO3 Flow haben wir jeden Gast erfasst. Die App zum Check-In der Gäste lief auf einem Surface Tablet über welches wir auch direkt Fotos der Gäste machen konnten. Die Fotos wurden innerhalb einer vor Ort angezeigten Webseite direkt nach Aktualisierung eines Gastes angezeigt.

Check-In der Gäste
Check-In
Unsere Gästeliste
Unsere Gästeliste
Das Check-In Backend
Das Check-In Backend

Als besonderes Gimmick hatten wir tagsüber drei Segways gemietet, mit welchen der "lange Weg" von der Trafo Bar zur Agentur komfortabel und erlebnisreich zurück gelegt werden konnte, um einen Einblick in unsere Arbeitsräume zu bekommen. Die Agentur-Räume waren natürlich nicht leer. In jedem Raum war deutlich zu sehen, welcher Mitarbeiter normalerweise an welchem Arbeitsplatz zu finden ist.

Unser Schulungsraum
Unser Schulungsraum
Sören beim Segway-Fahren

Pappfiguren an den Arbeitsplätzen
Pappfiguren an den Arbeitsplätzen

Neben der Präsentation des Unternehmens war natürlich auch das Feiern ein wichtiger Teil der Veranstaltung. Bei erfrischenden Cocktails und einem Flying Buffet basierend auf heimischen Produkten hatten unsere Kunden und Partner die Möglichkeit unser gesamte Team näher kennen zu lernen und so manch ein Kunde konnte auch endlich die Stimmen der Telefonate einem Gesicht zuordnen.

Wir danken allen Gästen für die Geschenke und eine tolle Feier und freuen uns auf die nächsten 15 Jahre!

Krabben-Cocktail mit Spitzkohl
Krabben-Cocktail mit Spitzkohl
Curry-Wurst Varianten und Rosmarin Pannacotta
Curry-Wurst Varianten
Coacktails Ipanema und Vanilla Espumar
Ipanema und Vanilla Espumar
Getränke- und Speise-Karte
Getränke- und Speise-Karte
Impression der Feier
Impression der Feier
Geschenke-Tisch
Vielen Dank für die Geschenke
networkteam Audi Bobby Car
07. Aug 2013

Weniger ist mehr - Flat Design

Gravatar: Thilo Kressdorf
Startseite in 320 Pixel Breite
Startseite in 480 Pixel Breite
Startseite in 768 Pixel Breite
Startseite in 1024 Pixel Breite

Es geht voran!

Nachdem Severin die letzten Mockups unserer neuen Webseite finalisiert hatte, konnte ich endlich mit dem Design beginnen. Doch wie sollte die neue Webseite aussehen? Wir waren uns einig, dass wir ein reduziertes, klares Design brauchen, das modern wirkt und den Content unterstützt, anstatt ihn durch Effekte in den Hintergrund zu drängen. Schnell fiel der Begriff "Flat Design", doch was zeichnet Flat Design eigentlich aus?

Flat Design bedeutet die Reduktion auf das Wesentliche, d.h. keine Farbverläufe, keine Schlagschatten, keine Texturen, keine 3D-Effekte. Im Gegenzug jedoch klare Konturen, vollflächige Farben und verstärkter Einsatz von Typografie als Gestaltungsmittel.

Microsoft hat es vorgemacht und mit der Modern UI (Metro-Design) ein neues Designkonzept entwickelt, dass sich deutlich vom "Skeuomorphism Design" von Apple unterscheidet und einfach den visuellen Nerv der Zeit getroffen hat. 

Aber auch aus technischer Sicht hat das Flat Design Vorteile. Dadurch, dass auf Effekte nahezu vollständig verzichtet wird, können zahlreiche Grafiken mittels CSS3 realisiert werden, wodurch es schlichtweg ressourcenschonender ist. Hinsichtlich leistungsschwächerer Prozessoren in Smartphones und schlechten Datenverbindungen ein Punkt, der nicht außer Acht zu lassen ist.

Aber wieder zurück zum Design. Nach einigen Diskussionen sind wir zu dem Ergebnis gekommen, dass wir das Design nicht gänzlich Flat gestalten, sondern es mit dezenten Kanten versehen, um dem Design somit das gewisse Etwas zu verleihen. 

Eine Herausforderung sind unsere vier Firmenfarben, da diese durch vollflächigen Einsatz in verschiedenen Browsergrößen stets anders wirken, sie aber dennoch mit dem Rest der Webseite harmonieren sollen.

Da wir in der Konzeption mit der mobilen Ansicht begonnen hatten ("Mobile-First"), habe ich auch beim Design zuerst die Mobilvariante gestaltet, bevor ich mich schrittweise der Desktopvariante näherte. Für mich war es spannend zu sehen, welche Möglichkeiten einem offen stehen, wenn man in der nächst größeren Version plötzlich mehr Raum zur Verfügung hat. Auf einmal ist es möglich zusätzliche Elemente wie z.B. Bilder und längere Texte zu verwenden oder das Design einfach luftiger zu gestalten.

Eine weitere Herausforderung war der "One-Page"-Charakter der einzelnen Seiten. Um viel Content auf einer einzigen Seite sinnvoll darzustellen, haben wir diesen in einzelne Sektionen eingeteilt, welche auch visuell voneinander getrennt sein sollten, was mit einer einzigen Farbe und nur einem Grauton nicht immer einfach war.

Doch jetzt ist es geschafft und ich bin mit dem Design soweit fertig, dass es mit Umsetzung losgehen kann.

Es geht voran!

24. Jul 2013

Gridelements professionell nutzen

Gravatar: Berit Hlubek
Berit HlubekKommentare 0
Nutzung der TYPO3 Extension Gridelements
Gridelements auf www.enkey.de

Individuelle Inhaltselemente in TYPO3 sind ein wichtiges Feature zur vereinfachten Pflege und eine einheitliche Eingabe von projektspezifischen Inhalten (z.B. Teaser-Boxen, mehrspaltige Elemente oder Slider) im CMS.

Neben TemplaVoilà bietet auch die Extension Gridelements die Möglichkeit zur Implementierung individueller Inhaltselemente mit Verschachtelung. Die Konfiguration der verfügbaren Elemente mit Angaben zur Aufteilung wird dabei meistens in der Datenbank vorgenommen. Häufig gibt es allerdings die Anforderung, dass jegliche Konfigurations- und Template-Informationen versionierbar abgelegt werden sollen. Dies hat den Vorteil, dass Änderungen an der Konfiguration kontrolliert werden können und eine Übernahme in verschiedene Installationen reibungslos vorgenommen werden können.

Neben dem Datensatz zur Konfiguration eines Gridelements kommt die passende TypoScript-Konfiguration hinzu, welche aber direkt in versionierbare Dateien ausgelagert werden kann (statische TypoScript-Einbindung). Über diesen Weg arbeitet man allerdings immer noch mit Datensätzen, die in der Datenbank abgelegt werden. Dies bedeutet insbesondere bei komplexeren Deployment-Strukturen zeitaufwändige Anpassungen, die bei jeder Installation (z.B. Testing, Staging, Production und bei allen Entwicklungssystemen) durchgeführt werden müssen. Außerdem sind die Datensätze nicht versionierbar und unbeabsichtigte Änderungen können nur schwer nachvollzogen werden.

Im Gegensatz zu TemplaVoilà, wo zwar die Datenstruktur in Dateien ausgelagert werden kann, aber in jedem Fall das Mapping in der Datenbank abgelegt wird, bieten die Gridelements eine Möglichkeit sämtliche Konfigurationen in Dateien auszulagern. Als Ersatz für die Nutzung von Datensätzen kann die Konfiguration der Inhaltselemente im Page-TsConfig abgelegt werden.

Anhand eines konfigurierbaren Zweispalters auf Basis des Twitter Bootstrap Grids liste ich im Folgenden die verschiedenen Bestandteile eines vollständig versionierbaren Gridelements auf (basierend auf Version 1.4.1 der Extension):

Page-TsConfig

  1. tx_gridelements.setup {
  2. # Kommentar 1
  3. 1 {
  4. title = Two Columns
  5. config {
  6. colCount = 2
  7. rowCount = 1
  8. rows {
  9. 1 {
  10. columns {
  11. 1 {
  12. name = Left
  13. colPos = 11
  14. }
  15. 2 {
  16. name = Right
  17. colPos = 12
  18. }
  19. }
  20. }
  21. }
  22. }
  23. icon = EXT:your_extension_key/Resources/Public/Icons/two-cols.png
  24. # Kommentar 2
  25. flexformDS (
  26. <T3DataStructure>
  27. <meta>
  28. <langDisable>1</langDisable>
  29. </meta>
  30. <ROOT type="array">
  31. <type>array</type>
  32. <el type="array">
  33. <columnType type="array">
  34. <TCEforms type="array">
  35. <label>Column Type</label>
  36. <config type="array">
  37. <type>select</type>
  38. <items type="array">
  39. <numIndex index="0" type="array">
  40. <numIndex index="0">1:1</numIndex>
  41. <numIndex index="1">cols-1-1</numIndex>
  42. </numIndex>
  43. <numIndex index="1" type="array">
  44. <numIndex index="0">1:2</numIndex>
  45. <numIndex index="1">cols-1-2</numIndex>
  46. </numIndex>
  47. <numIndex index="2" type="array">
  48. <numIndex index="0">2:1</numIndex>
  49. <numIndex index="1">cols-2-1</numIndex>
  50. </numIndex>
  51. <numIndex index="3" type="array">
  52. <numIndex index="0">1:3</numIndex>
  53. <numIndex index="1">cols-1-3</numIndex>
  54. </numIndex>
  55. <numIndex index="4" type="array">
  56. <numIndex index="0">3:1</numIndex>
  57. <numIndex index="1">cols-3-1</numIndex>
  58. </numIndex>
  59. </items>
  60. </config>
  61. </TCEforms>
  62. </columnType>
  63. </el>
  64. </ROOT>
  65. </T3DataStructure>
  66. )
  67. }
  68. }

TypoScript

  1. # Grid element config
  2. tt_content.gridelements_pi1.20.10.setup {
  3. # Two Columns
  4. 1 < lib.gridelements.defaultGridSetup
  5. 1 {
  6. columns {
  7. 11 < .default
  8. 11.preCObject = CASE
  9. 11.preCObject {
  10. key.field = flexform_columnType
  11. cols-1-2 = TEXT
  12. cols-1-2 {
  13. value = <div class="span4">
  14. }
  15. cols-2-1 = TEXT
  16. cols-2-1 {
  17. value = <div class="span8">
  18. }
  19. cols-1-3 = TEXT
  20. cols-1-3 {
  21. value = <div class="span3">
  22. }
  23. cols-3-1 = TEXT
  24. cols-3-1 {
  25. value = <div class="span9">
  26. }
  27. default = TEXT
  28. default {
  29. value = <div class="span6">
  30. }
  31. }
  32. 11.wrap = |</div>
  33. 12 < .default
  34. 12.preCObject = CASE
  35. 12.preCObject {
  36. key.field = flexform_columnType
  37. cols-1-2 = TEXT
  38. cols-1-2 {
  39. value = <div class="span8">
  40. }
  41. cols-2-1 = TEXT
  42. cols-2-1 {
  43. value = <div class="span4">
  44. }
  45. cols-1-3 = TEXT
  46. cols-1-3 {
  47. value = <div class="span9">
  48. }
  49. cols-3-1 = TEXT
  50. cols-3-1 {
  51. value = <div class="span3">
  52. }
  53. default = TEXT
  54. default {
  55. value = <div class="span6">
  56. }
  57. }
  58. 12.wrap = |</div>
  59. }
  60. wrap = <div class="row">|</div>
  61. }
  62. }

 

Neben TypoScript und TsConfig müssen natürlich noch die Extension-Templates der Gridelements sowie CSS hinzugefügt werden.

Zu Kommentar #1

Im TypoScript bezeichnet die Eigenschaft „1“ die UID 1 des ansonsten genutzten Datensatzes. Die Zahlen können also für weitere Gridelements einfach aufsteigend definiert werden.

Zu Kommentar #2

Über Flexform Definitionen können beliebige weitere Felder hinzugefügt werden, wie zum Beispiel Eingabefelder oder Checkboxen. In unserem Beispiel nutzen wir eine Auswahlliste, um dem Redakteur die Option zu geben die Spaltenaufteilung selber zu bestimmen.

Die Zeile <langDisable>1</langDisable> wird im Falle von mehrsprachigen Webseiten benötigt, denn ohne diese Einstellung würden die Flexforms innerhalb des Inhaltselements die Übersetzungsoptionen der einzelnen Flexform-Felder anbieten, was bei Nutzung der TYPO3-typischen Language Overlays zu Fehlern führen kann.

17. Jul 2013

T3DD 2013 - unser Rückblick

Gravatar: networkteam

Die "TYPO3 Developer Days" sind neben der TYPO3 Konferenz (T3CON) ein weiteres offizielles Event der TYPO3 Association. Während es sich bei der T3CON um eine klassische Konferenz handelt, entwickeln sich die DevDays Jahr für Jahr immer mehr in Richtung "Entwickler und Contributor Treffen", bei dem insbesondere die Weiterentwicklung von TYPO3, Flow und Neos im Vordergrund steht.

In diesem Jahr wurde ein weiterer Schritt in diese Richtung gegangen, sodass sich dieses Event mittlerweile sehr deutlich von der T3CON abgrenzen kann.

networkteam hat in diesem Jahr die so genannte Codingnight gesponsert und war gleich mit 5 Personen anwesend. 5 Personen, 5 verschiedene Erfahrungen, Interessen und Eindrücke und daraus resultierend 5 Erfahrungsberichte:

Christopher Hlubek

TYPO3 Neos Workshop - TYPO3 Developer Days 2013
Neos Workshop (Foto von Ernesto Baschny)

Diese Woche war wieder einmal eine sehr intensive und spannende Zeit. Passend zum TYPO3 CMS Core-Team Meeting und Active-Contributor Meeting haben wir auch das Neos Team versammelt, um gemeinsame Abstimmungen vorzunehmen und die Zeit als Code-Sprint zu nutzen.

Durch die (glücklicherweise) guten Fortschritte in den letzten Monaten war es wichtig den aktuellen Stand von Neos auch innerhalb des TYPO3 CMS Teams noch einmal genauer vorzustellen. Das positive Feedback und große Interesse zeigt uns, dass wir in Zukunft hoffentlich auch aus diesem viel größeren Team auf Contributions setzen können. Insgesamt hat man wieder einmal gemerkt: Wir sind alle eine große Community und haben durch die vielen Events und die Vergangenheit eine tolle gemeinsame Geschichte.

Während der Developer Days haben wir durchweg Neos-orientierte Workshops angeboten und konnten verschiedene Themen mit interessierten Community-Mitgliedern vertiefen. Die Themen waren:

  • Testing von Flow und Neos (Unit-Tests, Functional-Tests, Behat-Tests)
  • Integration und Aufbau von Websites
  • Contribution-Workshop für Frontend- und Backend-Entwickler aber auch Redakteure für die Dokumentation

Dabei konnten wir viel Feedback aus der Community sammeln und haben einige Projekte gesehen, die in kurzer Zeit mit Neos implementiert wurden.

Über die Tage konnten viele Features und Bugfixes für Neos umgesetzt und einige größere Refactorings (eine Art Code-Umbaumaßnahme) abgeschlossen werden. Die sichtbarsten Ergebnisse sind jedoch in der neuen UI (Benutzeroberfläche) zu sehen, welche sich rasend schnell zu einem fertigen Produkt entwickelt.

Die wirklich unermüdliche Arbeit von morgens bis spät abends sorgte natürlich dafür, dass für andere Workshops wenig Zeit blieb; immerhin wollen wir möglichst schnell ein Neos 1.0 Release fertigstellen, um nach einer langen Wartezeit das CMS endlich in produktiven Projekten einsetzten zu können. Es war aber wirklich toll zu sehen mit welcher Motivation das gesamte Team bei der Sache war und einem gemeinsamen Ziel entgegen arbeitet.

Großes Lob noch einmal an dieser Stelle an die Organisatoren und Helfer der Veranstaltung, die einen sehr produktiven Rahmen mit viel Platz in- und außerhalb der Workshops geschaffen haben. Dass dabei der Community-Aspekt (Social Event mit Cocktailbar, Coding-Night, ...) nicht zu kurz kam und auch das Essen wirklich gut war, machte diese Developer-Days zu einem Event, an welches man sich gerne zurückerinnert.

Berit Hlubek

Berit und Aske arbeiten an Neos
Berit und Aske (Foto von Tim Kandel)

Für mich fanden die TYPO3 Developer Days dieses Jahr vollständig unter dem Motto TYPO3 Neos statt. Nachdem ich bereits ab Montag Nachmittag beim Meeting des Neos Teams dabei gewesen bin, haben wir während und zwischen den verschiedenen Workshops die Zeit genutzt an dem neuen CMS weiter zu arbeiten. Insbesondere zusammen mit Aske Ertmann habe ich an der UI gearbeitet und wir haben die von Rasmus Skjoldan entwickelten Interface-Designs integriert.

Neben einem Integrations-Tutorial zur Arbeit mit Neos gab es zwei Workshops mit dem Ziel den Einstieg in die Entwicklung mit und für Neos zu vereinfachen. Nachdem wir zunächst auf Fragen eingegangen sind um eine gemeinsame Basis zu schaffen, haben beim zweiten Workshop viele Entwickler teilgenommen, die an verschiedenen Aufgaben und Fehlern gearbeitet haben. Als Krönung der Arbeit einer ganzen Woche konnten wir Samstag Nacht (6.7.2013) Neos Alpha 4 veröffentlichen.

Zwischen den Arbeiten an Neos fand sich dennoch genug Zeit mit den anderen Teilnehmern zu sprechen und das Social Event zu genießen. Nachdem die Social Events in den letzten Jahren aus meiner Sicht etwas knapper ausgefallen waren, wurde dieses Jahr mit frisch gemixten Cocktails, Sitzsäcken und Liegestühlen bei allerbestem Wetter die ideale Grundlage für einen entspannten Abend mit vielen spannenden Diskussionen gelegt.

Als Mitglied des Neos Teams hat es mich besonders gefreut zu sehen, wie viele Interessenten wir im Rahmen der diesjährigen Developer Days gefunden haben, sowohl für die Nutzung des Systems als auch im Hinblick auf potentielle Contributor.

Tolle Location, gutes Catering, erfolgreiche Workshops und reichhaltige Diskussionen, das alles bei super Wetter - so darf es nächstes Jahr gerne weiter gehen.

Neos Modul-Navigation
Neos Inline Editing
Neos Inspector

Kai Lassen

Kai genießt die Sonne auf den TYPO3 Developer Days
Kai genießt die Sonne

Aus meiner Sicht waren die TYPO3 Developer Days eine sehr gelungene Veranstaltung. Ich konnte die Community kennenlernen und einigen sehr interessanten Workshops/Talks beiwohnen. Obwohl ich zum ersten Mal dabei war, war es nicht schwierig sich zurecht zu finden.

Mit etwas Erfahrung im Betreiben von TYPO3 Anwendungen fand ich die Workshops um automatisiertes Deployment mit TYPO3 Surf, PHP Unit Tests in Extbase Extensions und Dokumentation auf ReST Basis am interessantesten.

Ich bekam einen guten Eindruck von dem aktuellen Entwicklungsstand und habe einige gute Entwicklungs-Ansätze für zukünftige Projekte mit nach Hause genommen. Lediglich die Aufteilung der Sessions während der drei Tage war nicht so glücklich. An den jeweiligen Tagen hätte ich mir eine bessere Mischung aus Backend- und Frontend-Themen gewünscht.

Lars Lehners

TYPO3 Deployment Session vom ehemaligen networkteam Mitarbeiter und Freelancer Tobias Liebig
TYPO3 Deployment Session vom ehemaligen
Kollegen Tobias Liebig

Ich habe dieses Jahr das erste Mal die TYPO3 Developer Days besucht.
Für mich persönlich halten sich die Pros und Kontras der Veranstaltung die Waage.

Sehr positiv empfand ich, dass die DevDays eine Zusammenkunft des „who's who“ der TYPO3 Szene war. So hatte ich die Gelegenheit mich mit vielen Extension- und Core-Entwicklern auszutauschen und ihnen wichtige Informationen bezüglich der künftigen Entwicklung rund um TYPO3 CMS zu entlocken.

Der große Umbruch, mit zahlreichen breaking changes, der durch TYPO3 CMS 6.0 entstanden ist, hatte bei mir für grummelndes Zähneknirschen gesorgt. Auf den Developer Days habe ich jedoch festgestellt, dass sich die TYPO3 Community den Problemen angenommen hat und bereits gute Lösungen existieren. Darüber hinaus ergaben sich für mich wesentliche Informationen im Gespräch mit Extension Entwicklern:
Ivan Kartolo arbeitet aktuell an einer neuen Directmail Version, die auch im Hinblick auf unterschiedliche und komplexere Systemanforderungen kompatibel zu den TYPO3 6 Versionen sein wird und das Migrationstool für das DAM ist ebenfalls bereits einsetzbar.

Sehr gut fand ich darüber hinaus das Tutorial von Christian Müller „TYPO3 Neos first steps“. Zwar waren mir die neuen Konzepte bereits bekannt (schließlich treiben wir dieses großartige Projekt auch bei uns im Hause aktiv voran), jedoch zeichnet sich langsam ab, dass der Weg zu einer stabilen Version nicht mehr weit ist.

Als Kontra verbuche ich für mich persönlich die neue Form der DevDays. Anders, als man es von Konferenzen und Barcamps kennt, gab es nur wenige Tutorials. Stattdessen setzte die Strategie fast ausschließlich auf Workshops, die mit rund dreieinhalb stündiger Dauer sehr langwierig waren. Ich finde die Idee zwar schön, dass TYPO3 in den Workshops aktiv weiterentwickelt werden soll, aber diese Form hat die Anzahl der Sessions und die Themenvielfalt stark eingeschränkt. Hat man sich außerdem einmal für den falschen Workshop entschieden, so war es sehr schwer als Quereinsteiger die Session zu wechseln. Ich denke zweistündige Workshops wären eine gute Alternative, in denen sowohl TYPO3 vorangetrieben wird, als auch die Themenvielfalt nicht zu leiden hat. Ein weiterer Minus-Punkt war meines Erachtens, dass die Verteilung der Workshops sehr unausgeglichen war. Frontendthemen liefen, wie Backendthemen, häufig parallel zueinander. Dies hätte man sicherlich besser verteilen und mischen können.

Alles in allem war die Veranstaltung trotz meiner Kritikpunkte sehr erkenntnisreich und mein grummelndes Zähneknirschen bezüglich der aktuellen TYPO3 CMS Entwicklung hat sich wieder in ein zuversichtliches Lächeln verwandelt :)

 

 

Christoph Lehmann

Zwischen den Workshops wurde das hervorragende Wetter währen der TYPO3 Developer Day 2013 genossen
Zwischen den Workshops wurde das hervorragende
Wetter genossen

Auch für mich waren die diesjährigen Developer Days die erste Community-Veranstaltung - Mein Prädikat: Sehenswert! Die interessantesten Sessions für mich waren "Automate Deployment of TYPO3 CMS" und das Tutorial "Security Pitfalls vs. Best Practice".

Im Nachhinein hätte ich mir mehr Tutorials gewünscht, beziehungsweise hätten diese sich gerne über die Tage verteilen können.

Durchweg positiv empfand ich es, die Community kennen zu lernen und anregende Gespräche mit einigen Extension-Entwicklern zu führen. Das Social-Event war sehr gelungen!

Der Veranstaltungsort war etwas ab vom Schuss -  in HH-Harburg, aber sehr gemütlich - schöner Campus!

Fazit

Anhand des unterschiedlichen Feedbacks wird deutlich, dass die TYPO3 Developer Days, trotz ihrer starken Auslegung auf Workshops, sehr unterschiedliche Zielgruppen und Bedürfnisse ansprechen. Als TYPO3 Agentur sehen wir die Veranstaltung als wichtig für die Weiterentwicklung der Produkte und der Community an und sind im nächsten Jahr gerne wieder als Sponsor und Teilnehmer dabei.