| <html><head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <title>2.12. Page 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="ch02.html" title="Chapter 2. Pages"><link rel="prev" href="ch02s11.html" title="2.11. Page Message Properties"><link rel="next" href="ch03.html" title="Chapter 3. Controls"></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">2.12. Page HEAD Elements</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch02s11.html">Prev</a> </td><th width="60%" align="center">Chapter 2. Pages</th><td width="20%" align="right"> <a accesskey="n" href="ch03.html">Next</a></td></tr></table><hr></div><div class="sect1" title="2.12. Page HEAD Elements"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="page-head-elements"></a>2.12. Page HEAD Elements</h2></div></div></div><p>The Page class provides the method |
| <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 contributing 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 the |
| <code class="classname">MyPage</code> class: |
| </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> MyPage <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> Page { |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> MyPage() { |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add the JavaScript import "/mypage.js" to the page</span> |
| getHeadElements().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">"/mypage.js"</span>)); |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add some inline JavaScript content to the page</span> |
| getHeadElements().add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> JsScript(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"alert('Welcome to MyPage');"</span>)); |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add the Css import "/mypage.css" to the page</span> |
| getHeadElements().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">"/mypage.css"</span>)); |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Add some inline Css content to the page</span> |
| getHeadElements().add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> CssStyle(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"body { font-family: Verdana; }"</span>)); |
| } |
| |
| ... |
| |
| } </pre><p>In the example above we added the HEAD elements from the Page constructor, |
| however you can add HEAD elements from anywhere in the Page 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>Below is the <code class="filename">/my-page.htm</code> template: |
| </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> |
| <code class="varname">$headElements</code> |
| <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> |
| |
| ... |
| |
| <code class="varname">$jsElements</code> |
| |
| <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>The two variables, <code class="varname">$headElements</code> and |
| <code class="varname">$jsElements</code>, are automatically made available to the Page |
| template. These variables references the JavaScript and Css HEAD elements |
| specified in <code class="classname">MyPage</code>. |
| </p><p>The following HTML will be rendered (assuming 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/mypage.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"><style</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="tag">></span> |
| <span class="symbol">body { font-family: Verdana; }</span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></style></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/mypage.js</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="tag">></span> |
| <span class="symbol">alert('Welcome to MyPage');</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="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 to a Page can be seen |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://www.avoka.com/click-examples/general/page-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="ch02s11.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="ch02.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ch03.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">2.11. Page Message Properties </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> Chapter 3. Controls</td></tr></table></div></body></html> |
