Version vom 4. März 2013, 13:35 Uhr

Typo3 Extension jquery.dataTables.editable @deprecated mit der alten pibase-Klasse entwickeln

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

Hierfür werden folgende Bibliotheken verwendet
- jQuery ist eine freie, umfangreiche JavaScript-Bibliothek
- DataTables table plug-in for jQuery

zur Info
- Grundlagenwissen: Typo3 kickstarter Extension, typo3 Extensions entwickeln
- Grundsätzlich bevor mensch sich wundert warum wieder was nicht funzt typo3-Cache löschen und im Zweifel mal unter Adminwerkzeuge > Protokoll schauen

Verzeichnissstruktur

typo3conf/ext/ncfluid - #ext_emconf.php #ext_localconf.php #ext_tables.sql ext_icon.gif #ext_tables.php tx_ncfluid_domain_model_table.gif
- typo3conf/ext/ncfluid/Classes
  - typo3conf/ext/ncfluid/Classes/Controller/ - #TableController.php
  - typo3conf/ext/ncfluid/Classes/Domain/
    - typo3conf/ext/ncfluid/Classes/Domain/Model/ - #Table.php
    - typo3conf/ext/ncfluid/Classes/Domain/Repository/ - #TableRepository.php
- typo3conf/ext/ncfluid/Configuration/
  - typo3conf/ext/ncfluid/Configuration/TCA/ - #Table.php
  - typo3conf/ext/ncfluid/Configuration/TypoScript/ - constants.txt #setup.txt
- typo3conf/ext/ncfluid/Resources/
  - typo3conf/ext/ncfluid/Resources/Private/
    - typo3conf/ext/ncfluid/Resources/Private/Language/ - #locallang.xml
    - typo3conf/ext/ncfluid/Resources/Private/Layouts/ - #main.html
    - typo3conf/ext/ncfluid/Resources/Private/Partials/ - #tablerowForm.html
    - typo3conf/ext/ncfluid/Resources/Private/Templates/
      - typo3conf/ext/ncfluid/Resources/Private/Templates/Table/ - #edit.html #index.html #new.html #show.html
  - typo3conf/ext/ncfluid/Resources/Public/
    - typo3conf/ext/ncfluid/Resources/Public/Stylesheets/ - #styles.css
    - typo3conf/ext/ncfluid/Resources/Public/JavaScript/ - #UIHelper.js

Grundkonfiguration

ext_emconf.php

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

typo3conf/ext/ncfluid/ext_localconf.php

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

Tx_Extbase_Utility_Extension::configurePlugin(
    $_EXTKEY,
    'Pi1',
    array(
		'Table' => 'index,new,create,delete,show,edit,update'
    ),
    array(
		'Table' => 'index,new,create,delete,show,edit,update'
    )
);
?>

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'
);
?>

MVC

Datenmodell

ext_tables.sql

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

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');
	}
	
}

?>

Notizen

statische template "Fluid - Default Ajax Configuration" einbinde wird u.a. jquery ins template eingebunden

Typo3-Fluid

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');
	}

// 	....

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

Version vom 4. März 2013, 13:35 Uhr

Inhaltsverzeichnis

Verzeichnissstruktur

Grundkonfiguration

ext_emconf.php

ext_localconf.php

ext_tables.php

MVC

Datenmodell

ext_tables.sql

Table.php

Table.php

TableRepository.php

View

locallang.xml

index.html

show.html

tablerowForm.html

new.html

edit.html

main.html

styles.css

UIHelper.js

setup.txt

Controller

TableController.php

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

Quellen

Navigationsmenü

Ansichten

Meine Werkzeuge

Navigation

Suche

Werkzeuge