Loving the new Switch Control, but …

Loving the new Switch Control, but …

WebDev v24 introduced a new switch control, which is far more attractive than a plain checkbox. I have been using a Jquery control called SwitchButton to get something similar in my interfaces for a few years now. This week, we did a lot of work on one of the sites that use that Jquery library and I figured it was a good time to replace it with a native control, which eliminated a lot of extra Jquery code and simplified the site. But I did run into one issue…

So first a quick look at what the switch control looks like

2019-07-19 16_50_19-Wayk Now - 10.0.0.12

You actually have a lot of control over the look of the control, including text inside the control or outside, Text for both options shown, or just text for the selected option shown, and of course the standard array of WebDev and CSS styling options. What you are looking at is both text options shown inside the control.

So now on to the issue…

A checkbox control is treated as a boolean, and I have a habit of writing code like this:

IF ckMyControl THEN
    Do This
ELSE
    DO That
END

If the checkbox is on then it will “Do This” if it is off then it will “Do That”

The new Switch allows you to enter the value that is returned for On and Off

2019-07-19 17_03_37-Wayk Now - 10.0.0.12

The issue is to support allowing custom return values, the switch control is treated like a string instead of a boolean. You might think it wouldn’t be an issue because WebDev will treat 1 and 0 the same as True and False. And it does in server code, however, in browser code, there is a difference. In JavaScript, remember at the end of the day your WebDev browser code gets converted to JavaScript code, True is a 1, but false is a -1. WebDev must be doing something behind the scenes to resolve this difference for checkboxes, but not switches since they can return other values.

To see the difference, I created a checkbox control with the following code in it

2019-07-19 17_19_19-Wayk Now - 10.0.0.12

And this is the trace it produced

2019-07-19 17_18_17-Wayk Now - 10.0.0.12

I create a switch with the same code

2019-07-19 17_32_10-Wayk Now - 10.0.0.12

And we see that the trace, does not give the desired results, it thinks it true for both conditions

2019-07-19 17_27_05-Wayk Now - 10.0.0.12

In case you wondering, I changed the return value to a -1 and it still does not work as desired, reinforcing my theory that it is treating it as a string.

This is an easy enough fix, we just have to test for = 1 instead of treating it as a boolean and we get the correct result in our trace.

2019-07-19 17_40_09-Wayk Now - 10.0.0.12.png

Note you can also code it as = True, because at that point you are doing a comparison and both sides are treated the same, you just can’t use the shorthand boolean version

2019-07-19 17_47_59-Wayk Now - 10.0.0.12

At the end of the day, the fix is very easy, once you know about it, but if you have any browser code written with shorthand boolean testing, you need to adjust it when refactoring to a Switch control, or you can end up with some unintended consequences. Ask me how I know 🙂

 

 

 

 

2 thoughts on “Loving the new Switch Control, but …

  1. Thanks Pete, you are always on time

    El vie., 19 jul. 2019 a las 16:49, wxBlog – All things wx – Covering pcSoft products (WinDev, WebDev, WinDev Mobile) () escribió:

    > Pete Halsted posted: “WebDev v24 introduced a new switch control, which is > far more attractive than a plain checkbox. I have been using a Jquery > control called SwitchButton to get something similar in my interfaces for a > few years now. This week, we did a lot of work on one of” >

    Like

  2. Thanks for this, Pete. I am restarting working in Webdev with a project from Ver18. Just one more thing to keep in mind.

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s