and thank you for your feedback. As you already noticed the Switch add-on do not support any I18N features. The component is built from an image containing the ON/OFF text so changing the text would require you to draw new images for each supported language.
However with the latest release I experimented with adding the text via CSS in the “holodeck” theme (see
styles.css:69 ). This is still far from optimal solution and I might add a server-side API for defining the localized texts in the future releases.
Also one option would be to use an image with universal icons instead of any text. The
Vaadin TouchKit add-on uses the Switch and has an image of I / O instead of ON / OFF.
I don’t know about the plans but in my opinion using the new Vaadin 7 features for integrating Gwt widgets and Javascript you should easily be able to just find a library containing a gwt- or javascript-Switch component you like and integrate it yourself.
Check out the wiki for that:
Vaadin 7 Wiki
I don’t know if it is still necessary but in a quick break i made this rough port to Vaadin 7 (i worked with 7.3.5 when porting; no other versions tested). It just has basic functionality (Listener if value switch is flipped; flipping the switch programmatically; getter/setter for the Switch’s value). SwitchComp is the “new” component, SwitchupdateUI is a small example on how to use it and “switchupdate” is the theme that includes the style of the Switch.
I’m gonna say that i won’t continue working on the component. Any more functionality you might need you have to add yourself but the source code should give a good foundation. Most of the code is directly taken from the old Vaadin 6 source code (mainly the style.css which is almost a complete copy and the Widget class which was modified to suit the V7 communication. Other classes are mostly remade).
The source code is in the attachements. It’s just source code, so it can’t be directly imported as a project or as an external library. Either add the source code in the build path or create a new project, copy the code inside the new project, compile widgetset and such. Now you should be able to work with it, maybe even package it as a library if you want to.
If you need a “finished” and always supported Switch component you should use the one in Touchkit instead. This is just meant to be for the ones who can’t/don’t want to use Touchkit.
It seems that there really is a need to officially convert this add-on for Vaadin 7, so I finally took the time to upgrade Switch for Vaadin 7. The version 2.0.1 is now available at
https://vaadin.com/addon/switch
Please notice that the latest version requires Vaadin 7.2+
Let me know if you find any bugs by commenting here or opening an issue on
GitHub .
Hi ,
Switch state_changer = new Switch(“”, false);
state_changer.addValueChangeListener(new Property.ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
logger.info(event.getProperty().getValue().toString());
}
});
state_changer.setImmediate(true);
am using above code in vaadin 7.3.3 My client side shows only checkbox
Checkbox appears in place of a Switch when the client-side implementation of the Switch component is missing from the widgetset. Please verify following things:
The widgetset is compiled and the following line appears in the compilation output:
Visiting SwitchConnector with ConnectorInitVisitor
The widgetset of your application (*.gwt.xml file) inherits the add-on with the following line:
Thanks for the reply. But because your suggestion still did’t helped me solving the issue, something else needs to be checked. So, before looking into the possible issues, here are a few excerts from the build log:
[INFO]
Visiting SwitchConnector with ConnectorInitVisitor
[INFO]
SwitchConnector will be in the eager bundle
[INFO]
Will serialize class org.vaadin.teemu.switchui.client.SwitchState as a bean
The entries in my generated widgetset.xml file are correct, meaning that the component is found and the build log is certifying the clientside build has occured:
I’ve tried the component with a sample maven project is is displayed just fine, but my problem comes when I am trying to use it in a real-world existing application. So, do you have some hints on what else to debug or check in my app?
Hmm, in that case I’m running out of ideas. Have you tried to use any other add-ons with client-side widgets in the real-world project? The Wizards for Vaadin mentioned in your snippet doesn’t have any client-side code, so that probably works fine.
I found out … my mistake .
But for the sake of other developers benefit, I’ll tell the story: my
application is actually containing many "
vaadin applications " in it, therefore in the web.xml I had separate init params for each vaadin servlet. Obviously, for one of the application (with the new addon), the widgetset reference was not valid for some reason. Correcting that it also corrected the add-on display.
later update: there is still one thing still not functioning as expected: the animation and the button face image is not updated on clicks for styles other than
holodeck .
Hi teemu, I noticed that if you place a Switch in a Table’s generatedcell, it will not function correctly.
Setting the initial value does not render the correct UX in the client as it always displays as “ON”. Value change correctly changes and sets the db value.
@Override
public Component generateCell(final Table source, final Object itemId, final Object columnId) {
@SuppressWarnings("rawtypes")
final Property property = source.getItem(itemId).getItemProperty(columnId);
Boolean selected = property != null ? (Boolean)property.getValue() : false;
Switch switchComponent = new Switch("", selected);
switchComponent.setImmediate(true);
switchComponent.addValueChangeListener(new ValueChangeListener(){ ...}
return switchComponent;
}
Even if manually set it to false, it displays as “ON”
[code] @Override
public Component generateCell(final Table source, final Object itemId, final Object columnId) { @SuppressWarnings(“rawtypes”)
Switch switchComponent = new Switch("", false);
switchComponent.setImmediate(true);
return switchComponent;
}
[/code]Example, all switches are set to false. The first two are in a table and the last is added to the layout.
Finally, for testing purpose, I switched the Switch to a CheckBox and it renders as expected with initial values. So I assume it is something with the js and drawing.
.
