Reindeer theme in conflict with Touch kit theme

Flow
1

Hi
When I use touchkit to develop web application, I noticed the reindeer tree theme is in conflict with touch kit tree theme or widgetset .
Could you please tell me how to solve this problem?
thanks
20936.jpg

2

TouchKit comes with its own base theme, and you can’t really use Reindeer with it. Well, at least it’s not supported, even though you might get it to work somehow.

The TouchKit theme is similar to iOS theme, to make Vaadin apps look more like native apps. That’s one of the main features of TouchKit, so if you want to use some other theme, you’re giving most of TouchKit away. The TouchKit theme is also optimized for mobile use, unlike Reindeer.

PS. Deleted your cross-post to another forum category.

3

Thanks a lot for your reply. Actually, I’m developping a web application which, I hope, is able to support desktop UI and mobile UI at the same time. Can I manage to do so with Vaadin and Touchkit ?

4

TouchKit does not support desktop browsers, even though at least Chrome and some others work. Even if it may work, it doesn’t make sense to use TouchKit for desktop UIs, as it’s designed and optimized for mobile device UX. The recommended practice is to use a TouchKit UI for mobile browsers and a “fallback” UI for desktop browsers, as described in TouchKit documentation.

5

Hi! I found the same problem when using the “fallback” UI for desktop browsers, that is, there are errors in the style of tree, button and combobox(you can refer to the attachment “theme-bug.JPG” I sent 2 days ago). I’m not sure that’s a bug, or I’m not using it correctly.

I’ve red the source code of touchkit, and noticed the following two parts are in conflict with each other:

1)from “com/vaadin/addon/touchkit/gwt/client/theme/touchkit.css”: line 2462

.v-treetable-node-closed:after,
.v-tree-node:after {
content: “\25B6”;
}

2)from “reindeer style”:

.v-tree-node {
background: transparent url(…/reindeer/tree/img/arrows.png) no-repeat 6px -10px;
}

Moreover, the style of touchkit.css is always forcibly or automaticly loaded to html style of every web page. So I’d like to know whether I can delete touchkit.css from touchkit,
and configure the custom theme manually, to solve the conflict problem? Because I think it’s very useful for vaadin application to support both desktop and mobile, and the system
architecture could be simplized in this way. Otherwise, I have to develop and deploy two different applications for desktop and mobile separately. Consequently, the two applications
cannot invoke class objects and methods from each other.

6

I can’t see how touchkit.css would be loaded in addition to other theme in a fallback UI. If that occurred, I’d say it would be a bug. At least
here
 (when browsed with a browser detected as desktop browser such as Firefox) the CSS seems to be just fine in the fallback UI, so maybe you’re doing something wrong.

If you delete the TouchKit theme from TouchKit, then it obviously won’t work with TouchKit apps… Really, TouchKit is meant to be used with its built-in theme and I don’t see much use for TouchKit without the theme.

7

MyServlet.java

package com.test;

import javax.servlet.ServletException;

import com.vaadin.addon.touchkit.server.TouchKitServlet;
import com.vaadin.server.ServiceException;
import com.vaadin.server.SessionInitEvent;
import com.vaadin.server.SessionInitListener;

public class MyServlet extends TouchKitServlet {

private MyUIProvider uiProvider = new MyUIProvider();

public MyServlet() {
    super();
}

@Override
protected void servletInitialized() throws ServletException {
    super.servletInitialized();

    getService().addSessionInitListener(
            new SessionInitListener() {
        @Override
        public void sessionInit(SessionInitEvent event)
                throws ServiceException {
            event.getSession().addUIProvider(uiProvider);
        }
    });
}

}

MyUIProvider.java

package com.test;

import com.vaadin.server.UIClassSelectionEvent;
import com.vaadin.server.UIProvider;
import com.vaadin.ui.UI;

public class MyUIProvider extends UIProvider {

public MyUIProvider() {
    // TODO Auto-generated constructor stub
}

@Override
public Class<? extends UI> getUIClass(UIClassSelectionEvent event) {
    return MyFallbackUI.class;
}

}

MyFallbackUI.java

package com.test;

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class MyFallbackUI extends UI {

public MyFallbackUI() {
    super();
}

@Override
protected void init(VaadinRequest request) {
    VerticalLayout v = new VerticalLayout();
    Button btn = new Button("test");
    v.addComponent(btn);
    Tree tree = new Tree();
    tree.addItem("a");
    tree.addItem("b");
    tree.addItem("c");
    tree.setParent("b", "a");
    v.addComponent(tree);
    ComboBox c = new ComboBox();
    v.addComponent(c);
    setContent(v);
}

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>



Vaadin production mode
productionMode
false



VaadinServlet

com.test.MyServlet


UI

com.test.TouchKitUi


widgetset
widgetset



VaadinServlet
/


VaadinServlet
/VAADIN/


20

Hi! I am attaching some of my source code. I still got the same problem as showed in the attacnment “touchkit-problem”. Could you please tell me where I am wrong?
21043.jpg