Contao Community Documentation - Benutzerbeiträge [de]

Soll diese Seite wirklich verlassen werden / JavaScript im Backend geht nicht

2014-05-02T11:40:12Z

Flex: /* Eigene tinyMCE.php */

[[Category:Fehlersuche]]
Es gibt mehrere Gründe, warum diese Fehlermeldung kommen kann oder warum im Backend das JavaScript nicht richtig funktioniert:
=Contao ist in einem Unterordner installiert=
Contao ist in einem Unterordner installiert und im übergeordneten Ordner ist eine .htaccess aktiv (die .htaccess der betroffenen Contao-Installation ist nicht aktiv)

'''Lösung:'''
"URL Umschreiben" im Contao-Backend einschalten (unter Einstellungen) und die eigene .htaccess im Root-Verzeichnis der Contao-Installation aktivieren indem man die Datei ".htaccess.default" in ".htaccess" umbenennt. Zusätzlich muss in der .htaccess noch die RewriteBase angepasst werden. Dazu öffnet man die .htaccess in einem Editor und sucht nach der Zeile:

<source lang="text">
#RewriteBase /
</source>

Diese ändert man dann in:

<source lang="text">
RewriteBase /unterordner/
</source>

oder (falls man eine subdomain direkt auf den Unterordner zeigen lässt):
<source lang="text">
RewriteBase /
</source>

und speichert die Änderung ab

= Url's umschreiben=
Man hat die Einstellung "URL Umschreiben" im Contao-Backend eingeschaltet aber die .htaccess noch nicht aktiviert und angepasst.

'''Lösung:'''
Die .htaccess aktivieren und die Zeile RewriteBase anpassen (siehe obigen Abschnitt)
=Kompression=
Die .js und .css Kompression funktioniert auf dem Server nicht (ist im Backend unter Einstellungen eingeschaltet und die .htaccess ist aktiv).

'''Lösung:'''
In der .htaccess diese Bereiche entfernen:

<source lang="text">
##
# Compress .js and .css files
##
AddEncoding gzip .gz
AddType "text/javascript" .gz
AddType "text/css" .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [L]
</source>

=Angepasstes Backend-Template=
Man hat das Backend-Template be_main.tpl angepasst und nach einem Update funktioniert dieses nicht mehr richtig (aktuell kann dieser Fehler bei einen Update von 2.7.x auf 2.8 passieren).

'''Lösung:'''
Der mootools Aufruf funktioniert nicht mehr im Header. Um diesen Fehler zu beheben, muss der alte mootools-Code entfernt werden und an der Stelle der neue mootools-Code eingefügt werden. Dieser besteht aus folgenden 2 Zeilen:

<source lang="text">
<script type="text/javascript" src="plugins/mootools/mootools-core.js"></script>
<script type="text/javascript" src="plugins/mootools/mootools-more.js"></script>
</source>

--[[Benutzer:MacKP|MacKP]] 10:34, 7. Mär. 2010 (UTC)

=Eigene tinyMCE.php=

Bei einigen Contao Versionen wird tinyMCE aktualisiert und hier ändern sich Konfigurationsnamen oder Plugins oder Pfade, usw.
Nach einem Update sollte also die eigene tinyMCE Konfiguration abgeglichen werden.

--Flex 12:37, 2. Mai 2014 (UTC)

Soll diese Seite wirklich verlassen werden / JavaScript im Backend geht nicht

2014-05-02T11:38:07Z

Flex:

Isotope Hooks

2013-11-19T09:40:35Z

Flex: /* Isotope Hooks */

= Isotope Hooks =

Das ist eine Liste von Isotope Hooks aus dem aktuellen Source (1.4.7).
Die Liste hat keinerlei Anspruch auf Vollständigkeit.

=== Isotope.php ===
calculatePrice
 calculateTax
 useTaxRate
 
=== IsotopeAutomator.php ===
convertCurrency
 
=== IsotopeBackend.php ===
getAllowedProductIds
 
=== IsotopeCart.php ===
checkoutSurcharge
 
=== IsotopeFrontend.php ===
watermarkImage
 
=== IsotopeOrder.php ===
preCheckout
 postCheckout
 preOrderStatusUpdate
 postOrderStatusUpdate
 getOrderEmailData
 generateOrderId
 
=== IsotopeProduct.php ===
productAttributes
 buttons
 generateProduct
 generateAjaxProduct
 generateAttribute
 
=== IsotopeProductCollection.php ===
saveCollection
 deleteCollection
 addProductToCollection
 updateProductInCollection
 deleteProductFromCollection
 transferCollection
 transferredCollection
 generateCollection
 
=== ModuleIsotopeCart.php ===
compileCart
 
=== ModuleIsotopeCheckout.php ===
addCustomAddress
 
=== ModuleIsotopeProductFilter.php ===
generateFilters
 
=== ModuleIsotopeProductList.php ===
generateProductList
 
=== postsale.php ===
initializePostsale
 
=== ProductCallbacks.php ===
applyAdvancedFilters
 
=== tl_iso_orders.php ===
saveCollection
 
=== tl_iso_products.php ===
addAssetImportRegexp
 
=== tl_module.php ===
buttons

Isotope Hooks

2013-11-19T09:40:12Z

Flex: Die Seite wurde neu angelegt: „= Isotope Hooks = Das ist eine Liste von Isotope Hooks die auf die Schnelle aus dem aktuellen Source gezogen habe (1.4.7). Die Liste hat keinerlei Anspruch auf V…“

= Isotope Hooks =

Das ist eine Liste von Isotope Hooks die auf die Schnelle aus dem aktuellen Source gezogen habe (1.4.7).
Die Liste hat keinerlei Anspruch auf Vollständigkeit.

=== Isotope.php ===
calculatePrice
 calculateTax
 useTaxRate
 
=== IsotopeAutomator.php ===
convertCurrency
 
=== IsotopeBackend.php ===
getAllowedProductIds
 
=== IsotopeCart.php ===
checkoutSurcharge
 
=== IsotopeFrontend.php ===
watermarkImage
 
=== IsotopeOrder.php ===
preCheckout
 postCheckout
 preOrderStatusUpdate
 postOrderStatusUpdate
 getOrderEmailData
 generateOrderId
 
=== IsotopeProduct.php ===
productAttributes
 buttons
 generateProduct
 generateAjaxProduct
 generateAttribute
 
=== IsotopeProductCollection.php ===
saveCollection
 deleteCollection
 addProductToCollection
 updateProductInCollection
 deleteProductFromCollection
 transferCollection
 transferredCollection
 generateCollection
 
=== ModuleIsotopeCart.php ===
compileCart
 
=== ModuleIsotopeCheckout.php ===
addCustomAddress
 
=== ModuleIsotopeProductFilter.php ===
generateFilters
 
=== ModuleIsotopeProductList.php ===
generateProductList
 
=== postsale.php ===
initializePostsale
 
=== ProductCallbacks.php ===
applyAdvancedFilters
 
=== tl_iso_orders.php ===
saveCollection
 
=== tl_iso_products.php ===
addAssetImportRegexp
 
=== tl_module.php ===
buttons

C3: Tutorial Extension Entwicklung 2.Teil: Selective DCA Paletten und Subpaletten

2013-05-02T11:29:43Z

Flex: /* Was man wissen sollte */

[[Category:Dev HOWTOS]]
=Einleitung=
Dieses Tutorial ist der zweite Teil einer Tutorial-Reihe: 
http://de.contaowiki.org/C3:_Tutorial_Extension_Entwicklung_1.Teil:_Grundlagen

...es basiert auf der großartigen Screencast-Reihe von Tristan Lins. Unbedingt ansehen! 
Videolink : [http://www.youtube.com/watch?v=I1-1mqIR_B4&list=PL3mn8AtCRAstvuAWY8dhrHisMYapPxOnt&index=4 DCA Paletten und Subpaletten, MetaPalettes]

==An wen richtet sich dieses Tutorial?==
Dieses Tutorial ist für all diejenigen gedacht, die ein Step-by-Step Tutorial zum Einstieg in die Extension-Entwicklung mit Contao 3 suchen.

==Lernziel==
Das Screencast-Modul aus dem ersten Teil wird um zusätzliche Funktionen erweitert: Der BE-User kann nun unter verschiedenen Screencast-Quellen auswählen. In Abhängigkeit der Quellen ändern sich die nachfolgenden Eingabe- bzw. Auswahlfelder. Diese kontextsensitiven Felder bezeichnet man in Conato als selektive Paletten.

So sieht eine Ansicht unserer fertigen Erweiterung aus: 
[[Datei:T2_youtube.png]]

==Was man wissen sollte==
Grundlagen in PHP, objektorientierter Programmierung und SQL sind nötig.
Ferner sollte man Grundlagen der Extension-Entwicklung in Contao verstanden haben (Verzeichnisstruktur, DCA, Templates).

Wer damit noch Schwierigkeiten hat, der sollte hier: 
http://de.contaowiki.org/C3:_Tutorial_Extension_Entwicklung_1.Teil:_Grundlagen 
nochmal die Grundlagen nachlesen.

==Vorbereitung==
Der fertige Quellcode aus dem ersten Teil muss vorhanden sein.

==Source-Code==
Den Quellcode könnt ihr hier:
https://github.com/bit3/contao-screencast3
herunterladen.
{{Hinweis|Es kann sein, dass der Quellcode auf github bereits einer fortgeschritteneren Version entspricht. Passt die Dateien daher ggf. dem Code der beiden Tutorials an oder (am besten) programmiert alles selber! }}

=Definition der Anwendungsfälle=
Unsere Anwendung soll folgendes leisten:
#Zunächst hat der BE-User nur die Auswahl, welche Screencast-Quelle er eingeben möchte und welchen Titel er dieser Quelle gibt. Zur Auswahl stehen hier: Keine Quelle (default), Remote-Quelle oder Lokale-Quelle.
#Hat er die Wahl getroffen, werden zusätzliche Optionen sichtbar.

==1. Fall: Keine Quelle==
Es werden keine zusätzlichen Optionen angezeigt.

==2. Fall: Lokal==
Es wird die Möglichkeit gegeben, direkt auf eine Datei aus der Dateiverwaltung zu verlinken.

==3. Fall: Remote==
Es wird die Möglichkeit gegeben, zwischen zwei Remote-Plattformen zu wählen (Youtube und Vimeo).

Entscheidet sich der User für "Youtube", erhält er die Optionen die Video-URL einzutragen, nach Ende des Videos vorgeschlagene Videos einzublenden, über HTTPS zu streamen, erweiterten Datenschutz zu aktivieren und die Größe anzugeben.
Bei der Größe kann er zusätzlich zwischen zwei Optionen wählen: Vordefinierte Größe und individuelle Größe.

Bei "Vimeo" erhält er die Optionen die Video-URL einzutragen und eine Größe anzuwählen.
Auch hier hat er bei der Größe zusätzlich die Wahl zwischen zwei Optionen: Vordefinierte Größe und individuelle Größe.

=Die DCA-Paletten=

==Was sind Paletten und Subpaletten?==
Bei Paletten handelt es sich um eine Gruppe von Eingabe und Auswahlfeldern, die zu einem Modul oder Element gehören. Paletten sind logischerweise immer an den Anwendungsfall angepasst.

Hier zwei Beispiele für wohlbekannte Paletten: Die der Inhaltselemente "Überschrift" und "Hyperlink".
[[Datei:T2_cPaletten.png|Unterschiedliche C3 Paletten]]

Paletten können sich aber nicht nur grundsätzlich (Überschrift, Hyperlink, News,...) sondern auch dynamisch innerhalb eines Moduls bzw. Elements unterscheiden: 
Hier ein Beispiel für unterschiedliche Paletten unserer Extension "Screencast": 
[[Datei:T2_mcPaletten.png]]

Subpaletten ergänzen Paletten um einzelne Felder. Subpaletten werden innerhalb eines Moduls oder Elements meist von mehreren Paletten gemeinsam verwendet. 
Hier ein Beispiel für Anzeigeoptionen der Videos. Diese wird gemeinsam von der Palette Youtube und Vimeo verwendet: 
[[Datei:T2_subPaletten.png]]

Für die unterschiedlichen Ansichten müssen daher die jeweiligen Paletten definiert werden.

==Definition der Paletten==

*Öffnet die Datei d''ca/tl_screencast.php'' und modifiziert den Code im Bereich palettes wie folgt:
<source lang="php">
// Palettes
'palettes' => array
(
'__selector__' => array('type', 'platform', 'defineSize'),
'default' => '{title_legend},type,title',
'remote' => '{title_legend},type,title;{screencast_legend},platform',
'remote_youtube' => '{title_legend},type,title;{screencast_legend},platform,url,youtubeShowSuggestions,youtubeHttps,youtubeExtendedDataSecurity;{display_legend:hide},defineSize',
'remote_vimeo' => '{title_legend},type,title;{screencast_legend},platform,url;{display_legend:hide},defineSize',
'local' => '{title_legend},type,title;{screencast_legend},path',
),
// Subpalettes
'subpalettes' => array
(
'defineSize_predefined' => 'sizePredefined',
'defineSize_custom' => 'sizeCustom'
),
</source>

''Was passiert hier?'' 
Im ersten Teil dieser Reihe gab es nur eine Palette (''default'').
In unserem erweiterten Modul Screencast werden nun für die verschiedenen Anwendungsfälle unterschiedliche Eingabe- und Auswahlfelder nötig. Diese werden in den unterschiedlichen Paletten definiert.

Gehen wir die Paletten in der Reihenfolge durch, wie sie auch in der Extension auftauchen. Achtet dabei auf die Parallelen in der folgenden Beschreibung (type, local, remote) und in der Palettendefinition:
===Die default Palette===
Die default-Palette wird immer zuerst angezeigt. In unserem Beispiel hat der BE-User also zuächst nur die Möglichkeit, einen bestimmten Screencast-Typ (type) auszuwählen und einen Titel (title) einzugeben.

[[Datei:T2_pdefault.png]]
===Die local Palette===
Die local Palette zeigt sich dem User, wenn er im Bereich type die Auswahl local trifft.

[[Datei:T2_plocal.png]]
===Die remote Palette===
Die remote Palette zeigt sich dem User, wenn er im Bereich type die Auswahl remote trifft.

[[Datei:T2_premote.png]]

===Die remote_youtube Palette===
Die remote_youtube Palette zeigt sich dem User, wenn er im Bereich type die Auswahl remote trifft und anschließend im Feld Plattform youtube wählt.

[[Datei:T2_pyoutube.png]]

===Die remote_vimeo Palette===
Die remote_vimeo Palette zeigt sich dem User, wenn er im Bereich type die Auswahl remote trifft und anschließend im Feld Plattform vimeo wählt.

[[Datei:T2_pvimeo.png]]

===Die Subpalette defineSize===
Die defineSize Subpalette ist eine Zusatzpalette, die angezeigt wird, wenn der User im Bereich type die Auswahl remote trifft, sich daraufhin im Feld Plattform für vimeo oder youtube entscheidet und dann noch eine Option zur Einstellung der Videogröße wählt.
[[Datei:T2_subPaletten.png]]

==Wozu dient dann __selector__?==
Im Bereich palettes wird auch definiert, welche Felder überhaupt zu einem Wechsel der Paletten führen können. 
In unserem Beispiel wechseln die Paletten also, wenn der User einen bestimmten ''type'', eine ''platform'' oder eine bestimmte Größe (''defineSize'') ausgewählt hat. 
Dies sagt jedoch noch nichts darüber aus, welche Werte die Felder haben müssen, um z.B. die Palette ''remote_youtube'' aufzurufen. 
Dies geschieht in der Definition der Felder:

=Die Eingabe- und Auswahlfelder anlegen=
*Ergänzt euren Code im Bereich ''fields'' um folgende Zeilen. Der Ordnung halber am besten unter dem Feld ''tstamp'':
<source lang="php">
'type' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['type'],
'inputType' => 'select',
'exclude' => true,
'sorting' => true,
'flag' => 1,
'options' => array('remote', 'local'),
'reference' => &$GLOBALS['TL_LANG']['tl_screencast'],
'eval' => array(
'includeBlankOption' => true,
'submitOnChange' => true,
'mandatory' => true,
'tl_class' => 'w50',
),
'sql' => "varchar(10) NOT NULL default ''"
),
</source>

''Was passiert hier?''

Die meisten Einträge sollten aus dem 1. Tutorial bekannt sein.
Interessant sind folgende Elemente: 
*''inputType:'' Hier soll nun ein Select-Feld angezeigt werden. 
*''options:'' Hier werden die Optionen des Select-Feldes definiert. '''Beachtet, dass hier die Werte für die entsprechenden neuen Paletten definiert werden.''' 
*''includeBlankOption:'' In den Optionen der Select-Felder erscheint auch ein leerer Eintrag (nichts gewählt). 
*''submitOnChange:'' Die Formularfelder werden immer abgesendet, wenn ihr eine neue Option im Selectfeld wählt. Das ist praktisch, da der User sonst immer erst auf "Speichern" klicken müsste, um die geänderte Palette zu sehen.

*Speichert die Datei und aktualisiert eure Datenbank.
*In eurer Erweiterung solltet ihr nun eine Typ-Auswahlmöglichkeit haben.

Da jedoch jede Menge Felder, die bereits in den Paletten definiert wurden fehlen, hält sich der Spaß noch in Grenzen.

*Tauscht euren Code im ''fields''-Bereich mit folgendem Code aus bzw. modifiziert ihn entsprechend:
<source lang="php">
// Fields
'fields' => array
(
'id' => array
(
'sql' => "int(10) unsigned NOT NULL auto_increment"
),
'tstamp' => array
(
'sql' => "int(10) unsigned NOT NULL default '0'"
),
'type' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['type'],
'inputType' => 'select',
'exclude' => true,
'sorting' => true,
'flag' => 1,
'options' => array('remote', 'local'),
'reference' => &$GLOBALS['TL_LANG']['tl_screencast'],
'eval' => array(
'includeBlankOption' => true,
'submitOnChange' => true,
'mandatory' => true,
'tl_class' => 'w50',
),
'sql' => "varchar(10) NOT NULL default ''"
),
'title' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['title'],
'inputType' => 'text',
'exclude' => true,
'sorting' => true,
'flag' => 1,
'search' => true,
'eval' => array(
'mandatory' => true,
'unique' => true,
'maxlength' => 255,
'tl_class' => 'w50'
),
'sql' => "varchar(255) NOT NULL default ''"
),
'platform' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['platform'],
'inputType' => 'select',
'exclude' => true,
'sorting' => true,
'flag' => 1,
'options' => array('remote_youtube', 'remote_vimeo'),
'reference' => &$GLOBALS['TL_LANG']['tl_screencast'],
'eval' => array(
'includeBlankOption' => true,
'submitOnChange' => true,
'mandatory' => true,
'tl_class' => 'w50',
),
'sql' => "varchar(20) NOT NULL default ''"
),
'url' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['url'],
'inputType' => 'text',
'exclude' => true,
'eval' => array(
'tl_class' => 'w50'
),
'sql' => "text NULL"
),
'path' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['path'],
'inputType' => 'fileTree',
'exclude' => true,
'sql' => "text NULL"
),
'youtubeShowSuggestions' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['youtubeShowSuggestions'],
'inputType' => 'checkbox',
'exclude' => true,
'eval' => array(
'tl_class' => 'w50 m12'
),
'sql' => "char(1) NOT NULL default ''"
),
'youtubeHttps' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['youtubeHttps'],
'inputType' => 'checkbox',
'exclude' => true,
'eval' => array(
'tl_class' => 'w50 m12'
),
'sql' => "char(1) NOT NULL default ''"
),
'youtubeExtendedDataSecurity' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['youtubeExtendedDataSecurity'],
'inputType' => 'checkbox',
'exclude' => true,
'eval' => array(
'tl_class' => 'w50 m12'
),
'sql' => "char(1) NOT NULL default ''"
),
'defineSize' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['defineSize'],
'default' => 'predefined',
'inputType' => 'select',
'exclude' => true,
'options' => array('predefined', 'custom'),
'reference' => &$GLOBALS['TL_LANG']['tl_screencast'],
'eval' => array(
'submitOnChange' => true,
'tl_class' => 'clr w50 m12'
),
'sql' => "varchar(12) NOT NULL default ''"
),
'sizeCustom' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['sizeCustom'],
'inputType' => 'text',
'exclude' => true,
'eval' => array(
'multiple' => true,
'size' => 2,
'tl_class' => 'clr w50'
),
'sql' => "varchar(255) NOT NULL default ''"
),
'sizePredefined' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['sizePredefined'],
'inputType' => 'radio',
'exclude' => true,
'options' => array('640x480', '854x480'),
'eval' => array(
'multiple' => true,
'size' => 2,
'tl_class' => 'clr w50'
),
'sql' => "varchar(12) NOT NULL default ''"
),
)
);

</source>

Ich habe hier jetzt das komplette Ende der DCA-Datei aufgeführt, damit evtl. Tipp-, Klammerfehler o.ä. vermieden werden.

==Die Beziehung zwischen den Paletten und den Feldern==
Wer sein Augenmerk auf die Eigenschaft ''options'' der Felder ''type'' und ''platform'' richtet, wird feststellen, dass an dieser Stelle die Werte für den Aufruf der entsprechenden Paletten definiert werden.
{{Achtung|Hier besteht eine Abweichung vom Source Code auf github. Ich finde es nachvollziehbarer, wenn die options-Werte genauso lauten, wie die Paletten.}}

==Die Beziehung zwischen den Subpaletten und den Feldern==
Bei den Subpaletten ist das ein klein wenig anders (wenigsten bei select-Feldern und radio-Buttons).

Das Feld ''defineSize'' ist ein Select-Feld, welches als'' options'' die Werte ''predefined'' und ''custom'' erhält.

Um je nach Auswahl die Subpaletten wechseln zu lassen, müssen diese Werte in der Definition der Subpalettes als Suffix an den aufrufenden Feldnamen angehängt werden.
Bei checkboxen reicht der direkte Verweis auf das neue Feld.
Schaut da z.B. mal in die DCA tl_news.php. Dort sieht man das ganz schön.

{{Achtung|Hier besteht eine Abweichung vom Source Code auf github. Bitte ändert den Code entsprechend.}}

=Die Übersetzung=
*Tauscht den Code in der Datei ''languages/de/tl_screencast.php'' gegen diesen hier aus:
<source lang="php">

<?php
$GLOBALS['TL_LANG']['tl_screencast']['title_legend'] = 'Titel';
$GLOBALS['TL_LANG']['tl_screencast']['path'][0] = 'Dateipfad';
$GLOBALS['TL_LANG']['tl_screencast']['path'][1] = 'Pfad zum lokalen Video';

$GLOBALS['TL_LANG']['tl_screencast']['type'][0] = 'Typ';
$GLOBALS['TL_LANG']['tl_screencast']['type'][1] = 'Wählen Sie hier aus, ob es sich um ein externes oder lokales Video handelt.';

$GLOBALS['TL_LANG']['tl_screencast']['title'][0] = 'Titel';
$GLOBALS['TL_LANG']['tl_screencast']['title'][1] = 'Geben Sie hier den Screencast Titel ein.';

$GLOBALS['TL_LANG']['tl_screencast']['screencast_legend'] = 'Screencast';

$GLOBALS['TL_LANG']['tl_screencast']['platform'][0] = 'Platform';
$GLOBALS['TL_LANG']['tl_screencast']['platform'][1] = 'Wählen Sie hier die Videoplatform aus.';

$GLOBALS['TL_LANG']['tl_screencast']['url'][0] = 'Video URL';
$GLOBALS['TL_LANG']['tl_screencast']['url'][1] = 'Geben Sie hier die Video URL ein.';

$GLOBALS['TL_LANG']['tl_screencast']['youtubeShowSuggestions'][0] = 'Vorgeschlagene Videos anzeigen';
$GLOBALS['TL_LANG']['tl_screencast']['youtubeShowSuggestions'][1] = 'Nach Ende des Videos vorgeschlagene Videos anzeigen.';

$GLOBALS['TL_LANG']['tl_screencast']['youtubeHttps'][0] = 'HTTPS verwenden';
$GLOBALS['TL_LANG']['tl_screencast']['youtubeHttps'][1] = 'Streamt das Video via HTTPS.';

$GLOBALS['TL_LANG']['tl_screencast']['youtubeExtendedDataSecurity'][0] = 'Erweiterter Datenschutz';
$GLOBALS['TL_LANG']['tl_screencast']['youtubeExtendedDataSecurity'][1] = 'Aktiviert den erweiterten Datenschutz Modus.';

$GLOBALS['TL_LANG']['tl_screencast']['display_legend'] = 'Anzeige';

$GLOBALS['TL_LANG']['tl_screencast']['defineSize'][0] = 'Größenoptionen wählen';
$GLOBALS['TL_LANG']['tl_screencast']['defineSize'][1] = 'Wählen Sie, ob Sie eine festgelegte Größe oder eine individuelle Größe festelegen möchten.';

$GLOBALS['TL_LANG']['tl_screencast']['sizePredefined'][0] = 'Größe festlegen';
$GLOBALS['TL_LANG']['tl_screencast']['sizePredefined'][1] = 'Legt die Ausgabegröße fest.';

$GLOBALS['TL_LANG']['tl_screencast']['sizeCustom'][0] = 'Größe';
$GLOBALS['TL_LANG']['tl_screencast']['sizeCustom'][1] = 'Geben Sie hier die Größe an.';

$GLOBALS['TL_LANG']['tl_screencast']['new'][0] = 'Neuer Screencast';
$GLOBALS['TL_LANG']['tl_screencast']['new'][1] = 'Einen neuen Screencast anlegen';

$GLOBALS['TL_LANG']['tl_screencast']['edit'][0] = 'Screencast bearbeiten';
$GLOBALS['TL_LANG']['tl_screencast']['edit'][1] = 'Screencast ID %s bearbeiten';

$GLOBALS['TL_LANG']['tl_screencast']['delete'][0] = 'Screencast löschen';
$GLOBALS['TL_LANG']['tl_screencast']['delete'][1] = 'Screencast ID %s löschen';

$GLOBALS['TL_LANG']['tl_screencast']['show'][0] = 'Screencastdetails';
$GLOBALS['TL_LANG']['tl_screencast']['show'][1] = 'Details des Screencast ID %s anzeigen';

$GLOBALS['TL_LANG']['tl_screencast']['remote'] = 'Externes Video';
$GLOBALS['TL_LANG']['tl_screencast']['local'] = 'Lokales Video';

$GLOBALS['TL_LANG']['tl_screencast']['remote_youtube'] = 'YouTube';
$GLOBALS['TL_LANG']['tl_screencast']['remote_vimeo'] = 'Vimeo';

$GLOBALS['TL_LANG']['tl_screencast']['predefined'] = 'Vordefinierte Größe';
$GLOBALS['TL_LANG']['tl_screencast']['custom'] = 'Individuelle Größe';
</source>

''Was passiert hier?''
Die Übersetzungen werden analog zum 1. Tutorial für die entsprechenden Felder eingepflegt.
=Geschafft!=
Wenn ich mich nicht verschrieben habe und ihr alles richtig gemacht habt, könnt ihr eure erweitertes Screencast-Modul nun einsetzen.

=Was fehlt?=
Die Erweiterung der Klasse ModuleScreencastList.php, die Ausgabe im Template und die Übersetzung. Das überlasse ich erstmal euch;-)

=Ausblick=
Sobald Tristan einen neuen Screencast zum Thema bringt, haue ich wieder in die Tasten.
Grüße von kobajashi

=Weiterführende Links=
Die Erweiterung Metapalletes
http://de.contaowiki.org/MetaPalettes

C3: Tutorial Extension Entwicklung 1.Teil: Grundlagen

2013-05-02T11:29:11Z

Flex: /* Weiterführende Links */

[[Category:Dev HOWTOS]]

=Einleitung=
Seit 2010 arbeite ich nun schon mit Contao. Vorher habe ich die CMS Joomla, Typo3 und Drupal ausprobiert und muss sagen: Contao rocks! Leider hat das CMS aus meiner Sicht jedoch einen entscheidenden Nachteil gegenüber anderen Systemen: Es gibt nur wenige Tutorials, die "semiprofessionellen" Programmierern einen schrittweisen und zusammenhängenden Einstieg in die Extension-Entwicklung mit Contao 3 anhand eines Praxisbeispiels ermöglichen.

Die Screencast-Reihe von '''Tristan Lins auf Youtube''' stellt dabei eine Ausnahme dar. Ich persönlich mag es aber, Tutorials auch in geschriebener Form vor mir zu haben. Daher habe ich damit begonnen, die Videos in dieses Wiki zu übertragen. Viel Spaß damit!

Videolink: [http://www.youtube.com/watch?v=WeN5a0R9asQ&feature=share&list=PL3mn8AtCRAstvuAWY8dhrHisMYapPxOnt Basics - der Contao Aufbau, DCA]
==An wen richtet sich dieses Tutorial?==
Dieses Tutorial ist für all diejenigen gedacht, die ein Step-by-Step Tutorial zum Einstieg in die Extension-Entwicklung mit Contao 3 suchen.

==Lernziel==
In diesem Tutorial lernt ihr die Grundlagen der Extension-Entwicklung mit Contao 3 anhand eines praktischen Beispiels. Es wird ein Modul programmiert, welches verschiedene Screencast-URLs inkl. Titel auflistet.

'''So sieht das fertige Modul aus:'''

[[Datei:T1_fertigesModul.jpg|Fertiges Modul]]

==Was man wissen sollte==
Grundlagen in PHP, objektorientierter Programmierung und SQL sind nötig. Natürlich sollte man sich auch mit den Grundlagen von Contao 3 auskennen.

==Vorbereitung==
Eine Version von Contao 3.0.4 oder höher sollte installiert sein.
Optional: Da die Extension in das bestehende „Music Academy“-Theme integriert wird, empfiehlt es sich, selbiges zu installieren.
Ferner sollte folgende Ordnerstruktur in
''contao/system/modules''
angelegt werden:

[[Datei:T1_vorbereitung.png|Verzeichnisstruktur der Erweiterung]]

Zum Verständnis: Im Verzeichnis modules liegen die Module, die bereits von Contao mitgeliefert werden, wie z.B. FAQ, Calendar etc. Auch unser Erweiterungsmodul 'screencast' gehört in dieses Verzeichnis.

==Source-Code==
Den Quellcode könnt ihr hier:
https://github.com/bit3/contao-screencast3
herunterladen.
{{Hinweis|Es kann sein, dass der Quellcode auf github bereits einer fortgeschritteneren Version entspricht. Passt die Dateien daher ggf. dem Code dieses Tutorials an oder (am besten) programmiert alles selber! }}

=Einen Menüeintrag im Inhaltsbereich der Backend-Module erzeugen.=
*Erstellt im Verzeichnis ''config'' die Datei ''config.php''. In der ''config.php'' werden z.B. Frontend- und Backend-Module registriert.
*Schreibt in die ''config.php'' folgenden Code:

<source lang="php">
<?php

/**
* Back end modules
*/
$GLOBALS['BE_MOD']['content']['screencast'] = array(
'tables' => array('tl_screencast'),
'icon' => 'system/modules/screencast/assets/images/screencast.png'
);
</source>

Dabei steht ''['BE_MOD']['content']'' für die Elemente der Backend-Module im Inhaltsbereich (Array). Durch die Erweiterung des Arrays um ''['screencast']'' wird unser neues Modul referenziert.
Als Wert wird dem Array ein assoziatives Array mit zwei Einträgen (Verweis auf die Tabelle in der Datenbank, sowie auf die Bilddatei) übergeben.
*Fügt in den Ordner ''screencast/assets/images'' ein Icon für euer Modul ein.
*Da das assets-Verzeichnis geschützt ist, müsst ihr noch eine ''.htaccess'' Datei in ''screencast/assets/'' speichern. Darin muss stehen:
<source lang="php">
Order Allow, Deny
Allow from all
</source>

Nun soll in der Auflistung der Elemente im Backend-Modul auch eine entsprechende Übersetzung ausgegeben werden.
*Erstellt hierzu ein Verzeichnis de in eurem Verzeichnis ''screencast/languages/''
*Erstellt in diesem Verzeichnis eine Datei ''modules.php''
*In diese Datei gebt ihr folgenden Code ein:
<source lang="php">
<?php

$GLOBALS['TL_LANG']['MOD']['screencast'][0] = 'Screencasts';
$GLOBALS['TL_LANG']['MOD']['screencast'][1] = 'Screencasts verwalten';
</source>
*Öffnet eure Contao-Backend und navigiert dort zu ''System->Einstellungen''
*Setzt dort einen Haken unter den ''Sicherheitseinstellungen->Internen Cach''e umgehen. Und ''Sicherheitseinstellungen->Fehlermeldungen'' anzeigen.
*Eure Seitenleiste sollte nach einer Aktualisierung der Seite nun so aussehen:
[[Datei:t1_BE_Module.png|Die Backend-Module sind nun um den Eintrag "Screencasts" erweitert]]

Heureka! Der Eintrag erscheint in der Liste. Leider wirft Contao jedoch nach Klick auf Screencast noch eine Fehlermeldung.

Was fehlt? Contao kann noch kein DCA-Objekt erstellen.

==Was macht ein DCA?==
"Data Container Arrays (DCAs) dienen zur Speicherung von Tabellen-Metadaten. Jedes DCA beschreibt die Konfiguration einer bestimmten Tabelle, ihre Beziehungen zu anderen Tabellen sowie die einzelnen Felder. Die Contao Core-Engine erkennt anhand dieser Metadaten, wie Datensätze aufgelistet, bearbeitet und gespeichert werden."

(Quelle: https://contao.org/de/manual/3.0/data-container-arrays.html, Stand: 6.4.13)

==Wie ist ein DCA aufgebaut?==
"Ein Data Container Array ist in 6 Sektionen unterteilt. Die erste Sektion speichert globale Informationen wie z.B. Relationen zu anderen Tabellen. Die zweite und dritte Sektion legt fest, wie Datensätze aufgelistet werden und welche Aktionen ein Benutzer ausführen kann. Die vierte Sektion definiert verschiedene Gruppen von Eingabefelder (Paletten) und die letzten beiden Sektionen beschreiben die Eingabefelder im Detail."

(Quelle: https://contao.org/de/manual/3.0/data-container-arrays.html, Stand: 6.4.13)

Neu in Contao 3: In der DCA-Datei werden auch die SQL-Befehle eingetragen. Eine separate Datei ist nicht mehr notwendig.

Alles klar? Nicht? Ok...dann Schritt für Schritt.

=Das Formular zur Eintragung der Daten erstellen, sowie die Datenbank-Tabelle anlegen.=
Erstellt im Verzeichnis ''screencast/dca/'' eine Datei mit Namen ''tl_screencast.php''.

==Die Tabellenkonfiguartion==

Anmerkung: Ab jetzt ist "Mut zur Lücke" gefordert. Einige Sachverhalte sind mir in dem Screencast nicht ganz klar geworden. Leider ist auch die Dokumentation auf Contao.org in diesem Bereich noch recht rudimentär. Ich schreib daher auf, was ich verstanden habe.

Auf der Contao-Seite kann man sich über die möglichen Einträge in den DCA informieren.
https://contao.org/de/manual/3.0/data-container-arrays.html

Leider ist hier derzeit noch nicht aufgeführt, welchem Array-Abschnitt welche Einträge zugeordnet sind. Tristan empfiehlt, sich die Verwendungsmöglichkeiten in bestehenden Modulen abzugucken.
Für die nachfolgenden Erklärungen empfiehlt es sich jedoch trotzdem, den DCA-Teil der Online-Doku aufzufrufen, um scih über die Bedeutung der Arrayeinträge zu informieren.

Wer nicht alles selber schreiben möchte, kopiert sich nun erstmal den gesamten Inhalt der Datei ''sytem/modules/core/dca/tl_theme.php'' in die ''tl_screencast.php'' und modifiziert diese nur entsprechend der folgenden Beispiele.

*Schreibt in die Datei ''tl_screencast.php'' folgende Zeilen Code:
<source lang="php">
<?php

/**
* Table tl_screencast
*/
$GLOBALS['TL_DCA']['tl_screencast'] = array
(

// Config
'config' => array
(
'dataContainer' => 'Table',
'enableVersioning' => true,
'sql' => array
(
'keys' => array
(
'id' => 'primary'
)
),
),
</source>

''Was passiert hier?''

In diesem Abschnitt legen wir die Grundeinstellungen für unser Modul fest, so z.B. woher die Daten kommen.
Ergänzt die Datei mit folgendem Code (Video: 17:47):
<source lang="php">
// List
'list' => array
(
'sorting' => array
(
'mode' => 2,
'fields' => array('title'),
'flag' => 1,
'panelLayout' => 'filter;sort,search,limit'
),
</source>
''Was passiert hier?''

Im diesem Abschnitt wird festgelegt, wie die Datensätze aufgelistet werden und welche Sortieroptionen dem Nutzer zur Verfügung stehen sollen.
So steht ''panelLayout'' z.B. dafür, welche Optionen in der Kopzeile erscheinen sollen. Semiokolon oder Komma stehen dafür, ob das Layout (ein- oder mehrzeilig). Fragt mich aber nicht, warum ''filter'' in Tristans Beispiel nicht auftaucht.

[[Datei:t1_panelLayout.png|Die Elemente des Panel Layouts]]

Schaut bzgl. der anderen Optionen der Online-Doku unter "Datensätze auflisten" nach.
*Ergänzt die Datei mit folgendem Code (Video: 20:45):
<source lang="php">
'label' => array
(
'fields' => array('title'),
'format' => '%s',
),
</source>

Was passiert hier?

Hier werden die Bezeichnungen gesetzt, die später in der Listenansicht erscheinen sollen. In unserem Fall also immer der Titel der Screencasts.

[[Datei:t1_screencastListe.png|Die Titel der Screencasts]]

*Ergänzt die Datei mit folgendem Code (Video: 21:25):
<source lang="php">
'global_operations' => array
(
'all' => array
(
'label' => &$GLOBALS['TL_LANG']['MSC']['all'],
'href' => 'act=select',
'class' => 'header_edit_all',
'attributes' => 'onclick="Backend.getScrollOffset()" accesskey="e"'
)
),
</source>
Was passiert hier?

Bei den 'global operations' handelt es sich um die Bearbeitungsfelder unterhalb der Filterfelder.

[[Datei:t1_globalOperations.png|Die Global Operations]]

*Ergänzt die Datei mit folgendem Code (Video: 21:44):
<source lang="php">
'operations' => array
(
'edit' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['edit'],
'href' => 'act=edit',
'icon' => 'edit.gif'
),
'delete' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['delete'],
'href' => 'act=delete',
'icon' => 'delete.gif',
'attributes' => 'onclick="if(!confirm(\'' . $GLOBALS['TL_LANG']['MSC']['deleteConfirm'] . '\'))return false;Backend.getScrollOffset()"'
),
'show' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['show'],
'href' => 'act=show',
'icon' => 'show.gif',
'attributes' => 'style="margin-right:3px"'
),
)
),
</source>
''Was passiert hier?''

Bei den 'operations' handelt es sich um die Bearbeitungsfelder zu jedem Listeneintrag.

[[Datei:t1_operations.png|Die Operations]]

Nun kommen wir zum eigentlichen Herzstück einer jeden Erweiterung: Das BE-Formular mit den Eingabefeldern.
Im DCA wird dies definiert unter dem Bereich ''palettes''.
*Ergänzt die Datei mit folgendem Code (Video: 22:55):
<source lang="php">
// Palettes
'palettes' => array
(
'default' => '{title_legend},type,title,{screencast_legend},url'
),
</source>
''Was passiert hier?''

Die Grobstruktur des Formulars wird angelegt, also das, was später dem BE-User zur Dateneingabe präsentiert wird. Dabei stehen in den geschweifen Klammern immer die Abschnittsnamen. Es folgen die Felder. Ein Semikolon leitet einen neuen Abschnitt ein.

[[Datei:t1_beModule.png|Das BE Formular des Screencast Moduls]]

*Ergänzt die Datei mit folgendem Code (Video: 24:30)
<source lang="php">
// Fields
'fields' => array
(
'id' => array
(
'sql' => "int(10) unsigned NOT NULL auto_increment"
),
'tstamp' => array
(
'sql' => "int(10) unsigned NOT NULL default '0'"
),
'title' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['title'],
'inputType' => 'text',
'exclude' => true,
'sorting' => true,
'flag' => 1,
'search' => true,
'eval' => array(
'mandatory' => true,
'unique' => true,
'maxlength' => 255,
'tl_class' => 'w50',

),
'sql' => "varchar(255) NOT NULL default ''"
),
'url' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_screencast']['url'],
'inputType' => 'text',
'exclude' => true,
'sql' => "text NULL"
)
)
);
</source>

''Was passiert hier?''

Im Abschnitt ''fields'' werden alle Felder definiert, die in der Datenbank-Tabelle angelegt werden sollen. Dies sind meist mehr Felder, als im Formular des Backend-Moduls ausgegeben werden (z.B. wird man die id wohl fast immer automatisch setzen).
Die Felder ''id'' und ''tstamp'' sind übrigens immer Pflicht. ''sql'' ist (Überraschung) immer das SQL-Statement.

Kümmern wir uns der um die einzelnen Felder:
'title' und 'url' sind die beiden Eingabefelder im BE-Modul. Diese haben wir auch in den 'palettes' definiert. Beide felder werden noch mit einigen weiteren Eigenschaften konfikuriert:

*label: Ist eine Referenz auf die Sprachvariable, die noch erstellt wird.
*inputType: (s. Contao-Docs) in userem Fall ein Textfeld
*exclude: Erlaubt dem Admin, dieses Feld später für Redakteure zu sperren.
*sorting: Bestimmt, dass dieses Feld oben in der Sortierpalette angewählt werden kann
*flag: Regelt die Sortierreihenfolge
*search: Bestimmt, dass nach dieses Feld oben in der Sortierpalette gesucht werden kann
*eval: Konfiguriert ein Eingabefeld im Detail (s. Contao-Docs). In unserem Fall ob es ein Pflichtfeld ist, ob es einzigartig ist, die Textfeldlänge sowie die Darstellung, wie dieses Feld im BE-Modul angezeigt wird. Schaut euch zu ''tl_class'' auch das Video an oder den Abschnitt ''Felder ausrichten'' in den Docs.

*Diejenigen, die den Code aus der ''tl_theme.php'' kopiert haben:
Löscht bitte den nachfolgenden Code aus eurer Datei. Die Klassendefinition wird für diese Beispiel nicht benötigt.
*Der große Moment ist nah: Navigiert im Contao-BE zu ''System->Erweiterungskatalog'' und klickt auf Datenbank aktualisieren.
Wenn ihr alles richtig gemacht habt, solltet ihr nun eine Meldung von Contao darüber erhalten, dass eine neue Tabelle angelegt wird. Klickt auf Aktualisieren.
*Jetzt könntet ihr eigentlich schon einen Screencast anlegen....aber es fehlen noch die Sprachvariablen.
*Erstellt daher eine Datei ''tl_screencast.php'' im Verzeichnis ''screencast/languages/de''.
*Gebt folgenden Code in diese Datei ein (Video: 32:30):
<source lang="php">
<?php

$GLOBALS['TL_LANG']['tl_screencast']['title_legend'] = 'Titel';

$GLOBALS['TL_LANG']['tl_screencast']['type'][0] = 'Typ';
$GLOBALS['TL_LANG']['tl_screencast']['type'][1] = 'Wählen Sie hier aus, ob es sich um ein externes oder lokales Video handelt.';

$GLOBALS['TL_LANG']['tl_screencast']['title'][0] = 'Titel';
$GLOBALS['TL_LANG']['tl_screencast']['title'][1] = 'Geben Sie hier den Screencast Titel ein.';

$GLOBALS['TL_LANG']['tl_screencast']['screencast_legend'] = 'Screencast';

$GLOBALS['TL_LANG']['tl_screencast']['url'][0] = 'Video URL';
$GLOBALS['TL_LANG']['tl_screencast']['url'][1] = 'Geben Sie hier die Video URL ein.';

$GLOBALS['TL_LANG']['tl_screencast']['new'][0] = 'Neuer Screencast';
$GLOBALS['TL_LANG']['tl_screencast']['new'][1] = 'Einen neuen Screencast anlegen';

$GLOBALS['TL_LANG']['tl_screencast']['edit'][0] = 'Screencast bearbeiten';
$GLOBALS['TL_LANG']['tl_screencast']['edit'][1] = 'Screencast ID %s bearbeiten';

$GLOBALS['TL_LANG']['tl_screencast']['delete'][0] = 'Screencast löschen';
$GLOBALS['TL_LANG']['tl_screencast']['delete'][1] = 'Screencast ID %s löschen';

$GLOBALS['TL_LANG']['tl_screencast']['show'][0] = 'Screencastdetails';
$GLOBALS['TL_LANG']['tl_screencast']['show'][1] = 'Details des Screencast ID %s anzeigen';

</source>

''Was passiert hier?''

Es werden alle Übersetzungen angelegt, die für das Backend notwendig sind.
Die notwendigen Keys der Arrays findet ihr z.T. in der DCA-Datei unter ''paletts'' bzw. im Bereich ''global operations'' und ''operations''. Die Beschreibungen der Felder liegen immer auf dem zweiten Arrayeintrag.

''Beispiel:''

''['title']'' bezieht sich auf das den paletts-Eintrag title. ''[0]'' ist dabei der Titel des BE-Feldes.''[1]'' ist die Beschreibung unterhalb des Feldes. Diese wird automatisch hinzugefügt.

[[Datei:t1_title.png|Die Übersetzungen zu den Feldern]]

=Anlegen der Klasse für die Ausgabe-Logik=
(Video:39:00)
*Legt im Verzeichnis ''screencast/modules/'' die Datei ''ModuleScreencastList.php''
*Legt im Verzeichnis ''screencast/templates'' die Datei ''mod_screencast_list.html5'' an. Wer noch mit xhtml arbeitet: Legt auch noch eine ''mod_screencast_list.xhtm''l an. Ich gehe im Folgenden aber nur auf die .html5 Datei ein.
*Fügt dort folgenden Code in die Datei ''ModuleScreencastList.php'' ein:
<source lang=php">
<?php

class ModuleScreencastList extends Module
{
/**
* Template
* @var string
*/
protected $strTemplate = 'mod_screencast_list';

/**
* Compile the current element
*/
protected function compile()
{
/** @var \Contao\Database\Result $rs */
$rs = Database::getInstance()
->query('SELECT * FROM tl_screencast ORDER BY title');

$this->Template->screencasts = $rs->fetchAllAssoc();
}
}

</source>

''Was passiert hier?''
In dieser Datei werden die Datensätze aus der Datenbank gelesen und an das FE-Template übergeben.
Die hierzu notwendige Klasse muss den selben Namen erhalten, wie der Dateiname. Ferner muss die Klasse von der übergeordneten Klasse ''Module'' erben.

Die folgenden Anweisungen kann man eigentlich nur richtig verstehen, wenn man sich die Datei module.php in system/modules/core/modules anschaut, bzw. einen Blick in die weiter übergeordnetetn Klassen wirft.

Ich versuch's mal ohne Referenz auf die übergeordneten Klassen:
#Zunächst wird Contao die Template-Datei übergeben ($strTemplate).
#Anschließend folgt die Methode compile(), welche für die Daten für die Übergabe an das Template vorbereitet.
#Nun wird über die statische Methode getInstance() ein Contao-Datenbankobjekt erzeugt (system/modules/core/library/Contao/Database.php). Dieses Objekt hat die Methoden query und liefert ein Contao-DB-Ergebnisobjekt zurück (system/modules/core/library/Contao/Database/Result.php). Dieses Objekt wiederum hat die Methode fetchAllAssoc(), welche ein assoziatives Array zurückgibt (Key=Feldnamen). Diese speichern wir in der Variablen screencasts, welche durch die übergeordneten Klassen von ModuleScreencastList einem FE-Templateobjekt zugeordnet wird.

=Das FE-Template erstellen=
(Video 43:00)

Wer faul ist, kopiert sich den Code aus der ''mod_flash.html5'' (system/modules/core/templates) in seine Datei ''mod_screencast_list.html5''.

Am Ende sollte der Code wie folgt aussehen:

<source lang="php">

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<?php foreach ($this->screencasts as $screencast): ?>
<h2><?php echo $screencast['title']; ?></h2>

<iframe width="560" height="315" src="http://www.youtube-nocookie.com/embed/<?php echo str_replace('http://youtu.be/', '', $screencast['url']); ?>?rel=0" frameborder="0" allowfullscreen></iframe>

<?php endforeach; ?>

</div>

</source>

''Was passiert hier?''

Das Template wird im Kontext der FE-Templateklasse ausgegeben. Daher kann mit ''$this'' auf die Attribute und Methoden des Objekts zugegriffen werden. Dies haben wir in der compile()-Methode in ''ModuleScreencastList.php'' definiert.

=Das FE-Template im System registrieren (Video 44:00)=
(Video 43:00)
Ergänzt die Datei config.php um folgenden Code

<source lang="php">
/**
* Front end modules
*/
$GLOBALS['FE_MOD']['screencast'] = array
(
'screencast_list' => 'ModuleScreencastList',
);

</source>

''Was passiert hier?''
Unser FE-Template muss noch dem Contao-System bekannt gemacht werden. Jetzt sollte man das Modul bereits im Backend in der Modulliste auswählen können. Es fehlt jedoch noch die Übersetzung.

=Die Übersetzung für das FE-Template erstellen (Video 44:00)=
Öffnet die Datei modules.php in screencast/languages/de/ und ergänzt folgende Zeilen Code:

<source lang="php">

$GLOBALS['TL_LANG']['FMD']['screencast_list'] = 'Screencast Liste';

</source>

''Was passiert hier?''
Nun....in der Modulliste steht künftig "Screencast Liste".

=Erstellung der autoloader-Dateien=
Der Autoloader sorgt z.B. dafür, dass alle notwendigen Templates bzw. Klassen des Moduls im Contao-System registriert werden. Praktischerweise können die autoloader-Dateien automatisch generiert werden.
Navigiert hierzu im Backend auf ''Entwickler-Tools->Autoload-Creator''.
Wählt das Modul screencast aus und klickt auf ''Autoload-Dateien erstellen''.
Prüft, ob die Dateien ''autoload.php'' und autiload.ini in eurem ''config''-Verzeichnis erstellt wurden.
autoload.php:

<source lang="php">
<?php

/**
* Contao Open Source CMS
*
* Copyright (C) 2005-2013 Leo Feyer
*
* @package Screencast
* @link https://contao.org
* @license http://www.gnu.org/licenses/lgpl-3.0.html LGPL
*/

/**
* Register the classes
*/
ClassLoader::addClasses(array
(
// Modules
'ModuleScreencastList' => 'system/modules/screencast/modules/ModuleScreencastList.php',
));

/**
* Register the templates
*/
TemplateLoader::addFiles(array
(
'mod_screencast_list' => 'system/modules/screencast/templates',
));

</source>

autoload.ini
<source lang="php">

;;
; Configure what you want the autoload creator to register
;;
register_namespaces = true
register_classes = true
register_templates = true

</source>

=Geschafft!=
Wenn ich mich nicht verschrieben habe und ihr alles richtig gemacht habt, könnt ihr eure Screencast-Modul nun einsetzen.

=Ausblick=
Im folgenden Teil wird unser Modul erweitert. Dabei geht es schwerpunktsmässig um das Hinzufügen von sog. Subpaletten, die eine kontextsensitive (schönes Wort) Auswahl von Einstellungen im Modulbereich erlauben. Zu Deutsch: Wenn der Nutzer die Wahl zwischen verschiedenen Screencast-Quellen (z.B. Youtube, Vimeo etc.) hat, verändern sich die folgenden Eingabe-/Auswahlfelder.

Das Video könnt ihr euch hier schon ansehen:
Videolink : [http://www.youtube.com/watch?v=I1-1mqIR_B4&list=PL3mn8AtCRAstvuAWY8dhrHisMYapPxOnt&index=4 DCA Paletten und Subpaletten, MetaPalettes]

So...ich habe erstmal fertig. Bis demnächst.
Grüße von
kobajashi

=Weiterführende Links=
[[C3: Tutorial Extension Entwicklung 2.Teil: Selective DCA Paletten und Subpaletten|2. Teil Selective DCA Paletten und Subpaletten]]

MooTools Snippets

2012-11-17T11:18:14Z

Flex: Eine Sammlung von MooTools Code Snippets.

= MooTools Snippets =
[[Category:Dev HOWTOS]]
[[Category:Dev Snippets]]
== Einführung ==

Immer wieder komme ich an die Situation, dass ich ein wenig JavaScript schreiben muss, was ich leider nur leidlich beherrsche...
Deshalb dachte ich mir, lege ich mal eine Sammlung von Snippets an, die ich so benutze und vielleicht auch andere Leute brauchen könnten bzw. eigene hinzufügen wollen.

== Snippets ==

=== Bildwechsel bei Hover ===
<source lang="javascript">
window.addEvent('domready', function() {
$$('.hover img').each(function(img) {
var src = img.getProperty('src');
var extension = src.substring(src.lastIndexOf('.'),src.length)
img.addEvent('mouseenter', function() { img.setProperty('src',src.replace(extension,'-mo' + extension)); });
img.addEvent('mouseleave', function() { img.setProperty('src',src); });
});
});;
</source>

Dieses Snippet ersetzt die Bilder bei einem Mousehover. Es kann einfach per Hinzufügen der Klasse "hover" an das jeweilige Bildelement (oder Textelement) eingebunden werden.
Das Bild wird dabei durch das gleichnamige Bild mit dem Zusatz "-mo" im gleichen Pfad ersetzt.
Beispiel:
tl_files/images/foobar.jpg => tl/files/images/foobar-mo.jpg

Beachtet man dies bei der Namensgebung, so sollte das problemlos funktionieren...

[http://davidwalsh.name/mootools-image-mouseovers Quelle]

Contao2Go

2011-08-31T11:35:20Z

Flex: /* Tips und Tricks */

[[Category:Sonstiges]]

=Grundlagen=
Contao2Go ist ein selbst konfigurierendes WAMP System, welches ohne Installation von Software auskommt.
Ein einfaches Auspacken und Starten der Server2Go.exe ermoeglicht, Contao (sowie durch nachladbare C2G Pakete auch TYPOlight) lokal ausgiebig zu testen.

Besonderheit hierbei ist das Snapshot System, womit jederzeit der Zustand einer Entwicklung eingefroren werden kann und jederzeit wiederherstellbar ist.

Hierdurch ist es zum Beispiel moeglich, Kundenpraesentationen mit unterschiedlichen Designs aufzubauen, ohne das man spaeter beim Kunden gross im Backend etwas aendern muss. Es muss nur in den Designphasen ein SnapShot erstellt werden.
Dieser kann dann komfortabel mittels Klick innerhalb weniger Sekunden wiederhergestellt werden.

Aktuell sind folgende Moeglichkeiten vorhanden :
*vHost Uebersicht
**vorhandene Installationen aufzeigen, incl. der Moeglichkeit, direkt in einem neuen Fenster das Frontend oder das Backend aufzurufen.
**Snapshot der Installation erstellen
**Installation incl. Datenbank entfernen

*Sicherungen
**Vorhandene SIcherungen einsehen, hierbei sind die Sicherungen Installationsbezogen geordnet
**Sicherungen wiederherstellen
**Sicherungen loeschen

=Wirtssystem=
==Windows==
Um Contao2Go unter Windows nutzen zu können, muss die entsprechende exe-Datei von der Projekthomepage [http://www.contao2go.org/herunterladen.html heruntergeladen] werden. Diese exe-Datei ist ein selbstextrahierendes Zip-Paket, welches man nach einem Doppelklick darauf an einen Ort seiner Wahl entpackt. 
In dem Ordner findet man eine Datei namens ''Server2Go.exe''; mit dieser wird Contao2Go gestartet. Wenn Contao2Go korrekt gestartet wurde, erscheint im Infobereich neben der Uhr ein entsprechendes Icon.

[[Datei:c2g_systray.png|Contao2Go-Icon im Infobereich|center|frame]]

Contao2Go ist nun einsatzbereit und kann über den Link [http://localhost:4001 http://localhost:4001] aufgerufen und verwendet werden. 
Will man Contao2Go an einen anderen Ort verschieben oder beenden, klickt man auf das Icon im Infobereich und wählt ''Close Contao2Go''.

===Update===
Bevor man das Wirtssystem von Contao2Go updaten kann, muss man von jeden vHost eine Sicherung erstellen. Dies geschieht in der Übersichtsseite von Contao2Go. Anschliessend beendet man Contao2Go und sichert den Ordner ''\Contao2Go\htdocs\backups'', indem sich die Sicherungen befinden. Im nächsten Schritt lädt man sich das aktuelle Contao2Go von der Projekthomepage und entpackt es in einen '''neuen''' Ordner. Nun spielt man den zuvor gesicherten Ordner ''backups'' wieder in das neue Contao2Go ein. 
Nachdem man kontrolliert hat, ob alle Sicherungen wieder vorhanden sind, kann man den alten Contao2Go-Ordner löschen.

==Linux==
noch nicht veröffentlicht...
==Mac OS X==
noch nicht veröffentlicht...
==Sonderfall c2gadmin==
{{msgWarning|Contao2Go ist nicht für einen Online-Einsatz vorgesehen und sollte aus Sicherheitsgründen nicht öffentlich im Netz betrieben werden!}}
Ein Sonderfall ist c2gadmin, mit der Contao2Go einfach in eine existierende Contao-Installation eingebunden werden kann. Dazu installiert man sich einfach über die Erweiterungsverwaltung einer Contao-Installation die Erweiterung [http://www.contao.org/erweiterungsliste/view/c2gadmin.10000006.de.html c2gadmin]. 
Anschliessend stehen in den Artikeln 2 neue Inhaltselemente bereit:
*c2g_listBackups: Als Weiterleitungsseite muss jene Seite angegeben werden, auf der das zweite Inhaltselement (c2g_listVHosts) eingebunden ist.
*c2g_listVHosts: Als Weiterleitungsseite muss jene Seite angegeben werden, auf der das erste Inhaltselement (c2g_listBackups) eingebunden ist.

=Nutzung=
{{msgInfo|In C2G-SnapShots ist die Datenbank anonymisiert. D.h. Datenbank Eintraege in der localconfig.php werden automatisch entfernt und beim Import automatisch basierend auf dem aktuellen System gesetzt. Somit ist auch eine Weitergabe der C2G Pakete an Kunden problemlos moeglich.}}
==Eine neue Installation erstellen==
Dazu wechselt man in der Contao2Go-Verwaltung auf die Seite ''Informationen'', klickt den Link [http://localhost:4001/phpmyadmin /phpmyadmin] und loggt sich mit dem Benutzernamen ''root'' ein (Passwort ist keines erforderlich). Anschliessend erstellt man in dem auf der Startseite befindlichen Bereich ''My SQL localhost'' eine neue Datenbank mit der Kollation ''utf8_general_ci''.

[[Datei:c2g_phpmyadmin_newdb.png|Neue Datenbank erstellen|center|frame]]

Danach kann phpmyadmin geschlossen werden.

Als nächsten Schritt wechselt man im Dateiexplorer des Betriebssystems in den Ordner von Contao2Go und von dort aus in den Unterordner ''\Contao2Go\htdocs\vhosts''. Hier erstellt man einen Ordner (z.B. namens testseite). 
In diesem Ordner kopiert man den Inhalt der Core-Installation, den man sich von der [http://www.contao.org/herunterladen.html Contao-Homepage] heruntergeladen hat.

[[Datei:c2g_filebrowser.png|Dateisystem|frame|center]]

Ab diesem Zeitpunkt ist die Seite in der Contao2Go-Verwaltung unter ''Hosts'' gelistet.

Nun kann man Contao wie gewohnt über das [http://localhost:4001/vhosts/testseite/contao/install.php Installtool] installieren. Bei der Installation ist darauf zu achten, dass man die korrekten Datenbank-Daten verwendet:
*Treiber: MySQL
*Host: localhost
*Benutzername: root
*Datenbank: test
*Dauerhafte Verbindung: nein
*Zeichensatz: UTF8
*Portnummer: 7188

Nach der Installation kann die Seite verwendet werden.

==Eine bestehende Installation integrieren==
Eine bestehende Installation (z.B. aus XAMPP oder einer Live-Webseite) in Contao2Go integrieren funktioniert prinzipiell nach dem selben System wie eine [[Contao2Go#Eine_neue_Installation_erstellen|neue Installation zu erstellen]]:
*Eine Sicherung des existierenden Dateisystem nach ''\Contao2Go\htdocs\vhosts\testseite\ kopieren.
*Ein Backup der existierenden Datenbank erstellen (z.B. mit der Erweiterung [[BackupDB]]).
*Eine leere Datenbank in phpmyadmin erstellen und das zuvor erstellte Datenbank-Backup in diese Datenbank importieren.
*Die Datei ''\Contao2Go\htdocs\vhosts\testseite\system\config\localconfig.php öffnen und die Zugangsdaten der Datenbank anpassen:
<source lang="php">
$GLOBALS['TL_CONFIG']['dbDriver'] = 'MySQL';
$GLOBALS['TL_CONFIG']['dbHost'] = 'localhost';
$GLOBALS['TL_CONFIG']['dbUser'] = 'root';
$GLOBALS['TL_CONFIG']['dbPass'] = '';
$GLOBALS['TL_CONFIG']['dbDatabase'] = 'test';
$GLOBALS['TL_CONFIG']['dbPconnect'] = false;
$GLOBALS['TL_CONFIG']['dbCharset'] = 'UTF8';
$GLOBALS['TL_CONFIG']['dbPort'] = 7188;
</source>
*Falls eine .htaccess - Datei verwendet wird, diese kontrollieren (z.B. auf Hosterspezifische Einträge).
*Anschliessend wird das Installtool der Webseite aufgerufen. Dies dient dazu, um a) die neuen Seitenpfade zu erstellen (geschieht automatisch, ohne dass man etwas machen muss) und b) um die Datenbank-Verbindung zu prüfen.
*Zuletzt loggt man sich im Backend ein und kontrolliert in der Seitenstruktur im ''Startpunkt der Webseite'' im Abschnitt ''DNS-Einstellungen'' das Feld ''Domainname''. Sollte ein Eintrag vorhanden sein, löscht man diesen.

==Ein c2g-Paket importieren==
Zuerst lädt man sich das gewünschte c2g-Paket von der [http://contao2go.org/pakete.html Projekt-Homepage] auf seinen Computer. Anschliessend wechselt man in seiner lokalen C2G-Webseite auf die Seite [http://localhost:4001/importieren.html Importieren]. Dort klickt man auf den Button ''Durchsuchen'' und wählt das herunter geladene c2g-Paket aus; gefolgt von einem Klick auf den Button ''Importieren''.

[[Datei:c2g_import.png|c2g-Paket importieren|center|frame]]

Nachdem der Import erfolgreich durchgeführt wurde, erscheint eine entsprechende Meldung. Anschliessend wechselt man mit dem darunter stehenden Link auf die Sicherungsübersicht.

[[Datei:c2g_importsuccess.png|Import erfolgreich durchgeführt|center|frame]]

In der Sicherungsübersicht erscheint nun das vorhin importierte c2g-Paket.

[[Datei:c2g_backups.png|Sicherungsübersicht|center|frame]]

Mit einem Klick auf den Button ''Sicherung wiederherstellen'' (2 gelben Pfeile) wird die Sicherung nun wiederhergestellt. Auf der Seite ''Hosts'' ist das importierte c2g-Paket nun als entsprechende Webseite gelistet und kann verwendet werden.

[[Datei:c2g_hosts.png|Host Übersicht|frame|center]]

=Tips und Tricks=
==Beschreibung für einen vHost erstellen==
Um eine Beschreibung für die vHost-Übersicht bereit zu stellen, muss eine Datei namens ''package.info'' im Root-Verzeichnis des jeweiligen vHosts erstellt werden.
Der Inhalt dieser Datei entspricht einer XML-Datei und kann mehrsprachigen Beschreibungstext enthalten. Pflichtsprache ist englisch (en), da diese als Standardsprache verwendet wird. Weitere Sprachen können mit den üblichen 2 Zeichen Ländercodes hinzugefügt werden. Anbei ein Beispiel:
<source lang="xml">
<package>
<de>
<description>
<![CDATA[
Standardinstallation des Contao2Go Paketes. 
Beinhaltet die Themes <ul>
<li><a href="http://www.contaothemes.de/" title="fences" onclick="window.open(this.href); return false;">fences</a> der <a href="http://www.contao.org/partner.html?show=5334" title="piyo medienagentur" onclick="window.open(this.href); return false;">piyo medienagentur (Lars Tubies)</a></li>
<li><a href="http://themes.contao-agentur.de/ka-classic/" title="kl_classic" onclick="window.open(this.href); return false;">ka_classic</a> der <a href="http://www.contao.org/partner.html?show=502" title="Die Kommunikationsabteilung" onclick="window.open(this.href); return false;">Kommunikationsabteilung (Fabian Fauth)</a></li>
</ul>
]]>
</description>
</de>
<en>
<description>
<![CDATA[
Standardinstallation for Contao2Go package 
Contains following Themes <ul>
<li><a href="http://www.contaothemes.de/" title="fences" onclick="window.open(this.href); return false;">fences</a> from <a href="http://www.contao.org/partner.html?show=5334" title="piyo medienagentur" onclick="window.open(this.href); return false;">piyo medienagentur (Lars Tubies)</a></li>
<li><a href="http://themes.contao-agentur.de/ka-classic/" title="kl_classic" onclick="window.open(this.href); return false;">ka_classic</a> from <a href="http://www.contao.org/partner.html?show=502" title="Die Kommunikationsabteilung" onclick="window.open(this.href); return false;">Kommunikationsabteilung (Fabian Fauth)</a></li>
</ul>
]]>
</description>
</en>
</package>
</source>
==max_execution_time erhöhen==
Bei grossen c2g-Paketen oder bei langsamen USB-Sticks kann es vorkommen, dass es bei der Sicherungswiederherstellung zu einem timeout kommt. In der Regel wird das mit folgender Fehlermeldung quittiert:
<source lang="text">
Fatal error: Maximum execution time of 10 seconds exceeded in D:\Contao2Go\htdocs\system\modules\c2gadmin\c2g_functions.php on line 259
</source>
Abhilfe schafft hier die Erhöhung der max_execution_time des Servers. Dazu wechstelt man im Dateisystem in den Ordner ''\Contao2Go\server\config_tpl\'' und öffnet die Datei ''php.ini''. In dieser sucht man nach der Zeile:
<source lang="php">
max_execution_time = 120
</source>
Nun kann man die Zeit entsprechend erhöhen (z.B. 180 oder 240). Anschliessend startet man Contao2Go neu.
==MySQLi aktivieren==
Damit es läuft muss man ''server/config_tpl'' die ''php.ini'' bearbeiten und unter den '';Windows Extensions'' folgende Zeile hinzufügen:

<source>
extension=php_mysqli.dll
</source>

'''Wichtig'''

Beim Erstellen einer Verbindung muss man nur bedenken, dass der Standard MySQL Port hier auf 7188 steht und man deshalb beim Erstellen einer Verbindung den Port 3306 mitgibt.

=Screenshots=

[[Datei:Contao2go_28012011_201855.png|center|frame|v-Hosts Übersicht]]

[[Datei:Contao2go_28012011_201943.png|center|frame|Sicherung erstellen]]

[[Datei:Contao2go_28012011_201957.png|center|frame|Sicherungen Übersicht]]