how to do styling in a vaadin app that uses touckkit add-on

Flow
1

using vaadin 7.4.2 touchkit 4.0.0 -

I am using a sample code from the vaadin book - all runs fine, but unable to do any styling

here is my code:

package com.example.mytoucht4;

import javax.servlet.annotation.WebServlet;

import com.vaadin.addon.touchkit.server.TouchKitServlet;
import com.vaadin.addon.touchkit.ui.NavigationView;
import com.vaadin.addon.touchkit.ui.NumberField;
import com.vaadin.addon.touchkit.ui.Switch;
import com.vaadin.addon.touchkit.ui.VerticalComponentGroup;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;

@SuppressWarnings(“serial”)
@Theme(“touchkit”)

public class Mytoucht4UI extends UI {
@WebServlet(value = “/*”, asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = Mytoucht4UI.class
, widgetset = “com.example.mytoucht4.widgetset.Mytoucht4Widgetset”)

public static class Servlet extends TouchKitServlet { 	}

@Override
protected void init(VaadinRequest request) {

	class MyView extends NavigationView {
		public MyView() {
			super("Planet Details");
			CssLayout content = new CssLayout();
			setContent(content);
			VerticalComponentGroup group = new VerticalComponentGroup();
			content.addComponent(group);
			group.addComponent(new TextField("Planet"));
			group.addComponent(new NumberField("Found"));
			group.addComponent(new Switch("Probed"));
			Button btn = new Button();
			btn.setStyleName("btnsn");
			btn.setCaption("OK");
			setRightComponent( btn);
		}
	}
	NavigationView myView = new MyView();
	myView.setStyleName("myviewsn");
	setContent( myView);
}

}

here are my edits to mytoucht4,scss

// Insert your own theme rules here

.mytoucht4 button here are my edits to mytoucht4.scss{ color:red !important;}

.mytoucht4 .btnsn { color:red !important;}
}

the above attempt to change the color does not work

can someone give some guidance on how to do css styling in a touchkit app?

2

The @Theme annotation must have your theme name.

You’re doing a Sass theme there. That’s perferctly fine as long as you notice to compile the theme and that you should not include a base theme. The root file is styles.scss, from which you can include another file like mytheme.scss.

However, perhaps usually, you make a CSS theme, as you can’t parameterize the TouchKit base theme like you can do with Valo theme in ordinary applications.

Creating a TouchKit theme is explained
here
. Normally, you just make a styles.css (not scss) file in the theme folder and set the theme in the @Theme annotation.