Changing theme for vaadin touchkit 4.0.0.alpha2

Flow
1

I’m making a touchkit project, by using 4.0.0.alpha2
so i’m getting the new IOS app look, i want to get the old IOS app look.
i have seen the online demos “Vornitologist” and “Mobile Mail”. I want my application to look as them.
I thought of changing the theme but there is no themes folder found in the project.(eclipse project)
I manually created the themes folder in “webaap/vaadin” and changed the theme title in my project from @Theme(“touchkit”) to @Theme(“themefoldername”) but that is not working. am i doing wrong?
Is there any way to change the look?

2

i too have same problem…

3

Hi All, I have the same problem with theming Vaadin TouchKit Application.
I use TouchKit alpha3 and I am trying to change labels by editing touchkit.scss file, but nothing happens

[code]
/* Import the reindeer theme. /
/ This only allows us to use the mixins defined in it and does not add any styles by itself. */
@import “…/reindeer/reindeer.scss”;

/* This contains all of your theme. /
/ If somebody wants to extend the theme she will include this mixin. /
@mixin touchkit {
/ Include all the styles from the reindeer theme /
@include reindeer;
/@include chameleon;*/

/* Insert your theme rules here */
.v-label {
    color: #fff;
    background-color: #4455aa;
    font: 20px Verdana, Arial;
    padding: 5px;
    margin-bottom: 10px;
}
.v-label h1, .v-label h2, .v-label h3, .v-label h4, .v-label h5, .v-label h6 {
    color: #fff;
    background-color: #4455aa;
    font: 20px Verdana, Arial;
    padding: 5px;
    margin-bottom: 10px;
}

}
[/code]Maybe this happens because of the alpha version. But I also tried it on TouchKit 3.0.0 with also no results.
Is there any solution?

Thanks in advance

4

Same here, my defined style classes are even displayed/referenced from the html code and seem to be available in the style.css, but somehow they don’t get applied. After several retries and theme name changes vaadin even can’t recognize touchkit sizing and elements, meaning all touchkit elements look like a normal vaadin page. I guess we need to use somehow the “gwt bundle”-way mentioned in the book, but I couldn’t figure out how to implement this correctly.

regards

5

Hi,

Using the “gwt bundle”-way, as you put it, is indeed what you should do. TouchKit uses GWT CSS instead of normal Vaadin Sass for theming; doing it that way reduces network overhead, which is often critical for mobile applications.

Here’s how to change the theme:

  2. Create a new interface (say, MyThemeBundle) in your GWT module source path, extending com.google.gwt.resources.client.ClientBundle. In it, define a method with the following signature: CssResource css();
  3. Annotate the method with com.google.gwt.resources.client.ClientBundle.Source, specifying the CSS files you want to include.
  4. Add a static variable named INSTANCE. To it, assign the result of GWT.create(MyThemeBundle.class);
  5. Create new class (let’s call it MyThemeLoader), again in your GWT module source path. This time, implement the com.google.gwt.core.client.EntryPoint interface.
  6. In the onModuleLoad method, call MyThemeBundle.INSTANCE.css().ensureInjected();
  7. Finally, in your *.gwt.xml file, add the following line: <entry-point class="com.example.client.MyThemeLoader" />
  8. Recompile your widgetset. Rejoice.

So, in it’s simplest form, the Java code for all that could look something like this:

package com.example.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public class MyThemeLoader implements EntryPoint {

    public void onModuleLoad() {
        MyThemeBundle.INSTANCE.css().ensureInjected();
    }

    public interface MyThemeBundle extends ClientBundle {
        public static final MyThemeBundle INSTANCE = GWT.create(MyThemeBundle.class);

        @Source({ "theme/styles.css" })
        public CssResource css();
    }

}
6

I’ve tried to compile the code you’ve posted using maven, however compile goal keeps on failing.

any ideas why might this be happening?

[INFO]
Compiling module …gwt.AppWidgetSet
[INFO]
Finding entry point classes
[INFO]
[ERROR]
Unable to find type ‘myPackage.client.MyThemeLoader’
[INFO]
[ERROR]
Hint: Previous compiler errors may have made this type unavailable
[INFO]
[ERROR]
Hint: Check the inheritance chain from your module; it may not be inheriting a required module or a module may not be adding its source path entries properly

7

It looks like your entry point class isn’t in the source path of the GWT module. The default source path is the
client
 subpackage, so if your GWT module is
gwt.AppWidgetSet
, you should move your entry point class to the
gwt.AppWidgetSet.client
 package. Or you could add the current package as a source path for the module:[code]

[/code]