wiki:AUTHOR_APP_TUNING

Version 22 (modified by peko, 16 years ago) (diff)

--

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)

Sophie2 Skin

Overview of SynthLookAndFeel

  • 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 icons. What is more there are addition attributes for a component called properties. See the next example: 
    	<style id="InternalFrameTitlePaneStyle">
		<property key="InternalFrameTitlePane.titleSpacing" type="integer" value="25"/>
		
		<property key="InternalFrameTitlePane.maxFrameIconSize" type="dimension" value="24 24"/>
		<imageIcon id="InternalFrameMaximizeButtonIcon" path="btn_close_roll.png"/>
		<property key="InternalFrameTitlePane.maximizeIcon" type="idref" value="InternalFrameMaximizeButtonIcon"/>
		
		<imageIcon id="InternalFrame_CloseButton_Icon" path="btn_close_roll.png"/>
		<property key="InternalFrameTitlePane.closeIcon" type="idref" value="InternalFrame_CloseButton_Icon"/>
		
		<imageIcon id="InternalFrame_RestoreButton_Icon" path="resource/1204295742281_internal_frame_restore_icon.png"/>
		<property key="InternalFrameTitlePane.minimizeIcon" type="idref" value="InternalFrame_RestoreButton_Icon"/>
		
		<imageIcon id="InternalFrame_MinimizeButton_Icon" path="resource/1204296642906_internal_frame_min_icon.png"/>
		<property key="InternalFrameTitlePane.iconifyIcon" type="idref" value="InternalFrame_MinimizeButton_Icon"/>
		<state>
			<imagePainter method="InternalFrameTitlePaneBackground" path="title_bar_bg.png" sourceInsets="0 0 0 0"/>
		</state>
	</style>
	<bind style="InternalFrameTitlePaneStyle" type="region" key="InternalFrameTitlePane"/>
  • Basically what we need to do is define styles for as much keys as possible. Of course not every part should be customized but it will look nicer if we do so.

  • 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.xml"

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!
  • Default - this is used where no other style is defined: 
    	<!-- ================================= -->
	<!-- DEFAULTS -->
	<!-- ================================= -->
	<style id="default">
		<state>
			<font name="Arial" size="12" style="PLAIN" />
			<insets top="0" bottom="0" right="0" left="0" />
			<color value="WHITE" type="BACKGROUND" />
			<color value="BLACK" type="FOREGROUND" />
			<color value="WHITE" type="TEXT_BACKGROUND" />
			<color value="BLACK" type="TEXT_FOREGROUND" />
		</state>
	</style>
	<bind style="default" type="region" key=".*" />
  • ArrowButton - finished! 
	<!-- ================================= -->
	<!-- ARROW BUTTON -->
	<!-- ================================= -->
	<style id="arrowButtonStyle">

		<state>
			<imagePainter method="arrowButtonForeground" path="resources/sbv_up_arrow_normal.png"
				center="true" direction="north" />
			<imagePainter method="arrowButtonForeground"
				path="resources/sbv_down_arrow_normal.png" center="true" direction="south" />
			<imagePainter method="arrowButtonForeground" path="resources/sbh_up_arrow_normal.png"
				center="true" direction="west" />
			<imagePainter method="arrowButtonForeground"
				path="resources/sbh_down_arrow_normal.png" center="true" direction="east" />
		</state>

		<state value="PRESSED">
			<imagePainter method="arrowButtonForeground" path="resources/sbv_up_arrow_down.png"
				center="true" direction="north" />
			<imagePainter method="arrowButtonForeground" path="resources/sbv_down_arrow_down.png"
				center="true" direction="south" />
			<imagePainter method="arrowButtonForeground" path="resources/sbh_up_arrow_down.png"
				center="true" direction="west" />
			<imagePainter method="arrowButtonForeground" path="resources/sbh_down_arrow_down.png"
				center="true" direction="east" />
		</state>

		<state value="MOUSE_OVER">

			<imagePainter method="arrowButtonForeground" path="resources/sbv_up_arrow_over.png"
				center="true" direction="north" />

			<imagePainter method="arrowButtonForeground" path="resources/sbv_down_arrow_over.png"
				center="true" direction="south" />

			<imagePainter method="arrowButtonForeground" path="resources/sbh_up_arrow_over.png"
				center="true" direction="west" />

			<imagePainter method="arrowButtonForeground" path="resources/sbh_down_arrow_over.png"
				center="true" direction="east" />

		</state>

		<state value="DISABLED">

			<imagePainter method="arrowButtonForeground"
				path="resources/sbv_up_arrow_disabled.png" center="true" direction="north" />

			<imagePainter method="arrowButtonForeground"
				path="resources/sbv_down_arrow_disabled.png" center="true"
				direction="south" />

			<imagePainter method="arrowButtonForeground"
				path="resources/sbh_up_arrow_disabled.png" center="true" direction="west" />

			<imagePainter method="arrowButtonForeground"
				path="resources/sbh_down_arrow_disabled.png" center="true"
				direction="east" />
		</state>
	</style>
	<bind style="arrowButtonStyle" type="region" key="ArrowButton" />

  • Button - ready (may change the resources used for the buttons) 
 	<!-- ================================= -->
	<!-- 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 value="ENABLED">
			<imagePainter method="buttonBackground" path="resources/btn_enabled.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="DISABLED">
			<imagePainter method="buttonBackground" path="resources/btn_disabled.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="PRESSED">
			<imagePainter method="buttonBackground" path="resources/btn_roll.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="FOCUSED">
			<imagePainter method="buttonBackground" path="resources/btn_roll.png"
				sourceInsets="2 1 1 2" />
		</state>
	</style>
	<!-- Bind buttonStyle to all JButtons -->
	<bind style="buttonStyle" type="region" key="button" />
  • CheckBox - ready (provided by dido) 
	<!-- ================================= -->
	<!-- CHECKBOX -->
	<!-- ================================= -->
	<style id="CheckBoxStyle">
		<imagePainter method="CheckBoxBackground" path="panel_bg.png"
			sourceInsets="0 0 0 0" />
		<state>
			<imageIcon id="checkBoxOff" path="resources/cb.png" />
			<property key="CheckBox.icon" value="checkBoxOff" />
		</state>
		<state value="MOUSE_OVER">
			<imageIcon id="checkBoxOffMouseOver" path="resources/cb_rolled.png" />
			<property key="CheckBox.icon" value="checkBoxOffMouseOver" />
		</state>
		<state value="DISABLED">
			<imageIcon id="checkBoxOffDisabled" path="resources/cb_disabled.png" />
			<property key="CheckBox.icon" value="checkBoxOffDisabled" />
		</state>
		<state value="PRESSED">
			<imageIcon id="checkBoxPressed" path="resources/cb_pressed.png" />
			<property key="CheckBox.icon" value="checkBoxPressed" />
		</state>
		<state value="SELECTED">
			<imageIcon id="checkBoxOn" path="resources/cb_selected.png" />
			<property key="CheckBox.icon" value="checkBoxOn" />
		</state>
		<state value="SELECTED AND MOUSE_OVER">
			<imageIcon id="checkBoxOnMouseOver" path="resources/cb_selected_rolled.png" />
			<property key="CheckBox.icon" value="checkBoxOnMouseOver" />
		</state>
		<state value="SELECTED AND PRESSED">
			<imageIcon id="checkBoxOnPressed" path="resources/cb_selected_pressed.png" />
			<property key="CheckBox.icon" value="checkBoxOnPressed" />
		</state>
		<state value="SELECTED AND DISABLED">
			<imageIcon id="checkBoxOnDisabled" path="resources/cb_selected_disabled.png" />
			<property key="CheckBox.icon" value="checkBoxOnDisabled" />
		</state>
	</style>
	<bind style="CheckBoxStyle" type="region" key="CheckBox" />
  • RadioButton - ready (provided by dido) 
	<!-- ================================= -->
	<!-- RADIO BUTTON -->
	<!-- ================================= -->
	<style id="RadioButtonStyle">
		<imagePainter method="RadioButtonBackground" path="panel_bg.png"
			sourceInsets="0 0 0 0" />
		<state>
			<imageIcon id="radioButtonOff" path="resources/rb.png" />
			<property key="RadioButton.icon" value="radioButtonOff" />
		</state>
		<state value="MOUSE_OVER">
			<imageIcon id="radioButtonOffMouseOver" path="resources/rb_rolled.png" />
			<property key="RadioButton.icon" value="radioButtonOffMouseOver" />
		</state>
		<state value="PRESSED">
			<imageIcon id="radioButtonOffPressed" path="resources/rb_pressed.png" />
			<property key="RadioButton.icon" value="radioButtonOffPressed" />
		</state>
		<state value="DISABLED">
			<imageIcon id="radioButtonOffDisabled" path="resources/rb_disabled.png" />
			<property key="RadioButton.icon" value="radioButtonOffDisabled" />
		</state>

		<state value="SELECTED">
			<imageIcon id="radioButtonOn" path="resources/rb_selected.png" />
			<property key="RadioButton.icon" value="radioButtonOn" />
		</state>
		<state value="SELECTED AND DISABLED">
			<imageIcon id="radioButtonOnDisabled" path="resources/rb_selected_disabled.png" />
			<property key="RadioButton.icon" value="radioButtonOnDisabled" />
		</state>
		<state value="SELECTED AND MOUSE_OVER">
			<imageIcon id="radioButtonOnMouseOver" path="resources/rb_selected_rolled.png" />
			<property key="RadioButton.icon" value="radioButtonOnMouseOver" />
		</state>
		<state value="SELECTED AND PRESSED">
			<imageIcon id="radioButtonOnPressed" path="resources/rb_selected_pressed.png" />
			<property key="RadioButton.icon" value="radioButtonOnPressed" />
		</state>

	</style>
	<bind style="RadioButtonStyle" type="region" key="RadioButton" />
  • ToggleButton - ready (may change the resources - it now uses the buttons images) 
            <!-- ================================= -->
	<!--
		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="resources/btn_enabled.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="DISABLED">
			<imagePainter method="ToggleButtonBackground" path="resources/btn_disabled.png"
				sourceInsets="2 1 1 2" />
		</state>
		<state value="SELECTED">
			<imagePainter method="ToggleButtonBackground" path="resources/btn_roll.png"
				sourceInsets="2 1 1 2" />
		</state>
	</style>
	<bind style="ToggleButtonStyle" type="region" key="ToggleButton" />
  • ComboBox - needs selected state customization. 
    	<!-- ================================= -->
	<!-- COMBO BOX -->
	<!-- ================================= -->
	<style id="ComboBox">
		<insets top="0" left="0" bottom="0" right="0" />
		<property key="ComboBox.showPopupOnNavigation" type="boolean"
			value="true" />
		<state value="ENABLED">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="comboBoxBorder" path="resources/text_bg.png"
				sourceInsets="3 3 3 3" paintCenter="true" stretch="true" center="false" />
		</state>
		<state value="DISABLED">
			<font name="Arial" size="11" style="PLAIN" />
			<color value="#272a2e" type="TEXT_FOREGROUND" />
			<imagePainter method="comboBoxBorder" path="resources/panel_bg.png"
				sourceInsets="3 3 3 3" paintCenter="true" stretch="true" center="false" />
		</state>
	</style>
	<bind style="ComboBox" type="region" key="ComboBox" />
  • InternalFrame 
    	<!-- ================================= -->
	<!-- INTERNAL FRAME-->
	<!-- ================================= -->
	<style id="InternalFrameStyle">
		<imageIcon id="InternalFrameIcon" path="resources/btn_window_settings.png"
			sourceInsets="0 0 0 0" />
		<property key="InternalFrame.icon" type="idref" value="InternalFrameIcon" />
		<state>
			<imagePainter method="InternalFrameBackground" path="resources/app_bg.png"
				sourceInsets="0 0 0 0" />
		</state>

	</style>
	<bind style="InternalFrameStyle" type="region" key="InternalFrame" />
  • InternalFrameTitlePane - ready (interface not as proposed by shift, may need serious customization to make it look as they've proposed.) 
    	<!-- ================================= -->
	<!-- INTERNAL FRAME TITLE PANE -->
	<!-- ================================= -->
	<style id="InternalFrameTitlePaneStyle">
		<insets top="0" left="0" bottom="0" right="0" />
		<property key="InternalFrameTitlePane.titleSpacing" type="integer"
			value="20" />
		<property key="InternalFrameTitlePane.buttonSpacing" type="integer"
			value="0" />
		<imageIcon id="InternalFrameMaximizeButtonIcon" path="resources/btn_maximize.png" />
		<property key="InternalFrameTitlePane.maximizeIcon" type="idref"
			value="InternalFrameMaximizeButtonIcon" />

		<imageIcon id="InternalFrameCloseButtonIcon" path="resources/close.png" />
		<property key="InternalFrameTitlePane.closeIcon" type="idref"
			value="InternalFrameCloseButtonIcon" />
			
		<imageIcon id="InternalFrameMinimizeButtonIcon" path="resources/btn_minimize.png" />
		<property key="InternalFrameTitlePane.minimizeIcon" type="idref"
			value="InternalFrameMinimizeButtonIcon" />
			
		<state>
			<imagePainter method="InternalFrameTitlePaneBackground"
				path="resources/title_bar_bg.png" sourceInsets="0 0 0 0" />
			<font name="Arial" size="11" style="BOLD" />
			<color value="#585f68" type="TEXT_FOREGROUND" />
		</state>
	</style>
	<bind style="InternalFrameTitlePaneStyle" type="region"
		key="InternalFrameTitlePane" />
  • InternalFrameTitlePane.closeButton - ready (this is part of InternalFrameTitlePane, see previous for more info). 
    	<!-- ================================= -->
	<!-- INTERNAL FRAME CLOSE BUTTON -->
	<!-- ================================= -->
	<style id="InternalFrameCloseButtonStyle">
		<opaque value="true"/>
		<insets top="0" left="0" right="0" bottom="0" />
		<insets top="0" left="0" right="0" bottom="0" />
		<property key="Button.textShiftOffset" type="integer" value="0" />
		<state>
			<imagePainter method="buttonBackground" path="resources/close.png" sourceInsets="0 0 0 0"/>
		</state>
	</style>
	<bind style="InternalFrameCloseButtonStyle" type="name" key="InternalFrameTitlePane.closeButton" />
  • InternalFrameTitlePane.iconifyButton - ready (this is part of InternalFrameTitlePane, see previous for more info). 
	<!-- ================================= -->
	<!-- INTERNAL FRAME MINIMIZE BUTTON -->
	<!-- ================================= -->
	<style id="InternalFrameMinimizeButtonStyle">
		<opaque value="true"/>
		<insets top="0" left="0" right="0" bottom="0" />
		<property key="Button.textShiftOffset" type="integer" value="0" />
		<state>
			<imagePainter method="buttonBackground" path="resources/btn_minimize.png" sourceInsets="0 0 0 0"/>
		</state>
	</style>
	<bind style="InternalFrameMinimizeButtonStyle" type="name" key="InternalFrameTitlePane.iconifyButton" />
  • InternalFrameTitlePane.maximizeButton - ready (this is part of InternalFrameTitlePane, see previous for more info). 
    	<!-- ================================= -->
	<!-- INTERNAL FRAME MAXIMIZE BUTTON -->
	<!-- ================================= -->
	<style id="InternalFrameMaximizeButtonStyle">
		<opaque value="true"/>
		<insets top="0" left="0" right="0" bottom="0" />
		<property key="Button.textShiftOffset" type="integer" value="0" />
		<state>
			<imagePainter method="buttonBackground" path="resources/btn_maximize.png" sourceInsets="0 0 0 0"/>
		</state>
	</style>
	<bind style="InternalFrameMaximizeButtonStyle" type="name" key="InternalFrameTitlePane.maximizeButton" />
  • DesktopPane
  • FileChooser
  • List 
    	<!-- ================================= -->
	<!-- 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" />
  • MenuBar - finished (exactly as proposed by shift). 
    	<!-- ================================= -->
	<!-- MENU BAR-->
	<!-- ================================= -->
	<style id="MenuBarStyle">
		<insets top="0" bottom="0" right="0" left="0" />
		<state>
			<imagePainter method="MenuBarBackground" path="resources/menu_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="MenuBarStyle" type="region" key="MenuBar" />
  • Menu - finished (exactly as proposed by shift). 
    	<!-- ================================= -->
	<!-- MENU -->
	<!-- ================================= -->
	<style id="MenuStyle">
		<insets top="4" bottom="5" right="8" left="7" />
		<state>
			<imagePainter method="MenuBackground" path="resources/menu_bg.png"
				sourceInsets="0 0 0 0" />
			<font name="Arial" size="14" style="PLAIN" />
		</state>
		<state value="SELECTED">
			<imagePainter method="MenuBackground" path="resources/menu_item_selected.png"
				sourceInsets="0 0 0 0" />
			<color value="WHITE" type="TEXT_BACKGROUND" />
			<color value="WHITE" type="TEXT_FOREGROUND" />
		</state>
	</style>
	<bind style="MenuStyle" type="region" key="Menu" />
  • MenuItem - finished (exactly as proposed by shift). 
    	<!-- ================================= -->
	<!-- MENU ITEM-->
	<!-- ================================= -->
	<style id="MenuItemStyle">
		<insets top="3" bottom="3" right="5" left="5" />
		<state>
			<imagePainter method="MenuItemBackground" path="resources/menu_item_bg.png"
				sourceInsets="0 0 0 0" />
			<font name="Arial" size="14" style="PLAIN" />
		</state>
		<state value="MOUSE_OVER">
			<imagePainter method="MenuItemBackground" path="resources/menu_item_selected.png"
				sourceInsets="0 0 0 0" />
			<color value="WHITE" type="TEXT_FOREGROUND" />			
		</state>
		<state value="DISABLED">
			<imagePainter method="MenuItemBackground" path="resources/menu_item_bg.png"
				sourceInsets="0 0 0 0" />
			<color value="#acb2b9" type="TEXT_FOREGROUND" />
		</state>
	</style>
	<bind style="MenuItemStyle" type="region" key="MenuItem" />
  • MenuItemAccelerator - finished (exactly as proposed by shift). 
    	<!-- ================================= -->
	<!-- 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" />
  • CheckBoxMenuItem
  • RadioButtonMenuItem
  • PopupMenu 
    	<!-- ================================= -->
	<!-- POP UP MENU -->
	<!-- ================================= -->
	<style id="PopupMenuStyle">
		<state>
			<imagePainter method="PopupMenuBackground" path="resources/text_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="PopupMenuStyle" type="region" key="PopupMenu" />
  • PopupMenuSeparator
  • OptionPane
  • RootPane
  • Panel 
    	<!-- ================================= -->
	<!-- PANEL -->
	<!-- ================================= -->
	<style id="PanelStyle">
		<state>
			<imagePainter method="PanelBackground" path="resources/panel_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="PanelStyle" type="region" key="Panel" />
  • ProgressBar
  • ScrollBar
  • ScrollBarTrack - ready 
    	<!-- ================================= -->
	<!-- SCROLLBAR TRACK -->
	<!-- ================================= -->
	<style id="scrollbarTrackStyle">
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<imagePainter method="scrollBarTrackBackground" path="resources/sbh_track.png"
				direction="horizontal" sourceInsets="0 1 0 1" />
			<imagePainter method="scrollBarTrackBackground" path="resources/sbv_track.png"
				direction="vertical" sourceInsets="1 0 1 0" />
		</state>

		<state value="DISABLED">
			<imagePainter method="scrollBarTrackBackground" path="resources/sbh_track_disabled.png"
				direction="horizontal" sourceInsets="0 1 0 1" />
			<imagePainter method="scrollBarTrackBackground" path="resources/sbv_track_disabled.png"
				direction="vertical" sourceInsets="1 0 1 0" />
		</state>

	</style>
	<bind style="scrollbarTrackStyle" type="REGION" key="ScrollBarTrack" />
  • ScrollBarThumb - ready (should only change the resources) 
	<!-- ================================= -->
	<!-- SCROLLBAR THUMB -->
	<!-- ================================= -->
	<style id="scrollBarThumbStyle">
		<insets top="0" left="0" right="0" bottom="0" />
		<state>
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="resources/sbh_thumb_normal.png"
				sourceInsets="0 0 0 0" />
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="resources/sbh_thumb_icon.png" center="true" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="resources/sbv_thumb_normal.png"
				sourceInsets="0 0 0 0" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="resources/sbv_thumb_icon.png" center="true" />
		</state>

		<state value="PRESSED">
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="resources/sbh_thumb_down.png"
				sourceInsets="0 0 0 0" />
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="resources/sbh_thumb_icon.png" center="true" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="resources/sbv_thumb_down.png"
				sourceInsets="0 0 0 0" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="resources/sbv_thumb_icon.png" center="true" />
		</state>

		<state value="MOUSE_OVER">
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="resources/sbh_thumb_over.png"
				sourceInsets="0 0 0 0" />
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="resources/sbh_thumb_icon.png" center="true" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="resources/sbv_thumb_over.png"
				sourceInsets="0 0 0 0" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="resources/sbv_thumb_icon.png" center="true" />
		</state>

		<state value="DISABLED">
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="resources/sbh_thumb_disabled.png"
				sourceInsets="0 0 0 0" />
			<imagePainter method="scrollBarThumbBackground"
				direction="horizontal" path="resources/sbh_thumb_icon.png" center="true" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="resources/sbv_thumb_disabled.png"
				sourceInsets="0 0 0 0" />
			<imagePainter method="scrollBarThumbBackground"
				direction="vertical" path="resources/sbv_thumb_icon.png" center="true" />
		</state>

	</style>

	<bind style="scrollBarThumbStyle" type="region" key="ScrollBarThumb" />
  • ScrollPane
  • Viewport
  • Separator
  • Slider
  • SliderTrack 
    	<!-- ================================= -->
	<!-- SLIDER TRACK -->
	<!-- ================================= -->
	<style id="SliderTrackStyle">
		<imagePainter method="sliderTrackBackground" path="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="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" />
  • SliderThumb 
    	<!-- ================================= -->
	<!-- SLIDER THUMB -->
	<!-- ================================= -->
	<style id="SliderThumbStyle">

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

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

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

	</style>
	<bind style="SliderThumbStyle" type="region" key="SliderThumb" />
  • SplitPane
  • SplitPaneDivider
  • Table
  • TableHeader
  • TabbedPane - ready 
    	<!-- ================================= -->
	<!-- TABBEDPANE -->
	<!-- ================================= -->
	<style id="TabbedPaneStyle">

		<state>
			<imagePainter method="TabbedPaneBackground" path="resources/panel_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="TabbedPaneStyle" type="region" key="TabbedPane" />
  • TabbedPaneContent
  • TabbedPaneTab - ready 
    	<!-- ================================= -->
	<!-- TABBEDPANE TAB -->
	<!-- ================================= -->
	<style id="TabbedPaneTabStyle">
		<font name="Arial" size="13" style="PLAIN" />
		<state value="FOCUSED">
			<imagePainter method="tabbedPaneTabBackground" path="resources/tab_bar_selected.png"
				sourceInsets="0 5 0 5" paintCenter="true" stretch="true" center="false" />
		</state>
		<state value="ENABLED">
			<imagePainter method="tabbedPaneTabBackground" path="resources/tab_bar_enabled.png"
				sourceInsets="0 5 0 5" paintCenter="true" stretch="true" center="false" />
		</state>
		<state value="DISABLED">
			<imagePainter method="tabbedPaneTabBackground" path="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" />
  • TabbedPaneTabArea
  • Label
  • ToolTip
  • TextField 
    	<!-- ================================= -->
	<!-- TEXT FIELD -->
	<!-- ================================= -->
	<style id="TextFieldStyle">
		<state>
			<imagePainter method="TextFieldBackground" path="resources/text_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="TextFieldStyle" type="region" key="TextField" />
  • FormattedTextField 
    	<!-- ================================= -->
	<!-- FORMATTED TEXT FIELD -->
	<!-- ================================= -->
	<style id="FormattedTextFieldStyle">
		<state>
			<imagePainter method="FormattedTextFieldBackground"
				path="resources/text_bg.png" sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="FormattedTextFieldStyle" type="region" key="FormattedTextField" />
  • PasswordField
  • TextArea
  • TextPane
  • EditorPane
  • Spinner
  • ComboBox.listRenderer
  • TableHeader.renderer
  • ToolBar
  • ToolBarContent
  • ToolBarSeparator
  • ToolBarDragWindow
  • Tree 
    	<!-- ================================= -->
	<!-- TREE -->
	<!-- ================================= -->
	<style id="TreeStyle">
		<property key="Tree.leftChildIndent" type="integer" value="5" />
		<property key="Tree.rightChildIndent" type="integer" value="5" />
		<imageIcon id="TreeCollapseIcon" path="resources/tree_cell_collapse.png" />
		<property key="Tree.collapsedIcon" type="idref" value="TreeCollapseIcon" />
		<imageIcon id="TreeExpandIcon" path="resources/tree_cell_expand.png" />
		<property key="Tree.expandedIcon" type="idref" value="TreeExpandIcon" />
		<state>
			<imagePainter method="TreeBackground" path="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" />

  • TreeCell

Screenshots of current implementation

  • Sophie2 screen shots:
    • General screenshots of Sophie2 new interface:
      • Screenshot 1:

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

  • Screenshot 2:

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

  • Screenshot of the swing set with the new interface:

source:branches/private/peko/sophie2-app-tuning/doc/screenshots/screenshot-swingset.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.)

Alternative Skin

source:branches/private/peko/sophie2-app-tuning/doc/screenshots/screenshot-alternative.png