wiki:AUTHOR_APP_TUNING
Last modified 16 years ago Last modified on 08/25/09 12:56:37

Table of Contents

  1. Overview of SynthLookAndFeel
  2. Overview of our approach
  3. Styles for parts of the UI
  4. Screenshots of current implementation
  5. Comments for further customizations (next revision things)

Overview of SynthLookAndFeel

  • See ​http://java.sun.com/docs/books/tutorial/uiswing/lookandfeel/synth.html if you are not familiar with synth.
  • SynthLookAndFeel provides a mechanism for customizing the LookAndFeel through an XML file where everything is described.
  • Every part of Swing can be customized by providing a style for it. Example: 
    <!-- ================================= -->
<!-- BUTTON - this is a style for a button in swing.-->
<!-- ================================= -->

  <style id="buttonStyle">
    <!-- Shift the text one pixel when pressed -->
    <property key="Button.textShiftOffset" type="integer" value="1"/>
    <insets top="1" left="1" right="1" bottom="1"/>
  
    <state value="ENABLED">
      <imagePainter method="buttonBackground" path="btn_enabled.png"
                    sourceInsets="2 1 1 2"/>
    </state>
    <state value="DISABLED">
      <imagePainter method="buttonBackground" path="btn_disabled.png"
                    sourceInsets="2 1 1 2"/>
    </state>
     <state value="PRESSED">
      <imagePainter method="buttonBackground" path="btn_roll.png"
                    sourceInsets="2 1 1 2"/>
    </state>
  </style>
  <!-- Bind buttonStyle to all JButtons -->
 <bind style="buttonStyle" type="region" key="button"/>
  • Basically what we need to define is styles for every key. As you can see there are states for most UI components that need different resources, fonts etc. See the next example:

  • The different possible keys are as follows: ArrowButton, Button, CheckBox, RadioButton, ToggleButton, ComboBox, InternalFrame, InternalFrameTitlePane, InternalFrameTitlePane.closeButton, InternalFrameTitlePane.iconifyButton, InternalFrameTitlePane.maximizeButton, DesktopPane, FileChooser, List, MenuBar, Menu, MenuItem, MenuItemAccelerator, CheckBoxMenuItem, RadioButtonMenuItem, PopupMenu, PopupMenuSeparator, OptionPane, RootPane, Panel, ProgressBar, ScrollBar, ScrollBarTrack, ScrollBarThumb, ScrollPane, Viewport, Separator, Slider, SliderTrack, SliderThumb, SplitPane, SplitPaneDivider, Table, TableHeader, TabbedPane, TabbedPaneContent, TabbedPaneTab, TabbedPaneTabArea, Label, ToolTip, TextField, FormattedTextField, PasswordField, TextArea, TextPane, EditorPane, Spinner, ComboBox.listRenderer, TableHeader.renderer, ToolBar, ToolBarContent, ToolBarSeparator, ToolBarDragWindow, Tree, TreeCell and may be more ...

Overview of our approach

  • Images used to create the look and feel will be named like this "button_pressed.png" for example.
  • The XML file will be named "sophie2_lookandfeel.xml"
  • The look and feel will be named SophieLookAndFeel.
  • The skin of Sophie will be constructed of three parts:
    • The java look and feel
    • Our current skin types:
      • Images for halo icons.
      • Tool-tips
      • Titles
    • Myddoggy properties (this is not going to be described in detail here and is for later revision.)
  • A skin definition is something like: 
                    //titles and tool-tips
                "extra.annotations.annotations-tab/title : text : 4nn0t4t10n5",
		"extra.annotations.annotations-tab/tool-tip : text : 5t1ck n0t35 t0 th3 b00k, h1ghl1ght 50m3 t3xt 0r r3c0rd y0ur v01c3 c0mm3nt5",
                //icons
                "main.app.halos.frame.rotate.frame-rotation-properties-halo-button/halo-icon : icon : rotate.png",
		"main.view.halos.frame.move.main-title-bar-halo/bg-image : icon : frame_title_bar.png",
		//the look and feel for this skin...
		"javax.swing.plaf.synth/LookAndFeel : lookandfeel : SophieLookAndFeel",
    • the ids are text, icon, lookandfeel. Later we will add mydoggy-properties id.

Sophie2 Skin

Styles for parts of the UI

  • For every style we will use png images. They WILL NOT be linked for every style defined because this is a tedious task to do. Instead see resources for all images used!
  • Current look and feel definition: 
<synth>
	<!-- ================================= -->
	<!-- DEFAULTS -->
	<!-- ================================= -->
	<style id="default">
		<state>
			<font name="Arial" size="12" style="PLAIN" />
			<insets top="0" bottom="0" right="0" left="0" />
			<color value="#00000000" type="BACKGROUND" />
			<color value="#00000000" type="FOREGROUND" />
			<color value="WHITE" type="TEXT_BACKGROUND" />
			<color value="BLACK" type="TEXT_FOREGROUND" />
		</state>
		<state value="SELECTED">
			<color value="#326CB7" type="TEXT_BACKGROUND" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
		</state>
		<object class="org.sophie2.main.skin.alternative.lookandfeel.TilePainter" 
		id="TilePainter"></object>
	</style>
	<bind style="default" type="region" key=".*" />

	<!-- ================================= -->
	<!-- ARROW BUTTON -->
	<!-- ================================= -->
	<style id="arrowButtonStyle">
		<property key="ArrowButton.size" type="integer" value="14" />
		<state>
			<imagePainter method="arrowButtonForeground" path="distrib/resources/VScrollBar/up_arrow.png"
				center="true" direction="north" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/VScrollBar/down_arrow.png" center="true" direction="south" />
			<imagePainter method="arrowButtonForeground" path="distrib/resources/HScrollBar/up_arrow.png"
				center="true" direction="west" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/HScrollBar/down_arrow.png" center="true" direction="east" />
		</state>

		<state value="PRESSED">
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/VScrollBar/up_arrow_pressed.png" center="true"
				direction="north" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/VScrollBar/down_arrow_pressed.png" center="true"
				direction="south" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/HScrollBar/up_arrow_pressed.png" center="true"
				direction="west" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/HScrollBar/down_arrow_pressed.png" center="true"
				direction="east" />
		</state>

		<state value="MOUSE_OVER">
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/VScrollBar/up_arrow_over.png" center="true"
				direction="north" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/VScrollBar/down_arrow_over.png" center="true"
				direction="south" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/HScrollBar/up_arrow_over.png" center="true"
				direction="west" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/HScrollBar/down_arrow_over.png" center="true"
				direction="east" />

		</state>

		<state value="DISABLED">
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/VScrollBar/up_arrow_disabled.png" center="true"
				direction="north" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/VScrollBar/down_arrow_disabled.png" center="true"
				direction="south" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/HScrollBar/up_arrow_disabled.png" center="true"
				direction="west" />
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/HScrollBar/down_arrow_disabled.png" center="true"
				direction="east" />
		</state>
	</style>
	<bind style="arrowButtonStyle" type="region" key="ArrowButton" />

	<!-- ================================= -->
	<!-- BUTTON -->
	<!-- ================================= -->
	<style id="buttonStyle">
		<!-- Shift the text one pixel when pressed -->
		<property key="Button.textShiftOffset" type="integer" value="1" />
		<insets top="7" left="16" right="16" bottom="7" />
		<state>
			<font name="Arial" size="11" style="PLAIN" />
		</state>
		<state value="ENABLED">
			<imagePainter method="buttonBackground" path="distrib/resources/btn_enabled.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="DISABLED">
			<imagePainter method="buttonBackground" path="distrib/resources/btn_disabled.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="PRESSED">
			<imagePainter method="buttonBackground" path="distrib/resources/btn_roll.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="MOUSE_OVER">
			<imagePainter method="buttonBackground" path="distrib/resources/btn_roll.png"
				sourceInsets="2 1 1 2" />
		</state>
	</style>
	<!-- Bind buttonStyle to all JButtons -->
	<bind style="buttonStyle" type="region" key="button" />

	<!-- ================================= -->
	<!-- PREVIOUS PAGE BUTTON -->
	<!-- ================================= -->
	<style id="prevPageButtonStyle">
		<!-- Shift the text one pixel when pressed -->
		<property key="Button.textShiftOffset" type="integer" value="1" />
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<font name="Arial" size="11" style="PLAIN" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="ENABLED">
			<imageIcon id="prevPageIconEnabled"
				path="distrib/resources/DocumentSetingsPanel/previous_page.png" />
			<property key="Button.icon" value="prevPageIconEnabled" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imageIcon id="prevPageIconDisabled"
				path="distrib/resources/DocumentSetingsPanel/previous_page_disabled.png" />
			<property key="Button.icon" value="prevPageIconDisabled" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="PRESSED">
			<imageIcon id="prevPageIconPressed"
				path="distrib/resources/DocumentSetingsPanel/previous_page_pressed.png" />
			<property key="Button.icon" value="prevPageIconPressed" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="MOUSE_OVER">
			<imageIcon id="prevPageIconOver"
				path="distrib/resources/DocumentSetingsPanel/previous_page_over.png" />
			<property key="Button.icon" value="prevPageIconOver" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="prevPageButtonStyle" type="name"
		key="main.app.commons.book.panels.navigation-panel/prevButton" />

	<!-- ================================= -->
	<!-- NEXT PAGE BUTTON -->
	<!-- ================================= -->
	<style id="nextPageButtonStyle">
		<!-- Shift the text one pixel when pressed -->
		<property key="Button.textShiftOffset" type="integer" value="1" />
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<font name="Arial" size="11" style="PLAIN" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="ENABLED">
			<imageIcon id="nextPageIconEnabled"
				path="distrib/resources/DocumentSetingsPanel/next_page.png" />
			<property key="Button.icon" value="nextPageIconEnabled" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imageIcon id="nextPageIconDisabled"
				path="distrib/resources/DocumentSetingsPanel/next_page_disabled.png" />
			<property key="Button.icon" value="nextPageIconDisabled" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="PRESSED">
			<imageIcon id="nextPageIconPressed"
				path="distrib/resources/DocumentSetingsPanel/next_page_pressed.png" />
			<property key="Button.icon" value="nextPageIconPressed" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="MOUSE_OVER">
			<imageIcon id="nextPageIconOver"
				path="distrib/resources/DocumentSetingsPanel/next_page_over.png" />
			<property key="Button.icon" value="nextPageIconOver" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="nextPageButtonStyle" type="name"
		key="main.app.commons.book.panels.navigation-panel/nextButton" />

	<!-- ================================= -->
	<!-- NEXT SEARCH BUTTON -->
	<!-- ================================= -->
	<style id="nextSearchButtonStyle">
		<property key="Button.textShiftOffset" type="integer" value="1" />
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<font name="Arial" size="11" style="PLAIN" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="ENABLED">
			<imageIcon id="nextSearchIconEnabled"
				path="distrib/resources/DocumentSetingsPanel/next_search.png" />
			<property key="Button.icon" value="nextSearchIconEnabled" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imageIcon id="nextSearchIconDisabled"
				path="distrib/resources/DocumentSetingsPanel/next_search_disabled.png" />
			<property key="Button.icon" value="nextSearchIconDisabled" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="PRESSED">
			<imageIcon id="nextSearchIconPressed"
				path="distrib/resources/DocumentSetingsPanel/next_search_pressed.png" />
			<property key="Button.icon" value="nextSearchIconPressed" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="MOUSE_OVER">
			<imageIcon id="nextSearchIconOver"
				path="distrib/resources/DocumentSetingsPanel/next_search_over.png" />
			<property key="Button.icon" value="nextSearchIconOver" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="nextSearchButtonStyle" type="name"
		key="main.app.commons.book.panels.quick-search-panel/nextSearchButton" />

	<!--================================= -->
	<!-- PREVIOUS SEARCH BUTTON -->
	<!-- ================================= -->
	<style id="previousSearchButtonStyle">
		<property key="Button.textShiftOffset" type="integer" value="1" />
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<font name="Arial" size="11" style="PLAIN" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="ENABLED">
			<imageIcon id="previousSearchIconEnabled"
				path="distrib/resources/DocumentSetingsPanel/previous_search.png" />
			<property key="Button.icon" value="previousSearchIconEnabled" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imageIcon id="previousSearchIconDisabled"
				path="distrib/resources/DocumentSetingsPanel/previous_search_disabled.png" />
			<property key="Button.icon" value="previousSearchIconDisabled" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="PRESSED">
			<imageIcon id="previousSearchIconPressed"
				path="distrib/resources/DocumentSetingsPanel/previous_search_pressed.png" />
			<property key="Button.icon" value="previousSearchIconPressed" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="MOUSE_OVER">
			<imageIcon id="previousSearchIconOver"
				path="distrib/resources/DocumentSetingsPanel/previous_search_over.png" />
			<property key="Button.icon" value="previousSearchIconOver" />
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="previousSearchButtonStyle" type="name"
		key="main.app.commons.book.panels.quick-search-panel/prevSearchButton" />

	<!-- ================================= -->
	<!-- TAB BUTTON -->
	<!-- ================================= -->
	<style id="tabButtonStyle">
		<insets top="11" left="9" right="10" bottom="17" />

		<imageIcon id="bookIcon" path="distrib/resources/TabBar/icon_tab_button.png" />
		<property key="ToggleButton.icon" value="bookIcon" />

		<property key="ToggleButton.iconTextGap" type="Integer"
			value="6" />

		<state value="DEFAULT"></state>
		<state>
			<imagePainter method="toggleButtonBackground" path="distrib/resources/TabBar/tab_button.png"
				sourceInsets="15 7 19 7" />
		</state>
		<state value="DISABLED">
			<imageIcon id="bookIconDisabled"
				path="distrib/resources/TabBar/icon_tab_button_disabled.png" />
			<property key="ToggleButton.icon" value="bookIconDisabled" />

			<imagePainter method="toggleButtonBackground"
				path="distrib/resources/TabBar/tab_button_disabled.png" sourceInsets="15 7 19 7" />
			<color value="#c2c4c7" type="TEXT_FOREGROUND" />
		</state>
		<state value="PRESSED">
			<imagePainter method="toggleButtonBackground"
				path="distrib/resources/TabBar/tab_button_over.png" sourceInsets="15 7 19 7" />
		</state>
		<state value="MOUSE_OVER">
			<imagePainter method="toggleButtonBackground"
				path="distrib/resources/TabBar/tab_button_over.png" sourceInsets="15 7 19 7" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
		</state>
		<state value="SELECTED">
			<imagePainter method="toggleButtonBackground"
				path="distrib/resources/TabBar/tab_button_selected.png" sourceInsets="17 14 19 11" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
			<insets top="14" left="9" right="10" bottom="14" />
		</state>
		<state value="SELECTED AND MOUSE_OVER">
			<imagePainter method="toggleButtonBackground"
				path="distrib/resources/TabBar/tab_button_selected.png" sourceInsets="17 14 19 11" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
			<insets top="14" left="9" right="10" bottom="14" />
		</state>
		
	</style>
	<!-- Bind buttonStyle to all JButtons -->
	<bind style="tabButtonStyle" type="name" key="tabButton" />
	<bind style="tabButtonStyle" type="name" key="bookDesktopButton" />

	<style id="bookDesktopButtonStyle">
		<insets top="10" left="9" right="10" bottom="16" />
		<state value="SELECTED">
			<insets top="13" left="9" right="10" bottom="13" />
		</state>
	</style>
	<bind style="bookDesktopButtonStyle" type="name" key="bookDesktopButton" />

	<!-- ================================= -->
	<!-- ICON BUTTON -->
	<!--
		only icon is visible, no background for this type of buttons
	-->
	<!-- ================================= -->
	<style id="iconButtonStyle">
		<!-- Shift the text one pixel when pressed -->
		<property key="Button.textShiftOffset" type="integer" value="1" />
		<insets top="7" left="16" right="16" bottom="7" />
		<state value="ENABLED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="PRESSED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="FOCUSED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<!-- Bind buttonStyle to all JButtons -->
	<bind style="iconButtonStyle" type="name" key="haloButton" />


	<!-- ================================= -->
	<!-- CHECKBOX -->
	<!-- ================================= -->
	<style id="CheckBoxStyle">
		<state>
			<imageIcon id="checkBoxOff" path="distrib/resources/CheckBox/normal.png" />
			<property key="CheckBox.icon" value="checkBoxOff" />
		</state>
		<state value="MOUSE_OVER">
			<imageIcon id="checkBoxOffMouseOver" path="distrib/resources/CheckBox/rolled.png" />
			<property key="CheckBox.icon" value="checkBoxOffMouseOver" />
		</state>
		<state value="DISABLED">
			<imageIcon id="checkBoxOffDisabled" path="distrib/resources/CheckBox/disabled.png" />
			<property key="CheckBox.icon" value="checkBoxOffDisabled" />
		</state>
		<state value="PRESSED">
			<imageIcon id="checkBoxPressed" path="distrib/resources/CheckBox/pressed.png" />
			<property key="CheckBox.icon" value="checkBoxPressed" />
		</state>
		<state value="SELECTED">
			<imageIcon id="checkBoxOn" path="distrib/resources/CheckBox/selected.png" />
			<property key="CheckBox.icon" value="checkBoxOn" />
		</state>
		<state value="SELECTED AND MOUSE_OVER">
			<imageIcon id="checkBoxOnMouseOver" path="distrib/resources/CheckBox/selected_rolled.png" />
			<property key="CheckBox.icon" value="checkBoxOnMouseOver" />
		</state>
		<state value="SELECTED AND PRESSED">
			<imageIcon id="checkBoxOnPressed" path="distrib/resources/CheckBox/selected_pressed.png" />
			<property key="CheckBox.icon" value="checkBoxOnPressed" />
		</state>
		<state value="SELECTED AND DISABLED">
			<imageIcon id="checkBoxOnDisabled" path="distrib/resources/CheckBox/selected_disabled.png" />
			<property key="CheckBox.icon" value="checkBoxOnDisabled" />
		</state>
	</style>
	<bind style="CheckBoxStyle" type="region" key="CheckBox" />

	<!-- ================================= -->
	<!-- RADIO BUTTON -->
	<!-- ================================= -->
	<style id="RadioButtonStyle">
		<state>
			<imageIcon id="radioButtonOff" path="distrib/resources/RadioButton/normal.png" />
			<property key="RadioButton.icon" value="radioButtonOff" />
		</state>
		<state value="MOUSE_OVER">
			<imageIcon id="radioButtonOffMouseOver" path="distrib/resources/RadioButton/rolled.png" />
			<property key="RadioButton.icon" value="radioButtonOffMouseOver" />
		</state>
		<state value="PRESSED">
			<imageIcon id="radioButtonOffPressed" path="distrib/resources/RadioButton/pressed.png" />
			<property key="RadioButton.icon" value="radioButtonOffPressed" />
		</state>
		<state value="DISABLED">
			<imageIcon id="radioButtonOffDisabled" path="distrib/resources/RadioButton/disabled.png" />
			<property key="RadioButton.icon" value="radioButtonOffDisabled" />
		</state>

		<state value="SELECTED">
			<imageIcon id="radioButtonOn" path="distrib/resources/RadioButton/selected.png" />
			<property key="RadioButton.icon" value="radioButtonOn" />
		</state>
		<state value="SELECTED AND DISABLED">
			<imageIcon id="radioButtonOnDisabled" path="distrib/resources/RadioButton/selected_disabled.png" />
			<property key="RadioButton.icon" value="radioButtonOnDisabled" />
		</state>
		<state value="SELECTED AND MOUSE_OVER">
			<imageIcon id="radioButtonOnMouseOver" path="distrib/resources/RadioButton/selected_rolled.png" />
			<property key="RadioButton.icon" value="radioButtonOnMouseOver" />
		</state>
		<state value="SELECTED AND PRESSED">
			<imageIcon id="radioButtonOnPressed" path="distrib/resources/RadioButton/selected_pressed.png" />
			<property key="RadioButton.icon" value="radioButtonOnPressed" />
		</state>

	</style>
	<bind style="RadioButtonStyle" type="region" key="RadioButton" />


	<!-- ================================= -->
	<!--
		TOGGLE BUTTON - it uses the icons of the Button except for the states
		are differently declared.
	-->
	<!-- ================================= -->
	<style id="ToggleButtonStyle">
		<insets top="5" left="13" right="13" bottom="5" />
		<state>
			<imagePainter method="ToggleButtonBackground" path="distrib/resources/btn_enabled.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="DISABLED">
			<imagePainter method="ToggleButtonBackground" path="distrib/resources/btn_disabled.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="SELECTED">
			<imagePainter method="ToggleButtonBackground" path="distrib/resources/btn_roll.png"
				sourceInsets="2 1 1 2" />
		</state>
	</style>
	<!--
		<bind style="ToggleButtonStyle" type="region" key="ToggleButton" />
	-->

	<!--
		<style id="ColorChooser.swatchesSwatchSiStyle"> <state> <imagePainter
		method="ColorChooser.swatchesSwatchSiBackground" path="button.png"
		sourceInsets="0 0 0 0"/> </state> </style> <bind
		style="ColorChooser.swatchesSwatchSiStyle" type="region"
		key="ColorChooser.swatchesSwatchSi"/>
	-->

	<!-- ================================= -->
	<!-- ARROW BUTTON FOR COMBO BOX-->
	<!-- ================================= -->
	<style id="arrowButtonComboBoxStyle">
		<property key="ArrowButton.size" type="integer" value="19" />
		<state>
			<imagePainter method="arrowButtonForeground" path="distrib/resources/ComboBox/arrow.png"
				sourceInsets="5 2 5 5" direction="south" />
		</state>

		<state value="PRESSED">
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/ComboBox/arrow_pressed.png" sourceInsets="5 2 5 5"
				direction="south" />
		</state>

		<state value="MOUSE_OVER">
			<imagePainter method="arrowButtonForeground" path="distrib/resources/ComboBox/arrow_over.png"
				sourceInsets="5 2 5 5" direction="south" />
		</state>

		<state value="DISABLED">
			<imagePainter method="arrowButtonForeground"
				path="distrib/resources/ComboBox/arrow_disabled.png" sourceInsets="5 2 5 5"
				direction="south" />
		</state>
	</style>
	<bind style="arrowButtonComboBoxStyle" type="name" key="ComboBox.arrowButton" />

	<!-- ================================= -->
	<!-- LIST RENDERER COMBO BOX -->
	<!-- ================================= -->
	<style id="ComboBox List Renderer">
		<insets top="0" left="10" bottom="0" right="0" />
		<opaque value="true" />
		<state value="ENABLED">
			<color type="TEXT_FOREGROUND" value="#000000" />
		</state>
		<state value="SELECTED">
			<color value="#326CB7" type="BACKGROUND" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
		</state>
	</style>
	<bind style="ComboBox List Renderer" type="name" key="ComboBox.listRenderer" />

	<!-- ================================= -->
	<!-- COMBO BOX -->
	<!-- ================================= -->
	<style id="ComboBox">
		<insets top="0" left="10" bottom="0" right="0" />
		<property key="ComboBox.showPopupOnNavigation" type="boolean"
			value="true" />
		<!--
			<property key="ComboBox.rendererUseListColors" type="boolean"
			value="false"/>
		-->
		<state value="ENABLED">
			<imagePainter method="comboBoxBackground"
				path="distrib/resources/ComboBox/text_field_background.png" sourceInsets="5 5 5 5" />
		</state>
		<state value="DISABLED">
			<imagePainter method="comboBoxBackground"
				path="distrib/resources/ComboBox/text_field_background_disabled.png"
				sourceInsets="5 5 5 5" />
		</state>
	</style>
	<bind style="ComboBox" type="region" key="ComboBox" />

	<!-- ================================= -->
	<!-- SCROLLBAR -->
	<!-- ================================= -->

	<style id="ScrollBarStyle">
		<property key="ScrollBar.thumbHeight" type="integer" value="19" />
		<property key="ScrollBar.minimumThumbSize" type="dimension"
			value="19 45" />
		<state>
		</state>
	</style>
	<bind style="ScrollBarStyle" type="region" key="ScrollBar" />

	<!-- ================================= -->
	<!-- SCROLLBAR THUMB -->
	<!-- ================================= -->
	<style id="scrollBarThumbStyle">
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="distrib/resources/HScrollBar/thumb.png"
				sourceInsets="9 20 9 20" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="distrib/resources/VScrollBar/thumb.png"
				sourceInsets="20 9 20 9" />
		</state>

		<!--
			NOT VISIBLE FOR SOME REASON??? <state value="PRESSED"> <imagePainter
			method="scrollBarThumbBackground" direction="horizontal"
			path="distrib/resources/HScrollBar/thumb_pressed.png" sourceInsets="9 20 9
			20" /> <imagePainter method="scrollBarThumbBackground"
			direction="vertical" path="distrib/resources/VScrollBar/thumb_pressed.png"
			sourceInsets="20 9 20 9"/> </state>
		-->

		<state value="MOUSE_OVER">
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="distrib/resources/HScrollBar/thumb_over.png"
				sourceInsets="9 20 9 20" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="distrib/resources/VScrollBar/thumb_over.png"
				sourceInsets="20 9 20 9" />
		</state>

		<state value="DISABLED">
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="distrib/resources/HScrollBar/thumb_disabled.png"
				sourceInsets="9 20 9 20" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="distrib/resources/VScrollBar/thumb_disabled.png"
				sourceInsets="20 9 20 9" />
		</state>

	</style>

	<bind style="scrollBarThumbStyle" type="region" key="ScrollBarThumb" />

	<!-- ================================= -->
	<!-- SCROLLBAR TRACK -->
	<!-- ================================= -->
	<style id="scrollbarTrackStyle">
		<insets top="0" left="0" right="0" bottom="0" />

		<state>
			<imagePainter method="scrollBarTrackBackground" path="distrib/resources/HScrollBar/track.png"
				direction="horizontal" sourceInsets="3 20 3 20" />
			<imagePainter method="scrollBarTrackBackground" path="distrib/resources/VScrollBar/track.png"
				direction="vertical" sourceInsets="20 3 20 3" />
		</state>

		<state value="DISABLED">
			<imagePainter method="scrollBarTrackBackground"
				path="distrib/resources/HScrollBar/track_disabled.png" direction="horizontal"
				sourceInsets="3 20 3 20" />
			<imagePainter method="scrollBarTrackBackground"
				path="distrib/resources/VScrollBar/track_disabled.png" direction="vertical"
				sourceInsets="20 3 20 3" />
		</state>

	</style>
	<bind style="scrollbarTrackStyle" type="REGION" key="ScrollBarTrack" />

	<!-- ================================= -->
	<!-- INTERNAL FRAME-->
	<!-- ================================= -->
	<style id="InternalFrameStyle">
		<insets top="2" left="2" bottom="9" right="9" />
		<imageIcon id="InternalFrameIcon" path="distrib/resources/btn_window_settings.png"
			sourceInsets="0 0 0 0" />
		<property key="InternalFrame.icon" type="idref" value="InternalFrameIcon" />
		<state>
			<imagePainter method="InternalFrameBackground"
				path="distrib/resources/InternalFrame/background.png" sourceInsets="6 6 14 13" />
			<imagePainter method="internalFrameBorder"
				path="distrib/resources/InternalFrame/border.png" sourceInsets="11 10 11 10" />
		</state>
	</style>
	<bind style="InternalFrameStyle" type="region" key="InternalFrame" />

	<!-- ================================= -->
	<!-- INTERNAL FRAME TITLE PANE -->
	<!-- ================================= -->
	<style id="InternalFrameTitlePaneStyle">
		<insets top="2" left="16" bottom="3" right="0" />
		<property key="InternalFrameTitlePane.titleSpacing" type="integer"
			value="7" />
		<property key="InternalFrameTitlePane.buttonSpacing" type="integer"
			value="0" />
		<imageIcon id="InternalFrameMaximizeButtonIcon" path="distrib/resources/btn_maximize.png" />
		<property key="InternalFrameTitlePane.maximizeIcon" type="idref"
			value="InternalFrameMaximizeButtonIcon" />

		<imageIcon id="InternalFrameMinimizeButtonIcon" path="distrib/resources/btn_minimize.png" />
		<property key="InternalFrameTitlePane.minimizeIcon" type="idref"
			value="InternalFrameMinimizeButtonIcon" />

		<imageIcon id="InternalFrameIconifyButtonIcon" path="distrib/resources/btn_minimize.png" />
		<property key="InternalFrameTitlePane.iconifyIcon" type="idref"
			value="InternalFrameIconifyButtonIcon" />

		<imageIcon id="InternalFrameCloseButtonIcon" path="distrib/resources/close.png" />
		<property key="InternalFrameTitlePane.closeIcon" type="idref"
			value="InternalFrameCloseButtonIcon" />

		<state>
			<imagePainter method="internalFrameTitlePaneBackground"
				path="distrib/resources/title_bar_bg.png" sourceInsets="1 1 3 1" />
			<font name="Arial" size="11" style="BOLD" />
			<color value="#585f68" type="TEXT_FOREGROUND" />
		</state>
		<state value="SELECTED">
			<color value="#00000000" type="TEXT_BACKGROUND" />
			<font name="Arial" size="11" style="BOLD" />
			<color value="#585f68" type="TEXT_FOREGROUND" />
			<imagePainter method="internalFrameTitlePaneBackground"
				path="distrib/resources/title_bar_bg.png" sourceInsets="1 1 3 1" />
		</state>
	</style>
	<bind style="InternalFrameTitlePaneStyle" type="region"
		key="InternalFrameTitlePane" />

	<!-- ================================= -->
	<!-- INTERNAL FRAME CLOSE BUTTON -->
	<!-- ================================= -->
	<style id="InternalFrameCloseButtonStyle">
		<insets top="0" left="0" right="0" bottom="0" />
		<property key="Button.textShiftOffset" type="integer" value="0" />
		<state value="ENABLED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="PRESSED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="FOCUSED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="InternalFrameCloseButtonStyle" type="name"
		key="InternalFrameTitlePane.closeButton" />

	<!-- ================================= -->
	<!-- INTERNAL FRAME MINIMIZE BUTTON -->
	<!-- ================================= -->
	<style id="InternalFrameMinimizeButtonStyle">
		<insets top="0" left="0" right="0" bottom="0" />
		<property key="Button.textShiftOffset" type="integer" value="0" />
		<state value="ENABLED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="PRESSED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="FOCUSED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="InternalFrameMinimizeButtonStyle" type="name"
		key="InternalFrameTitlePane.iconifyButton" />

	<!-- ================================= -->
	<!-- INTERNAL FRAME MAXIMIZE BUTTON -->
	<!-- ================================= -->
	<style id="InternalFrameMaximizeButtonStyle">
		<insets top="0" left="0" right="0" bottom="0" />
		<property key="Button.textShiftOffset" type="integer" value="0" />
		<state value="ENABLED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="PRESSED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="FOCUSED">
			<imagePainter method="buttonBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="InternalFrameMaximizeButtonStyle" type="name"
		key="InternalFrameTitlePane.maximizeButton" />

	<!-- ================================= -->
	<!-- INTERNAL FRAME DESKTOP BUTTON -->
	<!--
		================================= <style
		id="InternalFrameDesktopButtonStyle"> <property
		key="Button.textShiftOffset" type="integer" value="0" /> <insets
		top="0" left="0" right="0" bottom="0" /> <state value="ENABLED">
		<imagePainter method="buttonBackground"
		path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0
		0" /> </state> <state value="DISABLED"> <imagePainter
		method="buttonBackground"
		path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0
		0" /> </state> <state value="PRESSED"> <imagePainter
		method="buttonBackground"
		path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0
		0" /> </state> <state value="FOCUSED"> <imagePainter
		method="buttonBackground"
		path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0
		0" /> </state> </style> <bind style="InternalFrameDesktopButtonStyle"
		type="name" key="InternalFrame.desktopIcon" />
	-->

	<!-- ================================= -->
	<!-- PANEL -->
	<!-- ================================= -->
	<style id="PanelStyle">
		<!--
			LEAVE THIS STYLE EMPTY. IT USES THE DEFAULT BACKGROUND WHICH IS
			EXACTLY WHAT WE NEED. Defining an image for the background breaks
			mydoggy look and feel!!!
		-->
		<state>
			<color value="#dadde1" type="BACKGROUND" />
		</state>
	</style>
	<bind style="PanelStyle" type="region" key="Panel" />

	<!-- ================================= -->
	<!-- MYDOGGY FLAPS AND TABS PANEL -->
	<!-- ================================= -->
	<style id="MydoggyFlapAndTabPanel">
		<insets top="10" left="10" right="10" bottom="10" />
		<state>
			<imageIcon id="tileImage" path="distrib/resources/app_bg.png" />
			<property key="tileImage" type="idref" value="tileImage" />
			<painter method="panelBackground" idref="TilePainter" />
			<imagePainter method="panelBorder" path="distrib/resources/flap_border.png"
				sourceInsets="25 25 25 25" />
		</state>
	</style>
	<bind style="MydoggyFlapAndTabPanel" type="name"
		key="main.layout.md-main-window/panel" />

	<!-- ================================= -->
	<!-- MYDOGGY TABS PANEL -->
	<!-- ================================= -->
	<style id="MydoggyTabPanel">
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<imagePainter method="panelBackground" path="distrib/resources/panel_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="MydoggyTabPanel" type="name"
		key="main.layout.md-compound-element/panel" />

	<!-- ================================= -->
	<!-- MYDOGGY PALETTE PANEL -->
	<!-- ================================= -->
	<style id="MydoggyPalettePanel">
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<imagePainter method="panelBackground" path="distrib/resources/panel_bg.png"
				sourceInsets="11 10 11 10" />
		</state>
	</style>
	<bind style="MydoggyPalettePanel" type="name"
		key="main.layout.md-palette/panel" />

	<!-- ================================= -->
	<!-- APP TAB BAR -->
	<!-- ================================= -->
	<style id="appTabBarPanelStyle">
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<imageIcon id="tabBarImage" path="distrib/resources/app_bg.png" />
			<property key="tileImage" type="idref" value="tabBarImage" />
			<painter method="panelBackground" idref="TilePainter" />
		</state>
	</style>
	<bind style="appTabBarPanelStyle" type="name" key="appTabBarPanel" />

	<!-- ================================= -->
	<!-- APP TAB BAR TRAILING PANEL -->
	<!-- ================================= -->
	<style id="appTabBarTrailingPanelStyle">
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<imagePainter method="panelBackground" path="distrib/resources/TabBar/tab_bar_panel_bg.png"
				sourceInsets="0 0 19 0" />
		</state>
	</style>
	<bind style="appTabBarTrailingPanelStyle" type="name" key="appTabBarTrailingPanel" />

	<!-- ================================= -->
	<!-- FRAME TITLE BAR PANEL -->
	<!-- ================================= -->
	<style id="FrameTitleBarPanel">
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<imagePainter method="panelBackground" path="distrib/resources/frame_title_bar.png"
				sourceInsets="11 10 11 10" />
		</state>
	</style>
	<bind style="FrameTitleBarPanel" type="name"
		key="main.view.halos.frame.move.main-title-bar-halo" />

	<!-- ================================= -->
	<!-- BACKGROUND GRADIENT PANEL STYLE   -->
	<!-- ================================= -->
	<style id="BgGradientPanelStyle">
		<state>
			<imagePainter method="PanelBackground" path="distrib/resources/gradient_fill.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="BgGradientPanelStyle" type="name" key="gradientField" />

	<!-- ================================= -->
	<!-- BACKGROUND COLOR PANEL STYLE   -->
	<!-- ================================= -->
	<style id="BgColorPanelStyle">
		<state>
			<imagePainter method="PanelBackground" path="distrib/resources/color_fill.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="BgColorPanelStyle" type="name" key="colorField" />

	<!-- ================================= -->
	<!-- BACKGROUND IMAGE PANEL STYLE   -->
	<!-- ================================= -->
	<style id="BgImgPanelStyle">
		<state>
			<imagePainter method="PanelBackground" path="distrib/resources/bg_image_fill.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="BgImgPanelStyle" type="name" key="bgImgField" />

	<!-- ================================= -->
	<!-- TABBEDPANE -->
	<!-- ================================= -->
	<style id="TabbedPaneStyle">

		<state>
			<color value="#dadde1" type="BACKGROUND" />
		</state>
	</style>
	<bind style="TabbedPaneStyle" type="region" key="TabbedPane" />

	<!-- ================================= -->
	<!-- TABBEDPANE TAB -->
	<!-- ================================= -->
	<style id="TabbedPaneTabStyle">
		<font name="Arial" size="13" style="PLAIN" />
		<state value="FOCUSED">
			<imagePainter method="tabbedPaneTabBackground" path="distrib/resources/tab_bar_selected.png"
				sourceInsets="0 5 0 5" paintCenter="true" stretch="true" center="false" />
		</state>
		<state value="ENABLED">
			<imagePainter method="tabbedPaneTabBackground" path="distrib/resources/tab_bar_enabled.png"
				sourceInsets="0 5 0 5" paintCenter="true" stretch="true" center="false" />
		</state>
		<state value="DISABLED">
			<imagePainter method="tabbedPaneTabBackground" path="distrib/resources/tab_bar_disabled.png"
				sourceInsets="0 5 0 5" paintCenter="true" stretch="true" center="false" />
		</state>
	</style>
	<bind style="TabbedPaneTabStyle" type="region" key="TabbedPaneTab" />

	<!-- ================================= -->
	<!-- SLIDER TRACK -->
	<!-- ================================= -->
	<style id="SliderTrackStyle">
		<imagePainter method="sliderTrackBackground" path="distrib/resources/slider_track.png"
			sourceInsets="7 7 7 7" destinationInsets="7 7 7 7" paintCenter="true"
			stretch="true" center="false" />
		<state value="DISABLED">
			<imagePainter method="sliderTrackBackground"
				path="distrib/resources/slider_track_disabled.png" sourceInsets="7 7 7 7"
				destinationInsets="7 7 7 7" paintCenter="true" stretch="true"
				center="false" />
		</state>
	</style>
	<bind style="SliderTrackStyle" type="region" key="SliderTrack" />

	<!-- ================================= -->
	<!-- SLIDER THUMB -->
	<!-- ================================= -->
	<style id="SliderThumbStyle">

		<state>
			<imagePainter method="sliderThumbBackground" direction="horizontal"
				path="distrib/resources/slider_thumb.png" center="true" />
			<imagePainter method="sliderThumbBackground" direction="vertical"
				path="distrib/resources/slider_thumb.png" center="true" />
		</state>

		<state value="PRESSED">
			<imagePainter method="sliderThumbBackground" direction="horizontal"
				path="distrib/resources/slider_thumb_pressed.png" center="true" />
			<imagePainter method="sliderThumbBackground" direction="vertical"
				path="distrib/resources/slider_thumb_pressed.png" center="true" />
		</state>

		<state value="DISABLED">
			<imagePainter method="sliderThumbBackground" direction="horizontal"
				path="distrib/resources/slider_thumb_disabled.png" center="true" />
			<imagePainter method="sliderThumbBackground" direction="vertical"
				path="distrib/resources/slider_thumb_disabled.png" center="true" />
		</state>

	</style>
	<bind style="SliderThumbStyle" type="region" key="SliderThumb" />

	<!-- ================================= -->
	<!-- ROOTPANE -->
	<!-- ================================= -->
	<style id="RootPaneStyle">
		<state>
			<color value="#dadde1" type="BACKGROUND" />
		</state>
	</style>
	<bind style="RootPaneStyle" type="region" key="RootPane" />

	<!-- ================================= -->
	<!-- TEXT FIELD -->
	<!-- ================================= -->
	<style id="TextFieldStyle">
		<insets top="5" bottom="4" right="1" left="10" />
		<state value="ENABLED">
			<imagePainter method="TextFieldBackground"
				path="distrib/resources/TextField/background.png" sourceInsets="5 5 5 5" />
			<color value="WHITE" type="TEXT_BACKGROUND" />
			<color value="BLACK" type="TEXT_FOREGROUND" />
		</state>
		<state value="FOCUSED">
			<imagePainter method="TextFieldBackground"
				path="distrib/resources/TextField/background_focused.png" sourceInsets="5 5 5 5" />
			<color value="#1899e2" type="TEXT_BACKGROUND" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
		</state>
		<state value="DISABLED">
			<imagePainter method="TextFieldBackground"
				path="distrib/resources/TextField/background_disabled.png" sourceInsets="5 5 5 5" />
			<color value="WHITE" type="TEXT_BACKGROUND" />
			<color value="GRAY" type="TEXT_FOREGROUND" />
		</state>
	</style>
	<bind style="TextFieldStyle" type="region" key="TextField" />

	<!-- ================================= -->
	<!-- TEXT FIELD COMBO BOX -->
	<!-- ================================= -->
	<style id="TextFieldComboBox">
		<opaque value="true" />
		<insets top="5" left="0" bottom="4" right="1" />
		<state value="DEFAULT">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="textFieldBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="ENABLED">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="textFieldBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="textFieldBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="SELECTED">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="textFieldBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="FOCUSED">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="textFieldBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="MOUSE_OVER">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="textFieldBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>
		<state value="DEFAULT">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="textFieldBackground"
				path="distrib/resources/HaloButtons/empty_background.png" sourceInsets="0 0 0 0" />
		</state>

	</style>
	<bind style="TextFieldComboBox" type="name" key="ComboBox.textField" />

	<!-- ================================= -->
	<!-- TEXT AREA -->
	<!-- ================================= -->
	<style id="TextAreaStyle">
		<insets top="3" bottom="3" right="3" left="3" />
		<state>
			<imagePainter method="TextAreaBackground" path="distrib/resources/TextArea/background.png"
				sourceInsets="3 3 3 3" />
		</state>
	</style>
	<bind style="TextAreaStyle" type="region" key="TextArea" />

	<!-- ================================= -->
	<!-- MENU BAR-->
	<!-- ================================= -->
	<style id="MenuBarStyle">
		<insets top="0" bottom="0" right="0" left="0" />
		<state>
			<imagePainter method="MenuBarBackground" path="distrib/resources/menu_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="MenuBarStyle" type="region" key="MenuBar" />

	<!-- ================================= -->
	<!-- MENU -->
	<!-- ================================= -->
	<style id="MenuStyle">
		<insets top="4" bottom="5" right="8" left="7" />
		<state>
			<imagePainter method="MenuBackground" path="distrib/resources/menu_bg.png"
				sourceInsets="0 0 0 0" />
			<font name="Arial" size="14" style="PLAIN" />
		</state>
		<state value="DISABLED">
			<imagePainter method="MenuBackground" path="distrib/resources/menu_bg.png"
				sourceInsets="0 0 0 0" />
			<color value="#CCCCCC" type="TEXT_FOREGROUND" />
		</state>
		<state value="SELECTED">
			<imagePainter method="MenuBackground" path="distrib/resources/menu_item_selected.png"
				sourceInsets="0 0 0 0" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
		</state>
	</style>
	<bind style="MenuStyle" type="region" key="Menu" />

	<!-- ================================= -->
	<!-- MENU ITEM-->
	<!-- ================================= -->
	<style id="MenuItemStyle">
		<insets top="3" bottom="3" right="5" left="5" />
		<state>
			<font name="Arial" size="14" style="PLAIN" />
		</state>
		<state value="MOUSE_OVER">
			<imagePainter method="MenuItemBackground" path="distrib/resources/menu_item_selected.png"
				sourceInsets="0 0 0 0" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
		</state>
		<state value="DISABLED">
			<color value="#acb2b9" type="TEXT_FOREGROUND" />
		</state>
	</style>
	<bind style="MenuItemStyle" type="region" key="MenuItem" />

	<!-- ================================= -->
	<!-- MENU ITEM ACCELERATOR-->
	<!-- ================================= -->
	<style id="MenuItemAcceleratorStyle">
		<state>
			<color value="#acb2b9" type="TEXT_FOREGROUND" />
			<font name="Arial" size="12" style="PLAIN" />
		</state>
	</style>
	<bind style="MenuItemAcceleratorStyle" type="region" key="MenuItemAccelerator" />

	<!-- ================================= -->
	<!-- POP UP MENU -->
	<!-- ================================= -->
	<style id="PopupMenuStyle">
		<insets top="0" bottom="9" right="5" left="5" />
		<state>
			<imagePainter method="PopupMenuBackground" path="distrib/resources/popup_menu_bg.png"
				sourceInsets="0 9 9 9" />
		</state>
	</style>
	<bind style="PopupMenuStyle" type="region" key="PopupMenu" />

	<!-- ================================= -->
	<!-- FORMATTED TEXT FIELD -->
	<!-- ================================= -->
	<style id="FormattedTextFieldStyle">
		<state>
			<imagePainter method="FormattedTextFieldBackground"
				path="distrib/resources/text_bg.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="FormattedTextFieldStyle" type="region" key="FormattedTextField" />

	<!-- ================================= -->
	<!-- LIST -->
	<!-- ================================= -->
	<style id="ListStyle">
		<property key="List.rendererUseListColors" type="boolean"
			value="false" />
		<state value="ENABLED">
			<color type="BACKGROUND" value="#FFFFFF" />
		</state>
		<state value="DISABLED">
			<color type="BACKGROUND" value="#EEEEEE" />
		</state>
		<state value="SELECTED">
			<color type="TEXT_FOREGROUND" value="#FFFFFF" />
			<color type="TEXT_BACKGROUND" value="#4481ca" />
		</state>
	</style>
	<bind style="ListStyle" type="region" key="List" />

	<!-- ================================= -->
	<!-- TREE -->
	<!-- ================================= -->
	<style id="TreeStyle">
		<property key="Tree.leftChildIndent" type="integer" value="5" />
		<property key="Tree.rightChildIndent" type="integer" value="5" />
		<imageIcon id="TreeCollapseIcon" path="distrib/resources/tree_cell_collapse.png" />
		<property key="Tree.collapsedIcon" type="idref" value="TreeCollapseIcon" />
		<imageIcon id="TreeExpandIcon" path="distrib/resources/tree_cell_expand.png" />
		<property key="Tree.expandedIcon" type="idref" value="TreeExpandIcon" />
		<state>
			<imagePainter method="TreeBackground" path="distrib/resources/text_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
		<state value="ENABLED">
			<color type="BACKGROUND" value="#FFFFFF" />
		</state>
		<state value="DISABLED">
			<color type="BACKGROUND" value="#EEEEEE" />
		</state>
		<state value="SELECTED">
			<color type="TEXT_FOREGROUND" value="#FFFFFF" />
			<color type="TEXT_BACKGROUND" value="#4481ca" />
		</state>
	</style>
	<bind style="TreeStyle" type="region" key="Tree" />

	<!-- ================================= -->
	<!-- SPINNER -->
	<!-- ================================= -->
	<style id="SpinnerStyle">
		<state>
			<imagePainter method="SpinnerBackground" path="distrib/resources/text_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<color value="#dadde1" type="BACKGROUND" />
		</state>
	</style>
	<bind style="SpinnerStyle" type="region" key="Spinner" />

	<!-- ================================= -->
	<!-- TOOL TIP -->
	<!-- ================================= -->
	<style id="ToolTipStyle">
		<insets top="3" bottom="6" right="6" left="3" />
		<state>
			<color value="#326CB7" type="TEXT_FOREGROUND" />
			<imagePainter method="ToolTipBackground" path="distrib/resources/ToolTip/background.png"
				sourceInsets="4 4 6 6" />
		</state>
	</style>
	<bind style="ToolTipStyle" type="region" key="ToolTip" />

</synth>
  • Icons for sophie2 skin - sophie2 icons
  • Some UI components need to be customized furthermore from the default look and feel customization provided.
    • For example the title bar of the frame should be different for every skin. This will be accomplished by providing a custom UI that replaces the custom PanelUI provided in SophieLookAndFeel. We should define custom UIs for other components as well (the Hud dialog etc).

Screenshots of current implementation

  • Sophie2 screen shots:
    • Screenshots of Sophie2 new interface:

source:branches/private/peko/sophie2-tuning/doc/screenshots/app_tuning_r3_screenshot.png

Comments for further customizations (next revision things)

  • The things that are finished are the ones that are absolutely ready and have the desired interface.
  • The things that are ready are more or less finished and need less customizations
  • Things to do next:
    • Provide more states for as much components as possible.
    • Provide font and colors of the font for not finished components.
    • Provide insets for not finished components.
    • Create a sophie painter that tiles images. This is usedful for images that have different patterns.
    • customize mydoggy (may need some design changes in the module.)