I’ve created a 6.2-nightly compatible widget called LevelSelector. It’s a component which you use to select an integer value between 1 and . The user can also specify a minimum value which is always selected.
The outlook of the widget can easily be modified. I’ve included three different looks for the widget with the example application found in the svn repository. The three different looks look completely different and only modifications I’ve made are in the css-file. See screenshot below.
Note! If you play around with the demo, take into account that each box’s (first example) width is automatically calculated. The width of the component is 200px, so if you set a “nasty” number as the max value, then the widget won’t look so good, for example, if you set the max value to 30, then the box’s width is calculated 200/30 = 6.667 which is rounded down to 6px. This means that the boxes will only take up a space of 6px*30 = 180px, which means that there will be 20px of empty space at the end.
But do not worry, the widget provides the developer with a helper method where you specify the width of an individual box and the widget’s width is calculated from that value.
Awesome component, I must say. I had to hack it a bit to better suit my application (ie. a slightly different background color) and now it works perfectly.
I have a few improvement suggestions:
levelselector.css is trying to import
…/reindeer/styles.css , but this will only point to non-existant location
VAADIN/widgetsets/reindeer/styles.css . Removing this redundant import worked for me.
If you change the background color, you’ll notice that the stars look a bit funny. The white borders between them can be removed without breaking the layout by changing the color part of the property
border-right of style
.v-levelselector-stars .box to
transparent .
The background color of
star_not_selected.png is not transparent and it also looks funny when the background color is something else than the default. I would have sent you a transparent version, but I really suck at graphics manipulation
I tried to use Vaadin 7 version of this nice AddOn, but noticed one problem:
If I change value from server side (with setValue-method), component does not show new value.
Actual value seems to change, because if I read value with getValue-method it returns changed value.
I looked the source code, but did not figure out solution.
Are you by any chance updating the value in a background thread? If so, you need to use server push or polling. See e.g.
this old thread for some background (partly from the time before push support was included in Vaadin) and
Book of Vaadin for information on how to do use push with Vaadin 7.1.
