How to change default HTML template in Vaadin

Question 1

Create a custom servlet that extend the VaadinServlet:

public class BootstrapServlet extends VaadinServlet {

private static final long serialVersionUID = 1L;

@Override
protected void servletInitialized() throws ServletException {
    super.servletInitialized();
    getService().addSessionInitListener(new SessionInitListener() {

        private static final long serialVersionUID = 1L;

        @Override
        public void sessionInit(SessionInitEvent event) {
            event.getSession().addBootstrapListener( new BootstrapListener() {

                private static final long serialVersionUID = 1L;

                @Override
                public void modifyBootstrapFragment(
                        BootstrapFragmentResponse response) {

                }

                @Override
                public void modifyBootstrapPage(BootstrapPageResponse response) {


                    if(response.getRequest().getHeader("User-Agent").contains("MSIE 8.0")){

                        response.getDocument().head().appendElement("script").attr("type", "text/javascript").attr("src", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js");
                        response.getDocument().head().appendElement("script").attr("type", "text/javascript").attr("src", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js");

                    }
                }}
            );
        }
    });
  }
}

Then change the default servlet in your web.xml from

<servlet>
<servlet-name>myappname</servlet-name>
<servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
...

To

<servlet>
<servlet-name>myappnam</servlet-name>
<servlet-class>your.package.name.BootstrapServlet</servlet-class>
...

This will not add the

<!--[if lt IE 9]>

however it will conditionally add the scripts based on whether or not the UserAgent is IE 8 or not.

FYI, I am actually trying to do the exact same thing because I am using twitters Bootstrap, media queries, in my project. Whether or not those scripts work along side Vaadin 7 is yet to be seen.

Question 2

Have you tried @Theme("yourtheme") annotation? - Vaadin Themes
It is really simple, you just have to copy your new theme into the WEB-INF/VAADIN directory.

Also you can add custom javascripts to your metadata with @JavaScript( "http://host.com/file1.js", "file2.js")} annotation. Vaadin+Javascript

Question 3

I found a temporary solution but I think it's not a good practice :

First create a js file. file.js :

 $( document ).ready(function() {
 $('head').append('<!--[if lt IE 9]>'
          +'<script src=\"https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js\"> </script>'
          +'<script src=\"https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js\"></script>'
          +'<![endif]-->');
 });

In your Vaadin Application you can add :

@JavaScript({ "vaadin://themes/YourTheme/js/file.js"})

It worked but not as I expected. It can help you in some cases but not if you want to detect the browser before that vaadin generate the HTML.