Typo3 Extensions entwickeln @deprecated: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
F (Diskussion | Beiträge) |
F (Diskussion | Beiträge) |
||
| Zeile 166: | Zeile 166: | ||
== jquery == | == jquery == | ||
=== 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 | '''Einbinden der Bibliothek über [http://code.jquery.com code.jquery.com]''' im typoscript template setup | ||
Version vom 17. Februar 2013, 01:32 Uhr
um sich das Grundgerüst einer Extension erstellen zu lassen bitte hier schauen Typo3 kickstarter Extension
tslib_pibase
Beispiel mit template, css und Sprachdatei
Template mit html
pi1/templates/template.html
<!-- ###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 -->
Design mit css
pi1/template.css
div#VAR1 {
font-size: 12px; color:red;
}
div#VAR2 {
font-size: 14px; color:blue;
}
div#VAR_CONF{
font-size: 16px; color:green;
}
Lokalisierung mit xml
pi1/locallang.xml
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
<meta type="array">
<type>module</type>
<description>Language labels for plugin "tx_testit_pi1"</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>
Konfiguration mit Flexforms
pi/flexform_ds_pi1.xml
<?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>
locallang_db.xml
<?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>
ext_tables.php folgende Zeilen hinzufügen
<?
// ....
$TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1']='pi_flexform';
t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY.'/pi1/flexform_ds_pi1.xml');
?>
Software mit php
pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse)
<?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();
// 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 $this->pi_wrapInBaseClass($content);
}
// ....
}
?>
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
page.includeJSFooter.dataTables.external = 1 page.includeJSFooter.dataTables = http://www.datatables.net/download/build/jquery.dataTables.js
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