AsWing.org : Customizing The LookAndFeel II

In this tutorial we`ll discuss more about the RoyaleLookAndFeel class we created in the previous tutorial.

The RoyaleLookAndFeel class basically defines the look and feel for the components.Lets take a look at the methods.

The initClassDefaults method

The initClassDefaults method basically links all the classes responsible for defining the UI of the components.

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);
	}

In our look and feel class we can see that the ButtonUI is defined by the org.aswing.plaf.basic.BasicButtonUI class.

"ButtonUI", org.aswing.plaf.basic.BasicButtonUI,

If we want to customize the look and feel of the button then we can define our own class which would render the button. For example lets say we wanted our button to look like the default ASWing button so then we simply redefine the class that renders the button.

"ButtonUI", org.aswing.plaf.asw.ASWingButtonUI,

The initSystemColorDefaults method

The initSystemColorDefaults method basically defines all the default colours for the components.

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]));
		}
	}

We can see that the control keyword sets the default colour for the button, slider and other components, so lets change that to blue.

Next we`ll change the foreground colour for the text of the button and window and also change the background color of the window.

"window", 0x00FF00, //Lets make the background color of the window green
"windowText", 0xFF0000 //Make the text red for the window

"controlText", 0xFF0000, //Make the foreground text red for the button.

When we compile this code and run it we can see all the changes except for the button background has not changed. This is where the initComponentDefaults comes into play.

The initComponentDefaults method

The initComponentDefaults method is where you define colours or other classes that control how each asset of the component is rendered.

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);
	}

As you can see in this method that the button background colour is defined by a new ASColorUIResource and not by the control colour.

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

"Button.background",  table.get("control"),

You can see that button text uses refrences the controlText colour so we can leave that alone.

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

If you look at the Frame defination you`ll find that it refrences the window and windowText colours, so when we changed the colour values they were reflected correctly.

"Frame.background", table.get("window"),
"Frame.foreground", table.get("windowText"),

If you do not want to set the colour for a component asset from the default table you can do it the alternative way by using the ASColorUIResource class.

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

You can take a look at all the different assets that you can change of the component and create your own colour schemes.

The initSystemFontDefaults method

The initSystemFontDefaults method basically defines the default font for the look and feel class.