
Some web developers prefer to put their <script> tags at the end of page body and not inside the <head> tags:

[source,html]
----

<html>

<head>
//no <script> tag here...
</head>

<body>
...
<script>
//one or more <script> tags at the end of the body
</script> 
</body>
</html>

----


In Wicket we can achieve this result providing a custom _IHeaderResponseDecorator_ to a our application and using Wicket tag <wicket:container/> to indicate where we want to render our scripts inside the page. Interface _IHeaderResponseDecorator_ defines method _IHeaderResponse decorate(IHeaderResponse response)_ which allows to decorate or add functionalities to Wicket _IHeaderResponse_. Our custom _IHeaderResponseDecorator_ can be registered in the application with method _setHeaderResponseDecorator_. Anytime Wicket creates an instance of _IHeaderResponse_, it will call the registered _IHeaderResponseDecorator_ to decorate the header response.

In the example project _ScriptInsideBody_ we can find a custom _IHeaderResponseDecorator_ that renders CSS into the usual <head> tag and put JavaScricpt header items into a specific container (tag <wicket:container/>)
Wicket already comes with class _JavaScriptFilteredIntoFooterHeaderResponse_ which wraps a _IHeaderResponse_ and renders in a given container all the instances of _JavaScriptHeaderItem_.
The following code is taken from the Application class of the project:

[source,java]
----

    //...
    @Override
    public void init()
    {
       setHeaderResponseDecorator(new JavaScriptToBucketResponseDecorator("footer-container"));
    }
	
     /**
     * Decorates an original IHeaderResponse and renders all javascript items
     * (JavaScriptHeaderItem), to a specific container in the page.
     */
    static class JavaScriptToBucketResponseDecorator implements IHeaderResponseDecorator 
    {

        private String bucketName;

        public JavaScriptToBucketResponseDecorator(String bucketName) {
            this.bucketName = bucketName;
        }

        @Override
        public IHeaderResponse decorate(IHeaderResponse response) {
            return new JavaScriptFilteredIntoFooterHeaderResponse(response, bucketName);
        }

    }
----

As you can see in the code above the _bucket_ that will contain JavaScript tags is called _ .[footer-container] To make a use of it the developer have to add a special component called _HeaderResponseContainer_ in his page:

[source,java]
----
add(new HeaderResponseContainer("someId", "filterName"));
----

Please note that _HeaderResponseContainer_'s needs also a name for the corresponding header response's filter. The markup of our page will look like this:

[source,html]
----

<html>

<header>
//no <script> tag here...
</header>

<body>
<!-- here we will have our JavaScript tags -->
<wicket:container wicket:id="someId"/> 
</body>
</html>

----

The code of the home page is the following:

[source,java]
----
   public HomePage(final PageParameters parameters) {
        super(parameters);

        add(new HeaderResponseContainer("footer-container", "footer-container"));
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(getClass(),
                "javasciptLibrary.js")));

        response.render(OnEventHeaderItem.forScript("'logo'", "click", "alert('Clicked me!')"));
    }
----

Looking at the code above you can note that our page adds two script to the header section: the first is an instance of _JavaScriptHeaderItem_ and will be rendered in the _HeaderResponseContainer_ while the second will follow the usual behavior and will be rendered inside <head> tag.




