| <html><head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <title>3.5. Control HEAD Elements</title><link rel="stylesheet" href="css/stylesheet.css" type="text/css"><meta name="generator" content="DocBook XSL Stylesheets V1.75.0"><link rel="home" href="index.html" title="Apache Click"><link rel="up" href="ch03.html" title="Chapter 3. Controls"><link rel="prev" href="ch03s04.html" title="3.4. Message Properties"><link rel="next" href="ch03s06.html" title="3.6. Container"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">3.5. Control HEAD Elements</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch03s04.html">Prev</a> </td><th width="60%" align="center">Chapter 3. Controls</th><td width="20%" align="right"> <a accesskey="n" href="ch03s06.html">Next</a></td></tr></table><hr></div><div class="sect1" title="3.5. Control HEAD Elements"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="control-head-elements"></a>3.5. Control HEAD Elements</h2></div></div></div><p>The Control interface provides the method |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/Control.html#getHeadElements()" target="_blank">getHeadElements()</a> |
| which allows the Control to add Page HEAD |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/element/Element.html" target="_blank">elements</a> |
| such as <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/element/JsImport.html" target="_blank">JsImport</a>, |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/element/JsScript.html" target="_blank">JsScript</a>, |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/element/CssImport.html" target="_blank">CssImport</a> |
| and <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/element/CssStyle.html" target="_blank">CssStyle</a>. |
| </p><p>Here is an example of adding HEAD elements to a custom |
| <code class="classname">Control</code>: |
| </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> MyControl <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> AbstractControl { |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> MyControl() { |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">/** |
| * Override the default getHeadElements implementation to return |
| * MyControl's list of HEAD elements. |
| * |
| * Note that the variable headElements is defined in AbstractControl. |
| * |
| * @return list the list of HEAD elements |
| */</span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> List getHeadElements() { |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Use lazy loading to only add the HEAD elements once and when needed.</span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">if</span> (headElements == null) { |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Get the head elements from the super implementation</span> |
| headElements = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">super</span>.getHeadElements(); |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add the JavaScript import "/mycontrol.js" to the control</span> |
| headElements.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> JsImport(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"/mycontrol.js"</span>)); |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add the Css import "/mycontrol.css" to the control</span> |
| headElements.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> CssImport(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"/mycontrol.css"</span>)); |
| } |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> headElements; |
| } |
| } |
| |
| ... |
| |
| } </pre><p>In the example above we added the HEAD elements by overriding the |
| Control's <code class="methodname">getHeadElements</code> method, however you can |
| add HEAD elements from anywhere in the Control including the event handlers |
| <code class="literal">onInit</code>, <code class="literal">onGet</code>, |
| <code class="literal">onPost</code>, <code class="literal">onRender</code> etc. |
| Please see <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/Page.html#getHeadElements()" target="_blank">getHeadElements()</a> |
| for more details. |
| </p><p><code class="classname">MyControl</code> will add the following HEAD elements |
| to the Page HEAD section, together with HEAD elements added by the Page and |
| other controls (assume the application context is "/myapp"): |
| </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><html></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><head></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><link</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">rel</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"stylesheet"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text/css"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">href</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"</span><span class="symbol">/myapp/mycontrol.css</span>"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></link></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></head></span> |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><body></span> |
| |
| ... |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><script</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text/javascript"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">src</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"</span><span class="symbol">/myapp/mycontrol.js</span>"/> |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></body></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></html></span> </pre><p>A live demo showing how to add HEAD elements from a custom Control can |
| be seen <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://click.avoka.com/click-examples/general/control-head-demo.htm" target="_blank">here</a>. |
| </p></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch03s04.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="ch03.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ch03s06.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">3.4. Message Properties </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 3.6. Container</td></tr></table></div></body></html> |
