inspired by the iPhone, I decided to create a Switch component. On the server-side the component extends
CheckBox but with a different client-side implementation.
The state of the switch can be changed by clicking with mouse, dragging with mouse or with keyboard by first focusing the component (tab) and then pressing space bar.
P.S. I think it’s time to go build new default widgetset with that cool extra widgets. And a question - maybe it is time to make a pool and vote for extra/contrib widgets which deserves inclusion into the Vaadin core ?
Yes, the default ON/OFF graphics can easily be changed with a single image file and some CSS in your theme. I have plans to include few other styles in the component as examples on how to do that.
First of all thanks for this nice component, it’s really usefull.
But now that I am using it, I found a rather annoying issue:
Whenever I set the switch to read-only, the switchbox is actually turned to the off state, even if I set the value to “true” before.
Sounds like fixing this issue would be quite quick to fix to the component. I’ll try to find some time later today or next week to look into this issue in more detail and release a new fixed version in the Directory.
Thanks for the quick fix, I’ll try it out later today.
I also have a feature request, but I’m not sure if it’s easy to implement:
It would be nice if I could also sort a table based on the state of the switches in that table.
So by clicking on the header of the column with the switches, the table would be sorted with all “on switches” at the
top (or at the bottom, depending on the ascending/descending status)
I just tested the new version (0.93) and the read-only mode now works as expected. Thanks.
But now I have another problem
The problem that I’m seeing now is that the ValueChangeEvent is not fired when I toggle one of the switch boxes inside the table.
This is my code:
Item item = container.addItem(newComponent.getId());
item.getItemProperty(DB_COLNAME_ID).setValue(newComponent.getId());
item.getItemProperty(DB_COLNAME_NAME).setValue(newComponent.getName());
item.getItemProperty(DB_COLNAME_DESCRIPTION).setValue(newComponent.getDescription());
Switch newSwitch = new Switch("", false);
newSwitch.addListener(new Property.ValueChangeListener()
{
public void valueChange(ValueChangeEvent event)
{
mainWindow.showNotification("switch button changed its state");
}
});
newSwitch.setImmediate(true);
item.getItemProperty(DB_COLNAME_ENABLED).setValue(newSwitch);
But when I click a switch button to toggle its state, the valueChange method doesn’t get called
(and of course the message “switch button changed its state” is also not displayed)
Can this be because the switch button is inside a table ?
If so, any ideas how I can get this workikng inside a table ?
Regarding the sorting, you could have the sorting functionality inside
Table by simply extending the
Switch class and implementing the
java.lang.Comparable in the extended class.
We seem to be having problem since we updated Vaadin to version 6.6.0 (and GWT to 2.3.0). We cannot compile the widgetset. We get this error:
[ERROR]
Errors in ‘jar:file:/Users/geoffrey16/.m2/repository/org/vaadin/addons/switch/0.93/switch-0.93.jar!/org/vaadin/teemu/switchui/widgetset/client/ui/touch/TouchEvent.java’
[ERROR]
Line 19: The return type is incompatible with NativeEvent.getTouches()
[ERROR]
Line 19: Methods cannot be overridden in JavaScriptObject subclasses
It seems that you are trying to override a final method.
After a quick look, it seems that the getTouches() method was introduce in GWT 2.2.0.
Any ideas how to work around this?
Thanks.
P.S: We need to use GWT 2.3 so downgrading GWT is not an option.
this is a great add-on to Vaadin. Unfortunately it’s not very easy to use in a multilingual environment especially when Vaadin is used to develop portlets for the Liferay portal server.
With Liferay (or any other product) you can change the language at any time and the UI should adopt to the language changes so all the labels should be replaced. But some languages have longer words that other languages and having the widget relying on images to display the ON/OFF, YES/NO etc labels is not that comfortable, that’s at least the impression I had after looking briefly at an earlier version.
Have you ever tried using the switch in a I18N application? What would be your recommendations in such a scenario?
I was thinking about retrieving a CSS style name depending on the selected language and adding that style name to the widget and depending on the style name display different labels but as I said… not very comfortable.
