Switch Component

SuBiN1 · December 31, 2014, 5:23am

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

Teemu · January 2, 2015, 9:10am

Have you compiled the widgetset? Please verify that your widgetset contains the Switch component.

For detailed instructions see:

https://vaadin.com/book/-/page/addons.eclipse.html

https://vaadin.com/book/-/page/addons.maven.html

SuBiN1 · January 27, 2015, 8:13am

i compiled the widgetset then also the same problem occurs

Paul73 · February 5, 2015, 10:32am

did you managed to show the images on the component? I still see the common checkboxes.

L.E.: I’m using it with vaadin 7.2.4

Teemu · February 6, 2015, 12:34pm

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:

<inherits name="org.vaadin.teemu.switchui.SwitchComponentWidgetset" />

An example of the application widgetset can be found in the demo application:
https://github.com/tehapo/Switch/blob/master/switch-demo/src/main/resources/org/vaadin/teemu/switchui/demo/SwitchDemoWidgetset.gwt.xml

Paul73 · February 9, 2015, 1:34pm

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 beanThe 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:

<inherits name="org.vaadin.teemu.wizards.WizardsforvaadinWidgetset" />
 <inherits name="org.vaadin.teemu.switchui.SwitchComponentWidgetset" />

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?

Teemu · February 9, 2015, 1:45pm

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.

Paul73 · February 9, 2015, 4:06pm

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.

Paul73 · February 9, 2015, 4:07pm

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
.

Steve66 · June 1, 2015, 6:51pm

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.

Jacques6 · July 20, 2015, 5:56pm

Hi Teemu –

It would be great to use the component in a Table/Grid, can you please assist to make this work ?

Thanks

Torsten36 · July 24, 2015, 9:16am

Hi Teemu,

I am using the switch in a grid’s DetailsGenerator → same problem like the guys before
The switch shows always “on”.

Best regards,
Torsten

Teemu · August 3, 2015, 7:06am

Hi,

I just created an issue in GitHub:
Switch does not work inside Table or Grid

Teemu

MrEgifford · August 5, 2015, 9:57am

Thanks Teemu. I have the same problem and i will follow the issue

In my case i have a switch in a table cell. It works till i delete a row using

table.removeItem("itemId");

After that all switchers in a table are set to default state and freeze.

Teemu · August 7, 2015, 10:53am

Hi,

just released Switch version 2.0.3, which fixes the issue of using Switch inside Table.

https://vaadin.com/addon/switch

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

Iyad3 · February 2, 2016, 6:09pm

Is it possible to make the toggle work veritcally (up/down rather than left/right) via CSS?

I need to implement a toggle like the one in the attached image. Our UI designer provided the CSS below but I need to use a Vaadin component and I can’t figure out a way to marry the two. Any suggestions?

.togglebox input{ display:none; }
.togglebox{ display:inline-block; border:1px solid #BBB; width:20px; height:41px; position:relative; border-radius:5px; color:#FFF; font-weight:bold; overflow:hidden; box-shadow:0 1px 0 #CCC; }
.togglebox label{ width:20px; height:40px; line-height:200%; border-radius:5px; position:absolute; top:0; left:0; z-index:1; font-size:1.1em; cursor:pointer; -webkit-transition:height 0.3s; -moz-transition:height 0.3s; transition:height 0.3s; }
.togglebox span{ position:absolute; top:-1110px; }

.togglebox label::before{ content:' '; width:20px; height:20px; float:left; margin-top:00px; padding-top:20px; padding-right:13px; text-align:center; background:#33d3b8; text-shadow:0 -1px 0px #093B5C; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; }

.togglebox label b{ display:block; height:20px; width:20px; float:left; position:relative; z-index:1; border:1px solid #AAA; background:#F6F6F6; box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5); border-radius:5px; margin-top:-20px; margin-left:-1px; }
.togglebox label:hover b{ background:#E5E5E5; }
.togglebox label::after{ content:' '; width:20px; float:left;height:50px; margin-top:5px; padding-top:45px; padding-left:0px; text-align:center; background:#3f8ecc; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; margin-top:-20px;}
.togglebox input:checked ~ label{ top:-20px; }
.togglebox { transition: all 3s; }
.togglebox input{ transition: all 3s; }

Teemu · February 3, 2016, 6:20am

Unfortunately it is not that simple. You could of course try simply adding a rotate transition to the Switch element. But you might end up with some layouting issues with that. Maybe it’s still worth a shot.

transition: rotate(90deg);

Also the client-side implementation (done with GWT) is listening for mouse drag movements in the horizontal direction, so at least dragging of the switch handle would not work right after the rotation.

F.L · March 2, 2016, 12:30pm

Dear Teemu,
In first place I would like to thank you for the switch addon. Second, i would like to know how can I change the label, in other word i would like to customize the label ; for example i would like to change ON to Present …
Thank you in advance for your time and your response.

Stephan82 · March 30, 2016, 9:13am

Should it also work with Vaadin 7.5.9+? As I also have the issue that only a CheckBox is shown instead of a Switch.
I’m using version 2.0.3 of the add-on and want to show it inside a table

Any help is /suggestions are appreciated

rucko24 · May 31, 2016, 3:04am

st.huber90,

stop proyect. on eclipse
compile:widgetset
compile
re run proyect

work for me!!!

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN"
        "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.vaadin.DefaultWidgetSet"/>

    <inherits name="com.vaadin.addon.responsive.ResponsiveWidgetSet" />

    <inherits name="org.vaadin.teemu.switchui.SwitchComponentWidgetset" />

    <inherits name="com.github.wolfie.refresher.RefresherWidgetset" />
</module>