Typo3 Extensions entwickeln @deprecated: Unterschied zwischen den Versionen

Version vom 17. Februar 2013, 02:08 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

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-read-only

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