Typo3 Extensions entwickeln @deprecated: Unterschied zwischen den Versionen
Aus Vosp.info
F (Diskussion | Beiträge) (→template mit html) |
F (Diskussion | Beiträge) (→Konfiguration mit Flexforms) |
||
| (58 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
[[Typo3]] | [[Typo3]] | ||
| − | um sich das Grundgerüst einer Extension erstellen zu lassen bitte hier schauen [[Typo3 kickstarter 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]] | ||
| − | == | + | == 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) | ||
| + | |||
| + | |||
| + | * '''Quellen''' | ||
| + | ** [https://de.wikipedia.org/wiki/Hook_%28Informatik%29 Hook (Informatik)] | ||
| + | ** [http://typo3blogger.de/alles-uber-hooks/ Alles über Hooks] | ||
== Beispiel mit template, css und Sprachdatei == | == Beispiel mit template, css und Sprachdatei == | ||
| − | === | + | === Template mit html === |
'''pi1/templates/template.html''' | '''pi1/templates/template.html''' | ||
| − | <source lang="html4strict"> | + | <source lang="html4strict" line=1> |
<!-- ###SUBPART1### begin --> | <!-- ###SUBPART1### begin --> | ||
<div ID="VAR1">###VAR1###</div> | <div ID="VAR1">###VAR1###</div> | ||
| Zeile 22: | Zeile 41: | ||
=== Design mit css === | === Design mit css === | ||
'''pi1/template.css''' | '''pi1/template.css''' | ||
| + | <source lang="css" line=1> | ||
div#VAR1 { | div#VAR1 { | ||
font-size: 12px; color:red; | font-size: 12px; color:red; | ||
| Zeile 31: | Zeile 51: | ||
font-size: 16px; color:green; | font-size: 16px; color:green; | ||
} | } | ||
| + | </source> | ||
=== Lokalisierung mit xml === | === Lokalisierung mit xml === | ||
pi1/locallang.xml | pi1/locallang.xml | ||
| + | <source lang="xml" line=1> | ||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> | <?xml version="1.0" encoding="utf-8" standalone="yes" ?> | ||
<T3locallang> | <T3locallang> | ||
| Zeile 51: | Zeile 73: | ||
</data> | </data> | ||
</T3locallang> | </T3locallang> | ||
| + | </source> | ||
=== Konfiguration mit Flexforms === | === 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''' | '''pi/flexform_ds_pi1.xml''' | ||
| + | <source lang="xml" line=1> | ||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> | <?xml version="1.0" encoding="utf-8" standalone="yes" ?> | ||
<T3DataStructure> | <T3DataStructure> | ||
| Zeile 78: | Zeile 105: | ||
</sheets> | </sheets> | ||
</T3DataStructure> | </T3DataStructure> | ||
| − | + | </source> | |
'''locallang_db.xml''' | '''locallang_db.xml''' | ||
| + | <source lang="xml" line="1"> | ||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> | <?xml version="1.0" encoding="utf-8" standalone="yes" ?> | ||
<T3locallang> | <T3locallang> | ||
| Zeile 97: | Zeile 125: | ||
</data> | </data> | ||
</T3locallang> | </T3locallang> | ||
| − | + | </source> | |
'''ext_tables.php''' folgende Zeilen hinzufügen | '''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'; | $TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1']='pi_flexform'; | ||
t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY.'/pi1/flexform_ds_pi1.xml'); | t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY.'/pi1/flexform_ds_pi1.xml'); | ||
| + | ?> | ||
| + | </source> | ||
=== Software mit php === | === Software mit php === | ||
'''pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse)''' | '''pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse)''' | ||
| − | <source lang="php"> | + | |
| + | <source lang="php" line="1"> | ||
<?php | <?php | ||
class tx_testit_pi1 extends tslib_pibase { | class tx_testit_pi1 extends tslib_pibase { | ||
| Zeile 114: | Zeile 148: | ||
$this->pi_setPiVarDefaults(); | $this->pi_setPiVarDefaults(); | ||
// Sprachdaten werden geladen | // Sprachdaten werden geladen | ||
| − | $this->pi_loadLL(); | + | $this->pi_loadLL(); |
| − | + | ||
| − | // css wird included | + | // 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'; | $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'); | $this->template = $this->cObj->fileResource('EXT:' . $this->extKey . '/pi1/templates/template.html'); | ||
| Zeile 142: | Zeile 182: | ||
$content = $this->cObj->substituteMarkerArrayCached($tmpl_SUBPART1, $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 | ||
| + | |||
| + | == jquery == | ||
| + | === 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==== | ||
| + | |||
| + | ''Das Beispiel führt dazu das h1 html-Tags nicht angezeigt werden!'' | ||
| + | |||
| + | '''Einbinden der Bibliothek über [http://code.jquery.com 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''' | ||
| + | <source lang="javascript"> | ||
| + | jQuery(document).ready(function($){ | ||
| + | $('h1').hide(); | ||
| + | }) | ||
| + | </source> | ||
| + | |||
| + | === dataTables === | ||
| + | * [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); | 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/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/?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> | </source> | ||
Aktuelle Version vom 19. November 2015, 18:15 Uhr
Achtung: basiert auf Klasse 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 !!!
Inhaltsverzeichnis
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)
- Quellen
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 "tx_testit_pi1"</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
- ü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
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
- Artikelserie: Typo3: Extension selbst erstellen
- Kickstarter, Grundlagen & Hallo Welt – Typo3: Extension selbst erstellen
- Formulare, Parameter und Eingaben - Typo3: Extension selbst erstellen
- Templates, CSS und TypoScript - Typo3: Extension selbst erstellen
- Lokalisierung und FlexForms - Typo3: Extension selbst erstellen
- Planung, Dokumentation und Veröffentlichung – Typo3: Extension selbst erstellen
- jQuery in Typo3 benutzen
- Datenbankabfragen in Extensions
- eID Mechanismus
- Typo3 Extension Programmierung
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();
