AsWing.org : Customizing The LookAndFeel I
This page last changed on Aug 04, 2006 by iiley.
Create an custom icon and JButton alignment Tutorials Customizing The LookAndFeel II

Customizing The LookAndFeel I

This tutorial shows you the basics of skinning and creating your own custom lookandfeel for the aswing components.

First lets create a directory for our pluggable look and feel (plaf). If you look at the aswing source code you will find this directory structure

org->aswing->plaf

The plaf folder contains all the pluggable look and feel classes. You will find the following folders
basic ( is what you should extend to customize your components)
asw ( the default ASWing lookandfeel [ extends the basic lookandfeel])
winxp ( under development)

So lets create our folder in here. For this tutorial I am going to call our look and feel Royale. So I create my folder royale under the plaf folder.

Next we are going to create our first class the RoyaleLookAndFeel.as

the code

/*
Copyright aswing.org, see the LICENCE.txt.
*/
import org.aswing.LookAndFeel;
import org.aswing.plaf.basic.BasicLookAndFeel;
import org.aswing.plaf.ASColorUIResource;
import org.aswing.plaf.ASFontUIResource;
import org.aswing.plaf.InsetsUIResource;
import org.aswing.UIDefaults;
/**
* Note: All empty object should be undefined or an UIResource instance.
* Undefined/UIResource instance means not set, if it is null, means that user set it to be null, so LAF value will not be use.
* @author firdosh
*/
class org.aswing.plaf.royale.RoyaleLookAndFeel extends BasicLookAndFeel
{
	/**
	* Can't construct, need to extends it to make a completed LAF and implements features.
	*/
	public function RoyaleLookAndFeel ()
	{
		super ();
	}
	public function getDefaults () : UIDefaults
	{
		var table : UIDefaults = new UIDefaults ();
		initClassDefaults (table);
		initSystemColorDefaults (table);
		initSystemFontDefaults (table);
		initComponentDefaults (table);
		return table;
	}
	private function initClassDefaults (table : UIDefaults) : Void
	{
		var uiDefaults : Array = [ "ButtonUI", org.aswing.plaf.basic.BasicButtonUI,
		"PanelUI", org.aswing.plaf.basic.BasicPanelUI,
		"ToggleButtonUI", org.aswing.plaf.basic.BasicToggleButtonUI,
		"RadioButtonUI", org.aswing.plaf.basic.BasicRadioButtonUI,
		"CheckBoxUI", org.aswing.plaf.basic.BasicCheckBoxUI,
		"ScrollBarUI", org.aswing.plaf.basic.BasicScrollBarUI,
		"ScrollPaneUI", org.aswing.plaf.basic.BasicScrollPaneUI,
		"ViewportUI", org.aswing.plaf.basic.BasicViewportUI,
		"WindowUI", org.aswing.plaf.basic.BasicWindowUI,
		"FrameUI", org.aswing.plaf.basic.BasicFrameUI,
		"ListUI", org.aswing.plaf.basic.BasicListUI,
		"LabelUI", org.aswing.plaf.basic.BasicLabelUI,
		"ToolTipUI", org.aswing.plaf.basic.BasicToolTipUI,
		"TextFieldUI", org.aswing.plaf.basic.BasicTextFieldUI,
		"TextAreaUI", org.aswing.plaf.basic.BasicTextAreaUI,
		"ToolBarUI", org.aswing.plaf.basic.BasicToolBarUI,
		"AccordionUI", org.aswing.plaf.basic.BasicAccordionUI,
		"TabbedPaneUI", org.aswing.plaf.basic.BasicTabbedPaneUI,
		"ComboBoxUI", org.aswing.plaf.basic.BasicComboBoxUI,
		"SeparatorUI", org.aswing.plaf.basic.BasicSeparatorUI,
		"ProgressBarUI", org.aswing.plaf.basic.BasicProgressBarUI,
		"TableUI", org.aswing.plaf.basic.BasicTableUI,
		"TableHeaderUI", org.aswing.plaf.basic.BasicTableHeaderUI,
		"SliderUI", org.aswing.plaf.basic.BasicSliderUI];
		table.putDefaults (uiDefaults);
	}
	private function initSystemColorDefaults (table : UIDefaults) : Void
	{
		var defaultSystemColors : Array = [ "activeCaption", 0xE0E0E0, /* Color for captions (title bars) when they are active. */
		"activeCaptionText", 0x000000, /* Text color for text in captions (title bars). */
		"activeCaptionBorder", 0xC0C0C0, /* Border color for caption (title bar) window borders. */
		"inactiveCaption", 0x808080, /* Color for captions (title bars) when not active. */
		"inactiveCaptionText", 0xC0C0C0, /* Text color for text in inactive captions (title bars). */
		"inactiveCaptionBorder", 0xC0C0C0, /* Border color for inactive caption (title bar) window borders. */
		"window", 0xCCCCCC, /* Default color for the interior of windows */
		"windowBorder", 0x000000, /* ??? */
		"windowText", 0x000000, /* ??? */
		"menu", 0xC0C0C0, /* Background color for menus */
		"menuText", 0x000000, /* Text color for menus  */
		"text", 0xC0C0C0, /* Text background color */
		"textText", 0x000000, /* Text foreground color */
		"textHighlight", 0x000080, /* Text background color when selected */
		"textHighlightText", 0xFFFFFF, /* Text color when selected */
		"textInactiveText", 0x808080, /* Text color when disabled */
		"control", 0xF4F4F4, //0xEFEFEF, /* Default color for controls (buttons, sliders, etc) */
		"controlText", 0x000000, /* Default color for text in controls */
		"controlHighlight", 0xEEEEEE, /* Specular highlight (opposite of the shadow) */
		"controlLtHighlight", 0x666666, /* Highlight color for controls */
		"controlShadow", 0xC7C7C5, /* Shadow color for controls */
		"controlDkShadow", 0x666666, /* Dark shadow color for controls */
		"scrollbar", 0xE0E0E0 /* Scrollbar background (usually the "track") */];
		for (var i : Number = 0; i < defaultSystemColors.length; i += 2)
		{
			table.put (defaultSystemColors [i] , new ASColorUIResource (defaultSystemColors [i + 1]));
		}
	}
	private function initSystemFontDefaults (table : UIDefaults) : Void
	{
		var defaultSystemFonts : Array = [ "systemFont", new ASFontUIResource ("Tahoma", 11) ,
		"menuFont", new ASFontUIResource ("Tahoma", 11) ,
		"controlFont", new ASFontUIResource ("Tahoma", 11) ,
		"windowFont", new ASFontUIResource ("Tahoma", 11)];
		table.putDefaults (defaultSystemFonts);
	}
	private function initComponentDefaults (table : UIDefaults) : Void
	{
		// *** JButton
		var comDefaults : Array = [ "Button.background", new ASColorUIResource (0xE7E7E5) ,
		"Button.foreground", table.get ("controlText") ,
		"Button.opaque", true,
		"Button.focusable", true,
		"Button.shadow", table.getColor ("controlShadow") ,
		"Button.darkShadow", table.getColor ("controlDkShadow") ,
		"Button.light", table.getColor ("controlHighlight") ,
		"Button.highlight", table.getColor ("controlLtHighlight") ,
		"Button.font", table.getFont ("controlFont") ,
		"Button.border", org.aswing.plaf.basic.border.ButtonBorder,
		"Button.margin", new InsetsUIResource (0, 0, 0, 0) ,
		"Button.textShiftOffset", 1];
		table.putDefaults (comDefaults);
		// *** ToggleButton
		comDefaults = [ "ToggleButton.background", table.get ("control") ,
		"ToggleButton.foreground", table.get ("controlText") ,
		"ToggleButton.opaque", true,
		"ToggleButton.focusable", true,
		"ToggleButton.shadow", table.getColor ("controlShadow") ,
		"ToggleButton.darkShadow", table.getColor ("controlDkShadow") ,
		"ToggleButton.light", table.getColor ("controlHighlight") ,
		"ToggleButton.highlight", table.getColor ("controlLtHighlight") ,
		"ToggleButton.font", table.getFont ("controlFont") ,
		"ToggleButton.border", org.aswing.plaf.basic.border.ButtonBorder,
		"ToggleButton.margin", new InsetsUIResource (0, 0, 0, 0) ,
		"ToggleButton.textShiftOffset", 1];
		table.putDefaults (comDefaults);
		// *** RadioButton
		comDefaults = [ "RadioButton.background", table.get ("control") ,
		"RadioButton.foreground", table.get ("controlText") ,
		"RadioButton.opaque", false,
		"RadioButton.focusable", true,
		"RadioButton.shadow", new ASColorUIResource (0xEAEAEA) ,
		"RadioButton.darkShadow", table.getColor ("controlDkShadow") ,
		"RadioButton.light", table.getColor ("controlHighlight") ,
		"RadioButton.highlight", table.getColor ("controlLtHighlight") ,
		"RadioButton.font", table.getFont ("controlFont") ,
		"RadioButton.icon", org.aswing.plaf.basic.icon.RadioButtonIcon,
		"RadioButton.margin", new InsetsUIResource (0, 0, 0, 0) ,
		"RadioButton.textShiftOffset", 1];
		table.putDefaults (comDefaults);
		// *** CheckBox
		comDefaults = [ "CheckBox.background", table.get ("control") ,
		"CheckBox.foreground", table.get ("controlText") ,
		"CheckBox.opaque", false,
		"CheckBox.focusable", true,
		"CheckBox.shadow", table.getColor ("controlShadow") ,
		"CheckBox.darkShadow", table.getColor ("controlDkShadow") ,
		"CheckBox.light", new ASColorUIResource (0xCCCCCC) ,
		"CheckBox.highlight", table.getColor ("controlLtHighlight") ,
		"CheckBox.font", table.getFont ("controlFont") ,
		"CheckBox.icon", org.aswing.plaf.basic.icon.CheckBoxIcon,
		"CheckBox.margin", new InsetsUIResource (0, 0, 0, 0) ,
		"CheckBox.textShiftOffset", 1];
		table.putDefaults (comDefaults);
		// *** Accordion
		comDefaults = [ "Accordion.background", table.get ("window") ,
		"Accordion.foreground", table.get ("windowText") ,
		"Accordion.opaque", false,
		"Accordion.focusable", true,
		"Accordion.tabMargin", new InsetsUIResource (0, 0, 0, 0)];
		table.putDefaults (comDefaults);
		// *** JTabbedPane
		comDefaults = [ "TabbedPane.background", new ASColorUIResource (0xE7E7E5) ,
		"TabbedPane.foreground", table.get ("controlText") ,
		"TabbedPane.opaque", false,
		"TabbedPane.focusable", true,
		"TabbedPane.shadow", new ASColorUIResource (0x888888) ,
		"TabbedPane.darkShadow", new ASColorUIResource (0x444444) ,
		"TabbedPane.light", table.getColor ("controlHighlight") ,
		"TabbedPane.highlight", new ASColorUIResource (0xFFFFFF) ,
		"TabbedPane.font", table.getFont ("controlFont") ,
		"TabbedPane.border", null,
		"TabbedPane.tabMargin", new InsetsUIResource (1, 1, 1, 1) ,
		"TabbedPane.baseLineThickness", 8,
		"TabbedPane.maxTabWidth", 1000];
		table.putDefaults (comDefaults);
		// *** ScrollBar
		comDefaults = [ "ScrollBar.background", new ASColorUIResource (0xD0D0D0) ,
		"ScrollBar.foreground", table.get ("controlText") ,
		"ScrollBar.opaque", true,
		"ScrollBar.focusable", true,
		"ScrollBar.shadow", table.getColor ("controlShadow") ,
		"ScrollBar.darkShadow", table.getColor ("controlDkShadow") ,
		"ScrollBar.light", table.getColor ("controlHighlight") ,
		"ScrollBar.highlight", table.getColor ("controlLtHighlight") ,
		"ScrollBar.font", table.getFont ("controlFont") ,
		"ScrollBar.border", undefined,
		"ScrollBar.thumb", table.get ("control") ,
		"ScrollBar.thumbShadow", table.get ("controlShadow") ,
		"ScrollBar.thumbDarkShadow", table.get ("controlDkShadow") ,
		"ScrollBar.thumbHighlight", table.get ("controlHighlight")];
		table.putDefaults (comDefaults);
		// *** ScrollPane
		comDefaults = [ "ScrollPane.darkShadow", table.getColor ("controlDkShadow") ,
		"ScrollPane.opaque", false,
		"ScrollPane.focusable", true];
		table.putDefaults (comDefaults);
		// *** Viewport
		comDefaults = [ "Viewport.border", undefined,
		"Viewport.opaque", false,
		"Viewport.focusable", false,
		"Viewport.background", table.get ("window") ,
		"Viewport.foreground", table.get ("windowText")];
		table.putDefaults (comDefaults);
		// *** Panel
		comDefaults = [ "Panel.background", table.get ("window") ,
		"Panel.foreground", table.get ("windowText") ,
		"Panel.opaque", false,
		"Panel.focusable", false];
		table.putDefaults (comDefaults);
		// *** Window
		comDefaults = [ "Window.background", table.get ("window") ,
		"Window.foreground", table.get ("windowText") ,
		"Window.opaque", true,
		"Window.focusable", true,
		"Window.modalColor", new ASColorUIResource (0xC7C7C5, 30) ,
		"Window.contentPaneBorder", undefined];
		table.putDefaults (comDefaults);
		// *** Frame
		comDefaults = [ "Frame.background", table.get ("window") ,
		"Frame.foreground", table.get ("windowText") ,
		"Frame.opaque", true,
		"Frame.focusable", true,
		"Frame.activeCaption", table.get ("activeCaption") ,
		"Frame.activeCaptionText", table.get ("activeCaptionText") ,
		"Frame.activeCaptionBorder", table.get ("activeCaptionBorder") ,
		"Frame.inactiveCaption", table.get ("inactiveCaption") ,
		"Frame.inactiveCaptionText", table.get ("inactiveCaptionText") ,
		"Frame.inactiveCaptionBorder", table.get ("inactiveCaptionBorder") ,
		"Frame.resizeArrow", table.get ("inactiveCaption") ,
		"Frame.resizeArrowLight", table.get ("window") ,
		"Frame.resizeArrowDark", table.get ("activeCaptionText") ,
		"Frame.titleBarUI", org.aswing.plaf.basic.frame.TitleBarUI,
		"Frame.resizer", org.aswing.plaf.basic.frame.Resizer,
		"Frame.font", table.get ("windowFont") ,
		"Frame.border", org.aswing.plaf.basic.border.FrameBorder,
		"Frame.icon", org.aswing.plaf.basic.frame.TitleIcon,
		"Frame.iconifiedIcon", org.aswing.plaf.basic.icon.FrameIconifiedIcon,
		"Frame.normalIcon", org.aswing.plaf.basic.icon.FrameNormalIcon,
		"Frame.maximizeIcon", org.aswing.plaf.basic.icon.FrameMaximizeIcon,
		"Frame.closeIcon", org.aswing.plaf.basic.icon.FrameCloseIcon];
		table.putDefaults (comDefaults);
		// *** JLabel
		comDefaults = [ "Label.background", new ASColorUIResource (0xE7E7E5) ,
		"Label.foreground", table.get ("controlText") ,
		"Label.opaque", false,
		"Label.focusable", false,
		"Label.font", table.getFont ("controlFont") ,
		"Label.border", undefined];
		table.putDefaults (comDefaults);
		// *** JToolTip
		comDefaults = [ "ToolTip.background", new ASColorUIResource (0xFFFFD5) ,
		"ToolTip.foreground", table.get ("controlText") ,
		"ToolTip.opaque", true,
		"ToolTip.focusable", false,
		"ToolTip.borderColor", table.get ("controlText") ,
		"ToolTip.font", table.getFont ("controlFont") ,
		"ToolTip.border", org.aswing.plaf.basic.border.ToolTipBorder];
		table.putDefaults (comDefaults);
		// *** List
		comDefaults = [ "List.font", table.getFont ("controlFont") ,
		"List.background", table.get ("control") ,
		"List.foreground", table.get ("controlText") ,
		"List.opaque", false,
		"List.focusable", true,
		"List.selectionBackground", new ASColorUIResource (0x444444) ,
		"List.selectionForeground", table.get ("control") ,
		"List.border", undefined];
		table.putDefaults (comDefaults);
		// *** TextField
		comDefaults = [ "TextField.background", new ASColorUIResource (0xF3F3F3) ,
		"TextField.foreground", new ASColorUIResource (0x000000) ,
		"TextField.opaque", true,
		"TextField.focusable", true,
		"TextField.shadow", new ASColorUIResource (0x999999) ,
		"TextField.darkShadow", new ASColorUIResource (0xDCDEDD) ,
		"TextField.light", new ASColorUIResource (0xDCDEDD) ,
		"TextField.highlight", new ASColorUIResource (0x666666) ,
		"TextField.font", table.getFont ("controlFont") ,
		"TextField.border", org.aswing.plaf.basic.border.TextFieldBorder];
		table.putDefaults (comDefaults);
		// *** TextArea
		comDefaults = [ "TextArea.background", new ASColorUIResource (0xF3F3F3) ,
		"TextArea.foreground", new ASColorUIResource (0x000000) ,
		"TextArea.opaque", true,
		"TextArea.focusable", true,
		"TextArea.shadow", new ASColorUIResource (0x999999) ,
		"TextArea.darkShadow", new ASColorUIResource (0xDCDEDD) ,
		"TextArea.light", new ASColorUIResource (0xDCDEDD) ,
		"TextArea.highlight", new ASColorUIResource (0x666666) ,
		"TextArea.font", table.getFont ("controlFont") ,
		"TextArea.border", org.aswing.plaf.basic.border.TextAreaBorder];
		table.putDefaults (comDefaults);
		// *** ToolBar
		comDefaults = [ "ToolBar.background", table.get ("window") ,
		"ToolBar.foreground", table.get ("windowText") ,
		"ToolBar.opaque", true,
		"ToolBar.focusable", false];
		table.putDefaults (comDefaults);
		// *** ComboBox
		comDefaults = [ "ComboBox.background", table.get ("control") ,
		"ComboBox.foreground", table.get ("controlText") ,
		"ComboBox.opaque", true,
		"ComboBox.focusable", false,
		"ComboBox.font", table.getFont ("controlFont") ,
		"ComboBox.shadow", table.getColor ("controlShadow") ,
		"ComboBox.darkShadow", table.getColor ("controlDkShadow") ,
		"ComboBox.light", table.getColor ("controlHighlight") ,
		"ComboBox.highlight", table.getColor ("controlLtHighlight") ,
		"ComboBox.border", org.aswing.plaf.basic.border.ComboBoxBorder];
		table.putDefaults (comDefaults);
		// *** Separator
		comDefaults = [ "Separator.background", new ASColorUIResource (0xcccccc) ,
		"Separator.foreground", new ASColorUIResource (0x444444) ,
		"Separator.opaque", false,
		"Separator.focusable", false];
		table.putDefaults (comDefaults);
		// *** ProgressBar
		comDefaults = [ "ProgressBar.background", table.get ("window") ,
		"ProgressBar.foreground", table.get ("windowText") ,
		"ProgressBar.opaque", false,
		"ProgressBar.focusable", false,
		"ProgressBar.font", new ASFontUIResource ("Tahoma", 9) ,
		"ProgressBar.border", org.aswing.plaf.basic.border.ProgressBarBorder,
		"ProgressBar.icon", org.aswing.plaf.basic.icon.ProgressBarIcon,
		"ProgressBar.progressColor", new ASColorUIResource (0x3366CC)];
		table.putDefaults (comDefaults);
		// *** Table
		comDefaults = [ "Table.background", table.get ("control") ,
		"Table.foreground", table.get ("controlText") ,
		"Table.opaque", true,
		"Table.focusable", true,
		"Table.font", table.getFont ("controlFont") ,
		"Table.selectionBackground", new ASColorUIResource (0x666666) ,
		"Table.selectionForeground", table.get ("control") ,
		"Table.gridColor", new ASColorUIResource (0x444444) ,
		"Table.border", undefined];
		table.putDefaults (comDefaults);
		// *** TableHeader
		comDefaults = [ "TableHeader.background", new ASColorUIResource (0xE7E7E5) ,
		"TableHeader.foreground", table.get ("controlText") ,
		"TableHeader.font", table.getFont ("controlFont") ,
		"TableHeader.opaque", false,
		"TableHeader.focusable", true,
		"TableHeader.gridColor", new ASColorUIResource (0x444444) ,
		"TableHeader.border", undefined,
		"TableHeader.cellBorder", org.aswing.plaf.basic.border.TableHeaderCellBorder];
		table.putDefaults (comDefaults);
		// *** Slider
		comDefaults = [ "Slider.background", new ASColorUIResource (0xD0D0D0) ,
		"Slider.foreground", table.get ("controlText") ,
		"Slider.opaque", false,
		"Slider.focusable", true,
		"Slider.shadow", table.getColor ("controlShadow") ,
		"Slider.darkShadow", table.getColor ("controlDkShadow") ,
		"Slider.light", table.getColor ("controlHighlight") ,
		"Slider.highlight", table.getColor ("controlLtHighlight") ,
		"Slider.font", table.getFont ("controlFont") ,
		"Slider.border", undefined,
		"Slider.tickColor", table.get ("controlDkShadow") ,
		"Slider.progressColor", new ASColorUIResource (0xC4C4EE) ,
		"Slider.thumb", table.get ("control") ,
		"Slider.thumbShadow", table.get ("controlShadow") ,
		"Slider.thumbDarkShadow", table.get ("controlDkShadow") ,
		"Slider.thumbHighlight", table.get ("controlHighlight")];
		table.putDefaults (comDefaults);
	}
}

For now just cut copy paste the code into the RoyaleLookAndFeel.as
which you should have created under the royale folder.

Now lets create a simple UI and set our pluggable lookandfeel to the royale plaf.

import org.aswing.plaf.royale.RoyaleLookAndFeel;
import org.flashdevelop.utils.FlashConnect;
import org.aswing.*;

class Application extends JFrame
{
	
	private var jbutton1:JButton;
	
	
	public function Application(Void){
		super("Royale LAF",true);
		var panel:JPanel=new JPanel(new BorderLayout(10,10));
		
		jbutton1=new JButton("Test");
		panel.append(jbutton1,BorderLayout.NORTH);
		this.getContentPane().append(panel);
		
	}
	
	
	public static function main(Void):Void
	{
		FlashConnect.initialize();
		FlashConnect.trace("Testing ASWing", FlashConnect.DEBUG);
		
		UIManager.setLookAndFeel(new RoyaleLookAndFeel());
		var p:Application=new Application();
		
		p.setLocation(50, 50);
		p.setSize(400, 400);
		p.show();
	}
}

You basically set the lookandfeel using the UIManager class

UIManager.setLookAndFeel(new RoyaleLookAndFeel());

Now lets change the default background colour of our JButton. In the
RoyaleLookAndFeel.as class in the initComponentDefaults method you will see the following line 

"Button.background", new ASColorUIResource(0xE7E7E5)

Change the color to red

"Button.background", new ASColorUIResource(0xFF0000)

Now when you compile and run the sample again you should see the background of the button color as red and also the buttons of the JFrame.

You can do the same for the foreground or different assets of the button .

"Button.foreground", table.get("controlText"),

Change foreground to blue

"Button.foreground", new ASColorUIResource(0x0000FF)

In the next tutorial I`ll talk a bit more about the LookAndFeel class
and how to create your own button with different shape.

Comments:

Hi Sir ,in your AsWing Lib not includes these two files below:
org.aswing.plaf.royale.RoyaleButtonUI
org.aswing.plaf.basic.BasicSliderUI
So this example RoyaleLookAndFeel.as can not run!
Posted by tangmingsh at Aug 03, 2006 12:25

Just remove the org.aswing.plaf.royale.RoyaleButtonUI importing code, it is not needed.
And org.aswing.plaf.basic.BasicSliderUI is on the newest version on SVN, beta2 package did not include it.
Posted by iiley at Aug 04, 2006 03:36
Document generated by Confluence on Dec 19, 2006 14:17