blob: 7eaa0d0ac2fadcc465c766e3b9e32b1353b40d3b [file] [log] [blame]
Panel's markup can also contain HTML tags which must go inside header section of the final page, like tags _<script>_ or _<style>_. To tell Wicket to put these tags inside page _<head>_, we must surround them with the _<wicket:head>_ tag.
Considering the markup of a generic panel, we can use _<wicket:head>_ tag in this way:
[source,html]
----
<wicket:head>
<script type="text/javascript">
function myPanelFunction(){
}
</script>
<style>
.myPanelClass{
font-weight: bold;
color: red;
}
</style>
</wicket:head>
<body>
<wicket:panel>
</wicket:panel>
</body>
----
Wicket will take care of placing the content of _<wicket:head>_ inside the _<head>_ tag of the final page.
NOTE: The _<wicket:head>_ tag can also be used with children pages/panels which extend parent markup using tag _<wicket:extend>_.
NOTE: The content of the _<wicket:head>_ tag is added to the header section once per component class. In other words, if we add multiple instances of the same panel to a page, the _<head>_ tag will be populated just once with the content of _<wicket:head>_.
WARNING: The _<wicket:head>_ tag is ideal if we want to define small in-line blocks of CSS or JavaScript. However Wicket provides also a more sophisticated technique to let components contribute to header section with in-line blocks and resource files like CSS or JavaScript files. We will see this technique later in
<<_resource_management_with_wicket,chapter 16>>.