Setting text style of disabled controls
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
Setting text style of disabled controls
There are different states already built into LiveCode controls such as buttons.
1. Normal state (inactive, without focus, but not disabled)
2. Mouse over (mouseEnter, mouseWithin)
3. Mousedown (on mouseDown)
4. Disabled (the disabled of control xy)
I would like to override the built-in styles for such states. This seems to be only partially possible through scripting and detecting the current state of the control, whether focused, active, etc. or upon messages that are sent.
Now, I want to change the default behavior of a button which is disabled. I did not find any way through scripting or other ways to change, for example, the text color or text style of disabled buttons. The text color is always grey on a white background and 3D raised.
A workaround, such as covering the disabled button/control with some graphics when the button/control is disabled, is not a good solution since again, the label must still be visible, and the only way to show text as intended is using a field or button on top of the disabled button which is then not disabled. It is not a preferred solution.
Maybe someone made a style guide for controls for each of the states and the associated settings which are there by default, and how they could be set using built-in properties? So far, I could not find.
Actually, I would like to build a library of themes and styles which include the settings for states for each theme and style including style names. Controls would then have a style property, and the theme could be changed to also change all the styles for each control. Maybe also this already exists?
Any suggestions? And thank you in advance. I just hope that others do have similar questions.
Golife
1. Normal state (inactive, without focus, but not disabled)
2. Mouse over (mouseEnter, mouseWithin)
3. Mousedown (on mouseDown)
4. Disabled (the disabled of control xy)
I would like to override the built-in styles for such states. This seems to be only partially possible through scripting and detecting the current state of the control, whether focused, active, etc. or upon messages that are sent.
Now, I want to change the default behavior of a button which is disabled. I did not find any way through scripting or other ways to change, for example, the text color or text style of disabled buttons. The text color is always grey on a white background and 3D raised.
A workaround, such as covering the disabled button/control with some graphics when the button/control is disabled, is not a good solution since again, the label must still be visible, and the only way to show text as intended is using a field or button on top of the disabled button which is then not disabled. It is not a preferred solution.
Maybe someone made a style guide for controls for each of the states and the associated settings which are there by default, and how they could be set using built-in properties? So far, I could not find.
Actually, I would like to build a library of themes and styles which include the settings for states for each theme and style including style names. Controls would then have a style property, and the theme could be changed to also change all the styles for each control. Maybe also this already exists?
Any suggestions? And thank you in advance. I just hope that others do have similar questions.
Golife
-
- VIP Livecode Opensource Backer
- Posts: 2718
- Joined: Sat Dec 22, 2007 5:35 pm
- Location: Genève
- Contact:
Re: Setting text style of disabled controls
Hi Golife,
What about using a group ?
One btn or field to back with a grc blendlevel 30 visble for disable state in front and invisible for enable state ?
Best regards
Jean-Marc
What about using a group ?
One btn or field to back with a grc blendlevel 30 visble for disable state in front and invisible for enable state ?
Best regards
Jean-Marc
https://alternatic.ch
-
- VIP Livecode Opensource Backer
- Posts: 9802
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Setting text style of disabled controls
What will be the benefit to the user in breaking from well established conventions for the appearance of disabled controls?
Once we know the goal we'll be better able to find a good solution to support it.
Once we know the goal we'll be better able to find a good solution to support it.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Setting text style of disabled controls
Those two choices are not the only ways to go about using a graphic to cover a button. For instance, with nothing more than the button and graphic, you can show the name of the graphic itself, with no label on the button. and simply align the graphic over the button ... You can then manipulate the graphic's name in any number of ways by whatever measure you need. Probably the simplest would be (the id below is whatever id your graphic is)...golife wrote: ↑Thu May 24, 2018 4:55 pmA workaround, such as covering the disabled button/control with some graphics when the button/control is disabled, is not a good solution since again, the label must still be visible, and the only way to show text as intended is using a field or button on top of the disabled button which is then not disabled. It is not a preferred solution.
Code: Select all
set the name of graphic id 1005 to "Disabled"
Just some food for thought.
Re: Setting text style of disabled controls
Hi Richard, to the contrary, I want to use styles that are part of other style guides and are established as well. I almost never use the default style of LiveCode. Sometimes, it makes also sense breaking a style. That should be possible as well - in other words, developers should be enabled to customize whatever if the desire arises. But yes, first we must learn established rules before breaking them. )FourthWorld wrote: ↑Thu May 24, 2018 6:21 pmWhat will be the benefit to the user in breaking from well established conventions for the appearance of disabled controls?
Once we iknow the goal we'll be better able to find a good solution to support it.
Re: Setting text style of disabled controls
I must admit, it never occured to me that I can show graphic names. Much easier workaround. I completely missed that. Thank you.
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Setting text style of disabled controls
You can script this:golife wrote: ↑Thu May 24, 2018 4:55 pmNow, I want to change the default behavior of a button which is disabled. I did not find any way through scripting or other ways to change, for example, the text color or text style of disabled buttons. The text color is always grey on a white background and 3D raised.
Code: Select all
on btnEnable pBool
if pBool = false then
set the backcolor of me to "gray70"
set the textcolor of me to "white"
set the threeD of me to false
set the showborder of me to false
set the enabled of me to false
else
set the backcolor of me to "white"
set the textcolor of me to "green"
set the threeD of me to true
set the showborder of me to true
set the enabled of me to true
end if
end btnEnable
To enable or disable the button, send "btnEnable <true|false>" to the button. The easiest way to use this handler is to set it as a behavior of the buttons that need to respond.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: Setting text style of disabled controls
Jacqueline wrote:
Looking through most of the text properties, what remains unchangeable is the textcolor.
So, in this case, and if strongly needed, I would then overlay the button with a graphic and set its name to what I want.
But generally, I very much prefer to not have to put up more than one control to have controls appear as they should for different states. We must desire another layer of detailed properties for standard objects such as fields, buttons, etc.
Thanks to all for thinking and suggesting solutions.
I tried your handler script snippet, Jacqueline, setting the properties. As before, the textcolor is not affected when the enabled of the button is false. I am using built-in text fonts in LiveCode 9 on Windows 10.You can set any other properties you want as well. Note that to change textstyles, the font must support a built-in font of the desired style. If there is no "Arial Bold.ttf" installed, setting the textstyle to "bold" won't do anything. LC stopped supporting artificial styling some time ago.
Looking through most of the text properties, what remains unchangeable is the textcolor.
So, in this case, and if strongly needed, I would then overlay the button with a graphic and set its name to what I want.
But generally, I very much prefer to not have to put up more than one control to have controls appear as they should for different states. We must desire another layer of detailed properties for standard objects such as fields, buttons, etc.
Thanks to all for thinking and suggesting solutions.
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Setting text style of disabled controls
That's odd, the textcolor changes here on my Mac. What type of button are you using?
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 9802
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Setting text style of disabled controls
I'm not a big fan of rules pe we (I cut my teeth during the punk years), but I am a big fan of usability, where consistency can play a big role in predictability.golife wrote: ↑Fri May 25, 2018 8:26 pmHi Richard, to the contrary, I want to use styles that are part of other style guides and are established as well. I almost never use the default style of LiveCode. Sometimes, it makes also sense breaking a style. That should be possible as well - in other words, developers should be enabled to customize whatever if the desire arises. But yes, first we must learn established rules before breaking them. )FourthWorld wrote: ↑Thu May 24, 2018 6:21 pmWhat will be the benefit to the user in breaking from well established conventions for the appearance of disabled controls?
Once we iknow the goal we'll be better able to find a good solution to support it.
Font, size, etc are all easily changeable while maintaining behaviors that are consistent with everything else the user encounters.
What guidelines recommend new behaviors for disabled controls, and how was research done to establish user benefit?
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
-
- VIP Livecode Opensource Backer
- Posts: 7215
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Setting text style of disabled controls
@Richard, custom skins are common, games do it all the time. I agree with you that consistency is important if the app uses OS-standard controls though.
If my example handler isn't working on Windows the OP might consider custom icons instead. Those can be anything.
If my example handler isn't working on Windows the OP might consider custom icons instead. Those can be anything.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 9802
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Setting text style of disabled controls
Agreed, it can be. I'm just trying to learn what the desired behavior is and how it scored in user testing.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Setting text style of disabled controls
I agree it is far preferable to use one control instead of overlaying, so when I am trying for a unique look, I just use the graphic instead of the button, it is easy to simulate the necessary button like qualities in the graphic, a few lines of code at most.
Re: Setting text style of disabled controls
Hi Richard, thank you for answering and raising the question to me. Well, it is simply a matter of choice whether a disabled button just has a grey text without any 3D effect, or not, or maybe has a light bluish or reddish grey when going into details of design. It will still "appear" to be disabled within the context of the theme used.
A link I will give as just one example:
https://material.io/design/components/b ... ext-button
Actually, there are 5 states for buttons defined in Material Design.
I am trying to achieve defining themes for applications made with LiveCode where individual components (groups, fields, buttons, images, etc.) follow such design and behavior guidelines while on the level of controls each control has a style property which could easily be redefined in the context of themes. Changing the theme would change the appearance and (eventually) behaviors.
Following, for example, Material Design I started working on field groups consisting of the field itself, behavior according to a domain (text, number, date, etc.) and with leading and trailing icons or images, indicator, label, helper text etc. It is more work once but also achieves a great user experience.
https://material.io/design/components/t ... ml#anatomy
Depending on whether users are working on desktop or mobile or reduce the windows size (responsive design), and to achieve good and pleasant user interfaces no matter the size of the monitor, such components would behave consistently and adapt even almost automatically. The work does not have to be done again and again.
My goal would be a design that automatically adapts -- I know that this is impossible -- has the same behavior for all similar components, can change a theme "on the fly" and builds on a UX that other designers and developers have created elsewhere spending thousands of hours and offer this work for free. Then any new application would already inherit such design and behavior and the biggest part of work is already done.
I am just a lazy guy ). That is why ). And I love good design.
A link I will give as just one example:
https://material.io/design/components/b ... ext-button
Actually, there are 5 states for buttons defined in Material Design.
- Hover (mouseEnter)
- Pressed (mouseDown)
- Enabled (general state)
- Focused
- Disabled (as discussed)
I am trying to achieve defining themes for applications made with LiveCode where individual components (groups, fields, buttons, images, etc.) follow such design and behavior guidelines while on the level of controls each control has a style property which could easily be redefined in the context of themes. Changing the theme would change the appearance and (eventually) behaviors.
Following, for example, Material Design I started working on field groups consisting of the field itself, behavior according to a domain (text, number, date, etc.) and with leading and trailing icons or images, indicator, label, helper text etc. It is more work once but also achieves a great user experience.
https://material.io/design/components/t ... ml#anatomy
Depending on whether users are working on desktop or mobile or reduce the windows size (responsive design), and to achieve good and pleasant user interfaces no matter the size of the monitor, such components would behave consistently and adapt even almost automatically. The work does not have to be done again and again.
My goal would be a design that automatically adapts -- I know that this is impossible -- has the same behavior for all similar components, can change a theme "on the fly" and builds on a UX that other designers and developers have created elsewhere spending thousands of hours and offer this work for free. Then any new application would already inherit such design and behavior and the biggest part of work is already done.
I am just a lazy guy ). That is why ). And I love good design.