Theming with Valo Webinar

General
1

The Valo theming engine has powers beyond this universe. Join our webinar together with the man who made it in the first place Mr. Jouni Koivuviita and his fellow wingman Mr. Teemu Pöntelin to learn how to master this beast.

Webinar takes place on Thursday April 23rd 2015 @ 2PM CET

You can post your questions below, thank you!

embedyoutube=WJGKLEsTBmQ

2

Does Valo work with TouchKit?

3

Thanks for the webinar guys!

What is the best way to support multiple themes in an application - i.e. a multi-tennant enterprise app. How can we allow customizing of a theme and on-the-fly compiling of (multiple?) themes?

Related, how do you configure the theme to auto-compile? I noticed that when you save your theme it automatically recompiles and is immediately available in the browser. That’s much more convinient than needing to recompile the theme manually after each edit.

Thanks!
Dave

4

What editor or editors you can recomend for building/editing Vaadin themes?

5

The Valo demo application is not a TouchKit app, right? Still it works properly on a mobile device.
Does this mean that you don’t really need touchkit even a on a mobile device, you can just go with Valo without touchkit?

Thanks

6

Thank you very much guys, it was very enjoyable. Great work :slight_smile:

7

Thanks everyone for watching and posting questions!

I was just using the bundled Java Sass compiler, which does the
on-the-fly compilation
 when you run your app in debug mode (i.e. not productionMode==true). If you want to use the Ruby Sass compiler, it offers the
“–watch” command line parameter
 you can use to set the compiler to watch for changes in your theme files and recompile automatically. It’s pretty much the same thing, Vaadin Sass compiler just does the compilation when you request it again from the browser.

Eclipse is really not meant for editing Sass/SCSS (though you can get some help if you open .scss files using the standard CSS editor, but the syntax coloring will get messed up).

I personally use
Atom
. IntelliJ IDEA (or WebStorm) offer great Sass support also, or so I’ve been told.

Indeed, it’s just a standard Vaadin app. It just uses the Responsive functionality to make the layouts adapt using CSS (the menu functionality is built-in in Valo, so no need to write custom CSS).

Whether you need TouchKit or not depends on what you’re trying to accomplish and how easily. TouchKit for instance offers support for building offline views, provides APIs for defining your application icons and splash screens, and has many mobile optimised components such as date field, combo box, navigation button, swipe views etc. But of course you could implement that yourself, but it takes time to do that.

8

Thanks Jouni - another great webinar.

I’ll have a look at the on-th-fly compilation. I guess it might not be working in our environment because we are using springboot, and therefore launch the app in a possibly non-typical way?

Dave

9

I can see you. please help me use Valo theme for this project. Swipe do my css error for me

10

Thanks Jouni & Teemu for the great webinar. Great help in understanding how you implemented scss and showing us the correct way to override Valo.

Is Touchkit Theme built using scss (i.e. mixins, variables) and does it have an API page like Valo theme does?

11

How would I go about setting the text colour for all input fields to black?
It doesn’t seem to be as easy as your button example.

12

Hi Kent,

the theme of Vaadin Touchkit was built before we internally went full-on with Sass and it is built using
GSS
 instead. There is no API page for the theme, but you can find the sources of the theme at
GitHub
, which you might find useful.

13

Hi Guttorm,

Sorry for not answering this on the webinar, I think this question was there on the list as well, but we spent all the time rambling about other stuff.

And you’re right, it’s not as easy as with the button. The text color is almost “hard-coded” in the mixin, as it always calls the valo-font-color function to produce it. Fortunately there’s a workaround, although it is a bit cumbersome, overriding the valo-font-color function:

// Import all variables, functions and mixins
@import "../valo/valo";

// Remove textfield from the default list of components to include in the output.
// This affects the following 'valo' mixin
$v-included-components: remove($v-included-components, textfield);

// Include the Valo theme, minus textfield
.mytheme {
  @include valo;
}

// Override the font color function. Every mixin that uses this
// function after this point will always get 'black'
@function valo-font-color($color) {
  @return black;
}

// Include the textfield theme, now with black font color
.mytheme{
  @include valo-textfield;
}

You probably want to do the same for datefield and combobox, as they re-use the valo-textfield-style mixin.

14

Jouni would you so nice and explain that code a bit please?
At which point is the font color set?
If I understand it correctly (I know you did something like this in the webinar) you first remove textfield from … let’s say that from a list of stuff that valo should style, so it won’t get the styles which it normaly would?

then you apply valo styles on your theme, of course now without the styles for textfields

and then what? That function for color return, that will have global application? But only on the components which are added after it? So then you add textfield and you get the desired effect?

I think I just rubber ducked myself. I know this was in the webinar but my memory is bad and now I expected that it will be precisely applied to textfield specifically.

Sorry :<

15

Nicely rubber-ducked, indeed :slight_smile: You explained the code correctly. I’ll add comments to the code still.

16

Thank you very muchest :slight_smile:

17

Thanks for that example Jouni. I think we’re getting somewhere now…

I just mentioned text fields in my posting, but actually we want all text to be black. At least that is what I think I want. I might change my mind when I get it…

That makes the workaround a bit easier. I just override the colour function after import:

[code]
@import “…/valo/valo”;

$v-font-color: #000;
$v-font-weight: 400;
$v-selection-color: #00f;

// Override the font color function to get high contrast color
@function valo-font-color($bg-color, $contrast: 0.8) {
@if type-of($bg-color) == color {
@if is-dark-color($bg-color) {
@return #fff;
} @else {
@return #000;
}
}
@return null;
}

@mixin mytheme {
@include valo;
…
}
[/code]This gives me black text most places, but not all.
One exception is for disabled fields and buttons, where valo doesn’t specify colour, but opacity…
For buttons it kind of work, since disabled buttons can be ignored.
But for disabled text fields it does not work; IMHO, disabled text fields must still be readable.
Ideally I would set text fields to read-only instead, but that would make all our server-side manipulation awkward, so that is a non-starter.

( Actually, we have our own Property class, so maybe I could override ObjectProperty.setValue and drop the isReadOnly test…
Must try. )

Is there some way to adjust what scss generates for disabled text fields, or is this a case where I should just override the css?

I was also a bit confused why the table headings in my app didn’t appear black, since the inspector showed it to be black. That proved to be the font-weight, so I turned that up to 400.

Btw; I see that I can control the font size in table headings by setting $v-table-header-font-size, but for tabsheet captions the size is calculated from $v-font-size…

Finally, the way you suggested overriding, that doesn’t work with the default mystyle.scss + styles.scss setup, or?
Would it then be better to drop the mystyle.scss and put everything in styles.scss?