TYPO3.CMS 6.2 Extension jquery.dataTables: Unterschied zwischen den Versionen

Aus Vosp.info
Wechseln zu:Navigation, Suche
(ext_tables.sql)
(Table.php)
Zeile 168: Zeile 168:
  
 
=== Table.php ===
 
=== Table.php ===
 +
 +
hier werden unsere Datenspalten '''coltext''', '''colint''', '''coldatetime''' fürs System beschrieben.
 +
 +
Diese Datei wird weiter unten in der Dokumentation über die Datei [[#ext_tables.php]] eingelesen.
 +
 
'''typo3conf/ext/ncfluid/Configuration/TCA/Table.php'''
 
'''typo3conf/ext/ncfluid/Configuration/TCA/Table.php'''
 
<source lang="php">
 
<source lang="php">

Version vom 4. März 2013, 15:09 Uhr

typo3

Ziel ist es in einer typo3 Extension eine Datenbanktabelle auszulesen und in der Oberfläche (frontend) dynamisch darzustellen und manipulierbar (add,edit,delete row) zumachen. Unterschied zur Typo3 Extension jquery.dataTables.editable @deprecated Anleitung es wird nicht das JQuery-DataTables-Data Manager plugin verwendet, sondern darauf verzichtet die Tabelle innerhalb der Tabllenanzeige zu editieren

Verzeichnissstruktur

Grundkonfiguration

Achtung: Am Ende dieser Dokumentation nach dem #MVC Kapitel befindet sich der #Konfiguration Nachtrag. 
Dieser steht in diesem Fall am Ende, da auf Dateien eingebunden werden, die laut Doku erst erstellt werden müssen

ext_emconf.php

hier wird ganz normal die Extension beschrieben, folgende Werte sind zu beachten

$EM_CONF[$_EXTKEY]['clearCacheOnLoad']

damit die Seite zwecks Datenbankanbindung auch immer schön neu geladen wird und nicht im Cache landet.


$EM_CONF[$_EXTKEY]['constraints']['depends']

damit klar dem System gesagt wird, das die Extension abhängig ist von anderen Extensions und diese erst installiert sein müssen

typo3conf/ext/ncfluid/ext_emconf.php

<?php

$EM_CONF[$_EXTKEY] = array(
	'title' => 'ncfluid title',
	'description' => 'ncfluid description',
	'category' => 'fe',
	'author' => 'frederick',
	'author_email' => 'frederik@netz.coop',
	'shy' => '',
	'dependencies' => '',
	'conflicts' => '',
	'priority' => '',
	'module' => '',
	'state' => 'alpha',
	'internal' => '',
	'uploadfolder' => 0,
	'createDirs' => '',
	'modify_tables' => '',
	'clearCacheOnLoad' => 1,
	'lockType' => '',
	'author_company' => '',
	'version' => '0.0.1',
	'constraints' => array(
		'depends' => array(
			/**
			 * wichtig da die extbase und fluid extension unbedingt vorhanden sein müssen!
			 */
			'php'	=>	'5.2.0-0.0.0',
			'typo3'	=>	'4.3.dev-0.0.0',
			'extbase'=>	'1.0.1-0.0.0',
			'fluid'	=>	'1.0.1-0.0.0' 
		),
		'conflicts' => array(
		),
		'suggests' => array(
		),
	),
);

?>

ext_localconf.php

hier wird definiert welche Klasse und Funktionen (bzw. Aktionen) nach dem Einbinden auf einer Seite aufgerufen werden, bzw zur Verfügung stehen

Die hier genutzte Klasse Table und die dazugehörigen Aktionen 'index,new,create,delete,show,edit,update' sind weiter unten beschrieben

siehe auch Tx_Extbase_Utility_Extension::configurePlugin()

typo3conf/ext/ncfluid/ext_localconf.php

<?php
if (!defined ('TYPO3_MODE')) die ('Access denied.');

Tx_Extbase_Utility_Extension::configurePlugin(
	// string $extensionName -- Extensionname
	$_EXTKEY,
	// string $pluginName -- 
	'Pi1',
	// string $controllerActions -- hier werden die zur Verfügung stehenden Aktionen definiert
	array(
		// Klassenname => Funktionen/Aktionen, ...
		'Table' => 'index,new,create,delete,show,edit,update'
	),
	// string $nonCacheableControllerActions -- Funktionen die nicht gecachet werden sollen
	array(
		'Table' => 'index,new,create,delete,show,edit,update'
	)
);
?>

MVC

Datenmodell

ext_tables.sql

  • "Die Felder uid, pid, tstamp, crdate und hidden werden von TYPO3 benötigt und vorausgesetzt."
    • uid: eindeutiger Primärschlüssel
    • pid: Page ID -- eindeutige Seiten ID
    • crdate: unix timestamp wann der Datensatz erstellt worden ist
    • tstamp: letzte Änderung
  • weitere System-Felder
    • deleted: wenn Datensatz gelöscht wird und deleted als Spalte existiert wird deleted auf ungleich 0 gesetzt und wird nicht mehr angezeigt ... ist aber sogesehen noch vorhanden, eine Art Mülleimer
    • hidden: falls ungleich 0 wird der Datensatz im Frontend nicht mehr angezeigt
  • unsere Spalten die wir explizit nutzen wollen
    • coltext
    • colint
    • coldatetime

typo3conf/ext/ncfluid/ext_tables.sql

-- Achtung keine Unterstriche in Tabellenspaltennamen benutzen, führt zu Konflikten

CREATE TABLE tx_ncfluid_domain_model_table (
	uid int(11) NOT NULL auto_increment,
	pid int(11) DEFAULT '0' NOT NULL,

	tstamp int(11) DEFAULT '0' NOT NULL,
	crdate int(11) DEFAULT '0' NOT NULL,
	deleted tinyint(4) DEFAULT '0' NOT NULL,
	hidden tinyint(4) DEFAULT '0' NOT NULL,

	coltext tinytext,
	colint int(11) DEFAULT '0' NOT NULL,
	coldatetime  int(11) DEFAULT '0' NOT NULL,
	
	PRIMARY KEY (uid),
	KEY parent (pid)
) ENGINE=InnoDB;

Table.php

hier werden unsere Datenspalten coltext, colint, coldatetime fürs System beschrieben.

Diese Datei wird weiter unten in der Dokumentation über die Datei #ext_tables.php eingelesen.

typo3conf/ext/ncfluid/Configuration/TCA/Table.php

<?php
if (!defined ('TYPO3_MODE')) 	die ('Access denied.');

$TCA['tx_ncfluid_domain_model_table'] = array(
	'ctrl' => $TCA['tx_ncfluid_domain_model_table']['ctrl'],
	'interface' => array(
		'showRecordFieldList' => 'coltext, colint, coldatetime'
	),
	'types' => array(
		'1' => array('showitem' => 'coltext, colint, coldatetime')
	),
	'palettes' => array(
		'1' => array('showitem' => '')
	),
	'columns' => array(
		'coltext' => array(
			'exclude' => 1,
			'label'   => 'LLL:EXT:ncfluid/Resources/Private/Language/locallang.xml:tx_ncfluid_domain_model_table.coltext',
			'config'  => array(
				'type' => 'input',
				'size' => 30,
				'eval' => 'trim,required'
			)
		),		
		'colint' => array(
			'exclude' => 1,
			'label'   => 'LLL:EXT:ncfluid/Resources/Private/Language/locallang.xml:tx_ncfluid_domain_model_table.colint',
			'config'  => array(
				'type' => 'input',
				'size' => 30,
				'eval' => 'trim,required'
			)
		),		
		'coldatetime' => array(
			'exclude' => 1,
			'label'   => 'LLL:EXT:ncfluid/Resources/Private/Language/locallang.xml:tx_ncfluid_domain_model_table.coldatetime',
			'config'  => array(
				'type' => 'input',
				'size' => 12,
				'max' => 20,
				'eval' => 'datetime,required',
				'checkbox' => '0',
				'default' => '0'
			)
		),				
	),
);
?>

Table.php

typo3conf/ext/ncfluid/Classes/Domain/Model/Table.php

<?php

/**
 * 
 * Hier muss für JEDE Tabellenspalte die Variable deklariert werden 
 * als protected und dazu mindestens die dazugehörige get-Methode. 
 * Nach dem "get" wird der nächste Buchstabe IMMER großgeschrieben. 
 * 
 * Das nachfolgende kann mensch sich sparen, wenn mensch keine Unterstriche benutzt!!
 * Solltet Ihr in Euren Spaltennamen Unterstriche verwendet haben, 
 * dann müssen diese in den get-Methoden entfernt werden und das 
 * erste Zeichen NACH dem Unterstrich auch wieder großgeschrieben 
 * werden. Beispiel: Spaltenname first_name wird zu getFirstName.
 */

class Tx_Ncfluid_Domain_Model_Table extends Tx_Extbase_DomainObject_AbstractValueObject {

	// getUid() muss nicht mehr implementiert werden
	
	/**
	* text column
	* @var string
	* @validate NotEmpty
	*/
	protected $coltext;
	/**
	* Setter for text column
	* @param string $coltext The text column
	* @return void
	*/
	public function setColtext($coltext) {
		$this->coltext = $coltext;
	}

	/**
	* Getter for text column
	* @return string The text column
	*/
	public function getColtext() {
		return $this->coltext;
	}


	
	/**
	* int column
	* @var int
	* @validate NotEmpty
	*/
	protected $colint;
	/**
	* Setter for int column
	* @param int $colint The int column
	* @return void
	*/
	public function setColint($colint) {
		$this->colint = $colint;
	}

	/**
	* Getter for int column
	* @return int The int column
	*/
	public function getColint() {
		return $this->colint;
	}	

	
	
	/**
	* datetime column
	* @var DateTime
	* @validate NotEmpty
	*/
	protected $coldatetime;
	/**
	* Setter for datetime column
	* @param DateTime $coldatetime The datetime column
	* @return void
	*/
	public function setColdatetime(DateTime $coldatetime) {
		$this->coldatetime = $coldatetime;
	}

	/**
	* Getter for datetime column
	* @return DateTime The datetime column
	*/
	public function getColdatetime() {
		return $this->coldatetime;
	}		
}
?>

TableRepository.php

typo3conf/ext/ncfluid/Classes/Domain/Repository/TableRepository.php

<?php

class Tx_Ncfluid_Domain_Repository_TableRepository extends Tx_Extbase_Persistence_Repository {
}

?>

View

locallang.xml

typo3conf/ext/ncfluid/Resources/Private/Language/locallang.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
	<meta type="array">
		<type>module</type>
		<description>Language labels for fluid</description>
	</meta>
	<data type="array">
		<!--  ENGLISH LANGUAGE DATA -->
		<languageKey index="default" type="array">
			<label index="tx_ncfluid_domain_model_table.coltext">text</label>
			<label index="tx_ncfluid_domain_model_table.colint">int</label>
			<label index="tx_ncfluid_domain_model_table.coldatetime">datetime</label>
		</languageKey>

		<!--  GERMAN LANGUAGE DATA -->
		<languageKey index="de" type="array">
			<label index="tx_ncfluid_domain_model_table.coltext">Text</label>
			<label index="tx_ncfluid_domain_model_table.colint">ganze Zahl</label>
			<label index="tx_ncfluid_domain_model_table.coldatetime">Datum-Zeit</label>
		</languageKey>
	</data>
</T3locallang>

index.html

typo3conf/ext/ncfluid/Resources/Private/Templates/Table/index.html

<f:layout name="main" />

<f:section name="title">index.html</f:section>

<f:section name="menu">
	<ul>
		<li><f:link.action controller="Table" action="index">index</f:link.action></li>
		<li><f:link.action controller="Table" action="new">Neue Zeile</f:link.action></li>
	</ul>
</f:section>

<f:section name="content">
	<table id="dieTabelle" border="1">
		<thead>
			<tr>
				<th><f:translate key="tx_ncfluid_domain_model_table.coltext" /></th>
				<th><f:translate key="tx_ncfluid_domain_model_table.colint" /></th>
				<th><f:translate key="tx_ncfluid_domain_model_table.coldatetime" /></th>
				<th></th>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<f:if condition="{table}">
				<f:then>
					<f:for each="{table}" as="row">
						<tr id="{row.uid}">
							<td>{row.coltext}</td>
							<td>{row.colint}</td>
							<td><f:format.date format="d.m.Y, H:i">{row.coldatetime}</f:format.date></td>
							<td><f:link.action controller="Table" action="show"  arguments="{tablerow : row}">show</f:link.action></td>
							<td><f:link.action controller="Table" action="edit"  arguments="{tablerow : row}">edit</f:link.action></td>
							<td><f:link.action controller="Table" action="delete" arguments="{tablerow : row}">delete</f:link.action></td>
						</tr>
					</f:for>
				</f:then>
				<f:else>
					<tr>
						<td>nodata</td>
						<td>nodata</td>
						<td>nodata</td>
						<td></td>
						<td></td>
						<td></td>
						
					</tr>
				</f:else>
			</f:if>
		</tbody>
	</table>
</f:section>

show.html

typo3conf/ext/ncfluid/Resources/Private/Templates/Table/show.html

<f:layout name="main" />

<f:section name="title">show.html</f:section>

<f:section name="menu">
	<ul>
		<li><f:link.action controller="Table" action="edit" arguments="{tablerow : tablerow}">edit</f:link.action></li>
		<li><f:link.action controller="Table" action="delete" arguments="{tablerow : tablerow}">delete</f:link.action></li>
	</ul>
</f:section>

<f:section name="content">
		<table>
			<tr>
				<td><f:translate key="tx_ncfluid_domain_model_table.coltext" />:</td>
				<td>{tablerow.coltext}</td>
			</tr>
			<tr>
				<td><f:translate key="tx_ncfluid_domain_model_table.colint" />:</td>
				<td>{tablerow.colint}</td>
			</tr>
			<tr>
				<td><f:translate key="tx_ncfluid_domain_model_table.coldatetime" />:</td>
				<td><f:format.date format="d.m.Y, H:i">{tablerow.coldatetime}</f:format.date></td>
			</tr>
		</table>
</f:section>

tablerowForm.html

typo3conf/ext/ncfluid/Resources/Private/Partials/tablerowForm.html

<p>partial="tablerowForm"</p>
<f:form action="{action}" object="{tablerow}" name="tablerow" >
	<f:renderFlashMessages style="background-color: #dfd; padding: 12px;" />
	<table>
		<tr>
			<td><f:translate key="tx_ncfluid_domain_model_table.coltext" />:</td>
			<td><f:form.textfield property="coltext" /></td>
		</tr>
		<tr>
			<td><f:translate key="tx_ncfluid_domain_model_table.colint" />:</td>
			<td><f:form.textfield property="colint" /></td>
		</tr>
		<tr>
			<td><f:translate key="tx_ncfluid_domain_model_table.coldatetime" />:</td>
			<td><f:form.textfield property="coldatetime" id="datepicker" value="{f:format.date(date: '{tablerow.coldatetime}', format: 'd.m.Y, H:i')}" size="12" /></td>
		</tr>
		<tr>
			<td></td>
			<td><f:form.submit value="Speichern"/></td>
		</tr>		
	</table>
</f:form>

new.html

typo3conf/ext/ncfluid/Resources/Private/Templates/Table/new.html

<f:layout name="main" />

<f:section name="title">new.html</f:section>

<f:section name="menu" />

<f:section name="content">
	<f:render partial="tablerowForm" arguments="{action : 'create', tablerow : tablerow}" />
</f:section>

edit.html

typo3conf/ext/ncfluid/Resources/Private/Templates/Table/edit.html

<f:layout name="main" />

<f:section name="title">edit.html</f:section>

<f:section name="menu">
	<ul>
		<li><f:link.action controller="Table" action="delete" arguments="{tablerow : tablerow}">delete</f:link.action></li>
	</ul>
</f:section>

<f:section name="content">
	<f:render partial="tablerowForm" arguments="{action : 'update', tablerow : tablerow}" />
</f:section>


main.html

typo3conf/ext/ncfluid/Resources/Private/Layouts/main.html

<div id="ncfluid">

	<h2 id="ncfluid-title">
		<f:render section="title" />
	</h2>

	<div id="ncfluid-menu">
		<f:render section="menu" />
	</div>

	<f:renderFlashMessages style="background-color: #dfd; padding: 12px;" />

	<div id="ncfluid-content">
		<f:render section="content" />
	</div>

	<div id="ncfluid-footer">by netz.coop eG</div>

</div>

styles.css

typo3conf/ext/ncfluid/Resources/Public/Stylesheets/styles.css

div#ncfluid {
	border-left:1px solid #536054;
	border-top:1px solid #536054;
	padding: 10px;
}

UIHelper.js

typo3conf/ext/ncfluid/Resources/Public/JavaScript/UIHelper.js

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

$(function() {
	$( "#datepicker" ).datepicker();
});

setup.txt

ich hab die setup.txt in dieser Dokumentation mal unter $View einsortiert, weil in diesem setup.txt ausschließlich nur View Dateien verlinkt sind

typo3conf/ext/ncfluid/Configuration/TypoScript/setup.txt

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

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

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

page.includeJSFooter.myjavascript=typo3conf/ext/ncfluid/Resources/Public/JavaScript/UIHelper.js

page.includeCSS.mittwald_timetrack = EXT:ncfluid/Resources/Public/Stylesheets/styles.css

# derzeit ausschließlich für den datepicker
page.includeCSS.jQueryUIcss.external = 1
page.includeCSS.jQueryUIcss = http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css

Controller

TableController.php

typo3conf/ext/ncfluid/Classes/Controller/TableController.php

<?php

class Tx_Ncfluid_Controller_TableController
	extends Tx_Extbase_MVC_Controller_ActionController {
	/**
	* @var Tx_Ncfluid_Domain_Repository_TableRepository
	*/
	protected $tableRepository;
	

	/**
	 * ! Action's
	 * 
	 * Per Konvention wird jede Aktion als öffentliche Methode implementiert, die 
	 * dem Namensschema [Aktionsname]Action folgt. 
	 * 
	 * folgende exsitieren schon
	 * * Class Tx_Extbase_MVC_Controller_ActionController
	 * ** protected void initializeAction()
	 * ** protected string errorAction()
	 */

	/**
	* List action for this controller. Displays all tablerows.
	*/
	public function indexAction() {
		$rows = $this->tableRepository->findAll();
		$this->view->assign('table', $rows);
	}

	/**
	 *
	 * The show action. Displays details for a specific tablerow.
	 *
	 * @param Tx_Ncfluid_Domain_Model_Table $tablerow The tablerow that is to be displayed.
	 * @return void
	 *
	 */

	public function showAction (Tx_Ncfluid_Domain_Model_Table $tablerow ) {
		$this->view->assign('tablerow', $tablerow);
	}

	/**
	 * 
	 * @param Tx_Ncfluid_Domain_Model_Table $tablerow
	 * @dontvalidate $tablerow
	 */
	public function newAction(Tx_Ncfluid_Domain_Model_Table $tablerow=NULL) {
		$this->view->assign('tablerow', $tablerow);
	}	
	
	/**
	 * 
	 * @param Tx_Ncfluid_Domain_Model_Table $tablerow
	 * @dontvalidate $tablerow
	 */
	public function createAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
		$this->tableRepository->add($tablerow);

		$this->flashMessageContainer->add('Your new row was created.');
		$this->redirect('index');
	}
	
	/**
	 *
	 * The delete action. Deletes an existing row from the database.
	 *
	 * @param Tx_Ncfluid_Domain_Model_Table $tablerow The tablerow that is to be deleted
	 * @return void
	 *
	 */
	public function deleteAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
		$this->tableRepository->remove($tablerow);
		$this->flashMessageContainer->add('Your tablerow  was removed.');
		$this->redirect('index');
	}

	
	/**
	 * Displays a form to edit an existing tablerow
	 *
	 * @param Tx_Ncfluid_Domain_Model_Table $tablerow The tablerow to display
	 * @dontvalidate $tablerow
	 */
	public function editAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
		$this->view->assign('tablerow', $tablerow);
	}
	/**
	 * Updates an existing tablerow and forwards to the index action.
	 *
	 * @param Tx_Ncfluid_Domain_Model_Table $tablerow The tablerow to display
	 */
	public function updateAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
		$objectManager = t3lib_div::makeInstance('Tx_Extbase_Object_ObjectManager');
		$tableRepository = $objectManager->get('Tx_Ncfluid_Domain_Repository_TableRepository');		
		$tableRepository->update($tablerow);
		
//		$this->tableRepository->update($tablerow);
		$this->flashMessageContainer->add('Your tablerow was updated.');
		$this->redirect('index');
	}
	
	
	/**
	 *
	 * The initialization action. This methods creates instances of all required
	 * repositories.
	 *
	 * @return void
	 *
	 */
	protected Function initializeAction() {
		$this->tableRepository =& t3lib_div::makeInstance('Tx_Ncfluid_Domain_Repository_TableRepository');
	}
	
}

?>

Konfiguration Nachtrag

ext_tables.php

typo3conf/ext/ncfluid/ext_tables.php

<?php
if (!defined('TYPO3_MODE')) {
	die ('Access denied.');
}

/**
 * einbinden des TypoScript (unser Typoscript beinhaltet das Einbinden der Javascript Bibliotheken und unserer CSS Datei)
 * (Das Einbinden muss hier in der ext_tables.php stattfinden)
 */
t3lib_extMgm::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'ncfluid include js libs');

$ePath = t3lib_extMgm::extPath($_EXTKEY);

$TCA['tx_ncfluid_domain_model_table'] = Array (
	'ctrl' => array (
		'title'				=> 'tx_ncfluid_domain_model_table',
		'label'				=> 'table',
		'tstamp'			=> 'tstamp',
		'crdate'			=> 'crdate',
		'delete'			=> 'deleted',
		'enablecolumns'		=> Array( 'disabled' => 'hidden' ),
		'dynamicConfigFile' => $ePath.'Configuration/TCA/Table.php',
		'iconfile'			=> $ePath.'Resources/Public/Icons/tx_ncfluid_domain_model_table.png'
	) 
);


/**
 * mit Hilfe von Extbase die Extension zur Auswahl als Frontendplugin registrieren
 * paralell muss ext_localconf.php:Tx_Extbase_Utility_Extension::configurePlugin vorhanden sein
 * (Das Einbinden muss hier in der ext_tables.php stattfinden)
 */
Tx_Extbase_Utility_Extension::registerPlugin(
	// Name der Extension
    $_EXTKEY,
	// eindeutiger Name des Plugins
    'Pi1',
	// Text, der in der Selectbox erscheinen soll
    'ncfluid datatables'
);
?>

Notizen

Probleme

Fatal error: Call to a member function replaceObject() on a non-object in typo3/sysext/extbase/Classes/Persistence/Repository.php on line 222

folgendes löst das Problem, weiß aber nicht genau ob das nicht anders besser geht:

Tx_Ncfluid_Domain_Repository_TableRepository wird nicht über initializeAction() genutzt, sondern extra noch mal geladen

class Tx_Ncfluid_Controller_TableController
	extends Tx_Extbase_MVC_Controller_ActionController {

// 	....

	public function updateAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {

		$objectManager = t3lib_div::makeInstance('Tx_Extbase_Object_ObjectManager');
		$tableRepository = $objectManager->get('Tx_Ncfluid_Domain_Repository_TableRepository');		
		$tableRepository->update($tablerow);

//		alter code führte zur Fehlermeldung; 
//		@see initializeAction -- $this->tableRepository =& t3lib_div::makeInstance('Tx_Ncfluid_Domain_Repository_TableRepository');
//		$this->tableRepository->update($tablerow);
//		$this->flashMessageContainer->add('Your tablerow was updated.');

		$this->redirect('index');
	}

// 	....

Quellen