Creating a type of toggle with two labels..
Hi, I'm trying to create a new control to be used by other developers. It is know as Toggle Switch. You can see this control in android: http://ankri.de/switch-button-for-android-2-3-gingerbread/ in iOS: http://iosguides.net/ios-menus-comparison/ (search for Toggle Switch) and on Windows 8: http://www.c-sharpcorner.com/UploadFile/83f858/manage-the-windows-8-sync-feature/ (below Step 2). My approach was to subclass ButtonBase which is itself a subclass of Labeled. The problem here is that Labeled only accepts one label but the Toggle Switch needs two: one for the on state and another for the off. Any ideas on how to best approach this problem? Thanks in advance, regards, -- Pedro Duque Vieira
Re: Creating a type of toggle with two labels..
It is likely significantly easier to simply roll your own control and not try to coerce ButtonBase to support two labels. For what it is worth, Paru and I talked about precisely this control at JavaOne 2012, which you can watch on YouTube here: http://www.youtube.com/watch?v=ryUTSrGGnvolist=PLKCk3OyNwIzvw-zzCMJ3xq5SgxL961IFEindex=38 -- Jonathan On 5/12/2013 10:16 a.m., Pedro Duque Vieira wrote: Hi, I'm trying to create a new control to be used by other developers. It is know as Toggle Switch. You can see this control in android: http://ankri.de/switch-button-for-android-2-3-gingerbread/ in iOS: http://iosguides.net/ios-menus-comparison/ (search for Toggle Switch) and on Windows 8: http://www.c-sharpcorner.com/UploadFile/83f858/manage-the-windows-8-sync-feature/ (below Step 2). My approach was to subclass ButtonBase which is itself a subclass of Labeled. The problem here is that Labeled only accepts one label but the Toggle Switch needs two: one for the on state and another for the off. Any ideas on how to best approach this problem? Thanks in advance, regards,
Re: Creating a type of toggle with two labels..
OK, sounds reasonable. Too bad about the code duplication that will need to take place. Thanks Jonathan and thanks for the link. Regards, On Wed, Dec 4, 2013 at 9:39 PM, Jonathan Giles jonathan.gi...@oracle.comwrote: It is likely significantly easier to simply roll your own control and not try to coerce ButtonBase to support two labels. For what it is worth, Paru and I talked about precisely this control at JavaOne 2012, which you can watch on YouTube here: http://www.youtube.com/watch?v=ryUTSrGGnvolist=PLKCk3OyNwIzvw-zzCMJ3xq5SgxL961IFEindex=38 -- Jonathan On 5/12/2013 10:16 a.m., Pedro Duque Vieira wrote: Hi, I'm trying to create a new control to be used by other developers. It is know as Toggle Switch. You can see this control in android: http://ankri.de/switch-button-for-android-2-3-gingerbread/ in iOS: http://iosguides.net/ios-menus-comparison/ (search for Toggle Switch) and on Windows 8: http://www.c-sharpcorner.com/UploadFile/83f858/manage-the-windows-8-sync-feature/ (below Step 2). My approach was to subclass ButtonBase which is itself a subclass of Labeled. The problem here is that Labeled only accepts one label but the Toggle Switch needs two: one for the on state and another for the off. Any ideas on how to best approach this problem? Thanks in advance, regards, -- Pedro Duque Vieira
Re: Creating a type of toggle with two labels..
You might want to look at what Gerrit has done here: http://harmoniccode.blogspot.com/2013/10/friday-fun-xviii.html On Dec 4, 2013, at 5:05 PM, Pedro Duque Vieira pedro.duquevie...@gmail.com wrote: OK, sounds reasonable. Too bad about the code duplication that will need to take place. Thanks Jonathan and thanks for the link. Regards, On Wed, Dec 4, 2013 at 9:39 PM, Jonathan Giles jonathan.gi...@oracle.comwrote: It is likely significantly easier to simply roll your own control and not try to coerce ButtonBase to support two labels. For what it is worth, Paru and I talked about precisely this control at JavaOne 2012, which you can watch on YouTube here: http://www.youtube.com/watch?v=ryUTSrGGnvolist=PLKCk3OyNwIzvw-zzCMJ3xq5SgxL961IFEindex=38 -- Jonathan On 5/12/2013 10:16 a.m., Pedro Duque Vieira wrote: Hi, I'm trying to create a new control to be used by other developers. It is know as Toggle Switch. You can see this control in android: http://ankri.de/switch-button-for-android-2-3-gingerbread/ in iOS: http://iosguides.net/ios-menus-comparison/ (search for Toggle Switch) and on Windows 8: http://www.c-sharpcorner.com/UploadFile/83f858/manage-the-windows-8-sync-feature/ (below Step 2). My approach was to subclass ButtonBase which is itself a subclass of Labeled. The problem here is that Labeled only accepts one label but the Toggle Switch needs two: one for the on state and another for the off. Any ideas on how to best approach this problem? Thanks in advance, regards, -- Pedro Duque Vieira
Re: Creating a type of toggle with two labels..
It seems to me that you could do this with a small class extending ToggleButton. Add a couple of String properties and use a selection listener to switch the main text value. You wouldn't need to write any skin or behavior classes, Just define the look in CSS and use -fx-label-padding to place the text on the background. Leif On 2013-12-04 14:05, Pedro Duque Vieira wrote: OK, sounds reasonable. Too bad about the code duplication that will need to take place. Thanks Jonathan and thanks for the link. Regards, On Wed, Dec 4, 2013 at 9:39 PM, Jonathan Giles jonathan.gi...@oracle.comwrote: It is likely significantly easier to simply roll your own control and not try to coerce ButtonBase to support two labels. For what it is worth, Paru and I talked about precisely this control at JavaOne 2012, which you can watch on YouTube here: http://www.youtube.com/watch?v=ryUTSrGGnvolist=PLKCk3OyNwIzvw-zzCMJ3xq5SgxL961IFEindex=38 -- Jonathan On 5/12/2013 10:16 a.m., Pedro Duque Vieira wrote: Hi, I'm trying to create a new control to be used by other developers. It is know as Toggle Switch. You can see this control in android: http://ankri.de/switch-button-for-android-2-3-gingerbread/ in iOS: http://iosguides.net/ios-menus-comparison/ (search for Toggle Switch) and on Windows 8: http://www.c-sharpcorner.com/UploadFile/83f858/manage-the-windows-8-sync-feature/ (below Step 2). My approach was to subclass ButtonBase which is itself a subclass of Labeled. The problem here is that Labeled only accepts one label but the Toggle Switch needs two: one for the on state and another for the off. Any ideas on how to best approach this problem? Thanks in advance, regards,
Re: Creating a type of toggle with two labels..
On 2013-12-04 14:54, Leif Samuelsson wrote: It seems to me that you could do this with a small class extending ToggleButton. Add a couple of String properties and use a selection listener to switch the main text value. You wouldn't need to write any skin or behavior classes, Just define the look in CSS and use -fx-label-padding to place the text on the background. Or maybe just -fx-alignment will be enough. Leif On 2013-12-04 14:05, Pedro Duque Vieira wrote: OK, sounds reasonable. Too bad about the code duplication that will need to take place. Thanks Jonathan and thanks for the link. Regards, On Wed, Dec 4, 2013 at 9:39 PM, Jonathan Giles jonathan.gi...@oracle.comwrote: It is likely significantly easier to simply roll your own control and not try to coerce ButtonBase to support two labels. For what it is worth, Paru and I talked about precisely this control at JavaOne 2012, which you can watch on YouTube here: http://www.youtube.com/watch?v=ryUTSrGGnvolist=PLKCk3OyNwIzvw-zzCMJ3xq5SgxL961IFEindex=38 -- Jonathan On 5/12/2013 10:16 a.m., Pedro Duque Vieira wrote: Hi, I'm trying to create a new control to be used by other developers. It is know as Toggle Switch. You can see this control in android: http://ankri.de/switch-button-for-android-2-3-gingerbread/ in iOS: http://iosguides.net/ios-menus-comparison/ (search for Toggle Switch) and on Windows 8: http://www.c-sharpcorner.com/UploadFile/83f858/manage-the-windows-8-sync-feature/ (below Step 2). My approach was to subclass ButtonBase which is itself a subclass of Labeled. The problem here is that Labeled only accepts one label but the Toggle Switch needs two: one for the on state and another for the off. Any ideas on how to best approach this problem? Thanks in advance, regards,
Re: Creating a type of toggle with two labels..
Thanks for the help guys! I'll follow Jonathan's advice since I want this to be a control that will be used by other developers so I don't want to have inherited public methods that don't make any sense on this control. Regards, On Wed, Dec 4, 2013 at 11:52 PM, David Grieve david.gri...@oracle.comwrote: It could be just about any type of button…with the right css styles! On Dec 4, 2013, at 5:57 PM, Leif Samuelsson leif.samuels...@oracle.com wrote: On 2013-12-04 14:54, Leif Samuelsson wrote: It seems to me that you could do this with a small class extending ToggleButton. Add a couple of String properties and use a selection listener to switch the main text value. You wouldn't need to write any skin or behavior classes, Just define the look in CSS and use -fx-label-padding to place the text on the background. Or maybe just -fx-alignment will be enough. Leif On 2013-12-04 14:05, Pedro Duque Vieira wrote: OK, sounds reasonable. Too bad about the code duplication that will need to take place. Thanks Jonathan and thanks for the link. Regards, On Wed, Dec 4, 2013 at 9:39 PM, Jonathan Giles jonathan.gi...@oracle.comwrote: It is likely significantly easier to simply roll your own control and not try to coerce ButtonBase to support two labels. For what it is worth, Paru and I talked about precisely this control at JavaOne 2012, which you can watch on YouTube here: http://www.youtube.com/watch?v=ryUTSrGGnvolist=PLKCk3OyNwIzvw-zzCMJ3xq5SgxL961IFEindex=38 -- Jonathan On 5/12/2013 10:16 a.m., Pedro Duque Vieira wrote: Hi, I'm trying to create a new control to be used by other developers. It is know as Toggle Switch. You can see this control in android: http://ankri.de/switch-button-for-android-2-3-gingerbread/ in iOS: http://iosguides.net/ios-menus-comparison/ (search for Toggle Switch) and on Windows 8: http://www.c-sharpcorner.com/UploadFile/83f858/manage-the-windows-8-sync-feature/ (below Step 2). My approach was to subclass ButtonBase which is itself a subclass of Labeled. The problem here is that Labeled only accepts one label but the Toggle Switch needs two: one for the on state and another for the off. Any ideas on how to best approach this problem? Thanks in advance, regards, -- Pedro Duque Vieira
Re: Creating a type of toggle with two labels..
Thanks Jasper..
On Thu, Dec 5, 2013 at 12:33 AM, Jasper Potts jasper.po...@oracle.comwrote:
I did a couple examples using just CSS and Checkbox control for my JavaOne
session. See below.
Hoep that helps,
Jasper
*Modena Style*
/* Slider Button Styled Checkbox */
.switch.check-box .box .mark {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-shape:
M0.288,2.742C0.48,2.195,0.756,1.716,1.115,1.308C1.476,0.9,1.918,0.58,2.442,0.348S3.555,0,4.212,0c0.664,0,1.256,0.116,1.776,0.348s0.96,0.552,1.32,0.96c0.36,0.408,0.636,0.886,0.828,1.434C8.328,3.29,8.424,3.885,8.424,4.524c0,0.624-0.096,1.206-0.288,1.746c-0.192,0.54-0.468,1.01-0.828,1.41c-0.36,0.4-0.8,0.714-1.32,0.942S4.876,8.964,4.212,8.964c-0.656,0-1.246-0.114-1.77-0.342S1.476,8.08,1.115,7.68c-0.36-0.4-0.636-0.87-0.828-1.41C0.095,5.73,0,5.148,0,4.524C0,3.885,0.095,3.29,0.288,2.742z
M2.01,5.574c0.084,0.34,0.218,0.646,0.402,0.918c0.184,0.272,0.424,0.49,0.72,0.654s0.656,0.246,1.08,0.246c0.424,0,0.784-0.082,1.08-0.246s0.536-0.382,0.72-0.654S6.33,5.914,6.414,5.574c0.084-0.34,0.126-0.69,0.126-1.05c0-0.376-0.042-0.74-0.126-1.092S6.196,2.766,6.011,2.49c-0.184-0.276-0.424-0.496-0.72-0.66s-0.656-0.246-1.08-0.246c-0.424,0-0.784,0.082-1.08,0.246s-0.536,0.384-0.72,0.66C2.228,2.766,2.094,3.08,2.01,3.432S1.884,4.148,1.884,4.524C1.884,4.884,1.926,5.234,2.01,5.574z
M11.58,0.204l3.576,5.748h0.024V0.204h1.764v8.568H15.06l-3.564-5.736h-0.024v5.736H9.708V0.204H11.58z
M28.524,2.742c0.191-0.548,0.468-1.026,0.828-1.434c0.359-0.408,0.802-0.728,1.326-0.96C31.202,0.116,31.792,0,32.448,0c0.664,0,1.256,0.116,1.776,0.348c0.52,0.232,0.96,0.552,1.319,0.96c0.36,0.408,0.637,0.886,0.828,1.434c0.192,0.548,0.288,1.142,0.288,1.782c0,0.624-0.096,1.206-0.288,1.746c-0.191,0.54-0.468,1.01-0.828,1.41c-0.359,0.4-0.8,0.714-1.319,0.942c-0.521,0.228-1.112,0.342-1.776,0.342c-0.656,0-1.246-0.114-1.77-0.342c-0.524-0.228-0.967-0.542-1.326-0.942c-0.36-0.4-0.637-0.87-0.828-1.41c-0.192-0.54-0.288-1.122-0.288-1.746C28.236,3.885,28.332,3.29,28.524,2.742z
M30.246,5.574c0.084,0.34,0.218,0.646,0.402,0.918c0.184,0.272,0.424,0.49,0.72,0.654s0.656,0.246,1.08,0.246s0.784-0.082,1.08-0.246s0.536-0.382,0.72-0.654c0.185-0.272,0.318-0.578,0.402-0.918c0.084-0.34,0.126-0.69,0.126-1.05c0-0.376-0.042-0.74-0.126-1.092s-0.218-0.666-0.402-0.942c-0.184-0.276-0.424-0.496-0.72-0.66s-0.656-0.246-1.08-0.246s-0.784,0.082-1.08,0.246s-0.536,0.384-0.72,0.66c-0.185,0.276-0.318,0.59-0.402,0.942S30.12,4.148,30.12,4.524C30.12,4.884,30.162,5.234,30.246,5.574zM43.968,0.204v1.584h-4.14v1.98h3.588v1.464h-3.588v3.54h-1.884V0.204H43.968z
M51.083,0.204v1.584h-4.14v1.98h3.588v1.464h-3.588v3.54h-1.884V0.204H51.083z;
-fx-padding: 7 38 7 38;
}
.switch.check-box .box {
-fx-padding: 10px 10px 10px 14px;
-fx-background-color:
-fx-shadow-highlight-color,
-fx-outer-border,
-fx-inner-border,
-fx-body-color,
linear-gradient(to bottom, derive(-fx-outer-border, -20%),
-fx-outer-border),
linear-gradient(to bottom, derive(-fx-color, -22%) 0%,
derive(-fx-color, -13%) 20%, derive(-fx-color, -11%) 50%);
-fx-background-insets: 0 0 -1 0, 0, 1, 2, 0 0 0 50, 1 1 1 51;
-fx-background-radius: 3px, 3px, 2px, 1px, 0 2px 2px 0, 0 1 1 0;
}
.switch.check-box:selected .box {
-fx-background-color:
-fx-shadow-highlight-color,
-fx-outer-border,
-fx-inner-border,
-fx-body-color,
linear-gradient(to bottom, derive(-fx-outer-border, -20%),
-fx-outer-border),
linear-gradient(to bottom, derive(-fx-default-button, -12%) 0%,
derive(-fx-default-button, -3%) 20%, derive(-fx-default-button, -1%) 50%);
-fx-background-insets: 0 0 -1 0, 0, 1, 2, 0 52 0 0, 1 53 1 1;
-fx-background-radius: 3px, 3px, 2px, 1px, 2px 0 0 2px, 1 0 0 1;
}
.switch.check-box:focused .box {
-fx-background-color:
-fx-focus-color,
-fx-inner-border,
-fx-body-color,
linear-gradient(to bottom, derive(-fx-outer-border, -20%),
-fx-outer-border),
linear-gradient(to bottom, derive(-fx-color, -22%) 0%,
derive(-fx-color, -13%) 20%, derive(-fx-color, -11%) 50%);
-fx-background-insets: -0.2, 1, 2, 1 1 1 50, 1 1 1 51;
-fx-background-radius: 3px, 2px, 1px, 0 2px 2px 0, 0 1 1 0;
}
.switch.check-box:focused:selected .box {
-fx-background-color:
-fx-focus-color,
-fx-inner-border,
-fx-body-color,
linear-gradient(to bottom, derive(-fx-outer-border, -20%),
-fx-outer-border),
linear-gradient(to bottom, derive(-fx-default-button, -12%) 0%,
derive(-fx-default-button, -3%) 20%, derive(-fx-default-button, -1%) 50%);
-fx-background-insets: -0.2, 1, 2, 1 52 1 1, 1 53 1 1;
-fx-background-radius: 3px, 2px, 1px, 2px 0 0 2px, 1 0 0 1;
}
*iOS 7 Style*
/***
*
*
* iOS Style Switch
*
*
*
Re: Creating a type of toggle with two labels..
My advice whenever I go to conferences or get asked this is that it only makes sense to use the full Controls API when you are planning to redistribute your control or you plan to otherwise reuse it in a number of applications internally where the style needs to be trivially customised via CSS. In other words, my advice has been much along the lines of what you said - extend Region or another layout container if you're just creating something custom in your own application. You gain nothing additional by extending Control in this case. And yes, Behavior is private API - that is a pain I know. The thing is, how behaviors are done now is just kind of smelly, and we haven't had the bandwidth to clean it up with all the other things we've had on our plate, which is why they remain private API. Also, there are differing opinions on how to progress this (personally I'm quite fond of replacing Behavior with an @Action style annotation in conjunction with input and action maps on the Control itself - which I protoyped into a patch attached to [1]). [1] https://javafx-jira.kenai.com/browse/RT-21598 -- Jonathan On 5/12/2013 3:55 p.m., John Smith wrote: In the past (JavaFX 2.2-), I've recommended very strongly against constructing custom controls because: a. For many applications it's more complicated than needed (e.g. custom controls are usually best for reusable libraries but not application code). b. The public API and documentation to define custom controls wasn't really there. For (b), On the documentation side, there is now stuff available at https://wiki.openjdk.java.net/display/OpenJFX/Controls. On the public API side there is now a more complete public API to support custom controls in Java 8. There are lots of great open source demos of how to create controls in the openjfx source base itself. Many times in application code, simple composition of existing controls via layout managers will continue to be the most appropriate way to build an application. But there are times when defining a custom control makes more sense (e.g. to take advantage of the design patterns and functionality offered by the control API or to neatly define a reusable component). I know the Behaviour API stuff is currently still private API, but if the Behaviour API is avoided, would you now advise writing custom controls in JavaFX 8? If so, would it only be when you are contributing controls to a reusable library like jfxtras or controlsfx, or would you also recommend creating custom controls for use in general application code? Thanks, John -Original Message- From: openjfx-dev-boun...@openjdk.java.net [mailto:openjfx-dev-boun...@openjdk.java.net] On Behalf Of Jonathan Giles Sent: Wednesday, December 04, 2013 5:12 PM To: Pedro Duque Vieira Cc: OpenJFX Mailing List Subject: Re: Creating a type of toggle with two labels.. It's a toss-up between minimising duplicated code or having to bend API and implementation to your will (and end up with API you don't necessarily want in the process). Very rarely would I suggest extending a control - only when the API matches perfectly with what you're doing, and then that really means all you're doing is a custom skin anyway. More often than not it makes more sense to follow the famous advice of preferring composition over inheritance, and when that fails just bite the bullet and roll your own using the base Control API (if you want a reusable and skinnable / stylable control) or Region (if you don't need to be skinnable). -- Jonathan On 5/12/2013 11:05 a.m., Pedro Duque Vieira wrote: OK, sounds reasonable. Too bad about the code duplication that will need to take place. Thanks Jonathan and thanks for the link. Regards, On Wed, Dec 4, 2013 at 9:39 PM, Jonathan Giles jonathan.gi...@oracle.com mailto:jonathan.gi...@oracle.com wrote: It is likely significantly easier to simply roll your own control and not try to coerce ButtonBase to support two labels. For what it is worth, Paru and I talked about precisely this control at JavaOne 2012, which you can watch on YouTube here: http://www.youtube.com/watch?v=ryUTSrGGnvolist=PLKCk3OyNwIzvw-zzCMJ3x q5SgxL961IFEindex=38 -- Jonathan On 5/12/2013 10:16 a.m., Pedro Duque Vieira wrote: Hi, I'm trying to create a new control to be used by other developers. It is know as Toggle Switch. You can see this control in android: http://ankri.de/switch-button-for-android-2-3-gingerbread/ in iOS: http://iosguides.net/ios-menus-comparison/ (search for Toggle Switch) and on Windows 8: http://www.c-sharpcorner.com/UploadFile/83f858/manage-the-windows-8-sync-feature/ (below Step 2). My approach was to subclass ButtonBase which is itself a subclass of Labeled. The problem here is that Labeled only accepts one
