Typo3 Extensions entwickeln @deprecated: Unterschied zwischen den Versionen

Version vom 20. Februar 2013, 16:46 Uhr

Typo3

um sich das Grundgerüst einer Extension erstellen zu lassen bitte hier schauen Typo3 kickstarter Extension

Inhaltsverzeichnis

1 tslib_pibase
2 Beispiel mit template, css und Sprachdatei
3 Dokumentation
4 jquery
5 Quellen

tslib_pibase

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

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

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

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

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

@@ Zeile 353: / Zeile 353: @@
 * [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]

Typo3 Extensions entwickeln @deprecated: Unterschied zwischen den Versionen

Version vom 20. Februar 2013, 16:46 Uhr

Inhaltsverzeichnis

tslib_pibase

Beispiel mit template, css und Sprachdatei

Template mit html

Design mit css

Lokalisierung mit xml

Konfiguration mit Flexforms

Software mit php

Dokumentation

jquery

Einbindung der jquery Bibliothek inklusive kleines jquery Beispiel

dataTables

jquery-datatables-editable

jqueryUI

Quellen

Navigationsmenü

Ansichten

Meine Werkzeuge

Navigation

Suche

Werkzeuge