Wikizone - Benutzerbeiträge [de]

Typo3 - alternatives Rendering

2011-04-16T07:34:33Z

94.216.255.39: /* Links */

== Links ==
Schöner Überblick:

http://blog.kj187.de/2010/03/09/typo3-und-ajax-wie-geht-das/

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

== Einleitung ==

Für verschiedene Anwendungsfälle (eigene template engine, ajax requests etc.) ist es manchmal notwendig, das Standard Seitenrendering von Typo3 zu umgehen. Dafür gibt es verschiedene Möglichkeiten.

== eid mechanismus ==
siehe unter Ajax und Typo3

== ajax parameter ==
Bemerkung: Nicht getestet

Wenn in der URL der Parameter
ajax=1
mitgegeben wird, dann erzeugt Typo3 ebenfalls eine Ausgabe ohne HTML-Tags und Metadaten. Die komplette Page-Konfiguration wird gelöscht und nur die Ausgabe der Extension “tx_myExt_pi1″ findet statt wenn man diese mit untenstehendem TS vorbereitet.

== Eigener Page Type ==
Man kann für die Ajax Anfragen einen eigenen Page Type definieren. Schönes Tutorial mit jQuery hier:

http://blog.kj187.de/2010/03/09/typo3-und-ajax-wie-geht-das/

TypoScript
<pre>
ajaxCall = PAGE
ajaxCall {
typeNum = 5000
10 < plugin.tx_unsereextension_pi1

config {
disableAllHeaderCode = 1
xhtml_cleaning = 0
admPanel = 0
debug = 0
no_cache = 1
}
}
</pre>
Dabei wird ein Aufruf mit der typeNum 5000 sofort an unsere Extension geleitet, die dann für die Ausgabe zuständig ist. Header Code wird ausgeblendet.

Der '''Vorteil''' bei dem Weg über typeNum ist das uns alle globalen Variablen wie das komplette TSFE mit cObj etc. zur Verfügung stehen. Bei dem Weg per eID musste man vor der TYPO3 Version 4.3 noch ein eigenes TSFE Objekt erzeugen. Seit der 4.3 bietet das das eID Script aber an

weiteres Beispiel:

TypoScript
<pre>
[globalVar = GP:ajax > 0]
config.disableAllHeaderCode = 1
page >
page = PAGE
page {
typeNum = 0
10 < plugin.tx_myExt_pi1
}
[global]
</pre>

== Alternativer DokType ==
Eine andere Möglichkeit, eine komplett leere Basisseite zu bekommen versteckt sich noch irgendwo in der Extension “tt_news”. Dort kann man per DokType steuern ob eine Liste oder ein RSS-Feed ausgegeben wird. Der RSS-Feed befindet sich auch auf einer ganz leeren Seite.

== AJAX im Backend ==
Im Backend kann man über die ajaxID arbeiten. Oben genanntes Tutorial gibt auch hier eine kurze Auskunft. Das wichtigste:

R'''egistrieren des Skripts'''

ext_localconf.php

$TYPO3_CONF_VARS['BE']['AJAX']['tx_extkey::helloworld'] = t3lib_extMgm::extPath($_EXTKEY) . 'classes/class.tx_extkey_helloworld_ajax.php:tx_extkey_helloworld_ajax->sayHello';

oder anders:

$TYPO3_CONF_VARS['BE']['AJAX']['tx_extkey::key'] = 'pfad/datei.php:klassenname->methodenname';

Aufruf aus einem Modul:

$url = $this->doc->backPath . 'ajax.php?ajaxID=tx_extkey::helloworld';

Typo3 - alternatives Rendering

2011-04-16T06:03:41Z

94.216.255.39:

== Links ==
Schöner Überblick:

http://blog.kj187.de/2010/03/09/typo3-und-ajax-wie-geht-das/

== Einleitung ==

Für verschiedene Anwendungsfälle (eigene template engine, ajax requests etc.) ist es manchmal notwendig, das Standard Seitenrendering von Typo3 zu umgehen. Dafür gibt es verschiedene Möglichkeiten.

== eid mechanismus ==
siehe unter Ajax und Typo3

== ajax parameter ==
Bemerkung: Nicht getestet

Wenn in der URL der Parameter
ajax=1
mitgegeben wird, dann erzeugt Typo3 ebenfalls eine Ausgabe ohne HTML-Tags und Metadaten. Die komplette Page-Konfiguration wird gelöscht und nur die Ausgabe der Extension “tx_myExt_pi1″ findet statt wenn man diese mit untenstehendem TS vorbereitet.

== Eigener Page Type ==
Man kann für die Ajax Anfragen einen eigenen Page Type definieren. Schönes Tutorial mit jQuery hier:

http://blog.kj187.de/2010/03/09/typo3-und-ajax-wie-geht-das/

TypoScript
<pre>
ajaxCall = PAGE
ajaxCall {
typeNum = 5000
10 < plugin.tx_unsereextension_pi1

config {
disableAllHeaderCode = 1
xhtml_cleaning = 0
admPanel = 0
debug = 0
no_cache = 1
}
}
</pre>
Dabei wird ein Aufruf mit der typeNum 5000 sofort an unsere Extension geleitet, die dann für die Ausgabe zuständig ist. Header Code wird ausgeblendet.

Der '''Vorteil''' bei dem Weg über typeNum ist das uns alle globalen Variablen wie das komplette TSFE mit cObj etc. zur Verfügung stehen. Bei dem Weg per eID musste man vor der TYPO3 Version 4.3 noch ein eigenes TSFE Objekt erzeugen. Seit der 4.3 bietet das das eID Script aber an

weiteres Beispiel:

TypoScript
<pre>
[globalVar = GP:ajax > 0]
config.disableAllHeaderCode = 1
page >
page = PAGE
page {
typeNum = 0
10 < plugin.tx_myExt_pi1
}
[global]
</pre>

== Alternativer DokType ==
Eine andere Möglichkeit, eine komplett leere Basisseite zu bekommen versteckt sich noch irgendwo in der Extension “tt_news”. Dort kann man per DokType steuern ob eine Liste oder ein RSS-Feed ausgegeben wird. Der RSS-Feed befindet sich auch auf einer ganz leeren Seite.

== AJAX im Backend ==
Im Backend kann man über die ajaxID arbeiten. Oben genanntes Tutorial gibt auch hier eine kurze Auskunft. Das wichtigste:

R'''egistrieren des Skripts'''

ext_localconf.php

$TYPO3_CONF_VARS['BE']['AJAX']['tx_extkey::helloworld'] = t3lib_extMgm::extPath($_EXTKEY) . 'classes/class.tx_extkey_helloworld_ajax.php:tx_extkey_helloworld_ajax->sayHello';

oder anders:

$TYPO3_CONF_VARS['BE']['AJAX']['tx_extkey::key'] = 'pfad/datei.php:klassenname->methodenname';

Aufruf aus einem Modul:

$url = $this->doc->backPath . 'ajax.php?ajaxID=tx_extkey::helloworld';

Typo3 - alternatives Rendering

2011-04-16T05:53:02Z

94.216.255.39:

Typo3 - alternatives Rendering

2011-04-16T05:52:38Z

94.216.255.39: /* Eigener Page Type */

== Einleitung ==

Für verschiedene Anwendungsfälle (eigene template engine, ajax requests etc.) ist es manchmal notwendig, das Standard Seitenrendering von Typo3 zu umgehen. Dafür gibt es verschiedene Möglichkeiten.

== eid mechanismus ==
siehe unter Ajax und Typo3

== ajax parameter ==
Bemerkung: Nicht getestet

Wenn in der URL der Parameter
ajax=1
mitgegeben wird, dann erzeugt Typo3 ebenfalls eine Ausgabe ohne HTML-Tags und Metadaten. Die komplette Page-Konfiguration wird gelöscht und nur die Ausgabe der Extension “tx_myExt_pi1″ findet statt wenn man diese mit untenstehendem TS vorbereitet.

== Eigener Page Type ==
Man kann für die Ajax Anfragen einen eigenen Page Type definieren. Schönes Tutorial mit jQuery hier:

http://blog.kj187.de/2010/03/09/typo3-und-ajax-wie-geht-das/

TypoScript
<pre>
ajaxCall = PAGE
ajaxCall {
typeNum = 5000
10 < plugin.tx_unsereextension_pi1

config {
disableAllHeaderCode = 1
xhtml_cleaning = 0
admPanel = 0
debug = 0
no_cache = 1
}
}
</pre>
Dabei wird ein Aufruf mit der typeNum 5000 sofort an unsere Extension geleitet, die dann für die Ausgabe zuständig ist. Header Code wird ausgeblendet.

Der '''Vorteil''' bei dem Weg über typeNum ist das uns alle globalen Variablen wie das komplette TSFE mit cObj etc. zur Verfügung stehen. Bei dem Weg per eID musste man vor der TYPO3 Version 4.3 noch ein eigenes TSFE Objekt erzeugen. Seit der 4.3 bietet das das eID Script aber an

weiteres Beispiel:

TypoScript
<pre>
[globalVar = GP:ajax > 0]
config.disableAllHeaderCode = 1
page >
page = PAGE
page {
typeNum = 0
10 < plugin.tx_myExt_pi1
}
[global]
</pre>

== Alternativer DokType ==
Eine andere Möglichkeit, eine komplett leere Basisseite zu bekommen versteckt sich noch irgendwo in der Extension “tt_news”. Dort kann man per DokType steuern ob eine Liste oder ein RSS-Feed ausgegeben wird. Der RSS-Feed befindet sich auch auf einer ganz leeren Seite.

Typo3 - alternatives Rendering

2011-04-16T05:49:32Z

94.216.255.39:

== Einleitung ==

Für verschiedene Anwendungsfälle (eigene template engine, ajax requests etc.) ist es manchmal notwendig, das Standard Seitenrendering von Typo3 zu umgehen. Dafür gibt es verschiedene Möglichkeiten.

== eid mechanismus ==
siehe unter Ajax und Typo3

== ajax parameter ==
Bemerkung: Nicht getestet

Wenn in der URL der Parameter
ajax=1
mitgegeben wird, dann erzeugt Typo3 ebenfalls eine Ausgabe ohne HTML-Tags und Metadaten. Die komplette Page-Konfiguration wird gelöscht und nur die Ausgabe der Extension “tx_myExt_pi1″ findet statt wenn man diese mit untenstehendem TS vorbereitet.

== Eigener Page Type ==
Man kann für die Ajax Anfragen einen eigenen Page Type definieren. Schönes Tutorial mit jQuery hier:

http://blog.kj187.de/2010/03/09/typo3-und-ajax-wie-geht-das/

TypoScript
<pre>
ajaxCall = PAGE
ajaxCall {
typeNum = 5000
10 < plugin.tx_unsereextension_pi1

config {
disableAllHeaderCode = 1
xhtml_cleaning = 0
admPanel = 0
debug = 0
no_cache = 1
}
}
</pre>
Dabei wird ein Aufruf mit der typeNum 5000 sofort an unsere Extension geleitet, die dann für die Ausgabe zuständig ist. Header Code wird ausgeblendet.

oder so etwas:

TypoScript
<pre>
[globalVar = GP:ajax > 0]
config.disableAllHeaderCode = 1
page >
page = PAGE
page {
typeNum = 0
10 < plugin.tx_myExt_pi1
}
[global]
</pre>

== Alternativer DokType ==
Eine andere Möglichkeit, eine komplett leere Basisseite zu bekommen versteckt sich noch irgendwo in der Extension “tt_news”. Dort kann man per DokType steuern ob eine Liste oder ein RSS-Feed ausgegeben wird. Der RSS-Feed befindet sich auch auf einer ganz leeren Seite.

JQuery

2011-04-16T05:42:32Z

94.216.255.39: /* Weitere Beispiele */

==Quickstart==

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Gut durchlesen, hier werden die meisten Basics angesprochen.

== Links ==
Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors

Ereignisse: http://docs.jquery.com/Events

==Einbinden==
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.

===Über Google===
Beispiel:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

ui steht für User Interface (Plugins)

=== Libary auf eigenem Server ===

=== Typo3 ===
siehe JavaScript Frameworks nutzen

== Der Beginn ==
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:

$(document).ready(function() {
// do stuff when DOM is ready
});

Oder Abgekürzt

$(function() {
// do stuff when DOM is ready
});

== Reagieren auf Klick ==
<pre>
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

</pre>
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren

Früher hat man das so gelöst:
<a href="" onclick="alert('Hello world')">Link</a>
Das funktioniert, allerdings muß man hier bei jedem Link den Schnipsel einfügen.

== Zugriff auf Elemente ==
Old School:
document.getElementById("orderedlist")
Mit JQuery analog zu obigem Beispiel
<pre>
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

</pre>
Hier wird noch eine Klasse eingebaut

'''Weitere Beispiele:'''

$("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
#orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
<pre>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
</pre>
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.

== Elemente manipulieren, hinzufügen, entfernen ==

== Weitere Funktionen ==
find()
addClass()
removeClass()
hover()
each()
append()

== Ereignisse ==

== Weitere Beispiele ==
<pre>
// Find some li s and append Text
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});

$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});

// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});

// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});

// Find li elements that does NOT have a parent ul
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});

// Find elements with a name attribute
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});

// Grab the parent
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});

</pre>

=== Testen ob jQuery geladen ist ===
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen

<pre>
jQuerySrc = 'fileadmin/js/jquery-min.js';

// only load jQuery if not present
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
}

// if Google is down
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"" + jQuerySrc + "\"></"+"script>");
}
</pre>