How to implement annotation @Theme("dashbord") in Client-side application

Flow
1

Hello,
First i develop en example with the Demo vaadin dashbord. All is fine for the css. The annotation @Theme(“dashbord”) works very well.

But i prefer develop a client-side application. I saw i could not use the annotation with my entrypoint function.

So i extract the stylesheet css from the navigator of the demo and i put in a file dashbord.css. Then i call the file from projet setting or from the index.html.
When i change the style for a button addstylename(“v-button”) nothing append. Also the font does not change.

How can i do to use the dashbord style with client-side application?

I would like to receive your help with that.
Thanks you very much.

vaadin 7.1.2 with eclipse kepler and linux ubuntu 13.04

2

Not quite sure, as i never tried to make a client-side module in vaadin but in theory it should be like adding a css file to a normal html page, using

3

Hi Marius,
I did that …
[So i extract the stylesheet css from the navigator of the demo and i put in a file dashbord.css. Then i call the file from project setting or from the index.html.]

4

Did you put your resources (images, style.css, …) in the right folder as described
here in 14.2.1
?

5

Hi Marius,

I think there is something weird.
If i understand to develop a client-side application here is the MyEntrypoint.java module


package com.xxx.extracteur.client;


import com.xxx.extracteur.client.mycomponent.MyComponentWidget;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.vaadin.client.ui.VButton;
import com.vaadin.client.ui.VCssLayout;
import com.vaadin.client.ui.VLabel;

public class MyEntryPoint implements EntryPoint {

  @Override
  public void onModuleLoad() {

	   VButton vbutton = new VButton();
	   vbutton.setText("Hello");
	   vbutton.addStyleName("dashboard v-button");
	   vbutton.addClickHandler(new ClickHandler() {
	      @Override
	      public void onClick(ClickEvent event) {
	        RootPanel.get().add(new Label("Thank you for clicking"));
	      }
	    });
	   RootPanel.get().add(vbutton);
  }

In that case i use a specific vaadin button VButton.

and here is the module index.html


<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>xxx Extracteur</title>
    <!-- Load the Vaadin style sheet -->
    <link rel="stylesheet"
          type="text/css"
          href="VAADIN/themes/dashboard/styles.css"/>
  </head>   
    <script type="text/javascript"
       src="VAADIN\widgetsets\com.xxx.extracteur.ExtracteurWidgetset\com.xxx.extracteur.ExtracteurWidgetset.nocache.js" >
    </script>
  </head>
  <body>
  </body>
</html>

When i run the application and with the navigator i inspect the elements. The styles.css (for vaadin theme compile) is well documented).
BUT? when i inspect my button it is not a button but only a caption ? what the error ?

here is the html code


<div tabindex="0" role="button" class="v-button dashboard v-button">
  <span class="v-button-wrap">
    <span class="v-button-caption">Hello></span>
   <span> 
<div>

So when i click it is then ok.

it’s seem that VButton implement a strange button like a wrapper?
If i do with class Button i can’t no more change the style.

This is not my preference. I would prefer to use the extension vaadin widget instead of pure gwt widget.

6

DONT MIND! I am coming back to Server-Side.
I do not want to waste my time.
Certainly the next generation of versions will be best suited for that.

7

Hi,

I face the same issue. How can i modify the style of a button in vaadin client side.

8

Hi Mathumitha,

You can do it by compiling the theme into a *.css file, which you can inline as a static stylesheet within your HTML, pretty much as Philippe described and also discussed
here
. However, applying a theme doesn’t work on the client, so you will have to manage styles for the widget and inspect the CSS rules, which is as painful as theming in pure GWT.