JSF JavaScript Probleme zwischen Tomahawk und Tiles!?

[JayGabriel]

Hallo,

ich hoffe, dass mir hier wieder jemand helfen kann!

Seit letzter Woche stelle ich ein JSF - MyFaces/Tomahwark Projekt auf Templating mit Apache Tiles um.
Nach kleineren Startproblemen und dem üblichen Wald vor lauter Bäumen nicht sehen, funktioniert nun eigentlich fast alles, wie es sollte. Nur die InputCalendar Tags bereiten mir weiterhin Kopfzerbrechen.

Ich versuch diese als Popups rendern zu lassen, doch es kommt einfach kein Popup.

Nach langer Recherche bin ich zwar zu einer mickrigen Lösung gekommen, doch es stellt mich so gar nicht zu Frieden... :noe:

Mit diesem Eintrag
[xml]
<context-param>
<param-name>org.apache.myfaces.ADD_RESOURCE_CLASS</param-name>
<param-value>org.apache.myfaces.component.html.util.StreamingAddResource</param-value>
</context-param>
[/xml]
in der Web.xml habe ich immerhin einen Calendar zum Anzeigen bekommen, doch er erscheint nicht als Popup sondern als inline Calendar am unteren Ende der WebSeite. Und da ich zwei von diesen auch noch jedes Mal auf den Seiten einbinde (Start und Enddatum) sieht man die Eingabefelder meist nicht einmal mehr auf der zurzeit dargestellten Oberfläche und hat einen ellen langen weißen und ungenutzten Bereich, wenn keiner der Calendar eingeblendet ist.
Muss ich vielleicht eine andere Klasse/Komponente noch zusätzlich einbinden?

Oder hat jemand von euch schon das gleiche Problem mit Tomahawk und Tiles gehabt und dieses anderweitig lösen können?
Nach dem Kommentar dieser Seite scheint ein JavaScript Conflikt vorzuliegen? Doch aus der verlinkten Seite werde ich leider nicht schlau. Mit JavaScript hatte ich bisher leider nicht viel am Hut.

mfg
Jay

 

[JayGabriel]

Hat niemand von euch Erfahrung damit? Ich komm leider nicht weiter. :bahnhof:

Tomahawk scheint "prototyp.js" zu benutzen, Tiles hingegen "jQuery.js". Dadurch entsteht ein Konflikt, der irgendwie auch umgangen werden kann, wie ich auf einigen Seiten gelesen habe, aber nichts davon funktioniert bei mir...

Als letztes hatte ich folgendes eingefügt:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  //<![CDATA[
    jQuery.noConflict();
    // Benutze jQuery über jQuery(...)
    jQuery(document).ready(function(){
      jQuery("div").hide();
    });
 
    // Benutze Prototype über $(...), etc.
    $('someid').hide();
  //]]>
</script>

Nur hab ich keine Ahnung, ob dabei noch etwas angepasst werden muss, da ich mit JavaScript bisher nur wenig zu tun hatte.

Ebenfalls habe ich versucht, die JavaScriptdateien, das Stylesheet und die Icons, die vom InputCalendar Tag benutzt werden, in mein Projekt zu kopieren und dann per Hand zu verwenden.

styleLocation="/calendarconfig"

javascriptLocation="/calendarconfig"

imageLocation="/calendarconfig"

Auch das führte zu keiner Lösung.

Im IE habe ich mir das alles nun auch mal angeschaut und bin dort auf ein paar Fehler aufmerksam geworden, die bei all dem angezeigt werden:

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Zeitstempel: Tue, 9 Aug 2011 11:33:19 UTC


Meldung: Ungültiges Argument.
Zeile: 802
Zeichen: 5
Code: 0
URI: http://localhost:8080/de.webproject.Mytest/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/13128895/calendar.HtmlCalendarRenderer/popcalendar.js

 
Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Zeitstempel: Tue, 9 Aug 2011 11:50:51 UTC


Meldung: 'Event' ist undefiniert
Zeile: 293
Zeichen: 13
Code: 0
URI: http://localhost:8080/de.webproject.Mytest/calendarconfig/popcalendar.js


Meldung: 'Event' ist undefiniert
Zeile: 293
Zeichen: 13
Code: 0
URI: http://localhost:8080/de.webproject.Mytest/calendarconfig/popcalendar.js

Und dann bei einem anderen Test:

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Zeitstempel: Tue, 9 Aug 2011 13:01:10 UTC


Meldung: 'org_apache_myfaces_PopupCalendar' ist undefiniert
Zeile: 4
Zeichen: 1
Code: 0
URI: http://localhost:8080/de.webproject.Mytest/webabo/mainpage.faces


Meldung: 'org_apache_myfaces_PopupCalendar' ist undefiniert
Zeile: 23
Zeichen: 1
Code: 0
URI: http://localhost:8080/de.webproject.Mytest/webabo/mainpage.faces


Meldung: 'j_5Fid_5Fjsp_5F1162619647_5F0pc5_3AvonAenderungCalendarVar' ist undefiniert
Zeile: 22
Zeichen: 1
Code: 0
URI: http://localhost:8080/de.webproject.Mytest/webabo/mainpage.faces


Meldung: 'j_5Fid_5Fjsp_5F1162619647_5F0pc5_3AvonAenderungCalendarVar' ist undefiniert
Zeile: 22
Zeichen: 1
Code: 0
URI: http://localhost:8080/de.webproject.Mytest/webabo/mainpage.faces

Aber auch diese Meldungen sind überhaupt nicht hilfreich...

Desweiteren ist mir aufgefallen, dass mein Code, den ich durch die <tiles:insert...> Tags angegeben habe, über meinen <html> ... </html> Rumpf eingefügt werden. Das kann doch so nicht richtig sein, oder? ???:L

Beispiel (den Rattenschwanz aus dem Form Tag habe ich mal abgekürtzt, um nicht zu erschlagen):

<form id="j_id_jsp_2085766583_1" ... </form>


<!DOCTYPE html>
<html lang="en">
<head>
	<title>WebAbo Contact</title>
	<link rel="stylesheet" type="text/css" href="../css/layout.css"></link>
	<script type="text/javascript" src="prototype.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    //<![CDATA[
		jQuery.noConflict();
 
		// Benutze jQuery über jQuery(...)
		jQuery(document).ready(function(){
			jQuery("div").hide();
		});
 
		// Benutze Prototype über $(...), etc.
		$('someid').hide();
    //]]>
  </script>

</head>
<body>

</body>
</html>

Mein Layout sieht jedoch eigentlich ganz anders aus:

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title><tiles:getAsString name="title" /></title>
  <link rel="stylesheet" type="text/css" href="../css/layout.css"></link>
  <script type="text/javascript" src="prototype.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    //<![CDATA[
      jQuery.noConflict();
 
      // Benutze jQuery über jQuery(...)
      jQuery(document).ready(function(){
	jQuery("div").hide();
      });
 
      // Benutze Prototype über $(...), etc.
      $('someid').hide();
    //]]>
  </script>
</head>
<body>
<f:view>
  <h:form>
    <h:panelGrid styleClass="grd_header" columns="1">
      <tiles:insertAttribute name="banner" flush="false"/>
      <tiles:insertAttribute name="header" flush="false" />
      <tiles:insertAttribute name="menu" flush="false" />
    </h:panelGrid>
  </h:form>
  <tiles:insertAttribute name="content" flush="false" />
  <h:form>
    <tiles:insertAttribute name="footer" flush="false" />
  </h:form>
</f:view>
</body>
</html>

Ich habe mal den Hinweis gelesen, dass Tiles und Facelets sich nicht ganz grün sind, stimmt das? Bis auf das Problem mit dem InputCalendar Tag von Tomahawk hab ich bisher noch keine Probleme entdeckt.

mfg
Jay

 

[JayGabriel]

Okay, nachdem ich fast die Tiles wieder aus dem Code entfernen wollte, habe ich den Fehler gefunden.

Und mal wieder war es viel simpler, als die Fehlermeldungen und Hinweise, auf die ich gestoßen bin, vermuten ließen...

Es lag tatsächlich am verschobenen Form Bereich... So hab ich nun einzig und allein meine

<f:view>

Tags in meinen Templates um meinen gesamten HTML Block herum verschoben.

Also von so (alte und falsche Variante):
[xml]
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title><tiles:getAsString name="title" /></title>
<link rel="stylesheet" type="text/css" href="../css/layout.css"></link>
</head>
<body>
<f:view>
<tiles:insertAttribute name="content" flush="false" />
</f:view>
</body>
</html>
[/xml]

nach so (bringt bei mir nun richtige Darstellungsweise):
[xml]
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<f:view>
<!DOCTYPE html>
<html lang="en">
<head>
<title><tiles:getAsString name="title" /></title>
<link rel="stylesheet" type="text/css" href="../css/layout.css"></link>
</head>
<body>
<tiles:insertAttribute name="content" flush="false" />
</body>
</html>
</f:view>
[/xml]

Es klappt ebenfalls mit den Tomahawk Tags, die die HTML Tags ersetzen (

<t:document>

,

<t:documentHead>

und

<t:documentBody>

).
Nur die

<f:view>

Tags als erstes und als letztes sind die ausschlaggebenden Angaben.

Den ganzen anderen Kram mit dem

ADD_RESOURCE_CLASS

Context Parameter und den zusätzlichen Attributen

styleLocation="/calendarconfig"

javascriptLocation="/calendarconfig"

und

imageLocation="/calendarconfig"

im InputCalendar habe ich wieder rausgenommen. Ebenso wie mein Versuch den angeblichen JavaScript Konflikt zu beheben. Das alles war bei mir nicht notwendig...

mfg
Jay