TouchKit: Using ComboBox component

Hello,

I am trying to build a simple app with a data entry form using TouchKit 4.0.0. I am following the approach described in the Vaadin 7 book (chapter 20). The app has been generated using the Maven touchkit archetype and most things seem to be working and looking OK except combobox components when I include them on a form. The form is built using the VerticalComponentGroup class that holds various data-bound UI controls. Combobox components on the resulting page in the mobile browser (Safari on iOS, Chrome on Android) do not look good at all. There is no dropdown button, the field allows keyboard entry, the dropdown does not have any borders around it. They don’t look anything like comboboxes in the parking demo which uses a different approach to building the mobile app (using Google GWT and Vaadin client components).

I see exactly the same issues with the comboboxes when I simply add the following code to the ComposeView of the mobile mail demo app:

public ComposeView(boolean smartphone) { ... ComboBox combo = new ComboBox("Combo:"); combo.addItems("One", "Two", "Three"); combo.setInvalidAllowed(false); combo.setNullSelectionAllowed(false); fields.addComponent(combo); ... Can anyone shed any light on this issue? Thank you very much,
Sergei

Hello,

Touchkit is not (what a pity!) valo-aware. So using Vaadin 7.3+ with Valo theme will give you this kind of glitches.
You’ll have to dig a little bit in css and somehow adapt it, or get back to the default touchkit theme.

It would be really great, but I understand that it’s quite a big work, that the Touchkit team make a new release with a Valo-enabled version. IMHO it’s a big slowdown for its adoption.

Regards

Sebastien,

Thank you for your answer. The problem is I am using the default touchkit theme (as generated by the Maven touchkit archetype) as does the mobilemail demo. I am valo-spoiled(started using Vaadin from ver 7) and don’t udnerstand exactly how pre-Valo themes work. Here is a comment from the styles.css file of the mobilemail demo app

[code]
/**

  • This TouchKit example is themed in standard Vaadin way.
  • Note, that themes work bit like in Portlets, the “base theme”
  • is added by TouchKit, and there is no need to for @import in
  • this theme css.
    */
    [/code]According to this comment, I don’t even need to import the default theme. It all should be there for me including the combobox styling. But obviously I am wrong because my combos look terrible. Do you think it is because the styles are missing? Are combobox style missing from the default touchkit theme?

I will try to dig into css to see if I can find how to correct this.

Thank,
Sergei

I believe here is what I am seeing. Since my app theme is based on the default touchkit schema I am getting ComboBox styles from touchkit schema (src/main/java/com/vaadin/addon/touchkit/gwt/client/theme/touchkit.css) and these styles is exactly what makes the combos look like crap. I have copied combo styles (v-filterselect) from Valo to the application css and my Combos look so much better. Replaced them again with the v-filterselect from touchkit.css and it looks crappy.

Hhmmm…

Solved the problem by switching to use NativeSelect instead of ComboBox.

The styling for the ComboBox is clearly messed up in TouchKit including the references to the FontAwesome icons in touchkit.css.