Switch Component

Hi fellow Vaadin users,

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.

See
live demo
, Vaadin 6.2+ compatible
switch-0.91.jar
and
source code
.

The component is not yet thoroughly tested (and not at all with IE) so there might still be some bugs.
11182.png

Wow ! Looks great !

Does it allow to change default ON/OFF labels ?

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.

Hi,

just wanted to let you know that I updated the Switch component to version 0.92.

Changes to the previous version include:

For more details and a download link, go to
Switch at Vaadin Directory
.

Hi,

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.

This is an example of how I use it (in a Table):


	            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());
	            item.getItemProperty(DB_COLNAME_ENABLED).setValue(new Switch("", true));

→ using this code the switchbox is rendered correctly, namely in the “on” state.

But when I make it readonly using the code below, the switchbox is rendered with the “off” state:


	            ((Switch) item.getItemProperty(DB_COLNAME_ENABLED).getValue()).setReadOnly(true);

This bug prevents me from generating a read-only listing of my component statuses.

Any chance you can fix this ?

Thanks for the feedback and the bug report!

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.

  • Teemu

I just uploaded a new version of the
Switch add-on
to the Directory. The new version is labeled 0.93 and contains few bugfixes listed below.

  • The read-only mode is now fixed (thanks to Guy DS for reporting this issue).
  • Some keyboard navigation issues should now be resolved.

Please let me know if you still have any issues with the component.

  • Teemu

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)

Guy DS

I just tested the new version (0.93) and the read-only mode now works as expected. Thanks.

But now I have another problem :slight_smile:
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 ?

Ok, never mind, now it is suddenly working for some reason.
It might have been a caching issue or something of eclipse.

Ok, great!

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.

  • Teemu

Ok, thanks for the info, I will definitely try that out.

Is it possible to implement the java.lang.Comparable interface by default in the Switch box ?
Or isn’t that an option ?

Yes, it would be possible to implements
Comparable
directly in the
Switch
component and I’ll consider doing that in the next release.

In the mean time you can do this yourself by extending the
Switch
class in case you don’t want to wait for the release. :slight_smile:

  • Teemu

Thanks, that would be really nice.

Well, this is exactly what I did this afternoon because I need to release a first (beta) version of my application by the end of the week :smiley:

Hi.

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.

Hi Geoffrey,

thanks for reporting this issue. I fixed this problem and released a new version 0.94 of the
Switch add-on
in the
Directory
.

This version should work with Vaadin 6.6.0. Please use the older 0.93 version for compatibility with older Vaadin versions.

If you still have any issues with the add-on, please let me know.

Hi.

And thanks a lot. Looks like it is working just fine… Again :wink:

Thanks again for your very quick reply.

I had a difficult job finding this particular “Switch” add-on a second time. I knew it existed, but did not know the name.

Can you add the words “toggle” and “slider” to the description on this page, to enhance searching:
https://vaadin.com/directory#addon/switch

–Basil Bourque

I did some minor additions to the description of the
Switch component
. Hopefully it’s now a bit easier to find.

Hi Teemu,

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.

Cheers,

Alex