| |
| 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 via the method _getHeaderResponseDecorators_. Anytime Wicket creates an instance of _IHeaderResponse_, it will call the registered _IHeaderResponseDecorators_ 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() |
| { |
| getHeaderResponseDecorators().add(response -> new JavaScriptFilteredIntoFooterHeaderResponse(response, "footer-container")); |
| } |
| |
| ---- |
| |
| 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> |
| <h1 id="click-me">Click me!</h1> |
| <!-- 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("'click-me'", "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. |
| |
| |
| |
| |
