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

{code:html}

<html>

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

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

{code}


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 funtionalities 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:

{code}

    //...
    @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);
        }

    }
{code}

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:

{code}
add(new HeaderResponseContainer("someId", "filterName"));
{code}

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:

{code:html}

<html>

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

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

{code}

The code of the home page is the following:

{code}
   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!')"));
    }
{code}

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.



