TYPO3 – {web-dev-net} https://www.web-dev-net.de Das Web-Developer-Blog Thu, 08 Dec 2016 08:38:37 +0000 de-DE hourly 1 https://wordpress.org/?v=4.9.4 Icon-API in TYPO3 ab Version 7.5 https://www.web-dev-net.de/icon-api-in-typo3-ab-version-7-5/#utm_source=rss&utm_medium=rss&utm_campaign=icon-api-in-typo3-ab-version-7-5 https://www.web-dev-net.de/icon-api-in-typo3-ab-version-7-5/#comments Wed, 09 Mar 2016 23:12:50 +0000 https://www.web-dev-net.de/?p=193 Seit TYPO3 7.5 steht eine neue Icon-API zur Verfügung um Icons im TYPO3 Backend zu registrieren oder abzufragen. In diesem Beitrag möchte ich das Konzept versuchen nahezubringen und zu zeigen wie einfach die Icon-API genutzt werden kann. Allgemeines zur Icon-API Die neue Icon-API ist ein Set von neuen PHP-Klassen welche im TYPO3 Core implementiert worden […]

The post Icon-API in TYPO3 ab Version 7.5 appeared first on {web-dev-net}.

]]>
Seit TYPO3 7.5 steht eine neue Icon-API zur Verfügung um Icons im TYPO3 Backend zu registrieren oder abzufragen. In diesem Beitrag möchte ich das Konzept versuchen nahezubringen und zu zeigen wie einfach die Icon-API genutzt werden kann.

Allgemeines zur Icon-API

Die neue Icon-API ist ein Set von neuen PHP-Klassen welche im TYPO3 Core implementiert worden sind. Die Icon-API ist für das TYPO3 Backend konzipiert worden und sollte daher nicht im Frontend verwendet werden, auch wenn die Logik in der Extension

EXT:core
  abgelegt wurde. Jedes Icon im System besitzt einen eindeutigen und sprechenden Identifier, welcher ein wichtiger Bestandteil ist, auf den ich gleich noch näher eingehen werde.

Die Icon-API sorgt dafür, dass überall im Backend das gleiche Markup verwendet wird. Dadurch wird sichergestellt, dass jedes Icon – egal wo es verwendet wird – immer die richtigen Abmessungen hat und sich perfekt in das Layout einfügt. Hierbei spielt es keine Rolle ob das Icon eine Bitmap-Grafik, ein SVG oder ein Font-Icon ist. Jedes Icon welches in der

IconRegistry
  registriert wird bekommt einen IconProvider zugewiesen, welcher sicherstellt, dass das erzeugte Markup richtig formatiert ist. Der TYPO3 core stellt dazu drei IconProvider zur Verfügung:

  • BitmapIconProvider
      – Für alle Bitmap Icons (Formate wie: gif, png, jpeg, etc)
  • SvgIconProvider
      – Für Icon im SVG Format
  • FontawesomeIconProvider
      – Ein Icon Provider für alle Icons über fontawesome.io

Sollte keiner der drei IconProvider passen, kann man auch einen eigenen IconProvider implementieren. Dieser muss lediglich das

IconProviderInterface
  implementieren. Darauf möchte ich hier aber nicht näher eingehen, da die Wahrscheinlichkeit dies jemals zu brauchen relativ gering ist.

Icon zur Nutzung registrieren

Damit man ein eigenes Icon nutzen kann, muss dieses in der

IconRegistry
  registriert werden. Dazu sind nur ein paar wenige Zeilen PHP Code in der Datei
ext_localconf.php
  nötig:

$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
   \TYPO3\CMS\Core\Imaging\IconRegistry::class
);
$iconRegistry->registerIcon(
    $identifier, // Icon-Identifier, z.B. tx-myext-action-preview
    \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
    ['source' => 'EXT:myext/Resources/Public/Icons/action-preview.svg']
);

Was passiert hier genau? Als erstes wird eine Instanz der

IconRegistry
  benötigt. Diese wird nur einmal benötigt, auch wenn man mehrere Icons registrieren möchte. Der zweite Schritt ist dann der Aufruf der
registerIcon
  Methode. Das erste Argument ist der Icon-Identifier, ein eindeutiger String. Um Konflikte mit anderen Extensions zu vermeiden, empfehle ich einen tx- Prefix zu verwenden, wie man ihn schon von Datenbank-Tabellen her kennt. Der zweite Parameter ist der zuständige IconProvider. Das dritte und letzte Argument ist ein Array mit Optionen. Für den
BitmapIconProvider
  und
SvgIconProvider
  gibt es nur eine Option die
source
  Angabe, also der Pfad zur Icon-Datei. Beim
FontawesomeIconProvider
  gibt es hingegen nur die Option
name
 . Mehr Informationen findet man auch in dem Feature-rst-File.

Damit ist jetzt das Icon in der

IconRegistry
  bekannt und kann über die Icon-API genutzt werden.

Icons abrufen und nutzen

Jetzt haben wir also ein Icon registriert, dieses können wir jetzt nutzen. An vielen Stellen im TCA benötigen wir nur den Icon-Identifier, dieser wird einfach als Option im TCA eingetragen. Aber wir können das Icon natürlich auch in unserer eigener Extension verwenden. Nehmen wir folgendes Beispiel: Das Icon welches wir eben registriert haben möchten wir nun in unserem Backend Modul ausgeben, dazu müssen wir das Icon also in unserem Controller holen und in die View geben:

$iconFactory = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
    \TYPO3\CMS\Core\Imaging\IconFactory::class
);
$icon = $iconFactory->getIcon(
    'tx-myext-action-preview',
    \TYPO3\CMS\Core\Imaging\Icon::SIZE_SMALL,
    'overlay-identifier'
);
$this->view->assign('icon', $icon);

OK, was passiert hier? Als erstes benötigen wir eine Instanz der

IconFactory
 . Über diese Klasse kommen wir an die registrierten Icons ran. Mit Hilfe der
getIcon
  Methode bekommen wir ein
Icon
  Objekt, welches wir direkt in die View geben.

Die Methode bekommt als erstes Argument den gewünschten Icon-Identifier. Das zweite Argument gibt die Größe des Icons an. Alle für das TYPO3 Backend benötigten Größen stehen zur Verfügung. Das dritte Argument ist für einen optionalen Overlay-Identifier. Für das TYPO3 Backend stehen bereits gängige Overlay-Icons zur Verfügung, am Ende ist es ein Overlay aber auch nur ein Icon, d.h. eigene Overlays können wie ein Icon registriert werden.

ViewHelper für Fluid

Um die Arbeit mit den Icons in Fluid etwas einfacher zu machen, haben die Entwickler einen Fluid ViewHelper erstellt, dies erspart einem die Arbeit mit der IconFactory im Controller.

{namespace core = TYPO3\CMS\Core\ViewHelpers}
<core:icon identifier="my-icon-identifier" size="small" overlay="overlay-identifier" />

Verwendung sollte eigentlich selbsterklärend sein:

  1. Fluid Namespace registrieren
  2. ViewHelper verwenden :)

Fazit

Die Icon-API ist sehr hilfreich und einfach zu benutzen. Eine sehr hilfreiche Extension in Bezug auf die Icon-API (und viele andere gute Hinweise in Bezug auf Extension-Entwicklung im Backend) ist die Extension

EXT:styleguide
 . Diese kann über das TER installiert werden oder immer die aktuellste Version direkt über github.

Ich hoffe ich konnte damit die wichtigsten und spannendsten Fragen zur neuen Icon-API im TYPO3 7.5 erklären. Sollte etwas unklar sein, gerne einen Kommentar hinterlassen oder mich direkt in Slack ansprechen.

The post Icon-API in TYPO3 ab Version 7.5 appeared first on {web-dev-net}.

]]>
https://www.web-dev-net.de/icon-api-in-typo3-ab-version-7-5/feed/ 3
TYPO3 CMS 7 LTS – Die Neuheiten im Überblick https://www.web-dev-net.de/typo3-cms-7-lts-die-neuheiten-im-ueberblick/#utm_source=rss&utm_medium=rss&utm_campaign=typo3-cms-7-lts-die-neuheiten-im-ueberblick https://www.web-dev-net.de/typo3-cms-7-lts-die-neuheiten-im-ueberblick/#respond Tue, 10 Nov 2015 12:50:02 +0000 https://www.web-dev-net.de/?p=121 Wir schreiben den 10.11.2015, der Tag an dem eine der besten TYPO3 Versionen erschienen ist: TYPO3 CMS 7 LTS. Was sind die neuen Features? Was hat sich geändert? Ich erzähle und zeige es euch. Seit der Veröffentlichung der letzten LTS Version 6.2.0 sind über 5.048 Patches in der TYPO3 Core geflossen. 278 Entwickler haben daran mitgewirkt, […]

The post TYPO3 CMS 7 LTS – Die Neuheiten im Überblick appeared first on {web-dev-net}.

]]>
Wir schreiben den 10.11.2015, der Tag an dem eine der besten TYPO3 Versionen erschienen ist: TYPO3 CMS 7 LTS. Was sind die neuen Features? Was hat sich geändert? Ich erzähle und zeige es euch.

Seit der Veröffentlichung der letzten LTS Version 6.2.0 sind über 5.048 Patches in der TYPO3 Core geflossen. 278 Entwickler haben daran mitgewirkt, es wurden 12.561 Dateien geändert, 867.144 Zeilen Code wurden hinzugefügt und 922.373 entfernt. Das heißt der Core wurden somit um 55.229 Zeilen schlanker. In Anbetracht, dass auch 1500 neue Unit-Tests dazu gekommen sind, ist der eigentlich Core um noch einige Zeilen mehr geschrumpft. 18 Monate Entwicklungsarbeit und hunderte neue Features wurden entwickelt. Ich möchte Euch in diesem Beitrag ein paar der wichtigsten Neuerungen vorstellen.

Die Neuerungen in TYPO3 CMS 7 LTS

1) Neues Look & Feel

Sehr viel ist im Backend von TYPO3 CMS 7 LTS passiert. Als ein wesentlicher Schritt wurde die Optik des Backends komplett überarbeitet, dazu setzt das Core Team auf das Bootstrap Framework. Alle Icons wurde ausgetauscht und folgen jetzt einem einheitlichen Schema, so sind alle Icons die eine Aktion auslösen in schwarz/weiß gehalten. Farbige Icons gibt es nur noch für Records, Flaggen, Module- und MimeType-Icons.

TYPO3 CMS 7 LTS – Neues Backend

TYPO3 CMS 7 LTS - Neues Backend

TYPO3 CMS 7 LTS - Neues Backend

TYPO3 CMS 7 LTS - Neues Backend

TYPO3 CMS 7 LTS - Neues Backend

2) Performance

Was insbesondere im direkten Vergleich zur Vorgänger Version 6.2 auffällt, ist die doch massive Verbesserung der Performance im Backend von TYPO3 CMS 7 LTS. Durch die Umstellung auf Bootstrap und das Entfernen diverses JavaScript Libraries wie Prototype, Scriptaculous und vieler ExtJS Scripts wurde das gesamte Backend massiv schneller. Wer viel mit 6.2 arbeitet wird den Unterschied sofort spüren.

3) Drag & Drop Uploader

Ein wirklich schönes neues Feature inTYPO3 CMS 7 LTS ist der Drag & Drop Uploader in der Media Verwaltung. Der Upload von Bildern und anderen Dateien kann jetzt ganz einfach per Drag & Drop vom Desktop in den Browser erfolgen. Sobald ein Drag-Vorgang gestartet wird, erscheint die Drop-Zone im File-Module von alleine. Dateien dort einfach „loslassen“ und schon läuft der Upload.

Ein besonderes Feature an der Stelle ist ein Modal der erscheint, sofern bereits Dateien mit dem gleichen Namen vorhanden sind. Der Benutzer hat in dem automatisch erscheinenden Modal die Möglichkeit für jede einzelne Datei zu entscheiden ob die Datei überschrieben, umbenannt oder ausgelassen werden soll. Ein völlig neues Arbeiten für Redakteure wir Admins.

TYPO3 CMS 7 LTS – Drag & Drop Uploader

TYPO3 CMS 7 LTS - Drag & Drop Uploader

TYPO3 CMS 7 LTS - Drag & Drop Uploader

TYPO3 CMS 7 LTS - Drag & Drop Uploader Modal

TYPO3 CMS 7 LTS - Drag & Drop Uploader Modal

4) Image Manipulation Wizard

Mein Favorit in TYPO3 CMS 7 LTS ist der Image Manipulation Wizard, ein Features welches mir persönlich schon seit sehr langer Zeit gefehlt hat. Das Besondere ist die vollständige Integration. Was bedeutet das? Änderungen an Bildern z.B. in Content-Elementen wirken sich unmittelbar im Frontend aus. Natürlich hat der Integrator die volle Kontrolle und kann genau vorgeben, welche Formate sein Redakteur auswählen kann. Die folgenden Serie von Screenshots verdeutlicht was dieses Feature alles kann.

TYPO3 CMS 7 LTS – Image Manipulation Wizard

TYPO3 CMS 7 LTS - Image Manipulation Wizard

TYPO3 CMS 7 LTS - Image Manipulation Wizard

TYPO3 CMS 7 LTS - Image Manipulation Wizard Cropper

TYPO3 CMS 7 LTS - Image Manipulation Wizard Cropper

TYPO3 CMS 7 LTS - Image Manipulation Wizard Preview

TYPO3 CMS 7 LTS - Image Manipulation Wizard Preview

5) Login Screen

Auch der Login Screen hat viel Liebe abbekommen und ist dank drei neuer Einstellungen in der Extension backend in wenigen Sekunden angepasst und so individuell für jeden Kunden anpassbar.

Logo, Hintergrundbild und die Hightlight-Farbe können eingestellt werden. Trotz nur dieser drei Einstellungen vermisst man nichts.

TYPO3 CMS 7 LTS – Login Screen

TYPO3 CMS 7 LTS - Login Screen Standard

TYPO3 CMS 7 LTS - Login Screen Standard

TYPO3 CMS 7 LTS - Login Screen Einstellungen

TYPO3 CMS 7 LTS - Login Screen Einstellungen

TYPO3 CMS 7 LTS - Login Screen Custom

TYPO3 CMS 7 LTS - Login Screen Custom

6) FormEngine Refactoring

Christian Kuhn alias @lolli42 hat viele Monate die FormEngine (auch bekannt als TCEForms) in mehreren großen Patches neu geschrieben bzw. Refactored. Das Unglaubliche daran, alles funktioniert wie vorher, aber der Code ist aufgeräumt und strukturiert. Eine aus Entwickler-Sicht unfassbare Leistung.

Und dank Bootstrap sind nun auch die Formulare im Backend weitestgehend responsive, d.h. eine Bearbeitung von Inhalten auf Tablets ist definitiv möglich. Selbst auf einem Smartphone habe ich bereits erfolgreich Dinge im Backend erledigen können.

TYPO3 CMS 7 LTS – FormEngine

TYPO3 CMS 7 LTS - FormEngine Desktop

TYPO3 CMS 7 LTS - FormEngine Desktop

TYPO3 CMS 7 LTS - FormEngine Tablet

TYPO3 CMS 7 LTS - FormEngine Tablet

TYPO3 CMS 7 LTS - FormEngine Smartphone

TYPO3 CMS 7 LTS - FormEngine Smartphone

7) SVG Icons

Alle die mit Retina Displays arbeiten oder auch Personen mit Sehbehinderungen die ihre Anzeige im Browser vergrößert darstellen werden ihre Freude am neuen Backend haben. Denn fast alle Icons wurden durch Font-Icons oder SVG-Icons ersetzt. Der Vorteil ist, dass bei jeder beliebigen Vergrößerung die Icons gestochen scharf sind.

Die folgenden Screenshots zeigen beeindruckend die Qualität der neuen Icons bei jeder Größe. Interessant dürfte auch die neue Icon-API sein.

TYPO3 CMS 7 LTS – SVG-Icons

TYPO3 CMS 7 LTS - SVG-Icons

TYPO3 CMS 7 LTS - SVG-Icons

TYPO3 CMS 7 LTS - SVG-Icons

TYPO3 CMS 7 LTS - SVG-Icons

8) Avatare

Das letzte Feature welches ich hier und heute erwähnen möchte sind die Avatare im Backend. Avatare können in den Benutzereinstellungen hinterlegt werden und tauchen dann an verschiedenen Stellen im Backend auf. Dies ermöglicht schnell zu erkennen, welcher Backend-Benutzer etwas getan hat. Z.B. in dem Log oder auch im Info-Popup trifft man immer wieder auf die Avatare.

TYPO3 CMS 7 LTS – Avatare

TYPO3 CMS 7 LTS - Avatare Einstellung

TYPO3 CMS 7 LTS - Avatare Einstellung

TYPO3 CMS 7 LTS - Avatare im Log

TYPO3 CMS 7 LTS - Avatare im Log

TYPO3 CMS 7 LTS - Avatare in Benutzerverwaltung

TYPO3 CMS 7 LTS - Avatare in Benutzerverwaltung

Related Links

The post TYPO3 CMS 7 LTS – Die Neuheiten im Überblick appeared first on {web-dev-net}.

]]>
https://www.web-dev-net.de/typo3-cms-7-lts-die-neuheiten-im-ueberblick/feed/ 0