Switch Component

Flow
41

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.

42

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; }

22923.png

43

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.

44

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.

45

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

46

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>
47

The manifest file in switch-2.0.3.jar file has reference to class-path for vaadin-server-7.2.0.jar, etc. While loading using jar file in one of the web application we are seeing the traces related to "
The manifest class path vaadin-server-7.2.0.jar can not be found in jar file file:…/WEB-INF/lib/switch-2.0.3.jar or its parent
" for every missing jar files in the class path. This is because we are using vaadin version 7.3.7. As per my understanding those class file version only indicates the minimum supported vaadin version or is there any other significance of having those entries in the class-path of manifest file.

Any response here will be of great help.

48

besides xxx.gwt.xml setting, u have to take a look at the web.xml in your project.

needs:


Application widgetset
widgetset
com.example.xxxx.widgetset.xxxWidgetset

the param-value is your xxx.gwt.xml fullpath (package name + xxx)

49

for me to have it work (ie: Showing the switch instead of a checkbox) was to add the following to my .gwt.xml file:

<inherits name="org.vaadin.teemu.switchui.SwitchComponentWidgetset" /> Then I had to delete all GWT cache files in my temp directory.

50

How can I change ON/OFF to YES/NO?

51

Can you expand on how the ON/OFF can be changed to YES/NO?