Sunday, February 12, 2012

Roll your own Synth look & feel - part 5: Menus

There's one GUI element left on our sample GUI that has no styles defined: the menu. There's nothing different about styling menus then any other component, only that it consists of several parts that need to be addressed separately:
  • menu bar and  border
  • menus borders
  • menu items and borders
  • check box menu items and borders
  • radio button menu items and borders
  • separator s
This covers all components that can be present in a menu. We also need to define Synth styles for different states of these components: default, mouse over and disabled.

The following code snippet shows Synth style for menu:

<style id="menuBarStyle">
        <opaque value="true" />
        <state>
            <color type="BACKGROUND" value="ORANGE" />
        </state>
    </style>
    <bind style="menuBarStyle" type="region" key="MenuBar" />
     <style id="menuStyle">
         <opaque value="true" />
        <state>
            <color type="BACKGROUND" value="YELLOW" />
        </state>
    </style>
    <bind style="menuStyle" type="region" key="Menu" />
    <style id="menuItemStyle">
      <opaque value="true" />
        <state>
            <color type="BACKGROUND" value="GREEN" />
            <color type="TEXT_FOREGROUND" value="BLACK" />
        </state>
         <state value="MOUSE_OVER">
            <color type="BACKGROUND" value="LIGHT_GRAY" />
            <color type="TEXT_FOREGROUND" value="WHITE" />
        </state>
    </style>
    <bind style="menuItemStyle" type="region" key="MenuItem" />
Here, I defined styles for menu bar, menus and menu items. All the rest is pretty straight forward, so there's no point in repeating the rest of the steps. I didn't define styles for borders, so this menu will be very ugly, but....
It's a common mistake (at least for me) to forget opaque tag. In case you're wondering why your style does not show up when you apply, this is the first hing to check.
The result windoe screenshot is shown bellow:
Test window with Synth style applied to menu
That's about all I can think of regarding menus. Hope somebody will find this post useful. Here you will find link to previous articles in this series.

3 comments: