wiki:AUTHOR_APP_TUNING

Version 26 (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)

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!
  • 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">
		<insets top="3" left="3" bottom="3" right="3" />
		<imageIcon id="InternalFrameIcon" path="resources/btn_window_settings.png"
			sourceInsets="2 2 2 2" />
		<property key="InternalFrame.icon" type="idref" value="InternalFrameIcon" />
		<state>
			<imagePainter method="InternalFrameBackground" path="resources/internal_frame_border.png"
				sourceInsets="5 5 5 5" />
			<imagePainter method="internalFrameBorder"
				path="resources/internal_frame_border.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 
    	<!-- ================================= -->
	<!-- SPINNER -->
	<!-- ================================= -->
	<style id="SpinnerStyle">
		<state>
			<imagePainter method="SpinnerBackground" path="resources/text_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
		<state value="DISABLED">
			<imagePainter method="SpinnerBackground" path="resources/panel_bg.png"
				sourceInsets="0 0 0 0" />
		</state>
	</style>
	<bind style="SpinnerStyle" type="region" key="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
  • 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:
    • 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