Typo3 Extensions entwickeln @deprecated: Unterschied zwischen den Versionen

Aus Vosp.info
Wechseln zu:Navigation, Suche
(→‎Quellen)
(→‎Konfiguration mit Flexforms)
 
(91 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
−
==kickstarter==
+
[[Typo3]]
−
=== Installation vom Kickstarter===
 
−
im Backend im Extensionmanager die Extension '''kickstarter''' importieren und installieren
 
  
−
=== Konfiguration der Extension===
+
'''Achtung''': basiert auf Klasse [https://typo3.org/api/typo3cms/classtslib__pibase.html pibase] @deprecated since 6.0 will be removed in 7.0 !!!! @new: [[Typo3 Flow]]
 +
* um sich das Grundgerüst einer Extension erstellen zu lassen bitte hier schauen [[Typo3 kickstarter Extension]]
 +
* Umsetzung mit den neuen extensions fluid und extbase !!!
 +
** [[Typo3 Extension jquery.dataTables]]
  
−
den Extensionmanager aktualisieren und im Dropdown '''Create new Extension''' auswählen
+
== Grundlagen ==
 +
Klassifikation von Typo3 Extensions
 +
* Front-End-Plug-In (pi1, pi2, ..)
 +
* Backend-Modul (mod1, mod2, ..)
 +
* XClass (passender Ordner)
 +
** "Nahezu jede Extension- und auch viele Core- Dateien bieten die Möglichkeit über XCLASS nicht die eigentlichen Skripte auszuführen sondern alternative Skripte – somit kann eine komplett andere Datei als die eigentlich vorbestimmte verwendet werden." (Alex Kellner)
 +
* Service (sv1, sv2,..
 +
* Hook (lib, o.ä.)
 +
** "Während man also über die XCLASS ganze Dateien ersetzen kann, ist ein Hook “nur” dazu gedacht, einen definierten Bereich zu manipulieren" (Alex Kellner)
  
−
Schlüsselnamen geben: '''testit'''
+
* TSConfig (ext_typoscript_setup.txt)
 +
* Fassaden zu anderen Projekten (nicht GPL)
  
−
Achtung hinterher ist es Arbeit den zu verändern und falls er veröffentlicht werden soll, muss er eindeutig sein
 
  
−
==== General Info ====
+
* '''Quellen'''
−
'''General Info''' rechts aufs + Symbol drücken um ins Formular zu kommen und Formularfelder ausfüllen (sie sind rein informativ)
+
** [https://de.wikipedia.org/wiki/Hook_%28Informatik%29 Hook (Informatik)]
 +
** [http://typo3blogger.de/alles-uber-hooks/ Alles über Hooks]
  
−
'''update'''
+
== Beispiel mit template, css und Sprachdatei ==
 +
=== Template mit html ===
 +
'''pi1/templates/template.html'''
 +
<source lang="html4strict" line=1>
 +
<!-- ###SUBPART1### begin -->
 +
<div ID="VAR1">###VAR1###</div>
 +
<div ID="SUBPART2_MARKER">###SUBPART2_MARKER###</div>
 +
<div ID="VAR_CONF">###VAR_CONF###</div>
 +
<!-- ###SUBPART1### end -->
 +
 +
<!-- ###SUBPART2### begin -->
 +
<div ID="VAR2">###VAR2###</div>
 +
<!-- ###SUBPART2### end -->
 +
</source>
  
−
====Frontend Plugins====
+
=== Design mit css ===
−
'''Frontend Plugins''' rechts aufs + Symbol drücken um ins Formular zu kommen und Formularfelder ausfüllen
+
'''pi1/template.css'''
 +
<source lang="css" line=1>
 +
div#VAR1 {
 +
font-size: 12px; color:red;
 +
}
 +
div#VAR2 {
 +
font-size: 14px; color:blue;
 +
}
 +
div#VAR_CONF{
 +
font-size: 16px; color:green;
 +
}
 +
</source>
  
−
* Enter a title for the plugin:
+
=== Lokalisierung mit xml ===
−
* Add to 'Insert Plugin' list in Content Elements'
+
pi1/locallang.xml
−
* Write a description for the entry (if any):
+
<source lang="xml" line=1>
 +
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 +
<T3locallang>
 +
<meta type="array">
 +
<type>module</type>
 +
<description>Language labels for plugin &quot;tx_testit_pi1&quot;</description>
 +
</meta>
 +
<data type="array">
 +
<languageKey index="default" type="array">
 +
<label index="VAR1">text for var 1 in english</label>
 +
<label index="VAR2">text for var 2 in english</label>
 +
</languageKey>
 +
<languageKey index="de" type="array">
 +
<label index="VAR1">Text für var 1 in deutsch</label>
 +
<label index="VAR2">Text für var 2 in deutsch</label>
 +
</languageKey>
 +
</data>
 +
</T3locallang>
 +
</source>
  
 +
=== Konfiguration mit Flexforms ===
  
−
'''update'''
+
veraltet besser hier schauen [[TYPO3.CMS 6.2 Extension entwickeln - Backend#Konfiguration im Backend_f.C3.BCr_ein_Frontend_Plugin_mit_flexform]]
  
−
====View result====
+
'''pi/flexform_ds_pi1.xml'''
−
mit '''View result''' sieht mensch, was alles gemacht werden soll!
+
<source lang="xml"  line=1>
 +
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 +
<T3DataStructure>
 +
    <sheets>
 +
        <Konfigurationsformular>
 +
            <ROOT>
 +
                <TCEforms>
 +
                    <sheetTitle>LLL:EXT:testit/locallang_db.xml:tt_content.list_type_pi1</sheetTitle>
 +
                </TCEforms>
 +
                <type>array</type>
 +
                <el>
 +
                    <VAR_CONF_Formular>
 +
                        <TCEforms>
 +
                            <label>LLL:EXT:testit/locallang_db.xml:VAR_CONF</label>
 +
                            <config>
 +
                                <type>input</type>
 +
                                <size>100</size>
 +
                            </config>
 +
                        </TCEforms>
 +
                    </VAR_CONF_Formular>
 +
                </el>
 +
            </ROOT>
 +
        </Konfigurationsformular>
 +
    </sheets>
 +
</T3DataStructure>
 +
</source>
 +
'''locallang_db.xml'''
 +
<source lang="xml" line="1">
 +
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 +
<T3locallang>
 +
<meta type="array">
 +
<type>database</type>
 +
<description>Language labels for database tables/fields belonging to extension 'testit'</description>
 +
</meta>
 +
<data type="array">
 +
<languageKey index="default" type="array">
 +
<label index="tt_content.list_type_pi1">testit title</label>
 +
<label index="VAR_CONF">please set a value for the frontend</label>
 +
</languageKey>
 +
<languageKey index="de" type="array">
 +
<label index="tt_content.list_type_pi1">testit Title</label>
 +
<label index="VAR_CONF">bitte einen Wert fürs Frontend setzen</label>
 +
</languageKey>
 +
</data>
 +
</T3locallang>
 +
</source>
 +
'''ext_tables.php''' folgende Zeilen hinzufügen
 +
<source lang="php" line="1" start="16">
 +
<?
 +
// ....
 +
$TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1']='pi_flexform';
 +
t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY.'/pi1/flexform_ds_pi1.xml');
 +
?>
 +
</source>
  
−
mit '''WRITE''' bzw danach OK wird dann auch endlich was erstellt
+
=== Software mit php ===
 +
'''pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse)'''
  
−
jetzt ist die Extensions erstellt und gleich auch ins typo3 System installiert
+
<source lang="php"  line="1">
 +
<?php
 +
class tx_testit_pi1 extends tslib_pibase {
 +
// ....
 +
public function main($content, array $conf) {
 +
// speichern der Konfiguration
 +
$this->conf = $conf;
 +
// POST GET wird geladen
 +
$this->pi_setPiVarDefaults();
 +
// Sprachdaten werden geladen
 +
$this->pi_loadLL();
 +
 +
// Aufruf des Beispiels 
 +
$content .= $this->example_Template_Css_Lang();
 +
 +
return $this->pi_wrapInBaseClass($content);
 +
}
 +
public function example_Template_Css_Lang() {
 +
// css wird included
 +
$GLOBALS['TSFE']->pSetup['includeCSS.'][$this->extKey] = 'EXT:' . $this->extKey . '/pi1/css/template.css';
 +
 
 +
// Template wird included
 +
$this->template = $this->cObj->fileResource('EXT:' . $this->extKey . '/pi1/templates/template.html');
 +
 +
// Subparts werden extrahiert
 +
$tmpl_SUBPART1 = $this->cObj->getSubpart($this->template, '###SUBPART1###');
 +
$tmpl_SUBPART2 = $this->cObj->getSubpart($this->template, '###SUBPART2###');
 +
 +
//  Flexform laden
 +
$this->pi_initPIflexForm();
 +
 +
// Werte werden für die Marker gesetzt
 +
$array_markers = array(
 +
'###VAR1###' => $this->pi_getLL('VAR1'),
 +
'###VAR2###' => $this->pi_getLL('VAR2'),
 +
'###VAR_CONF###' => $this->pi_getFFvalue($this->cObj->data['pi_flexform'], "VAR_CONF_Formular", "Konfigurationsformular"),
 +
);
 +
 +
// der Subpart 2 wird ins SUBPART2_MARKER gesetzt
 +
$array_markers['###SUBPART2_MARKER###'] = $this->cObj->substituteMarkerArrayCached($tmpl_SUBPART2, $array_markers);
 +
 +
//
 +
$content = $this->cObj->substituteMarkerArrayCached($tmpl_SUBPART1, $array_markers);
 +
 +
return $content;
 +
}
 +
// ....
 +
}
 +
?>
 +
</source>
  
 +
== Dokumentation ==
 +
[https://typo3.org/extensions/repository/view/doc_template offizielle Typo3-Extension-Dokumentations-Vorlage] runterladen und manual.swx ins doc Verzeichniss
  
−
==Ansicht im Typo3 System==
+
== jquery ==
−
so jetzt die neue installierte Extension auf einer Seite als ''Neues Inhaltselement'' hinzufügen (sollte bei ''Allgemeines Plug-In'' erscheinen, ansonsten noch mal kontrollieren ob sie auch wirklich installiert ist!!!)
+
=== 3 Wege jquery einzubinden ===
 +
* über die extension t3jquery
 +
* download der jquery Bibliothek
 +
* direkte Einbindung über code.jquery.com (Beispiel: [[#Einbindung der jquery Bibliothek inklusive kleines jquery Beispiel]])
 +
==== Einbindung der jquery Bibliothek inklusive kleines jquery Beispiel====
  
−
und es sich im Frontend ansehen
+
''Das Beispiel führt dazu das h1 html-Tags nicht angezeigt werden!''
  
−
== Source Code ==
+
'''Einbinden der Bibliothek über [http://code.jquery.com code.jquery.com]''' im typoscript template setup
−
im Ordner /typo3conf/ext/testit befinden sich jetzt die durch den kickstarter generierten Dateien
 
  
−
''/typo3conf/ext/testit''
+
'''Seiten template:setup'''
−
* doc => hier kann die Dokumentation abgelegt werden
+
# einbinden der jquery Bibliothek
−
** wizard_form.dat 
+
page.includeJSFooter.jquery.external=1
−
** wizard_form.html
+
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js
−
* pi1 => die eigentlichen Source Code Dateien
+
   
−
** $GLOBALS -- nützliche Informationen
+
# einbinden des Beispielskripts
−
** '''class.tx_testit_pi1.php''' extends [http://api.typo3.org/typo3cms/47/html/class_8tslib__pibase_8php.html tslib_pibase]  => eine Klasse
+
  page.includeJSFooter.myjavascript=fileadmin/example.js
−
*** main() -- Die Funktion die aufgerufen wird
 
−
**** $content Parameter -- bisheriger Inhalt (das ist meistens ein leerer String)
 
−
**** $conf Parameter -- Konfiguration
 
−
**** $this->pi_setPiVarDefaults(); --- GET und POST Variablen werden geladen
 
−
**** $this->pi_loadLL(); --- Sprachdaten aus pi1/locallang.xml werden geladen
 
−
**** $this->pi_getPageLink($GLOBALS['TSFE']->id) --- "Liefert man ihr die ID einer Typo3-Seite, spuckt es die URL zu dieser Seite aus."
 
−
**** $this->pi_linkToPage('linktext', , $GLOBALS['TSFE']->id) --- generiert einen Link
 
−
**** Formulare
 
−
***** $this->prefixId.['input_field'] --- Festlegung der Namen von Formularfeldern 
 
−
***** $this->piVars['input_field'] --- hier können sie wieder ausgelesen werden
 
−
** locallang.xml
 
−
* ChangeLog  
 
−
* ext_emconf.php => Konfiguration; Daten die unter [[Typo3_Extensions_entwickeln#General_Info|General_Info]] angegeben wurden
 
−
* ext_icon.gif  
 
−
* ext_localconf.php 
 
−
t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_testit_pi1.php', '_pi1', 'list_type', 1);
 
−
* ext_tables.php  => Datenbank
 
−
* locallang_db.xml 
 
−
* README.txt
 
  
−
[http://www.advitum.de/blog/2012/04/typo3-extension-selbst-erstellen-kickstarter-grundlagen-hallo-welt/3/ hier mal weiter machen morgen]
+
'''fileadmin/example.js'''
 +
<source lang="javascript">
 +
jQuery(document).ready(function($){
 +
$('h1').hide();
 +
})
 +
</source>
  
−
== Quellen==
+
=== dataTables ===
−
* '''Artikelserie: Typo3: Extension selbst erstellen''' von [http://www.advitum.de/blog/author/lars-ebert/ Lars Ebert]
+
* [http://datatables.net datatables.net]
 +
 
 +
'''Seiten template:setup'''
 +
# einbinden der jquery Bibliothek
 +
page.includeJSFooter.jquery.external=1
 +
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js
 +
 +
# einbinden der dataTables Bibliothek
 +
page.includeJSFooter.dataTables.external = 1
 +
page.includeJSFooter.dataTables = http://www.datatables.net/download/build/jquery.dataTables.js
 +
 +
# einbinden des Beispielskripts
 +
page.includeJSFooter.myjavascript=fileadmin/example.js
 +
 
 +
'''fileadmin/example.js'''
 +
<source lang="javascript" line="1">
 +
$(document).ready(function() {
 +
    $('#dieTabelle').dataTable();
 +
} );
 +
</source>
 +
 
 +
'''pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse)'''
 +
 
 +
<source lang="php"  line="1">
 +
<?php
 +
class tx_testit_pi1 extends tslib_pibase {
 +
// ....
 +
public function main($content, array $conf) {
 +
// speichern der Konfiguration
 +
$this->conf = $conf;
 +
// POST GET wird geladen
 +
$this->pi_setPiVarDefaults();
 +
// Sprachdaten werden geladen
 +
$this->pi_loadLL();
 +
 +
// Aufruf des Beispiels 
 +
$content .= $this->example_Datatables();
 +
 +
return $this->pi_wrapInBaseClass($content);
 +
}
 +
public function example_Datatables() {
 +
$content = '
 +
<table id="dieTabelle" border="1">
 +
<thead>
 +
<tr>
 +
<th>Spalte 1</th>
 +
<th>Spalte 2</th>
 +
<th>Spalte 3</th>
 +
</tr>
 +
</thead>
 +
<tbody>
 +
<tr id="7">
 +
<td>Zeile 1 Spalte 1</td>
 +
<td>Zeile 1 Spalte 2</td>
 +
<td>Zeile 1 Spalte 3</td>
 +
</tr>
 +
<tr id="8">
 +
<td>Zeile 2 Spalte 1</td>
 +
<td>Zeile 2 Spalte 2</td>
 +
<td>Zeile 2 Spalte 3</td>
 +
</tr>
 +
<tr id="9">
 +
<td>Zeile 3 Spalte 1</td>
 +
<td>Zeile 3 Spalte 2</td>
 +
<td>Zeile 3 Spalte 3</td>
 +
</tr>
 +
<tr id="1">
 +
<td>Zeile 4 Spalte 1</td>
 +
<td>Zeile 4 Spalte 2</td>
 +
<td>Zeile 4 Spalte 3</td>
 +
</tr>
 +
</tbody>
 +
  </table>
 +
';
 +
return $content;
 +
}
 +
// ....
 +
}
 +
?>
 +
</source>
 +
 
 +
=== jquery-datatables-editable ===
 +
<source lang=bash>
 +
cd fileadmin
 +
svn checkout http://jquery-datatables-editable.googlecode.com/svn/trunk/ jquery-datatables-editable
 +
</source>
 +
 
 +
 
 +
im jquery-datatables-editable-read-only Ordner befindet sich ausführliche Beispiele in der index.html
 +
 
 +
# einbinden der jquery Bibliothek
 +
page.includeJSFooter.jquery.external=1
 +
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js
 +
 +
# einbinden der dataTables Bibliothek
 +
page.includeJSFooter.dataTables.external = 1
 +
page.includeJSFooter.dataTables = http://www.datatables.net/download/build/jquery.dataTables.js
 +
 +
# Achtung es muß wohl noch mehr eingezogen werden, ansonsten funktionert hinzufügen und löschen von reihen nicht!
 +
page.includeJSFooter.editable=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.editable.js
 +
page.includeJSFooter.jeditable=fileadmin/jquery-datatables-editable/media/js/jquery.jeditable.js
 +
 +
# einbinden des Beispielskripts
 +
page.includeJSFooter.myjavascript=fileadmin/example_datatables_editable.js
 +
 
 +
'''oder'''
 +
 
 +
# Achtung Reihenfolge ist wichtig
 +
page.includeJSFooter.complete=fileadmin/jquery-datatables-editable/media/js/complete.js
 +
page.includeJSFooter.jquery=fileadmin/jquery-datatables-editable/media/js/jquery.min.js
 +
page.includeJSFooter.dataTables=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.min.js
 +
page.includeJSFooter.editable=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.editable.js
 +
page.includeJSFooter.jeditable=fileadmin/jquery-datatables-editable/media/js/jquery.jeditable.js
 +
page.includeJSFooter.jqueryui=fileadmin/jquery-datatables-editable/media/js/jquery-ui.js
 +
page.includeJSFooter.validate=fileadmin/jquery-datatables-editable/media/js/jquery.validate.js
 +
 +
# einbinden des Beispielskripts
 +
page.includeJSFooter.myjavascript=fileadmin/example_datatables_editable.js
 +
 
 +
 
 +
'''typo3conf/ext/testit/pi1/UpdateData.php'''
 +
<source lang="php" line=1>
 +
<?php
 +
//print_r(array('$_GET' => $_GET, '$_POST' => $_POST));
 +
$editedValue = $_POST['value'];
 +
// hier käme dann eigentlich das Datenbank update hin
 +
echo $editedValue;
 +
?>
 +
</source>
 +
 
 +
 
 +
 
 +
'''fileadmin/example_datatables_editable.js'''
 +
<source lang=javascript line=1>
 +
$(document).ready( function () {
 +
$('#dieTabelle').dataTable().makeEditable({
 +
sUpdateURL: "typo3conf/ext/testit/pi1/UpdateData.php"
 +
});
 +
});
 +
</source>
 +
 
 +
'''pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse)''' eins zu eins wie [[Typo3_Extensions_entwickeln#Software_mit_php]]
 +
 
 +
=== jqueryUI ===
 +
* [http://jqueryui.com/ jqueryui.com]
 +
* [https://de.wikipedia.org/wiki/JQuery_UI wikipedia Artikel]
 +
http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css
 +
page.includeJSFooter.jQueryUI = http://code.jquery.com/ui/1.10.1/jquery-ui.js
 +
page.includeJSFooter.jQueryUI.external = 1
 +
 
 +
 
 +
== Quellen ==
 +
* '''Artikelserie: Typo3: Extension selbst erstellen'''
 
** [http://www.advitum.de/blog/2012/04/typo3-extension-selbst-erstellen-kickstarter-grundlagen-hallo-welt/ Kickstarter, Grundlagen & Hallo Welt – Typo3: Extension selbst erstellen]
 
** [http://www.advitum.de/blog/2012/04/typo3-extension-selbst-erstellen-kickstarter-grundlagen-hallo-welt/ Kickstarter, Grundlagen & Hallo Welt – Typo3: Extension selbst erstellen]
−
** [http://www.advitum.de/blog/2012/04/formulare-parameter-und-eingaben-typo3-extension-selbst-erstellen/?linkid=aiartoc Formulare, Parameter und Eingaben – Typo3: Extension selbst erstellen]
+
** [http://www.advitum.de/blog/2012/04/formulare-parameter-und-eingaben-typo3-extension-selbst-erstellen/?linkid=aiartoc Formulare, Parameter und Eingaben - Typo3: Extension selbst erstellen]
−
** [http://www.advitum.de/blog/2012/04/templates-css-und-typoscript-typo3-extension-selbst-erstellen/ Templates, CSS und TypoScript – Typo3: Extension selbst erstellen]
+
** [http://www.advitum.de/blog/2012/04/templates-css-und-typoscript-typo3-extension-selbst-erstellen/?linkid=aiartoc Templates, CSS und TypoScript - Typo3: Extension selbst erstellen]
 +
** [http://www.advitum.de/blog/2012/06/lokalisierung-und-flexforms-typo3-extension-selbst-erstellen/?linkid=aiartoc Lokalisierung und FlexForms - Typo3: Extension selbst erstellen]
 +
** [http://www.advitum.de/blog/2012/07/planung-dokumentation-und-veroffentlichung-%e2%80%93-typo3-extension-selbst-erstellen/?linkid=aiartoc Planung, Dokumentation und Veröffentlichung – Typo3: Extension selbst erstellen]
 +
* [http://de.slideshare.net/einpraegsam/uery-imtypo3einsatz jQuery in Typo3 benutzen]
 +
* [http://www.typo3-lisardo.de/home/blog-post/2010/09/01/datenbankabfragen-in-extensions.html Datenbankabfragen in Extensions]
 +
* [http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html eID Mechanismus]
 +
* [http://www.michael-wagner.de/typo3extProgrammingPresentation/presentation/index.html Typo3 Extension Programmierung]
 +
 
 +
== Probleme ==
 +
 
 +
=== Core: Error handler (FE): PHP Warning: mysql_real_escape_string()  ===
 +
 
 +
<source lang="php">
 +
Core: Error handler (FE): PHP Warning: mysql_real_escape_string() expects parameter 2 to be resource, boolean given in typo3_src/t3lib/class.t3lib_db.php line 730
 +
</source>
 +
 
 +
manchmal hat mensch einfach nur vergessen die Datenbank zu connecten, einfach vor der Datenbankaktion folgende Zeile
 +
<source lang="php">
 +
$GLOBALS['TYPO3_DB']->connectDB();
 +
</source>

Aktuelle Version vom 19. November 2015, 18:15 Uhr

Typo3 

Achtung: basiert auf Klasse pibase @deprecated since 6.0 will be removed in 7.0 !!!! @new: Typo3 Flow

Grundlagen

Klassifikation von Typo3 Extensions

  • Front-End-Plug-In (pi1, pi2, ..)
  • Backend-Modul (mod1, mod2, ..)
  • XClass (passender Ordner)
    • "Nahezu jede Extension- und auch viele Core- Dateien bieten die Möglichkeit über XCLASS nicht die eigentlichen Skripte auszuführen sondern alternative Skripte – somit kann eine komplett andere Datei als die eigentlich vorbestimmte verwendet werden." (Alex Kellner)
  • Service (sv1, sv2,..
  • Hook (lib, o.ä.)
    • "Während man also über die XCLASS ganze Dateien ersetzen kann, ist ein Hook “nur” dazu gedacht, einen definierten Bereich zu manipulieren" (Alex Kellner)
  • TSConfig (ext_typoscript_setup.txt)
  • Fassaden zu anderen Projekten (nicht GPL)


Beispiel mit template, css und Sprachdatei

Template mit html

pi1/templates/template.html 

1  <!-- ###SUBPART1### begin -->
2  	<div ID="VAR1">###VAR1###</div> 
3  	<div ID="SUBPART2_MARKER">###SUBPART2_MARKER###</div>
4  	<div ID="VAR_CONF">###VAR_CONF###</div> 
5  <!-- ###SUBPART1### end -->
6  
7  <!-- ###SUBPART2### begin -->
8  	<div ID="VAR2">###VAR2###</div>
9  <!-- ###SUBPART2### end -->

Design mit css

pi1/template.css 

1  div#VAR1 {
2  	font-size: 12px;	color:red;
3  }
4  div#VAR2 {
5  	font-size: 14px;	color:blue;
6  }
7  div#VAR_CONF{
8  	font-size: 16px;	color:green;
9  }

Lokalisierung mit xml

pi1/locallang.xml 

 1  <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 2  <T3locallang>
 3  	<meta type="array">
 4  		<type>module</type>
 5  		<description>Language labels for plugin &quot;tx_testit_pi1&quot;</description>
 6  	</meta>
 7  	<data type="array">
 8  		<languageKey index="default" type="array">
 9  			<label index="VAR1">text for var 1 in english</label>
10  			<label index="VAR2">text for var 2 in english</label>
11  		</languageKey>
12  		<languageKey index="de" type="array">
13  			<label index="VAR1">Text für var 1 in deutsch</label>
14  			<label index="VAR2">Text für var 2 in deutsch</label>
15  		</languageKey>
16  	</data>
17  </T3locallang>

Konfiguration mit Flexforms

veraltet besser hier schauen TYPO3.CMS 6.2 Extension entwickeln - Backend#Konfiguration im Backend_f.C3.BCr_ein_Frontend_Plugin_mit_flexform

pi/flexform_ds_pi1.xml 

 1  <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 2  <T3DataStructure>
 3     <sheets>
 4         <Konfigurationsformular>
 5             <ROOT>
 6                 <TCEforms>
 7                     <sheetTitle>LLL:EXT:testit/locallang_db.xml:tt_content.list_type_pi1</sheetTitle>
 8                 </TCEforms>
 9                 <type>array</type>
10                 <el>
11                     <VAR_CONF_Formular>
12                         <TCEforms>
13                             <label>LLL:EXT:testit/locallang_db.xml:VAR_CONF</label>
14                             <config>
15                                 <type>input</type>
16                                 <size>100</size>
17                             </config>
18                         </TCEforms> 
19                     </VAR_CONF_Formular>
20                  </el>
21              </ROOT>
22          </Konfigurationsformular>
23      </sheets>
24  </T3DataStructure>

locallang_db.xml 

 1  <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 2  <T3locallang>
 3  	<meta type="array">
 4  		<type>database</type>
 5  		<description>Language labels for database tables/fields belonging to extension 'testit'</description>
 6  	</meta>
 7  	<data type="array">
 8  		<languageKey index="default" type="array">
 9  			<label index="tt_content.list_type_pi1">testit title</label>
10  			<label index="VAR_CONF">please set a value for the frontend</label>
11  		</languageKey>
12  		<languageKey index="de" type="array">
13  			<label index="tt_content.list_type_pi1">testit Title</label>
14  			<label index="VAR_CONF">bitte einen Wert fürs Frontend setzen</label>
15  		</languageKey>
16  	</data>
17  </T3locallang>

ext_tables.php folgende Zeilen hinzufügen 

16 <?
17  // ....
18  $TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1']='pi_flexform';
19  t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY.'/pi1/flexform_ds_pi1.xml');
20 ?>

Software mit php

pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse) 

 1 <?php
 2  class tx_testit_pi1 extends tslib_pibase {
 3  	// ....
 4  	public function main($content, array $conf) {
 5  		// speichern der Konfiguration 
 6  		$this->conf = $conf;
 7  		// POST GET wird geladen
 8  		$this->pi_setPiVarDefaults();
 9  		// Sprachdaten werden geladen
10  		$this->pi_loadLL(); 	
11  			
12  		// Aufruf des Beispiels  
13  		$content .= $this->example_Template_Css_Lang(); 
14  		
15  		return $this->pi_wrapInBaseClass($content);
16  	}
17  	public function example_Template_Css_Lang() {
18  		// css wird included 
19  		$GLOBALS['TSFE']->pSetup['includeCSS.'][$this->extKey] = 'EXT:' . $this->extKey . '/pi1/css/template.css';
20   
21  		// Template wird included
22  		$this->template = $this->cObj->fileResource('EXT:' . $this->extKey . '/pi1/templates/template.html');
23  
24  		// Subparts werden extrahiert
25  		$tmpl_SUBPART1 = $this->cObj->getSubpart($this->template, '###SUBPART1###');
26  		$tmpl_SUBPART2 = $this->cObj->getSubpart($this->template, '###SUBPART2###');
27  
28  		//   Flexform laden
29  		$this->pi_initPIflexForm();
30  
31  		// Werte werden für die Marker gesetzt
32  		$array_markers = array(
33  			'###VAR1###' => $this->pi_getLL('VAR1'),
34  			'###VAR2###' => $this->pi_getLL('VAR2'),
35  			'###VAR_CONF###' => $this->pi_getFFvalue($this->cObj->data['pi_flexform'], "VAR_CONF_Formular", "Konfigurationsformular"),
36  		);
37  
38  		// der Subpart 2 wird ins SUBPART2_MARKER gesetzt
39  		$array_markers['###SUBPART2_MARKER###'] = $this->cObj->substituteMarkerArrayCached($tmpl_SUBPART2, $array_markers);
40  
41  		// 
42  		$content = $this->cObj->substituteMarkerArrayCached($tmpl_SUBPART1, $array_markers);
43  
44  		return $content;
45  	}
46  	// ....
47  }
48 ?>

Dokumentation

offizielle Typo3-Extension-Dokumentations-Vorlage runterladen und manual.swx ins doc Verzeichniss

jquery

3 Wege jquery einzubinden

Einbindung der jquery Bibliothek inklusive kleines jquery Beispiel

Das Beispiel führt dazu das h1 html-Tags nicht angezeigt werden!

Einbinden der Bibliothek über code.jquery.com im typoscript template setup

Seiten template:setup 

# einbinden der jquery Bibliothek
page.includeJSFooter.jquery.external=1
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js

# einbinden des Beispielskripts
page.includeJSFooter.myjavascript=fileadmin/example.js

fileadmin/example.js 

 jQuery(document).ready(function($){
 	$('h1').hide();
 })

dataTables

Seiten template:setup 

# einbinden der jquery Bibliothek
page.includeJSFooter.jquery.external=1
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js

# einbinden der dataTables Bibliothek
page.includeJSFooter.dataTables.external = 1
page.includeJSFooter.dataTables = http://www.datatables.net/download/build/jquery.dataTables.js

# einbinden des Beispielskripts
page.includeJSFooter.myjavascript=fileadmin/example.js

fileadmin/example.js 

1 $(document).ready(function() {
2     $('#dieTabelle').dataTable();
3 } );

pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse) 

 1 <?php
 2  class tx_testit_pi1 extends tslib_pibase {
 3  	// ....
 4  	public function main($content, array $conf) {
 5  		// speichern der Konfiguration 
 6  		$this->conf = $conf;
 7  		// POST GET wird geladen
 8  		$this->pi_setPiVarDefaults();
 9  		// Sprachdaten werden geladen
10  		$this->pi_loadLL(); 	
11  			
12  		// Aufruf des Beispiels  
13  		$content .= $this->example_Datatables(); 
14  		
15  		return $this->pi_wrapInBaseClass($content);
16  	}
17  	public function example_Datatables() {
18 		$content = '
19 			<table id="dieTabelle" border="1">
20 				<thead>
21 					<tr>
22 						<th>Spalte 1</th>
23 						<th>Spalte 2</th>
24 						<th>Spalte 3</th>
25 					</tr>
26 				</thead>
27 				<tbody>
28 					<tr id="7">
29 						<td>Zeile 1 Spalte 1</td>
30 						<td>Zeile 1 Spalte 2</td>
31 						<td>Zeile 1 Spalte 3</td>
32 					</tr>
33 					<tr id="8">
34 						<td>Zeile 2 Spalte 1</td>
35 						<td>Zeile 2 Spalte 2</td>
36 						<td>Zeile 2 Spalte 3</td>
37 					</tr>
38 					<tr id="9">
39 						<td>Zeile 3 Spalte 1</td>
40 						<td>Zeile 3 Spalte 2</td>
41 						<td>Zeile 3 Spalte 3</td>
42 					</tr>
43 					<tr id="1">
44 						<td>Zeile 4 Spalte 1</td>
45 						<td>Zeile 4 Spalte 2</td>
46 						<td>Zeile 4 Spalte 3</td>
47 					</tr>
48 				</tbody>
49 		   </table>		
50 		';
51 		return $content;
52  	}
53  	// ....
54  }
55 ?>

jquery-datatables-editable

cd fileadmin
svn checkout http://jquery-datatables-editable.googlecode.com/svn/trunk/ jquery-datatables-editable


im jquery-datatables-editable-read-only Ordner befindet sich ausführliche Beispiele in der index.html 

# einbinden der jquery Bibliothek
page.includeJSFooter.jquery.external=1
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js

# einbinden der dataTables Bibliothek
page.includeJSFooter.dataTables.external = 1
page.includeJSFooter.dataTables = http://www.datatables.net/download/build/jquery.dataTables.js

# Achtung es muß wohl noch mehr eingezogen werden, ansonsten funktionert hinzufügen und löschen von reihen nicht!
page.includeJSFooter.editable=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.editable.js
page.includeJSFooter.jeditable=fileadmin/jquery-datatables-editable/media/js/jquery.jeditable.js

# einbinden des Beispielskripts
page.includeJSFooter.myjavascript=fileadmin/example_datatables_editable.js

oder 

# Achtung Reihenfolge ist wichtig
page.includeJSFooter.complete=fileadmin/jquery-datatables-editable/media/js/complete.js
page.includeJSFooter.jquery=fileadmin/jquery-datatables-editable/media/js/jquery.min.js
page.includeJSFooter.dataTables=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.min.js
page.includeJSFooter.editable=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.editable.js
page.includeJSFooter.jeditable=fileadmin/jquery-datatables-editable/media/js/jquery.jeditable.js
page.includeJSFooter.jqueryui=fileadmin/jquery-datatables-editable/media/js/jquery-ui.js
page.includeJSFooter.validate=fileadmin/jquery-datatables-editable/media/js/jquery.validate.js

# einbinden des Beispielskripts
page.includeJSFooter.myjavascript=fileadmin/example_datatables_editable.js


typo3conf/ext/testit/pi1/UpdateData.php 

1 <?php
2 	//print_r(array('$_GET' => $_GET, '$_POST' => $_POST));
3 	$editedValue = $_POST['value'];
4 	// hier käme dann eigentlich das Datenbank update hin
5 	echo $editedValue;
6 ?>


fileadmin/example_datatables_editable.js 

1 $(document).ready( function () {
2 	$('#dieTabelle').dataTable().makeEditable({
3 		sUpdateURL: "typo3conf/ext/testit/pi1/UpdateData.php"
4 	});
5 });

pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse) eins zu eins wie Typo3_Extensions_entwickeln#Software_mit_php

jqueryUI

http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css 

page.includeJSFooter.jQueryUI = http://code.jquery.com/ui/1.10.1/jquery-ui.js
page.includeJSFooter.jQueryUI.external = 1


Quellen

Probleme

Core: Error handler (FE): PHP Warning: mysql_real_escape_string()

Core: Error handler (FE): PHP Warning: mysql_real_escape_string() expects parameter 2 to be resource, boolean given in typo3_src/t3lib/class.t3lib_db.php line 730

manchmal hat mensch einfach nur vergessen die Datenbank zu connecten, einfach vor der Datenbankaktion folgende Zeile 

$GLOBALS['TYPO3_DB']->connectDB();
Abgerufen von „https://vosp.info/index.php?title=Typo3_Extensions_entwickeln_@deprecated&oldid=4193“