CODEWITHSUNDEEP
javahtmlmavenvaadin
deltascience
deltascience

Reputation: 3390

How to change default HTML template in Vaadin

I'm using Vaadin with maven application. What I want is changing the default html template. When I run the application, the generated HTML looks like this :

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10;chrome=1">
<style type="text/css">html, body {height:100%;margin:0;}</style>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/customBootstrap/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/customBootstrap/favicon.ico">
<link rel="stylesheet" type="text/css" href="./VAADIN/themes/customBootstrap/styles.css"><script type="text/javascript"
...

I want to change the "meta" properties, add "link" and also add some other components like :

<!--[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]-->

Is there a way to do that with Vaadin ? Thanks!

Upvotes: 3

Views: 2558

Answers (3)

steve
steve

Reputation: 1856

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.

Upvotes: 4

deltascience
deltascience

Reputation: 3390

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.

Upvotes: 0

Csuki
Csuki

Reputation: 1366

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

Upvotes: 3

Related Questions