<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>wicket praxis &#187; parameter</title>
	<atom:link href="http://www.wicket-praxis.de/blog/tag/parameter/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.wicket-praxis.de/blog</link>
	<description>erfahrungen mit wicket aus dem projektalltag</description>
	<lastBuildDate>Fri, 26 Aug 2011 11:14:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Wicket Heatmap &#8211; Ajax mit Parametern</title>
		<link>http://www.wicket-praxis.de/blog/2010/03/07/wicket-heatmap-ajax-mit-parametern/</link>
		<comments>http://www.wicket-praxis.de/blog/2010/03/07/wicket-heatmap-ajax-mit-parametern/#comments</comments>
		<pubDate>Sun, 07 Mar 2010 15:22:07 +0000</pubDate>
		<dc:creator>michael</dc:creator>
				<category><![CDATA[Wicket]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[clickmap]]></category>
		<category><![CDATA[parameter]]></category>

		<guid isPermaLink="false">http://www.wicket-praxis.de/blog/?p=257</guid>
		<description><![CDATA[Wer wissen möchte, wohin die Nutzer in der eigenen Anwendung so klicken (z.B. auf Dinge, von denen man selbst nicht annehmen würde, das Nutzer darauf klicken), der muss jeden Mausklick des Nutzers aufzeichnen. Aus diesen Daten kann man dann ermitteln, wohin die Nutzer ihren Mauszeiger so wandern lassen. Dafür gibt es bereits Opensourcelösungen, die meist [...]]]></description>
			<content:encoded><![CDATA[<p>Wer wissen möchte, wohin die Nutzer in der eigenen Anwendung so klicken (z.B. auf Dinge, von denen man selbst nicht annehmen würde, das Nutzer darauf klicken), der muss jeden Mausklick des Nutzers aufzeichnen. Aus diesen Daten kann man dann ermitteln, wohin die Nutzer ihren Mauszeiger so wandern lassen. Dafür gibt es bereits Opensourcelösungen, die meist auf PHP basieren. Unter dem Suchbergriff <a href="http://de.wikipedia.org/wiki/Heatmap" rel="nofollow" target="_blank">Heatmap</a> wird man auch bei Google fündig. Da sich alles in diesem Blog um Java und dann noch um Wicket dreht, lag es natürlich nahe, zu prüfen, ob und wie man diese Anforderung mit Wicket realisieren kann. Dieser Beitrag wäre viel kürzer, wenn man die Frage nach dem &#8220;ob&#8221; mit nein beantworten müsste. Kommen wir also zum &#8220;wie?&#8221;.</p>
<p>Für die Umsetzung habe ich mir anfänglich einiges aus dem Beispielen aus folgendem <a href="http://blog.corunet.com/the-definitive-heatmap/">Blogbeitrag</a> entlehnt. Im Laufe der Zeit ist zwar davon nicht mehr viel zu sehen, das Grundprinzip ist aber das Gleiche geblieben.</p>
<p>Folgende Fragestellung stand am Anfang dieses Versuchs: Wie kann man mit Wicket Werte in einem AjaxRequest übergeben (z.B. die Mausposition). Die erste Idee bestand darin, ein unsichtbares Formular zu erstellen, in das man die Werte per Javascript einfügt und dieses Formular per Ajax abschickt. Das hat auch funktioniert, war aber irgendwie auch ein wenig zu aufwendig. Nach einer Reihe missglückter Versuche, den richtigen Ansatz zu finden, stellte ich diese Frage in der Wicket-Mailingliste und bekam den entscheidenen Tipp von Ernesto Reinaldo Barreiro. Es gab einen <a href="http://londonwicket.googlecode.com/files/LondonWicket-Paint.pdf" target="_blank">Vortrag</a> der <a href="http://code.google.com/p/londonwicket/" target="_blank">London Wicket User Group</a>, der dieses Problem löste. Mit dieser Vorarbeit begann ich das Thema umzusetzen. Dabei hat sich die eigene Implementierung vom Original entfernt. Hier nun Schritt für Schritt der vollständige Code:</p>
<p><strong>AbstractParameterizedDefaultAjaxBehavior</strong></p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Java(TM) 2 Platform Standard Edition 5.0"><div class="devcodeoverflow"><ol><li><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">de.wicketpraxis.web.blog.pages.questions.ajax.parameter</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.util.HashMap</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.util.Map</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.Request</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.RequestCycle</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ResourceReference</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ajax.AbstractDefaultAjaxBehavior</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ajax.AjaxRequestTarget</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.IHeaderResponse</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.util.time.Duration</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #000000; font-weight: bold;">class</span> AbstractParameterizedDefaultAjaxBehavior <span style="color: #000000; font-weight: bold;">extends</span> AbstractDefaultAjaxBehavior</li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">static</span> <span style="color: #006600; font-weight: bold;">int</span> sec=<span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">private</span> <span style="color: #003399; font-weight: bold;">Duration</span> _throttleDelay<span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #006600; font-weight: bold;">void</span> renderHead<span style="color: #009900;">&#40;</span>IHeaderResponse response<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">renderHead</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderJavascriptReference</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> ResourceReference<span style="color: #009900;">&#40;</span>AbstractParameterizedDefaultAjaxBehavior.<span style="color: #000000; font-weight: bold;">class</span>,<span style="color: #0000ff;">&quot;AbstractParameterizedDefaultAjaxBehavior.js&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #006600; font-weight: bold;">void</span> respond<span style="color: #009900;">&#40;</span>AjaxRequestTarget target<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">Request</span> request = RequestCycle.<span style="color: #006633;">get</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">getRequest</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">Map</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">String</span>,<span style="color: #003399; font-weight: bold;">Object</span><span style="color: #339933;">&gt;</span> map=<span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">HashMap</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">String</span>, <span style="color: #003399; font-weight: bold;">Object</span><span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> parameter = getParameter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000;&nbsp;&nbsp;font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span> p : parameter<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">String</span> svalue = request.<span style="color: #006633;">getParameter</span><span style="color: #009900;">&#40;</span>p.<span style="color: #006633;">getName</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000;&nbsp;&nbsp;font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>svalue<span style="color: #339933;">!</span>=<span style="color: #006600; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">Object</span> value=getComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">getConverter</span><span style="color: #009900;">&#40;</span>p.<span style="color: #006633;">getType</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">convertToObject</span><span style="color: #009900;">&#40;</span>svalue, getComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">getLocale</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map.<span style="color: #006633;">put</span><span style="color: #009900;">&#40;</span>p.<span style="color: #006633;">getName</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, value<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;respond<span style="color: #009900;">&#40;</span>target, <span style="color: #000000; font-weight: bold;">new</span> ParameterMap<span style="color: #009900;">&#40;</span>map<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399; font-weight: bold;">CharSequence</span> getCallbackUrl<span style="color: #009900;">&#40;</span><span style="color: #006600; font-weight: bold;">boolean</span> onlyTargetActivePage<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">StringBuilder</span> sb=<span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">StringBuilder</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;sb.<span style="color: #006633;">append</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">getCallbackUrl</span><span style="color: #009900;">&#40;</span>onlyTargetActivePage<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> parameter = getParameter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000;&nbsp;&nbsp;font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span> p : parameter<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sb.<span style="color: #006633;">append</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&amp;&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">append</span><span style="color: #009900;">&#40;</span>p.<span style="color: #006633;">getName</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">append</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;='+&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">append</span><span style="color: #009900;">&#40;</span>p.<span style="color: #006633;">getJavascript</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">append</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;+'&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> sb.<span style="color: #006633;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">CharSequence</span> getCallbackScript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000;&nbsp;&nbsp;font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>_throttleDelay<span style="color: #339933;">!</span>=<span style="color: #006600; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> throttleScript<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">getCallbackScript</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>,<span style="color: #0000ff;">&quot;thw&quot;</span>+<span style="color: #009900;">&#40;</span>sec++<span style="color: #009900;">&#41;</span>,_throttleDelay<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">getCallbackScript</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">class</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">String</span> _name<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">String</span> _javascript<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">Class</span><span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span> _type<span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">String</span> name,<span style="color: #003399; font-weight: bold;">Class</span><span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span> type,<span style="color: #003399; font-weight: bold;">String</span> javascript<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_name=name<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_type=type<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_javascript=javascript<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #003399; font-weight: bold;">String</span> getName<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> _name<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #003399; font-weight: bold;">String</span> getJavascript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> _javascript<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #003399; font-weight: bold;">Class</span><span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span> getType<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> _type<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span> of<span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">String</span> name,<span style="color: #003399; font-weight: bold;">Class</span><span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span> type,<span style="color: #003399; font-weight: bold;">String</span> javascript<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span>name, type, javascript<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">class</span> ParameterMap</li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">Map</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">String</span>, <span style="color: #003399; font-weight: bold;">Object</span><span style="color: #339933;">&gt;</span> _map<span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> ParameterMap<span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Map</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">String</span>, <span style="color: #003399; font-weight: bold;">Object</span><span style="color: #339933;">&gt;</span> map<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_map=map<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span> T getValue<span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span>T<span style="color: #339933;">&gt;</span> parameter<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>T<span style="color: #009900;">&#41;</span> _map.<span style="color: #006633;">get</span><span style="color: #009900;">&#40;</span>parameter.<span style="color: #006633;">getName</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">final</span> AbstractParameterizedDefaultAjaxBehavior setThrottleDelay<span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Duration</span> throttleDelay<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;_throttleDelay=throttleDelay<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">this</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #006600; font-weight: bold;">void</span> respond<span style="color: #009900;">&#40;</span>AjaxRequestTarget target,ParameterMap parameterMap<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> getParameter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #009900;">&#125;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>Die drei wichtigsten Bestandteile dieser Klasse sind folgende: Die Klasse Parameter definiert den Namen, den Typ, und das Javascript, das für das Ermitteln des Wertes im Browser aufgerufen muss. Die Methode respond(AjaxRequestTarget) liest die Werte aus dem Request aus, konvertiert diese in den gewünschen Typ und ruf damit eine zu überschreibende Methode auf. Die Methode getCallbackUrl() liefert das Javascript-Fragment für die Url, die dann per Ajax aufgerufen wird.</p>
<p>Um die Position des Mauszeigers ermitteln zu können, muss man sich mit einer eigenen Funktion für so einen Event registrieren. Damit mehr als eine Funktion auf so einen Event reagieren kann, sollte man die Funktion, die davor registriert war, ebenfalls aufrufen. Um für diese Problematik, die vermutlich in allen abgeleiteten Klassen vorhanden ist, besser lösen zu können, binden wir automatisch eine hilfreiche Javascript-Klasse ein.</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Javascript"><div class="devcodeoverflow"><ol><li>Callback <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;create<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>oldCallback<span style="color: #339933;">,</span>newCallback<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span>b<span style="color: #339933;">,</span>c<span style="color: #339933;">,</span>d<span style="color: #339933;">,</span>e<span style="color: #339933;">,</span>f<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>oldCallback<span style="color: #009900;">&#41;</span> </li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oldCallback<span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span>b<span style="color: #339933;">,</span>c<span style="color: #339933;">,</span>d<span style="color: #339933;">,</span>e<span style="color: #339933;">,</span>f<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newCallback<span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span>b<span style="color: #339933;">,</span>c<span style="color: #339933;">,</span>d<span style="color: #339933;">,</span>e<span style="color: #339933;">,</span>f<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span></li><li><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>Der Code sieht etwas merkwürdig aus. Das liegt an folgenden Gründen: zum einen stehe ich mit Javascript immer noch auf Kriegsfuß (mit Wicket kann man den Javascript-Teil sehr schön verstecken) und habe daher keine geeignete Lösung gefunden, mit der es mir möglich war, alle Argumente des Funktionsaufrufs an die zwei Funktionen weiterzureichen. Da es aber Javascript egal ist, mit wie vielen Parametern man eine Funktion aufruft, werden auf diese Weise bis zu 6 Übergabeparameter weitergereicht. Für Hinweise an dieser Stelle bin ich extrem dankbar.</p>
<p><strong>WicketWindowJavascript</strong></p>
<p>Für vieles bringt Wicket bereits fertige Implementierungen mit. Allerdings verstecken sich diese manchmal an unauffälligen Stellen. Für das Ermitteln des sichtbaren Bereichs fand ich die nötigen Javascript-Funktionen bei der ModelWindow-Klasse. Da ich nicht das vollständige ModalWindow-Javascript einbinden wollte, habe ich diese allgemeinen Funktionen in eine eigene Resource verpackt.</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Java(TM) 2 Platform Standard Edition 5.0"><div class="devcodeoverflow"><ol><li><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">de.wicketpraxis.web.blog.pages.questions.ajax.parameter</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ResourceReference</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> WicketWindowJavascript</li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">private</span> WicketWindowJavascript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> ResourceReference RESOURCE=<span style="color: #000000; font-weight: bold;">new</span> ResourceReference<span style="color: #009900;">&#40;</span>WicketWindowJavascript.<span style="color: #000000; font-weight: bold;">class</span>,<span style="color: #0000ff;">&quot;WicketWindowJavascript.js&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li><span style="color: #009900;">&#125;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Javascript"><div class="devcodeoverflow"><ol><li><span style="color: #006600; font-style: italic;">// aus der Datei modal.js zur Klasse ModalWindow</span></li><li>&nbsp;</li><li><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>Wicket.<span style="color: #660066;">Window</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;undefined&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;Wicket.<span style="color: #660066;">Window</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></li><li><span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li><span style="color: #006600; font-style: italic;">/**</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;* Returns the height of visible area.</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;*/</span></li><li>Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getViewportHeight</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">innerHeight</span> <span style="color: #339933;">!=</span> window.<span style="color: #660066;">undefined</span><span style="color: #009900;">&#41;</span> </li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> window.<span style="color: #660066;">innerHeight</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">compatMode</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'CSS1Compat'</span><span style="color: #009900;">&#41;</span> </li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">clientHeight</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span> </li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">clientHeight</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> window.<span style="color: #660066;">undefined</span><span style="color: #339933;">;</span> </li><li><span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li><span style="color: #006600; font-style: italic;">/**</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;* Returns the width of visible area.</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;*/</span></li><li>Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getViewportWidth</span> <span style="color: #339933;">=</span>&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">innerWidth</span> <span style="color: #339933;">!=</span> window.<span style="color: #660066;">undefined</span><span style="color: #009900;">&#41;</span> </li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> window.<span style="color: #660066;">innerWidth</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">compatMode</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'CSS1Compat'</span><span style="color: #009900;">&#41;</span> </li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">clientWidth</span><span style="color: #339933;">;</span> </li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span> </li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">body</span>.<span style="color: #660066;">clientWidth</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> window.<span style="color: #660066;">undefined</span><span style="color: #339933;">;</span></li><li><span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li><span style="color: #006600; font-style: italic;">/**</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;* Returns the horizontal scroll offset</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;*/</span></li><li>Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getScrollX</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> iebody <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">compatMode</span> <span style="color: #339933;">&amp;&amp;</span> document.<span style="color: #660066;">compatMode</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;BackCompat&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> document.<span style="color: #660066;">documentElement</span> <span style="color: #339933;">:</span> document.<span style="color: #660066;">body</span>&nbsp;&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">all</span><span style="color: #339933;">?</span> iebody.<span style="color: #660066;">scrollLeft</span> <span style="color: #339933;">:</span> pageXOffset</li><li><span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li><span style="color: #006600; font-style: italic;">/**</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;* Returns the vertical scroll offset</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;*/</span></li><li>Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getScrollY</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> iebody <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">compatMode</span> <span style="color: #339933;">&amp;&amp;</span> document.<span style="color: #660066;">compatMode</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;BackCompat&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> document.<span style="color: #660066;">documentElement</span> <span style="color: #339933;">:</span> document.<span style="color: #660066;">body</span>&nbsp;&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">all</span><span style="color: #339933;">?</span> iebody.<span style="color: #660066;">scrollTop</span> <span style="color: #339933;">:</span> pageYOffset</li><li><span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;</li><li><span style="color: #006600; font-style: italic;">/**</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;* Returns element offset</span></li><li><span style="color: #006600; font-style: italic;">&nbsp;*/</span></li><li>Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getXYOffset</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>obj<span style="color: #009900;">&#41;</span></li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> curleft <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> curtop <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>obj.<span style="color: #660066;">offsetParent</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>obj.<span style="color: #660066;">offsetParent</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curleft <span style="color: #339933;">+=</span> obj.<span style="color: #660066;">offsetLeft</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curtop <span style="color: #339933;">+=</span> obj.<span style="color: #660066;">offsetTop</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj <span style="color: #339933;">=</span> obj.<span style="color: #660066;">offsetParent</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">else</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>obj.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curleft <span style="color: #339933;">+=</span> obj.<span style="color: #660066;">x</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>obj.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curtop <span style="color: #339933;">+=</span> obj.<span style="color: #660066;">y</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>Wicket.<span style="color: #660066;">Browser</span>.<span style="color: #660066;">isIE</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;bodyElement<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006600; font-style: italic;">// In IE there's a default margin in the page body. If margin's not defined,</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006600; font-style: italic;">// use defaults</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> marginLeftExplorer&nbsp;&nbsp;<span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>bodyElement.<span style="color: #660066;">style</span>.<span style="color: #660066;">marginLeft</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> marginTopExplorer&nbsp;&nbsp; <span style="color: #339933;">=</span> parseInt<span style="color: #009900;">&#40;</span>bodyElement.<span style="color: #660066;">style</span>.<span style="color: #660066;">marginTop</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006600; font-style: italic;">/* assume default 10px/15px margin in explorer */</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>isNaN<span style="color: #009900;">&#40;</span>marginLeftExplorer<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>marginLeftExplorer<span style="color: #339933;">=</span><span style="color: #CC0000;">10</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>isNaN<span style="color: #009900;">&#40;</span>marginTopExplorer<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>marginTopExplorer<span style="color: #339933;">=</span><span style="color: #CC0000;">15</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;curleft<span style="color: #339933;">=</span>curleft<span style="color: #339933;">+</span>marginLeftExplorer<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;curtop<span style="color: #339933;">=</span>curtop<span style="color: #339933;">+</span>marginTopExplorer<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#91;</span>curleft<span style="color: #339933;">,</span>curtop<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li><span style="color: #009900;">&#125;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>Hinzugefügt habe ich nur die Methode Wicket.Window.getXYOffset(), um den Offset für ein bestimmtes oder das erste Kindelement der Seite ermitteln zu können. Eine Klasse, die diese Methoden benötigt, muss die Resource entsprechend einbinden.</p>
<p><strong>WindowResizeBehavior</strong></p>
<p>Um die Heatmap in der richtigen Größe zeichnen zu können, benötigen wir Informationen über die Dimensionen des sichtbaren Bereichs. Für window.onresize wird ein neuer Callback registriert. Die Werte können über die ensprechend Wicket.Window-Funktionen ermittelt werden. Daher wird nicht nur der Callback registiert, sondern die Funktion nach dem Laden der Seite direkt aufgerufen. Auf diese Weise bekommen wir die Informationen über den sichtbaren Bereich nicht erst, wenn der Nutzer die Fenstergröße verändert.</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Java(TM) 2 Platform Standard Edition 5.0"><div class="devcodeoverflow"><ol><li><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">de.wicketpraxis.web.blog.pages.questions.ajax.parameter</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ResourceReference</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ajax.AjaxRequestTarget</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.IHeaderResponse</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.util.time.Duration</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #000000; font-weight: bold;">class</span> WindowResizeBehavior <span style="color: #000000; font-weight: bold;">extends</span> AbstractParameterizedDefaultAjaxBehavior</li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">Integer</span><span style="color: #339933;">&gt;</span> WIDTH=of<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;width&quot;</span>, <span style="color: #003399; font-weight: bold;">Integer</span>.<span style="color: #000000; font-weight: bold;">class</span>, <span style="color: #0000ff;">&quot;Wicket.Window.getViewportWidth()&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">Integer</span><span style="color: #339933;">&gt;</span> HEIGHT=of<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;height&quot;</span>, <span style="color: #003399; font-weight: bold;">Integer</span>.<span style="color: #000000; font-weight: bold;">class</span>, <span style="color: #0000ff;">&quot;Wicket.Window.getViewportHeight()&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #006600; font-weight: bold;">void</span> renderHead<span style="color: #009900;">&#40;</span>IHeaderResponse response<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">renderHead</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderJavascriptReference</span><span style="color: #009900;">&#40;</span>WicketWindowJavascript.<span style="color: #006633;">RESOURCE</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderOnDomReadyJavascript</span><span style="color: #009900;">&#40;</span>getJavascript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderOnDomReadyJavascript</span><span style="color: #009900;">&#40;</span>getCallbackScript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">String</span> getJavascript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #0000ff;">&quot;window.onresize = Callback.create(window.onresize,function () {&quot;</span>+getCallbackScript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>+<span style="color: #0000ff;">&quot;});&quot;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> getParameter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#123;</span> WIDTH,HEIGHT<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #006600; font-weight: bold;">void</span> respond<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, ParameterMap parameterMap<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;onResize<span style="color: #009900;">&#40;</span>target, parameterMap.<span style="color: #006633;">getValue</span><span style="color: #009900;">&#40;</span>WIDTH<span style="color: #009900;">&#41;</span>, parameterMap.<span style="color: #006633;">getValue</span><span style="color: #009900;">&#40;</span>HEIGHT<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>&nbsp;&nbsp;&nbsp;&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #006600; font-weight: bold;">void</span> onResize<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, <span style="color: #006600; font-weight: bold;">int</span> width, <span style="color: #006600; font-weight: bold;">int</span> height<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li><span style="color: #009900;">&#125;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p><strong>ElementOffsetBehavior</strong></p>
<p>Die Bestimmung der richtigen Mauskoordinaten gestaltet sich insofern schwierig, als das nicht jede Webseite bei jeder Fenstergröße gleich aussieht. Damit die Koordinaten bei der Auswertung verwendbar bleiben, berechnen wir die Position in Relation zu einem Element, dass den Rahmen der Seite darstellen sollte (z.B. das erste div-Tag innerhalb des body-Tags, dass auf eine feste Breite gesetzt wurde und im sichtbaren Bereich zentriert dargestellt wird).</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Java(TM) 2 Platform Standard Edition 5.0"><div class="devcodeoverflow"><ol><li><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">de.wicketpraxis.web.blog.pages.questions.ajax.parameter</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ResourceReference</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ajax.AjaxRequestTarget</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.IHeaderResponse</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">de.wicketpraxis.web.blog.pages.questions.ajax.parameter.AbstractParameterizedDefaultAjaxBehavior.Parameter</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #000000; font-weight: bold;">class</span> ElementOffsetBehavior <span style="color: #000000; font-weight: bold;">extends</span> AbstractParameterizedDefaultAjaxBehavior</li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">Integer</span><span style="color: #339933;">&gt;</span> X_OFFSET=of<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;xOffset&quot;</span>, <span style="color: #003399; font-weight: bold;">Integer</span>.<span style="color: #000000; font-weight: bold;">class</span>, <span style="color: #0000ff;">&quot;xOffset&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">Integer</span><span style="color: #339933;">&gt;</span> Y_OFFSET=of<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;yOffset&quot;</span>, <span style="color: #003399; font-weight: bold;">Integer</span>.<span style="color: #000000; font-weight: bold;">class</span>, <span style="color: #0000ff;">&quot;yOffset&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">private</span> <span style="color: #003399; font-weight: bold;">String</span> _contentId<span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #006600; font-weight: bold;">void</span> renderHead<span style="color: #009900;">&#40;</span>IHeaderResponse response<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">renderHead</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderJavascriptReference</span><span style="color: #009900;">&#40;</span>WicketWindowJavascript.<span style="color: #006633;">RESOURCE</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderJavascriptReference</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> ResourceReference<span style="color: #009900;">&#40;</span>ElementOffsetBehavior.<span style="color: #000000; font-weight: bold;">class</span>,<span style="color: #0000ff;">&quot;ElementOffsetBehavior.js&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderOnDomReadyJavascript</span><span style="color: #009900;">&#40;</span>getJavascript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> ElementOffsetBehavior<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> ElementOffsetBehavior<span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">String</span> contentId<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;_contentId=contentId<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">String</span> getJavascript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000;&nbsp;&nbsp;font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>_contentId<span style="color: #339933;">!</span>=<span style="color: #006600; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #0000ff;">&quot;ElementOffsetBehavoir.init(function (xOffset,yOffset) {&quot;</span>+getCallbackScript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>+<span style="color: #0000ff;">&quot;},'&quot;</span>+_contentId+<span style="color: #0000ff;">&quot;');&quot;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #0000ff;">&quot;ElementOffsetBehavoir.init(function (xOffset,yOffset) {&quot;</span>+getCallbackScript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>+<span style="color: #0000ff;">&quot;});&quot;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> getParameter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#123;</span> X_OFFSET,Y_OFFSET<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #006600; font-weight: bold;">void</span> respond<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, ParameterMap parameterMap<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;onOffset<span style="color: #009900;">&#40;</span>target, parameterMap.<span style="color: #006633;">getValue</span><span style="color: #009900;">&#40;</span>X_OFFSET<span style="color: #009900;">&#41;</span>, parameterMap.<span style="color: #006633;">getValue</span><span style="color: #009900;">&#40;</span>Y_OFFSET<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>&nbsp;&nbsp; </li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #006600; font-weight: bold;">void</span> onOffset<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, <span style="color: #006600; font-weight: bold;">int</span> xOffset, <span style="color: #006600; font-weight: bold;">int</span> yOffset<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li><span style="color: #009900;">&#125;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>Im Gegensatz zum letzten Behavior sind wir in diesem Fall auf etwas mehr Javascript angewiesen.</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Javascript"><div class="devcodeoverflow"><ol><li>ElementOffsetBehavoir <span style="color: #339933;">=</span></li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;init <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>callback<span style="color: #339933;">,</span> contentId<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">function</span> Listener<span style="color: #009900;">&#40;</span>callback<span style="color: #339933;">,</span> contentId<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">xOffset</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">yOffset</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">firstElement</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006600; font-style: italic;">// function(xOffset,yOffset)</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">onOffsetChanged</span> <span style="color: #339933;">=</span> callback<span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateOffsets</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> offsets <span style="color: #339933;">=</span> Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getXYOffset</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">firstElement</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">xOffset</span> <span style="color: #339933;">=</span> offsets<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">yOffset</span> <span style="color: #339933;">=</span> offsets<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">onOffsetChanged</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">xOffset</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">yOffset</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> bodyElement <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">firstElement</span> <span style="color: #339933;">=</span> bodyElement.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>contentId <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">firstElement</span> <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>contentId<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> listener <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Listener<span style="color: #009900;">&#40;</span>callback<span style="color: #339933;">,</span> contentId<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;listener.<span style="color: #660066;">updateOffsets</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;window.<span style="color: #000066;">onresize</span> <span style="color: #339933;">=</span> Callback.<span style="color: #660066;">create</span><span style="color: #009900;">&#40;</span>window.<span style="color: #000066;">onresize</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listener.<span style="color: #660066;">updateOffsets</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li><span style="color: #009900;">&#125;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>Der Listener wird über die init-Methode initialisiert und wird ebenfalls aufgerufen, wenn die Fenstergröße verändert wurde. Außerdem wird die updateOffsets()-Methode bereits bei der Initialisierung aufgerufen. Somit ist auch in diesem Fall der Offset eines Elements bekannt.</p>
<p><strong>PageMouseClickBehavior</strong></p>
<p>Das letzte Behavior ist gleichzeitig das aufwendigste. In diesem Fall muss nicht nur die Position des Klicks ermittelt werden, sondern gleichzeitig in Relation zu einem Element gebracht werden. Auf diese Weise kommen die Koordinaten schon passend an und können z.B. auch negative Werte annehmen.</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Java(TM) 2 Platform Standard Edition 5.0"><div class="devcodeoverflow"><ol><li><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">de.wicketpraxis.web.blog.pages.questions.ajax.parameter</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.Request</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ResourceReference</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ajax.AjaxRequestTarget</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.IHeaderResponse</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #000000; font-weight: bold;">class</span> PageMouseClickBehavior <span style="color: #000000; font-weight: bold;">extends</span> AbstractParameterizedDefaultAjaxBehavior</li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">Integer</span><span style="color: #339933;">&gt;</span> MOUSE_X=of<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;x&quot;</span>, <span style="color: #003399; font-weight: bold;">Integer</span>.<span style="color: #000000; font-weight: bold;">class</span>, <span style="color: #0000ff;">&quot;x&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;</span><span style="color: #003399; font-weight: bold;">Integer</span><span style="color: #339933;">&gt;</span> MOUSE_Y=of<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;y&quot;</span>, <span style="color: #003399; font-weight: bold;">Integer</span>.<span style="color: #000000; font-weight: bold;">class</span>, <span style="color: #0000ff;">&quot;y&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">String</span> _contentId<span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> PageMouseClickBehavior<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> PageMouseClickBehavior<span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">String</span> contentId<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;_contentId=contentId<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #006600; font-weight: bold;">void</span> renderHead<span style="color: #009900;">&#40;</span>IHeaderResponse response<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">renderHead</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderJavascriptReference</span><span style="color: #009900;">&#40;</span>WicketWindowJavascript.<span style="color: #006633;">RESOURCE</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderJavascriptReference</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> ResourceReference<span style="color: #009900;">&#40;</span>PageMouseClickBehavior.<span style="color: #000000; font-weight: bold;">class</span>,<span style="color: #0000ff;">&quot;PageMouseClickBehavior.js&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;response.<span style="color: #006633;">renderOnDomReadyJavascript</span><span style="color: #009900;">&#40;</span>getJavascript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #003399; font-weight: bold;">String</span> getJavascript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000;&nbsp;&nbsp;font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>_contentId<span style="color: #339933;">!</span>=<span style="color: #006600; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #0000ff;">&quot;PageMouseClickBehavoir.init(function (x,y,xOffset,yOffset) {&quot;</span>+getCallbackScript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>+<span style="color: #0000ff;">&quot;},'&quot;</span>+_contentId+<span style="color: #0000ff;">&quot;');&quot;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #0000ff;">&quot;PageMouseClickBehavoir.init(function (x,y,xOffset,yOffset) {&quot;</span>+getCallbackScript<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>+<span style="color: #0000ff;">&quot;});&quot;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> getParameter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">Parameter</span><span style="color: #339933;">&lt;?&gt;</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#123;</span> MOUSE_X, MOUSE_Y <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #006600; font-weight: bold;">void</span> respond<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, ParameterMap map<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;onClick<span style="color: #009900;">&#40;</span>target, map.<span style="color: #006633;">getValue</span><span style="color: #009900;">&#40;</span>MOUSE_X<span style="color: #009900;">&#41;</span>, map.<span style="color: #006633;">getValue</span><span style="color: #009900;">&#40;</span>MOUSE_Y<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>&nbsp;&nbsp;&nbsp;&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000000; font-weight: bold;">abstract</span> <span style="color: #006600; font-weight: bold;">void</span> onClick<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, <span style="color: #006600; font-weight: bold;">int</span> x, <span style="color: #006600; font-weight: bold;">int</span> y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li><span style="color: #009900;">&#125;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>Das dazugehörige Javascript kümmert sich um die Verarbeitung:</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Javascript"><div class="devcodeoverflow"><ol><li>PageMouseClickBehavoir <span style="color: #339933;">=</span> </li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;init<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>callback<span style="color: #339933;">,</span>contentId<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">function</span> Listener<span style="color: #009900;">&#40;</span>callback<span style="color: #339933;">,</span>contentId<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">xOffset</span><span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">yOffset</span><span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">firstElement</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006600; font-style: italic;">// function(x,y)</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">onMouseEvent</span><span style="color: #339933;">=</span>callback<span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">mouseEvent</span><span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempX<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempY<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>Wicket.<span style="color: #660066;">Browser</span>.<span style="color: #660066;">isIE</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> Wicket.<span style="color: #660066;">Browser</span>.<span style="color: #660066;">isGecko</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempX <span style="color: #339933;">=</span> e.<span style="color: #660066;">clientX</span> <span style="color: #339933;">+</span> Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getScrollX</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempY <span style="color: #339933;">=</span> e.<span style="color: #660066;">clientY</span> <span style="color: #339933;">+</span> Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getScrollY</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">else</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempX <span style="color: #339933;">=</span> e.<span style="color: #660066;">pageX</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempY <span style="color: #339933;">=</span> e.<span style="color: #660066;">pageY</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempX<span style="color: #339933;">-=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">xOffset</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tempY<span style="color: #339933;">-=</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">yOffset</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">onMouseEvent</span><span style="color: #009900;">&#40;</span>tempX<span style="color: #339933;">,</span>tempY<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateOffsets</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> offsets<span style="color: #339933;">=</span>Wicket.<span style="color: #660066;">Window</span>.<span style="color: #660066;">getXYOffset</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">firstElement</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">xOffset</span><span style="color: #339933;">=</span>offsets<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">yOffset</span><span style="color: #339933;">=</span>offsets<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> bodyElement<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">firstElement</span><span style="color: #339933;">=</span>bodyElement.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>contentId<span style="color: #339933;">!=</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">firstElement</span><span style="color: #339933;">=</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>contentId<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">updateOffsets</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #003366; font-weight: bold;">var</span> listener<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Listener<span style="color: #009900;">&#40;</span>callback<span style="color: #339933;">,</span>contentId<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;document.<span style="color: #660066;">onmousedown</span><span style="color: #339933;">=</span>Callback.<span style="color: #660066;">create</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">onmousedown</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listener.<span style="color: #660066;">mouseEvent</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;window.<span style="color: #000066;">onresize</span><span style="color: #339933;">=</span>Callback.<span style="color: #660066;">create</span><span style="color: #009900;">&#40;</span>window.<span style="color: #000066;">onresize</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listener.<span style="color: #660066;">updateOffsets</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span></li><li><span style="color: #009900;">&#125;</span></li><li></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>Sobald der Nutzer klickt (auch wenn es eigentlich nichts klickbares gibt), wird eine Request an die Anwendung gesendet. Diese Behavior können wir nun in die Anwendung einbauen, um die Mausklicks der Nutzer aufzuzeichnen.</p>
<p><strong>Die Anwendung</strong></p>
<p>In unserer Beispielanwendung werfen wir alles in einen Topf. Wir zeichnen alle Mausklicks auf und aktualisieren dann die Heatmap.</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="Java(TM) 2 Platform Standard Edition 5.0"><div class="devcodeoverflow"><ol><li><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">de.wicketpraxis.web.blog.pages.questions.ajax.parameter</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.awt.AlphaComposite</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.awt.BasicStroke</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.awt.Color</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.awt.Composite</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.awt.Graphics2D</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.awt.RenderingHints</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.io.Serializable</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.util.ArrayList</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.util.List</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.ajax.AjaxRequestTarget</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.WebMarkupContainer</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.WebPage</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.image.Image</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.image.NonCachingImage</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.image.resource.DynamicImageResource</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.image.resource.RenderedDynamicImageResource</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.markup.html.panel.FeedbackPanel</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.protocol.http.WebResponse</span><span style="color: #339933;">;</span></li><li><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">org.apache.wicket.util.time.Duration</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> HeatMapPage <span style="color: #000000; font-weight: bold;">extends</span> WebPage</li><li><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;<span style="color: #003399; font-weight: bold;">List</span><span style="color: #339933;">&lt;</span>Pos<span style="color: #339933;">&gt;</span> _points=<span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">ArrayList</span><span style="color: #339933;">&lt;</span>Pos<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #006600; font-weight: bold;">int</span> _xOffset=<span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;<span style="color: #006600; font-weight: bold;">int</span> _yOffset=<span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> HeatMapPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">final</span> FeedbackPanel feedbackPanel = <span style="color: #000000; font-weight: bold;">new</span> FeedbackPanel<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;feedback&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;feedbackPanel.<span style="color: #006633;">setOutputMarkupId</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;add<span style="color: #009900;">&#40;</span>feedbackPanel<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">final</span> WebMarkupContainer box=<span style="color: #000000; font-weight: bold;">new</span> WebMarkupContainer<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;box&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">final</span> ClickMap imageResource = <span style="color: #000000; font-weight: bold;">new</span> ClickMap<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">100</span>, <span style="color: #cc66cc;">100</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399; font-weight: bold;">Image</span> image = <span style="color: #000000; font-weight: bold;">new</span> NonCachingImage<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;map&quot;</span>,imageResource<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;box.<span style="color: #006633;">setOutputMarkupId</span><span style="color: #009900;">&#40;</span><span style="color: #006600; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;box.<span style="color: #006633;">add</span><span style="color: #009900;">&#40;</span>image<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;add<span style="color: #009900;">&#40;</span>box<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;add<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> ElementOffsetBehavior<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#content&quot;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #006600; font-weight: bold;">void</span> onOffset<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, <span style="color: #006600; font-weight: bold;">int</span> xOffset, <span style="color: #006600; font-weight: bold;">int</span> yOffset<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;info<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Offset: &quot;</span>+xOffset+<span style="color: #0000ff;">&quot;,&quot;</span>+yOffset<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_xOffset=xOffset<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_yOffset=yOffset<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageResource.<span style="color: #006633;">invalidate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.<span style="color: #006633;">addComponent</span><span style="color: #009900;">&#40;</span>feedbackPanel<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.<span style="color: #006633;">addComponent</span><span style="color: #009900;">&#40;</span>box<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span>.<span style="color: #006633;">setThrottleDelay</span><span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Duration</span>.<span style="color: #006633;">milliseconds</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">250</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;add<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> PageMouseClickBehavior<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#content&quot;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #006600; font-weight: bold;">void</span> onClick<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, <span style="color: #006600; font-weight: bold;">int</span> x, <span style="color: #006600; font-weight: bold;">int</span> y<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;info<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Clicked: &quot;</span>+x+<span style="color: #0000ff;">&quot;,&quot;</span>+y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_points.<span style="color: #006633;">add</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> Pos<span style="color: #009900;">&#40;</span>x,y<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageResource.<span style="color: #006633;">invalidate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.<span style="color: #006633;">addComponent</span><span style="color: #009900;">&#40;</span>box<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.<span style="color: #006633;">addComponent</span><span style="color: #009900;">&#40;</span>feedbackPanel<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span>.<span style="color: #006633;">setThrottleDelay</span><span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Duration</span>.<span style="color: #006633;">milliseconds</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">50</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;add<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> WindowResizeBehavior<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #006600; font-weight: bold;">void</span> onResize<span style="color: #009900;">&#40;</span>AjaxRequestTarget target, <span style="color: #006600; font-weight: bold;">int</span> width, <span style="color: #006600; font-weight: bold;">int</span> height<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;info<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Size changed: &quot;</span>+width+<span style="color: #0000ff;">&quot;,&quot;</span>+height<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageResource.<span style="color: #006633;">setWidth</span><span style="color: #009900;">&#40;</span>width<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageResource.<span style="color: #006633;">setHeight</span><span style="color: #009900;">&#40;</span>height<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageResource.<span style="color: #006633;">invalidate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.<span style="color: #006633;">addComponent</span><span style="color: #009900;">&#40;</span>feedbackPanel<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target.<span style="color: #006633;">addComponent</span><span style="color: #009900;">&#40;</span>box<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span>.<span style="color: #006633;">setThrottleDelay</span><span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Duration</span>.<span style="color: #006633;">milliseconds</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">250</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">class</span> ClickMap <span style="color: #000000; font-weight: bold;">extends</span> RenderedDynamicImageResource</li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> ClickMap<span style="color: #009900;">&#40;</span><span style="color: #006600; font-weight: bold;">int</span> width, <span style="color: #006600; font-weight: bold;">int</span> height<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">super</span><span style="color: #009900;">&#40;</span>width, height,<span style="color: #0000ff;">&quot;jpg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setCacheable<span style="color: #009900;">&#40;</span><span style="color: #006600; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;@<span style="color: #003399; font-weight: bold;">Override</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #006600; font-weight: bold;">boolean</span> render<span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">Graphics2D</span> graphics<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graphics.<span style="color: #006633;">setBackground</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">Color</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">255</span>,<span style="color: #cc66cc;">255</span>,<span style="color: #cc66cc;">255</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graphics.<span style="color: #006633;">setColor</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399; font-weight: bold;">Color</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">50</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graphics.<span style="color: #006633;">clearRect</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, getWidth<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, getHeight<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graphics.<span style="color: #006633;">setRenderingHint</span><span style="color: #009900;">&#40;</span><span style="color: #003399; font-weight: bold;">RenderingHints</span>.<span style="color: #006633;">KEY_ANTIALIASING</span>, <span style="color: #003399; font-weight: bold;">RenderingHints</span>.<span style="color: #006633;">VALUE_ANTIALIAS_ON</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000;&nbsp;&nbsp;font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>Pos p : _points<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graphics.<span style="color: #006633;">fillArc</span><span style="color: #009900;">&#40;</span>_xOffset+p.<span style="color: #006633;">getX</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>-<span style="color: #cc66cc;">5</span>, _yOffset+p.<span style="color: #006633;">getY</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>-<span style="color: #cc66cc;">5</span>, <span style="color: #cc66cc;">9</span>, <span style="color: #cc66cc;">9</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">360</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #006600; font-weight: bold;">true</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">class</span> Pos <span style="color: #000000; font-weight: bold;">implements</span> <span style="color: #003399; font-weight: bold;">Serializable</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006600; font-weight: bold;">int</span> _x<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006600; font-weight: bold;">int</span> _y<span style="color: #339933;">;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> Pos<span style="color: #009900;">&#40;</span><span style="color: #006600; font-weight: bold;">int</span> x, <span style="color: #006600; font-weight: bold;">int</span> y<span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">super</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_x = x<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_y = y<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #006600; font-weight: bold;">int</span> getX<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> _x<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #006600; font-weight: bold;">int</span> getY<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000000; font-weight: bold;">return</span> _y<span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li><span style="color: #009900;">&#125;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>Im Markup müssen wir dann nur das Image hinter der Seite platzieren und schon stimmen Mausklick und Heatmap überein.</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="HTML"><div class="devcodeoverflow"><ol><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Heatmap Page<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#content&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width:800px; margin:auto; border:1px solid #888;&quot;</span>&gt;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> wicket:<span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;feedback&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> wicket:<span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;box&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;z-index: -1; position: absolute; top: 0px;left: 0px;&quot;</span>&gt;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> wicket:<span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;map&quot;</span>&gt;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<p>In diesem Beispiel haben ich den Rahmen auf eine Breite von 800 Pixeln gesetzt und zentriert. Trotzdem werden die Mausklicks immer korrekt angezeigt.</p>
<p><a href="http://www.wicket-praxis.de/blog/wp-content/uploads/2010/03/wicket-heatmap-ajax.jpg"><img class="aligncenter size-medium wp-image-262" title="wicket-heatmap-ajax" src="http://www.wicket-praxis.de/blog/wp-content/uploads/2010/03/wicket-heatmap-ajax-450x156.jpg" alt="wicket-heatmap-ajax" width="450" height="156" /></a></p>
<p>Wie man sehen kann, ist die Interaktion von Wicket mit Ereignissen, die durch Javascript ausgelöst werden, ohne weiteres möglich. Dabei können diese Komponenten ohne weiteres in beliebigen Anwendungen benutzt werden, ohne das sich ein anderer Entwickler mit den Implementierungsdetails beschäftigen muss. Allerdings hätte ich mir gewünscht, dass die Parameterisierung von Ajax-Aufrufen bereits in den Kern von Wicket integriert wäre.</p>
<p>Viel Spass mit dem ausprobieren:)</p>

<div class="sociable">
<div class="sociable_tagline">
<strong>Share and Enjoy:</strong>
</div>
<ul>
	<li class="sociablefirst"><a rel="nofollow"  target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.wicket-praxis.de%2Fblog%2F2010%2F03%2F07%2Fwicket-heatmap-ajax-mit-parametern%2F&amp;title=Wicket%20Heatmap%20-%20Ajax%20mit%20Parametern&amp;bodytext=Wer%20wissen%20m%C3%B6chte%2C%20wohin%20die%20Nutzer%20in%20der%20eigenen%20Anwendung%20so%20klicken%20%28z.B.%20auf%20Dinge%2C%20von%20denen%20man%20selbst%20nicht%20annehmen%20w%C3%BCrde%2C%20das%20Nutzer%20darauf%20klicken%29%2C%20der%20muss%20jeden%20Mausklick%20des%20Nutzers%20aufzeichnen.%20Aus%20diesen%20Daten%20kann%20man%20dann%20ermitte" title="Digg"><img src="http://www.wicket-praxis.de/blog/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  target="_blank" href="http://sphinn.com/index.php?c=post&amp;m=submit&amp;link=http%3A%2F%2Fwww.wicket-praxis.de%2Fblog%2F2010%2F03%2F07%2Fwicket-heatmap-ajax-mit-parametern%2F" title="Sphinn"><img src="http://www.wicket-praxis.de/blog/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fwww.wicket-praxis.de%2Fblog%2F2010%2F03%2F07%2Fwicket-heatmap-ajax-mit-parametern%2F&amp;title=Wicket%20Heatmap%20-%20Ajax%20mit%20Parametern&amp;notes=Wer%20wissen%20m%C3%B6chte%2C%20wohin%20die%20Nutzer%20in%20der%20eigenen%20Anwendung%20so%20klicken%20%28z.B.%20auf%20Dinge%2C%20von%20denen%20man%20selbst%20nicht%20annehmen%20w%C3%BCrde%2C%20das%20Nutzer%20darauf%20klicken%29%2C%20der%20muss%20jeden%20Mausklick%20des%20Nutzers%20aufzeichnen.%20Aus%20diesen%20Daten%20kann%20man%20dann%20ermitte" title="del.icio.us"><img src="http://www.wicket-praxis.de/blog/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.wicket-praxis.de%2Fblog%2F2010%2F03%2F07%2Fwicket-heatmap-ajax-mit-parametern%2F&amp;t=Wicket%20Heatmap%20-%20Ajax%20mit%20Parametern" title="Facebook"><img src="http://www.wicket-praxis.de/blog/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow"  target="_blank" href="http://www.mixx.com/submit?page_url=http%3A%2F%2Fwww.wicket-praxis.de%2Fblog%2F2010%2F03%2F07%2Fwicket-heatmap-ajax-mit-parametern%2F&amp;title=Wicket%20Heatmap%20-%20Ajax%20mit%20Parametern" title="Mixx"><img src="http://www.wicket-praxis.de/blog/wp-content/plugins/sociable/images/mixx.png" title="Mixx" alt="Mixx" class="sociable-hovers" /></a></li>
	<li class="sociablelast"><a rel="nofollow"  target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fwww.wicket-praxis.de%2Fblog%2F2010%2F03%2F07%2Fwicket-heatmap-ajax-mit-parametern%2F&amp;title=Wicket%20Heatmap%20-%20Ajax%20mit%20Parametern&amp;annotation=Wer%20wissen%20m%C3%B6chte%2C%20wohin%20die%20Nutzer%20in%20der%20eigenen%20Anwendung%20so%20klicken%20%28z.B.%20auf%20Dinge%2C%20von%20denen%20man%20selbst%20nicht%20annehmen%20w%C3%BCrde%2C%20das%20Nutzer%20darauf%20klicken%29%2C%20der%20muss%20jeden%20Mausklick%20des%20Nutzers%20aufzeichnen.%20Aus%20diesen%20Daten%20kann%20man%20dann%20ermitte" title="Google Bookmarks"><img src="http://www.wicket-praxis.de/blog/wp-content/plugins/sociable/images/googlebookmark.png" title="Google Bookmarks" alt="Google Bookmarks" class="sociable-hovers" /></a></li>
</ul>
</div>
<div id="vgwpixel"></div><h3  class="related_post_title">Andere Beiträge</h3><ul class="related_post"><li>9. April 2010 -- <a href="http://www.wicket-praxis.de/blog/2010/04/09/wicket-abstractevent-update/" title="Wicket &#8211; AbstractEvent Update">Wicket &#8211; AbstractEvent Update</a></li><li>3. März 2010 -- <a href="http://www.wicket-praxis.de/blog/2010/03/03/wicket-extensions-anpassungen-am-modalwindow/" title="Wicket Extensions &#8211; Anpassungen am ModalWindow">Wicket Extensions &#8211; Anpassungen am ModalWindow</a></li><li>23. Dezember 2009 -- <a href="http://www.wicket-praxis.de/blog/2009/12/23/wicket-ajax-tipp-ajaxrequesttarget-nachtraglich-ermitteln/" title="Wicket Ajax Tipp &#8211; AjaxRequestTarget nachträglich ermitteln">Wicket Ajax Tipp &#8211; AjaxRequestTarget nachträglich ermitteln</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.wicket-praxis.de/blog/2010/03/07/wicket-heatmap-ajax-mit-parametern/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced
Database Caching 7/25 queries in 0.042 seconds using disk: basic
Object Caching 553/571 objects using disk: basic

Served from: www.wicket-praxis.de @ 2012-02-06 20:33:43 -->
