Thanks Jasper..
On Thu, Dec 5, 2013 at 12:33 AM, Jasper Potts <jasper.po...@oracle.com>wrote:
> 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
> *
> *
> *
>
>
> ******************************************************************************/
>
> .check-box > .box,
> .check-box:focused > .box {
> -fx-background-color: #e4e4e4, white;
> -fx-background-insets: 0,1;
> -fx-background-radius: 15.5,14.5;
> -fx-padding: 1 1 2 1;
> }
> .check-box:selected > .box {
> -fx-background-color: ios-green;
> -fx-background-insets: 0;
> -fx-background-radius: 15.5;
> }
> .check-box > .box > .mark {
> -fx-background-radius: 14;
> -fx-padding: 28 49 0 0;
> -fx-background-insets: 0 21 0 0;
> -fx-background-color: white !important;
> -fx-shape: null;
> -fx-effect: dropshadow(gaussian , rgba(0, 0, 0, 0.2), 4, 0 , 0, 3);
> }
> .check-box:selected > .box > .mark {
> -fx-background-insets: 0 0 0 21;
> }
> .check-box:focused > .box > .mark {
> -fx-background-color: ios-blue, white !important;
> -fx-background-insets: 0 21 0 0, 1 22 1 1;
> }
> .check-box:focused:selected > .box > .mark {
> -fx-background-insets: 0 0 0 21, 1 1 1 22;
> }
> .check-box:indeterminate > .box {
> -fx-padding: 0;
> }
> .check-box:indeterminate > .box > .mark {
> -fx-shape: "M0,0H10V2H0Z";
> -fx-scale-shape: false;
> -fx-padding: 0.666667em; /* 16x16 = 8+8 */
> }
>
> On Dec 4, 2013, at 1:16 PM, Pedro Duque Vieira <
> pedro.duquevie...@gmail.com> 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
>
>
>
>
--
Pedro Duque Vieira
