TouchKit 4 with theme from v3 possible?

Hi,

I just started to play around with a TouchKit mobile application. When I use the latest TouchKit addon 4.0.0.alpha2, I have the new iOS 7 look. Since I have to support also old iPads (version 1 with iOS 5), this new look is not desireable.
I tried already to copy the v3 theme to a new theme folder in my app, but that didn’t helped.

Is it possible to get the theme from TouchKit v3 and use it with v4?

Thanks in advance

Hi Andreas!

I think you might be able to do it by using GWT deferred binding, and replacing the ThemeLoader implementation with the old one. So you would need to copy the
old version of the theme folder
, and the old
ThemeLoader.java
. I haven’t tried doing this, but I guess it should work.

Ideally, we should provide a supported way of using the old theme. If you feel like creating a ticket about this, please do!

Hi Jouni,

I tried your suggestion and the result doesn’t look anymore like iOS7. But it doesn’t even look like iOS at all. It looks like a webpage from the very beginning (no styles at all). I must say, that I had to comment out these lines before I could compile the old (v3) ThemeLoader.java (highDpiCss is unknown):

if (VEagerResourceLoader.isHighDPI()) { VTouchKitResources.INSTANCE.highDpiCss().ensureInjected(); } So I think there is still something wrong in my code. I copied the old theme to a theme folder named
iOS5
in my VAADIN\themes folder. I load this theme via annotation. When I start my app, I see these messages:

26-Mar-2014 08:23:02.336 INFO [http-apr-8080-exec-10]
 com.vaadin.server.VaadinServlet.serveStaticResourcesInVAADIN Requested resource 
[/VAADIN/themes/iOS5/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
26-Mar-2014 08:23:07.997 INFO [http-apr-8080-exec-5]
 com.vaadin.server.VaadinServlet.serveStaticResourcesInVAADIN Requested resource 
[/VAADIN/themes/iOS5/graphics/reload-icon-white-2x.png] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

The first message should be the main problem:
[/VAADIN/themes/iOS5/styles.css] not found.

Do I have to create a special styles.css to include the old theme or is this theme loaded in a different way?

Best regards

Hi Jouni,

do you have any hints for me?

Best regards

Hi Andreas,

The normal Vaadin way of loading theme resources via annotations won’t work with TK. You’ll need to use a GWT ClientBundle. So, in addition to replacing the ThemeLoader class like Jouni suggested, you’ll also need to replace VTouchKitResources. The old version can be found
here
. Copy it to your project and use the same deferred binding trick you did with the ThemeLoader.

Hi Andreas,

I have tested this procedure and works fine:
1.- Copy the theme folder Jouni points in your source tree with the same namespace
2.- You dont need to copy the ThemeLoader.java, otherwise you have to comment out the lines you say. In fact the new ThemeLoader differs from the old one just that has removed those lines.
3.- Copy the VTouchKitResources.java file from this
location
in your tree, so as you use old resource themes
4.- Copy the ToucKitStyles.java file from
here
, and add this method at the end in order to fix compilation:

 String floatingIndex()

Then your project should compile correctly using old theme.

I forget to mention, that you must add the floatingIndex class in the touchkit.css file to fix GWT compilation:

@external floatingIndex; .floatingIndex{} Or all those lines if you are going to use the FloatingIndexWidget in your app.

@external floatingIndex;
.floatingIndex {
        display: block;
        position:absolute;
        right:listLayoutMargin;
        top:0;
        bottom:0;
}
.floatingIndex>div {
        display:table;
        height:100%;
}
.floatingIndex>div>div {
        display:table-row;
}
.floatingIndex>div>div>div {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        color: gray;
        font-size: 10px;
        font-weight: bold;
        padding: 0 5px;
}