Gray out or set dimmed a disabled widget

1

Hi,

Is there a way to reflect the state setEnabled(true/false) on a Widget ?

I mean is there a way to gray out the widget when disabled ?

Thank you.

Charles.

2

Hi @cgorand,

You can surely change the rendering of your widget depending on its state. You will need to use what is called a stylesheet [1]. The notion is very similar to CSS.

You have a specific implementation of ej.style.Selector [2] called ej.style.selector.StateSelector [3] that allows you to apply a different style depending on the widget state, combined it with ej.style.State.Enabled or ej.style.State.Disabled [4] and you have everything you need.

Hope it’ll help.

Gaëtan

[1] https://developer.microej.com/javadoc/microej_4.1/addons/ej/style/Stylesheet.html
[2] https://developer.microej.com/javadoc/microej_4.1/addons/ej/style/Selector.html
[3] https://developer.microej.com/javadoc/microej_4.1/addons/ej/style/selector/StateSelector.html
[4] https://developer.microej.com/javadoc/microej_4.1/addons/ej/style/State.html

3

Hi @cgorand,

In addition of what @gaetan.harel told you you can find a really similar example here https://forum01.microej.com/t/button-with-image-and-text/. On the last section of code “StylesheetPopulator.java”, you can find an example with a dynamic style when the state is Active, it can be changed for the state Disabled.

Pierre

4

Hi,

Thank you for answers, I know style sheet. My question is “Is there a way to gray out” an Image without having to use another image ?
Ex :
enabled_disabled

Or in other word, is there a way to apply a filter on an Image (depending on Selected Style) ?

Thank you.

5

If your image is only using one color, you can use an alpha image colorized at runtime.

In the [prefix].images.list, you can set the type to be Alpha:

my/path/to/button.png:A8

The button.png should be a grayscale version of your image.

I’ve extracted this image from your example,
button

Then when you instantiate the image background, you can specify:

  • That it does not fill the rectangle (new SimpleImageBackground(image, GraphicsContext.HCENTER | GraphicsContext.VCENTER, false))
  • The color wanted: setBackgroundColor(Color)

This will result in your StylesheetPopulator.java:

public class StylesheetPopulator {
    ...
    private static final int BLUE_BACKGROUND = 0x306D93; // extracted from example
    private static final int DISABLED_BACKGROUND = Colors.BLACK;
    ...
    // Set the style of my text button with an image background
    style.clear();
    style.setForegroundColor(Colors.BLACK);
    style.setBackgroundColor(BLUE_BACKGROUND);
    ej.microui.display.Image image = ej.microui.display.Image.createImage(Images.BUTTON);
    style.setBackground(new SimpleImageBackground(image, GraphicsContext.HCENTER | GraphicsContext.VCENTER, false));
    style.setDimension(new FixedDimension(image.getWidth(), image.getHeight()));
    style.setAlignment(GraphicsContext.HCENTER | GraphicsContext.VCENTER);
    style.setTextManager(new SimpleTextManager());
    Selector loginButtonSelector = new ClassSelector("MySelector");
    stylesheet.addRule(loginButtonSelector, style);
    
    // Change the background image of my button when it is disabled
    style.setBackgroundColor(DISABLED_BACKGROUND);
    stylesheet.addRule(new AndCombinator(loginButtonSelector, new StateSelector(State.Disabled)), style);
    ...
}

This will make a slight change on your image as you’re using two colors (blue and black) on your current image result

6

Thank you.

Nice trick !!! :wink: