Zum Inhalt springen

Mein erster Versuch ...

Erstellt am 27. Juni 2009 · 5 Antworten · letzte Antwort am 30. Juni 2009

Tags: JavaScript & AJAX, Frage

heinetz ·

... ist, soweit ich das erkennen kann einigermassen gelungen.

Hallo Forum,

ich möchte mich (mal wieder) versuchen, in Typo3 einzuarbeiten.
Ich programmiere seit gut 10 Jahren mit (X)HTML und PHP und JS
und habe mich bisher immer wieder gegen fertige CMS gesprerrt.

Vor kurzem habe ich mit Drupal arbeiten müssen und habe dabei
festgestellt, dass das doch so viele Schnittstellen bietet, wie sich fertige Module und eigene Programmierung kombinieren lassen,
dass ich mir Typo3 deshalb mal genauer ansehen wollte - jetzt habe
ich gerade die Zeit dazu und habe folgendes probiert:

Das Testprojekt aus diesem
Tutorial habe ich nachgebaut und damit so eine erste Idee davon
bekommen, wie die Zusammenhänge zwischen Inhalte und Templates
sind.

Jetzt möchte ich dieses Testprojekt etwas 'aufbohren' und
ausprobieren, wie sich verschiedene denkbare Features integrieren
lassen.

Daher habe ich als erstes versucht, etwas JS bzw. DHTML einzubauen. Dafür habe ich mir dieses Beispiel hier gesucht und will versuchen das DHTML-Menu in mein Testprojekt einzubauen.

Es funktioniert auf Anhieb nicht ... was mich nicht wundert, aber
ich möchte dennoch wissen was ich falsch mache:

Wenn ich diesen TS-Teil in meinem Template (wie ich es nach dem Beispiel eingebaut habe) hinzufüge, sehe ich im Frontend nichts
von den Auswirkungen. Der Text erscheint nicht im <head>-Tag.

Woran liegt das ?

Danke für Tipps und

beste gruesse,
heinetz

Julian.​Hofmann ·

Hallo.

Die zwei von Dir genannten Turtorials passen nicht ganz zusammen. Bei yeebase wird die Erstellung einer Seite mit Templavoila erklärt, typo3wizard bezieht sich hingegen auf den traditionellen Weg.

Wie hast Du die beiden Artikel kombiniert? Hast Du das Menü entsprechen dder Seite 4 ins Template gemapt? Wenn ich mich recht erinnere, dann sind für TemplaVoila auch nur lib-Objekte verwendbar, während bei typo3wizard das Menü als temp.brainjarmenu erzeugt wird (Einfach in lib.brainjarmenu umbenennen).

Viele Grüße
Julian

heinetz ·

Hi,

erstmal danke für die Info ! Ich denke, mein Problem kommt weit vorher 😉

Ich habe, wie in dem Tutorial beschrieben, unter WEB -> Template folgenden
Teil in den Bereich 'Konfiguration' eingefügt:

-------------------------------------------------------------------

#übergibt das komplette Template-Rendering an TemplaVoilà 
page = PAGE 
page.typeNum = 0 
page.10 = USER 
page.10.userFunc = tx_templavoila_pi1->main_page 

#Erstellt die Hauptnavi und packt sie in eine lib 
lib.menu = HMENU 
lib.menu{ 
entrylevel = 1 
1 = TMENU 
1.NO = 1 
1.NO.linkWrap = <div class=&#8220;menu&#8220;> | </div> 
#Erstellt die zweite Ebene indem sie die erste Ebene kopiert und den Linkwrap 
überschreibt 
2 < .1 
2.NO.linkWrap = <div class=&#8220;menu-ebene2&#8220;>|</div> 
}

-------------------------------------------------------------------

das halte ich für TypoScript und stelle mir vor, dass dort der
Zusammenhang zwischen dem konventionellen templating und TemplaVoilá
besteht (#übergibt das komplette Template-Rendering an TemplaVoilà).

Um jetzt dieses Menu gegen das DHTML-Menu auszutauschen, hätte ich
gedacht, dass ich diesen Teil anpassen muss. Korrekt ?

Um zu überprüfen, ob die Anpassung dieses Teils im Frontend sichtbar
wird, habe ich zunächst den HTML-Part leicht abgeändert und aus:

1.NO.linkWrap = <div class=&#8220;menu&#8220;> | </div>
1.NO.linkWrap = <div id=test class=&#8220;menu&#8220;> | </div>

gemacht. Das ganze habe ich dann abgespeichert und erwarte im Frontend
dass diese Änderung im Quelltext sichtbar wird. Tut sie aber nicht.

Was muss ich tun, damit sich diese Anpassung auswirkt ?

danke für Tipps und

beste gruesse,
heinetz

Julian.​Hofmann ·

Oh, ok, dann tippe ich auf den üblichen Stolperstein (für jeden, der anfängt, aber auch oft für (zu) schnelle Fortgeschrittene): der Cache.
TYPO3 cacht generierte Seiten, um den Server zu entlasten. Das ist während der Entwicklung natürlich nervig (v.a. wenn man nicht drandenkt).

Lösung 1:
Nach Änderungen am Template (oder auch Inhalt) Cache löschen (Blitz-Icon rechts oben neben dem Logout-Button).

Lösung 2:
Cache (während Entwicklungszeit) deaktivieren (TSref no_cache).

config.no_cache=1
heinetz ·

Jo, genau das war's. Nach löschen des Caches werden die Änderungen sichtbar.

Jetzt muss ich nur noch begreifen, was die beiden unterschiedlichen Skripte
machen 😉

Klar, beide generieren irgendwie das Menu aus der Seitenstruktur und irgendwie
ist die Syntax ja ähnlich. Das eine schreibt die Inhalte irnedwie nach temp und
das andere in eine lib. Das muss ich nun nur noch zusamen kriegen 😉

beste gruesse,
heinetz

heinetz ·

so, hinbekommen. wie genau typoskript nun funktioniert,
weiss ich natürlich immernoch nicht, aber vielleicht bin
ich dem ganzen etwas näher gekommen:

# -- geaendert > -------------

# # --- Brainjar menu begin ---
# temp.brainjarmenu = COA
# temp.brainjarmenu {

#Erstellt die Hauptnavi und packt sie in eine lib
lib.menu = COA
lib.menu {

# -- < geaendert -------------

  # ---------------------------------------
  # Typoscript implementation of the DHTML
  # menu found at http://www.brainjar.com
  # ---------------------------------------
  10 = HMENU
  10.entryLevel = 0
  10.1 = TMENU
  10.1 {
    wrap = <div class="menuBar" style="width:80%;">|</div>
    NO.ATagParams = class="menuButton"
    IFSUB = 1
    IFSUB.doNotLinkIt = 1
    IFSUB.subst_elementUid = 1
    IFSUB.allWrap = <a class="menuButton" href="#" onclick="return buttonClick(event, 'menu{elementUid}');" onmouseover="buttonMouseover(event, 'menu{elementUid}');">|</a>
  }
   
  20 < .10
  20.1 >
  20.1 = TMENU
  20.1 {
    expAll = 1
    NO.doNotLinkIt = 1
    NO.doNotShowLink = 1
    IFSUB < .NO
    IFSUB = 1
    IFSUB.subst_elementUid = 1
    IFSUB.allWrap = <div id="menu{elementUid}" class="menu" onmouseover="menuMouseover(event)">|
    IFSUB.wrapItemAndSub = |</div>
  }
  20.2 = TMENU
  20.2 {
    NO.ATagParams = class="menuItem"
    IFSUB = 1
    IFSUB.doNotLinkIt = 1
    IFSUB.subst_elementUid = 1
    IFSUB.allWrap = <a class="menuItem" href="#" onclick="return false;" onmouseover="menuItemMouseover(event, 'menu{elementUid}');"><span class="menuItemText">|</span><span class="menuItemArrow">&#9654;</span></a>
    SPC = 1
    SPC.doNotLinkIt = 1
    SPC.doNotShowLink = 1
    SPC.allWrap = <div class="menuItemSep"></div>
  }
   
  30 < .10
  30.1 >
  30.1 = TMENU
  30.1 {
    expAll = 1
    NO.doNotLinkIt = 1
    NO.doNotShowLink = 1
  }
  30.2 < .20.1
  30.3 < .20.2
   
  40 < .10
  40.1 >
  40.1 < .30.1
  40.2 < .30.1
  40.3 < .20.1
  40.4 < .20.2
   
  50 < .10
  50.1 >
  50.1 < .30.1
  50.2 < .30.1
  50.3 < .30.1
  50.4 < .20.1
  50.5 < .20.2
}

# --- Brainjar menu end ---

# -- geaendert > -------------

# # Default PAGE object:
# page = PAGE
# page.typeNum = 0
# page.10 < temp.brainjarmenu

#übergibt das komplette Template-Rendering an TemplaVoilà 
page = PAGE 
page.typeNum = 0 
page.10 = USER 
page.10.userFunc = tx_templavoila_pi1->main_page 

# -- < geaendert -------------

page.headerData.1 = TEXT
page.headerData.1.value = <SCRIPT LANGUAGE="JavaScript" SRC="fileadmin/brainjarmenu.js"></SCRIPT>
page.headerData.2 = TEXT
page.headerData.2.value = <link href="fileadmin/brainjarmenu.css" rel="stylesheet" type="text/css" />

... und dann wurde das neue horizontale Menu erstmal in dem für das alte vertikale vorgesehenen Container dargestellt. Das passte natürlich nicht.
Also habe ich meine vorlage.html, die ich beim mapping verwendet habe
nochmal editiert und den container wo anders hin verschoben.
Weil ich mir dachte, Typo3 müsse irgendwie diese Änderung mitgeteilt werden,
habe ich nach der Stelle gesucht, wo ich diese Vorlage ursprünglich mal
ge-'Map'-ed hatte und, siehe da: Typo3 sagt mir, die vorlage sei geändert
worden, ich müsse eventuell 'Re-Map'-en. Hab's gemacht, aber wahrscheinlich
wäre das garnicht nötig gewesen, weil die Zuordnung:

container-id >contentelement:lib sich nicht geändert hat, oder ?

Interessant fand ich dann noch folgenden Zusammenhang:

In dem neuen Typoskript, dass eigentlich nicht für TemplaVoilá gedacht ist,
werden eine css und eine js direkt in den Header geschrieben. Das funktioniert auch so. Allerdings ist das offenbar nicht so gedacht. Ich hab's aber gefunden:

Die Verweise sollten in die beim Mapping verwendete HTML-Vorlage und können
dann als Header-Parts beim Mapping aktiviert werden.

Schon einen sehr grossen Schritt weiter. Ich denke, mehr braucht man nicht
um damit eine einfache Seite zu bauen, in der sich alle möglichen Elemente
editieren lassen.

Aber um eine intelligente Template-Struktur aufbauen zu können, muss man wohl
erstmal etwas Typoskript lernen, um vernünftige Template-Strukturen entwickeln
zu können, oder ?

gute nacht und danke für die Hilfe,
heinetz
Templates zu entwickeln.