TYPO3.CMS 6.2 Extension jquery.dataTables

typo3

• 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 locallang_db.xml 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

MVC

Datenmodell

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

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

Notizen

• statische template "Fluid - Default Ajax Configuration" einbinde wird u.a. jquery ins template eingebunden
  • http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
  • http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
  • http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
  • http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css

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

// 	....

Quellen

• Datumseingaben in Fluid Formularen - Datepicker
• Could not ultimately dispatch the request after 101 iterations