Major change: Most of the visual styling can no longer be done throug…

…h code, all image, hovering, active, focus, etc must now be configured through the DefaultForms.ini file.

Active, Focus, Hover, Global, Default, and Hidden styles can now be configured and inherited through the .ini file.

Example:
; Class chain: FComponent->FLabel->FButton->FTabButton
;	begin object name=oPlayButton class=FTabButton
;		...
;		StyleNames.Add(NavButton) // Add NavButton as class. You may add more classes to distinguish styles per button, see below QuitButton.
;	end object
[(Standard)Button-TabButton-NavButton FStyle]
ImageColor=(R=255,G=255,B=0,A=255)

[(Standard)Button-TabButton-NavButton:hover FStyle]
ImageColor=(R=240,G=240,B=240,A=255)

The above example shows an example of a PlayButton being created with the assigned style called NavButton which inherits the style from TabButton and Button which are also initialized in the .ini file!

Beware though this is still experimental, does have its issues and still a lot more of the styling needs to be moved to the ini.

[Add]: FCheckBoxStyle.
[Add]: FormsExample as a submodule.

.gitignore

@@ -0,0 +1 @@
+/*.xlsx

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "FormsExample"]
+	path = FormsExample
+	url = C:\\UDK\\UDK-2012-10-LC\\Development\\Src\\FormsExample

Classes/FBindingBox.uc

@@ -190,4 +190,6 @@ defaultproperties
 		Margin=(W=0,X=0,Y=0,Z=0)
 	end object
 	ActionSecondaryKey=oIBActionSecondaryKey
+
+	StyleName=Default
 }

Classes/FButton.uc

@@ -119,4 +119,6 @@ defaultproperties
 
 	AnimateSpeed=15
 	AnimateOffset=6
+
+	StyleNames.Add(Button)
 }

Classes/FCheckBox.uc

@@ -18,8 +18,6 @@
 class FCheckBox extends FLabel;
 
 var(CheckBox, Usage) bool bChecked;
-var(CheckBox, Display) const Color UncheckedColor;
-var(CheckBox, Display) const Color CheckedColor;
 
 delegate OnChecked( FComponent sender );
 
@@ -32,7 +30,7 @@ function Free()
 protected function RenderComponent( Canvas C )
 {
 	super(FComponent).RenderComponent( C );
-	RenderBackground( C, bChecked ? CheckedColor : UncheckedColor );
+	RenderBackground( C, bChecked ? FCheckBoxStyle(Style).CheckedColor : FCheckBoxStyle(Style).UncheckedColor );
 
 	if( Text != "" )
 	{
@@ -64,8 +62,8 @@ defaultproperties
 	TextColor=(R=255,G=255,B=255,A=255)
 	TextAlign=TA_Left
 
-	UncheckedColor=(R=255,G=0,B=0,A=255)
-	CheckedColor=(R=0,G=255,B=0,A=255)
+	StyleNames.Add(CheckBox)
+	StyleClass=class'FCheckBoxStyle'
 
 	bEnabled=true
 }

Classes/FCheckBoxStyle.uc

@@ -0,0 +1,21 @@
+/* ========================================================
+ * Copyright 2012 Eliot van Uytfanghe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================
+ * FCheckBoxStyle: Adds configurable styling options for FCheckBox.
+ * ======================================================== */
+class FCheckBoxStyle extends FStyle;
+
+var(Style, Colors) config const Color	CheckedColor;
+var(Style, Colors) config const Color	UncheckedColor;

Classes/FColumn.uc

@@ -17,8 +17,8 @@
  * ======================================================== */
 class FColumn extends FLabel;
 
-var(Column) editinline Object AssociatedObject;
-var(Column) string AssociatedCode;
+var(Column) editinline Object 	AssociatedObject;
+var(Column) string 				AssociatedCode;
 
 var(Column, Display) editinline Texture2D ColumnImage;
 
@@ -77,12 +77,7 @@ defaultproperties
 	TextVAlign=TA_Top
 	TextAlign=TA_Center
 
-	begin object name=oStyle
-		HoverColor=(R=200,A=120)
-		ActiveColor=(R=0,G=200,B=0,A=128)
-		DisabledColor=(R=200,G=0,B=0,A=255)
-	end object
-	Style=oStyle
+	StyleNames.Add(Column)
 
 	bEnabled=true
 }

Classes/FComponent.uc

@@ -110,7 +110,24 @@ var(Component, Collision) enum ECollisionShape
 } CollisionShape;
 
 /** The style for this component to use. */
-var(Component, Display) privatewrite editinline FStyle Style;
+var(Component, Display) privatewrite editinline FStyle 	Style;
+var private editinline FStyle							InitStyle, HoverStyle, ActiveStyle, FocusStyle;
+
+/** 
+ * A style object will be created and assigned to @Style based on an ini configuration 
+ *  - such as [Button FStyle] then StyleNames would be 'Button'. 
+ * ---
+ * It's possible to use hyphens to define style inheritance:
+ * 	When initializing, this specified style class will be inherited when creating this component's style. 
+ * 	For example: Button-TabButton inherits Button but Button-TabButton:hover does not inherit Button:hover! :(
+ *	This is defined as StyleNames.Add(Button), StyleNames.Add(TabButton)
+ * ---
+ * If the array is empty then @StyleName will be used instead.
+ */
+var const private array<name> 							StyleNames;
+var const private name									StyleName;
+
+var const private class<FStyle>							StyleClass;
 
 /** Whether to clip anything going out of this component region. */
 var(Component, Display) bool bClipComponent;
@@ -195,11 +212,45 @@ function Initialize( FIController c )
 	`if( `isdefined( DEBUG ) )
 		SaveConfig();
 	`endif
+
+	BindStyle();
+}
 
-	if( Style != none )
-	{
-		SetStyle( Style );
-	}
+public final function ResetStyle()
+{
+	if( HoverStyle != none ){Scene().FreeObject( HoverStyle ); HoverStyle = none;}
+	if( ActiveStyle != none ){Scene().FreeObject( ActiveStyle ); ActiveStyle = none;}
+	if( FocusStyle != none ){Scene().FreeObject( FocusStyle ); FocusStyle = none;}
+
+	Scene().FreeObject( InitStyle ); InitStyle = none;
+	Style = none;
+
+	//ResetConfig( true );
+
+	BindStyle();
+}
+
+private final function BindStyle()
+{
+	local string styleIdentifier;
+
+	styleIdentifier = (StyleNames.Length > 0) ? SplitArray( StyleNames, "-" ) : string(StyleName);
+	Style = Scene().GetStyle( styleIdentifier, StyleClass );
+	InitStyle = Style;
+
+	// All states inherit the default's style not Global:Hover( not supported :( ))
+	HoverStyle = GetStateStyle( styleIdentifier, "hover" );
+	ActiveStyle = GetStateStyle( styleIdentifier, "active" );
+	FocusStyle = GetStateStyle( styleIdentifier, "focus" );
+
+	if( HoverStyle == none ) HoverStyle = InitStyle;
+	if( ActiveStyle == none ) ActiveStyle = InitStyle;
+	if( FocusStyle == none ) FocusStyle = InitStyle;
+}
+
+private final function FStyle GetStateStyle( string styleIdentifier, string stateName )
+{
+	return Scene().GetStyle( styleIdentifier $ ":" $ stateName, StyleClass, InitStyle );
 }
 
 /** Initializes this component. Override this to add other components or objects to this component. */
@@ -277,7 +328,7 @@ function Render( Canvas C )
 	C.SetOrigin( 0, 0 );
 }
 
-/** Override this to render anything specific to a unique component. */
+/** Override this to render anything specific to an unique component. */
 protected function RenderComponent( Canvas C );
 
 /** 
@@ -291,8 +342,8 @@ function Free()
 	// POINTERS
 	Controller = none;
 	Parent = none;
-	Style = none;
-	
+	Style = none; InitStyle = none; HoverStyle = none; ActiveStyle = none; FocusStyle = none;
+
 	// DELEGATES
 	OnClick = none;
 	OnDoubleClick = none;
@@ -323,8 +374,6 @@ final function SetStyle( FStyle newStyle )
 		return;
 
 	Style = newStyle;
-	Style.Initialize();
-	Scene().AddToPool( Style );
 }
 
 final function SetPos( const float X, const float Y )
@@ -521,6 +570,7 @@ final protected function bool Collides( out IntPoint mousePosition )
 /** Notify that the component is selected! */
 final function Focus()
 {
+	Style = FocusStyle;
 	LastFocusedTime = `STime;
 	LastStateChangeTime = LastFocusedTime;
 	InteractionState = InteractionState | ES_Selected;
@@ -532,6 +582,7 @@ final function Focus()
 /** Notify that the component is no longer selected! */
 final function UnFocus()
 {
+	Style = InitStyle;
 	LastUnfocusedTime = `STime;
 	LastStateChangeTime = LastUnfocusedTime;
 	InteractionState = InteractionState & ~ES_Selected;
@@ -542,6 +593,7 @@ final function UnFocus()
 
 final function Active()
 {
+	Style = ActiveStyle;
 	LastActiveTime = `STime;
 	LastStateChangeTime = LastActiveTime;
 	InteractionState = InteractionState | ES_Active;
@@ -552,6 +604,7 @@ final function Active()
 
 final function UnActive()
 {
+	Style = InitStyle;
 	LastUnactiveTime = `STime;
 	LastStateChangeTime = LastUnactiveTime;
 	InteractionState = InteractionState & ~ES_Active;
@@ -562,6 +615,7 @@ final function UnActive()
 
 final function Hover()
 {
+	Style = HoverStyle;
 	LastHoveredTime = `STime;
 	LastStateChangeTime = LastHoveredTime;
 	InteractionState = InteractionState | ES_Hover;
@@ -572,6 +626,7 @@ final function Hover()
 
 final function UnHover()
 {
+	Style = InitStyle;
 	LastUnhoveredTime = `STime; 
 	LastStateChangeTime = LastUnhoveredTime;
 	InteractionState = InteractionState & ~ES_Hover;
@@ -598,11 +653,14 @@ final function string ConsoleCommand( const string command )
 	return Controller.Player().ConsoleCommand( command );
 }
 
-final protected function RenderBackground( Canvas C, Color drawColor = Style.ImageColor )
+final protected function RenderBackground( Canvas C, 
+	optional Color drawColor = Style != none 
+		? Style.ImageColor 
+		: class'HUD'.default.WhiteColor )
 {
 	if( Style == none )
 	{
-		`Log( "Attempting to draw a background for component:" @ self @ "without a style!" );
+		//`Log( "Attempting to draw a background for component:" @ self @ "without a style!" );
 		return;
 	}
 
@@ -667,7 +725,10 @@ final protected function FadingSwapColor( out Color newColor, const out Color de
 /** Create a new instance of @componentClass. 
  *	Used to create components at run-time.
  */
-final protected function FComponent CreateComponent( const class<FComponent> componentClass, optional Object componentOuter = self, optional FComponent componentTemplate = none, optional string componentName )
+final protected function FComponent CreateComponent( const class<FComponent> componentClass, 
+	optional Object componentOuter = self, 
+	optional FComponent componentTemplate = none, 
+	optional string componentName )
 {
 	return new(componentOuter, componentName) componentClass (componentTemplate);
 }
@@ -708,10 +769,8 @@ defaultproperties
 	bSupportHovering=true
 	bClipComponent=false
 
-	begin object name=oStyle class=FStyle
-		// Styles...	
-	end object
-	Style=oStyle
+	StyleName=Hidden
+	StyleClass=class'FStyle'
 
 	HorizontalDock=HD_Left
 	VerticalDock=VD_Top

Classes/FController.uc

@@ -86,6 +86,20 @@ event PostRender( Canvas C )
 	}
 }
 
+exec function ReloadStyle()
+{
+	local FObject obj;
+
+	ScenePointer.Styles.Length = 0;
+	foreach ScenePointer.ObjectsPool( obj )
+	{
+		if( FComponent(obj) != none )
+		{
+			FComponent(obj).ResetStyle();
+		}
+	}
+}
+
 function NotifyGameSessionEnded()
 {
 	`Log( "NotifyGameSessionEnded!",, 'Forms' );

Classes/FGroupBox.uc

@@ -77,8 +77,6 @@ defaultproperties
 	bSupportHovering=`devmode
 
 	Padding=(W=8,X=8,Y=8,Z=8)
-
-	begin object name=oStyle
-		ImageColor=(R=120,G=120,B=120,A=255)
-	end object
+
+	StyleNames.Add(GroupBox)
 }

Classes/FLabel.uc

@@ -193,7 +193,7 @@ defaultproperties
 
 	Text="Label"
 	TextFont=MultiFont'UI_Fonts_Final.HUD.MF_Small'
-	TextColor=(R=255,G=255,B=255,A=255)
+	TextColor=(R=245,G=245,B=245,A=255)
 	TextAlign=TA_Left
 	TextVAlign=TA_Center
 

Classes/FObject.uc

@@ -22,6 +22,22 @@ class FObject extends Object
 function Free();
 function Render( Canvas C );
 
+public final function string SplitArray( array<name> nameArray, string spacer = "-" )
+{
+	local int i;
+	local string ret;
+
+	for( i = 0; i < nameArray.Length; ++ i )
+	{
+		ret $= nameArray[i];
+		if( i != nameArray.Length - 1 )
+		{
+			ret $= "-";
+		}
+	}
+	return ret;
+}
+
 defaultproperties
 {
 }

Classes/FPage.uc

@@ -49,4 +49,6 @@ defaultproperties
 	bClipComponent=true
 	Margin=(X=0,Y=0,Z=0,W=0)
 	Padding=(X=8,Y=8,Z=8,W=8)
+
+	StyleNames.Add(Page)
 }