Advanced AppLab Features

applab
cspunit5

#25

Is there a way to disable a button in App Lab?


#26

I think there is no easy way to do this. You would have to do it manually by using global boolean variables. Here is an example: https://studio.code.org/projects/applab/luJm5Us4dXdmGPYWvq3yOA

Here is a picture:


#27

yeah,

disabling a button is an html feature and you can’t really control that from app lab (v. css which you often can).

A clever (hacky) way to get the behavior you want without variables is to show/hide a label (with no text) that sits over the button. When the label is showing the button cannot be clicked. When it’s hidden you can.

Here’s an example where I made the labels red so you could see them.

Make the labels white and/or semi-transparent, boom, disabled button.

An option to consider. Cheers,

Baker


#28

Thanks for the ideas. Hoping there was a hidden option…but ideas are great work arounds!

Thanks.
Andrew


#29

You can hide / show things. But “disable” usually implies visible but not working.

If all you want is hide/show then just use setProperty("id","hidden",true) or use false to show it.

There are also showElement("id") and hideElement("id") commands you can use.


#30

There’s one more solution using the CSS pointer-events property and the setStyle() command. To disable a button using CSS, just set the style of the button like so:

setStyle("button", "pointer-events: none");

and then re-eneable with:

setStyle("button", "pointer-events: auto");

Here’s a quick demo that adds changing the button color for better visual cuing.


#31

Hi Josh…that is exactly what I’m looking for! Thanks.

Regards,
Andrew