MenuButton - Customization Question

[Sin]

Hi,

We are using SmartClient 10.0.12.27.14 and design requires us to change the MenuButton’s style and image after the user has clicked on it.

Here is what we are trying to do:



The things that changes for the MenuButton are:

1. Background color
2. Border was added
3. Button title color
4. Button image (arrow changes from white to blue)

How should we go about doing this?

Thanks,

-Sin

[Isomorphic]

For this and any other skinning goals, start first by reading the Skinning overview in the SmartClient Reference. If you get stuck, ask specific questions and show us the attempts you've made that haven't worked out as expected.

[Sin]

We have. One of the problem we are running into is that the MenuButton cycles its class from when I examine the DOM from: menuButton, menuButtonOver, menuButtonDown. Then, once you released the button, the class changes back to the default menuButton. That makes sense since the MenuButton is a subclass of Button.

Is there a 4th state, like menuButtonClicked I'm not seeing in the documentation? I know we can override the click() function of the Menu Button, attach our own style by modifying the baseStyle, but once we go down that route, I haven't found a way to revert the baseStyle back to what it was originally. Does the Menu expose an event so I can be notified once the user has dismissed the menu? Just curious.

Thanks,

-Sin

[Isomorphic]

There is currently no distinct state specifically for the menu being open. The nearest thing is the optional "Focused" state, which can be controlled by "showFocused". The menu would also enter this state if you were to tab into it, so it may or may not work for your purposes.

As far as detecting whether the menu is up and applying a style manually, the safest approach would be to listen for mouseDown, then use timers to periodically check whether the menu was still visible in order to reverse the styling you're using while the menu is up. There are a bunch of other options like overriding APIs or trying to trap focus changes, but all such approaches would rely to some degree on unspecified behaviors, so none is as reliable against future browser or framework changes as just periodically checking if the menu is still visible.

Another option is Feature Sponsorship, to have the state of the menu being open added as a distinct style suffix.

[Sin]

Thank you for your response. We sort of came to the conclusion that there may not be a built-in way to do what we are trying to do, but we just wanted to exhaust all of our options by posting this as a question in the forum before we write any custom code. We will probably end up doing what you suggested of creating a timer that monitors whether the menu is visible or not and end up applying the appropriate styling to accomplish what we need.

Again, thank you for your time.

-Sin