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 a 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!
• ArrowButton
  • style:

    <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>
    
    

• 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