Arma Reforger:Layout Creation - Revision history

Lou Montana: Some wiki formatting

2025-02-22T16:12:17Z

Some wiki formatting

← Older revision		Revision as of 18:12, 22 February 2025
Line 66:		Line 66:

	Place another {{Link\|enfusion://ResourceManager/~ArmaReforger:UI/layouts/WidgetLibrary/Buttons/WLib_ButtonText.layout\|WLib_ButtonText.layout}} button and name it {{hl\|ButtonChange}}.		Place another {{Link\|enfusion://ResourceManager/~ArmaReforger:UI/layouts/WidgetLibrary/Buttons/WLib_ButtonText.layout\|WLib_ButtonText.layout}} button and name it {{hl\|ButtonChange}}.

	~~----~~


Line 116:		Line 114:
	}		}

	/*		// Close button
	Close button
	*/

	SCR_ButtonTextComponent buttonClose = SCR_ButtonTextComponent.GetButtonText(BUTTON_CLOSE, rootWidget);		SCR_ButtonTextComponent buttonClose = SCR_ButtonTextComponent.GetButtonText(BUTTON_CLOSE, rootWidget);
Line 126:		Line 122:
	Print("Button Close not found - won't be able to exit by button", LogLevel.WARNING);		Print("Button Close not found - won't be able to exit by button", LogLevel.WARNING);

	/*		// Change button
	Change button
	*/

	SCR_ButtonTextComponent buttonChange = SCR_ButtonTextComponent.GetButtonText(BUTTON_CHANGE, rootWidget);		SCR_ButtonTextComponent buttonChange = SCR_ButtonTextComponent.GetButtonText(BUTTON_CHANGE, rootWidget);
Line 151:		Line 145:
	inputManager.AddActionListener("MenuOpenWB", EActionTrigger.DOWN, Close);		inputManager.AddActionListener("MenuOpenWB", EActionTrigger.DOWN, Close);
	inputManager.AddActionListener("MenuBackWB", EActionTrigger.DOWN, Close);		inputManager.AddActionListener("MenuBackWB", EActionTrigger.DOWN, Close);
	#endif		#endif // WORKBENCH
	}		}
	else if (!buttonClose)		else if (!buttonClose)
Line 173:		Line 167:
	inputManager.RemoveActionListener("MenuOpenWB", EActionTrigger.DOWN, Close);		inputManager.RemoveActionListener("MenuOpenWB", EActionTrigger.DOWN, Close);
	inputManager.RemoveActionListener("MenuBackWB", EActionTrigger.DOWN, Close);		inputManager.RemoveActionListener("MenuBackWB", EActionTrigger.DOWN, Close);
	#endif		#endif // WORKBENCH
	}		}
	}		}

Lou Montana: Text replacement - "{{Link|Arma Reforger:Resource Manager|Resource Manager}}" to "{{Link|Arma Reforger:Resource Manager}}"

2024-01-11T23:59:40Z

Text replacement - "{{Link|Arma Reforger:Resource Manager|Resource Manager}}" to "{{Link|Arma Reforger:Resource Manager}}"

← Older revision		Revision as of 01:59, 12 January 2024
Line 29:		Line 29:
	== Create a Layout ==		== Create a Layout ==

	Using {{Link\|Arma Reforger:~~Resource Manager\|~~Resource Manager}}, open the mod's directory and create the directory tree {{hl\|UI\layouts}};		Using {{Link\|Arma Reforger:Resource Manager}}, open the mod's directory and create the directory tree {{hl\|UI\layouts}};
	in it, '''right-click > GUI layout''' (or the '''Create button > GUI layout''') to create a {{hl\|.layout}} file - this is our new layout.		in it, '''right-click > GUI layout''' (or the '''Create button > GUI layout''') to create a {{hl\|.layout}} file - this is our new layout.

Lou Montana: Lou Montana moved page Arma Reforger:Create a Layout to Arma Reforger:Layout Creation: Name standard

2023-11-27T16:05:39Z

Lou Montana moved page Arma Reforger:Create a Layout to Arma Reforger:Layout Creation: Name standard

← Older revision	Revision as of 18:05, 27 November 2023
(No difference)

Lou Montana: Remove after class' semicolons

2023-05-19T09:41:54Z

Remove after class' semicolons

← Older revision		Revision as of 11:41, 19 May 2023
Line 78:		Line 78:
	{		{
	TAG_LayoutTutorialExample,		TAG_LayoutTutorialExample,
	};		}
	</enforce>		</enforce>
	* ''Override'' chimeraMenus.conf in the mod (see {{Link\|Arma Reforger:Data Modding Basics#Overriding_assets}} - right-click → {{hl\|override in LayoutTutorial}})		* ''Override'' chimeraMenus.conf in the mod (see {{Link\|Arma Reforger:Data Modding Basics#Overriding_assets}} - right-click → {{hl\|override in LayoutTutorial}})
Line 203:		Line 203:
	textTitle.SetText(result);		textTitle.SetText(result);
	}		}
	};		}
	</enforce>		</enforce>
	</spoiler>		</spoiler>
Line 237:		Line 237:

	protected ref Widget m_wDisplay;		protected ref Widget m_wDisplay;
	};		}

	class TAG_DisplayAction : TAG_ScriptedUserAction		class TAG_DisplayAction : TAG_ScriptedUserAction
Line 262:		Line 262:

	return true;		return true;
	};		}
	};		}

	class TAG_MenuAction : TAG_ScriptedUserAction		class TAG_MenuAction : TAG_ScriptedUserAction
Line 288:		Line 288:

	return true;		return true;
	};		}
	};		}

	class TAG_DialogAction : TAG_ScriptedUserAction		class TAG_DialogAction : TAG_ScriptedUserAction
Line 314:		Line 314:

	return true;		return true;
	};		}
	};		}
	</enforce>		</enforce>
	</spoiler>		</spoiler>

Lou Montana: Fix enum entry → enum constant

2023-03-24T11:19:57Z

Fix enum entry → enum constant

Lou Montana: Implement reyhard's suggestions

2023-03-24T11:11:37Z

Implement reyhard's suggestions

← Older revision		Revision as of 13:11, 24 March 2023
Line 43:		Line 43:
	The first widget is an important one; this button will be used to close the opened UI.		The first widget is an important one; this button will be used to close the opened UI.

	Place a {{Link\|enfusion://ResourceManager/~ArmaReforger:UI/layouts/WidgetLibrary/Buttons/WLib_ButtonText.layout\|WLib_ButtonText.layout}} button. In the Hierarchy window, name it {{hl\|ButtonClose}}.		Place a {{Link\|enfusion://ResourceManager/~ArmaReforger:UI/layouts/WidgetLibrary/Buttons/WLib_ButtonText.layout\|WLib_ButtonText.layout}} button by dragging the layout file from the Resource Browser into the opened layout.
			In the Hierarchy window, name it {{hl\|ButtonClose}}.

	{{Feature\|informative\|		{{Feature\|informative\|
Line 55:		Line 56:
	However, as this prefab uses a {{Link/Enfusion\|armaR\|SCR_ButtonTextComponent}} script component, the displayed value is set within this component.		However, as this prefab uses a {{Link/Enfusion\|armaR\|SCR_ButtonTextComponent}} script component, the displayed value is set within this component.

	Click on '''ButtonClose''' (the prefab's topmost widget) and under ~~Scripts~~, find this said component to change its {{hl\|Text}} property.		Click on '''ButtonClose''' (the prefab's topmost widget) and in its properties, under {{Link\|Arma Reforger:Resource Manager: Layout Editor#Script\|Script}}, find this said component to change its {{hl\|Text}} property.

	=== Add the Title Text ===		=== Add the Title Text ===
Line 73:		Line 74:
	Menus and Dialogs share the same first steps:		Menus and Dialogs share the same first steps:

	* Add an enum by modding the {{Link/Enfusion\|armaR\|ChimeraMenuPreset}} enum in a new script file:<enforce>		* Add an enum by {{Link\|Arma Reforger:Scripting Modding\|modding}} the {{Link/Enfusion\|armaR\|ChimeraMenuPreset}} enum in a new script file:<enforce>
	modded enum ChimeraMenuPreset		modded enum ChimeraMenuPreset
	{		{
Line 79:		Line 80:
	};		};
	</enforce>		</enforce>
	* ''Override'' chimeraMenus.conf in the mod (right-click → override in LayoutTutorial)		* ''Override'' chimeraMenus.conf in the mod (see {{Link\|Arma Reforger:Data Modding Basics#Overriding_assets}} - right-click → {{hl\|override in LayoutTutorial}})
	* Declare this new layout in it by adding an entry (clicking the "+" button):		* Declare this new layout in it by adding an entry (clicking the "+" button):
	** The entry name ("object name" required on new entry) '''must''' match the enum entry, here {{hl\|TAG_LayoutTutorialExample}}, otherwise the engine will not be able to find the menu and will throw an error		** The entry name ("object name" required on new entry) '''must''' match the enum entry, here {{hl\|TAG_LayoutTutorialExample}}, otherwise the engine will not be able to find the menu and will throw an error
Line 232:		Line 233:
	class TAG_ScriptedUserAction : ScriptedUserAction		class TAG_ScriptedUserAction : ScriptedUserAction
	{		{
	[Attribute(defvalue: "{74A4182551CBD740}UI/layouts/TAG_LayoutTutorial.layout")]		[Attribute(defvalue: "{74A4182551CBD740}UI/layouts/TAG_LayoutTutorial.layout")] // setup your layout here
	protected ResourceName m_sLayout;		protected ResourceName m_sLayout;

Line 318:		Line 319:
	</spoiler>		</spoiler>

	Using these actions allow to see the different behaviours of said interface.		Using these actions allow to see the different behaviours of said interface - be sure to set the action's default layout ({{hl\|m_sLayout}} either in code or in Action's configuration UI.

Lou Montana: Page creation

2023-03-13T16:15:48Z

Page creation

New page

{{TOC|side}}
== Definitions ==

=== Display ===

A display is a layout that only provides information to the player; it does not require any input. The player can control his character normally, movement/cursor are not captured.
{{Feature|informative|Think Head-Up Display (HUD).}}

=== Menu ===

A menu is an interface that provides choices or functionality to the player.
{{Feature|informative|Think Field Manual, Inventory etc.}}

=== Dialog ===

A dialog is an interface that requires player's input. There can be multiple dialogs at the same time, they are then ordered by priority. It is displayed on top of a menu, if any is present.
{{Feature|informative|Think OK/Cancel popup window, name input, etc.}}

=== Widget ===

A widget is an element composing a layout - a button, a text, a scrollbar, any "layout part" is a widget.

== Create a Mod ==

See {{Link|Arma Reforger:Mod Project Setup|Mod Project Setup}}.

== Create a Layout ==

Using {{Link|Arma Reforger:Resource Manager|Resource Manager}}, open the mod's directory and create the directory tree {{hl|UI\layouts}};
in it, '''right-click > GUI layout''' (or the '''Create button > GUI layout''') to create a {{hl|.layout}} file - this is our new layout.

Double-click on it to open it, using the {{Link|Arma Reforger:Resource Manager: Layout Editor|Layout Editor}} to edit it.

This first example will sport three features: a title, a change text button and a close button.
* Clicking the change button will change the title
* Clicking the close button will close the UI
* Clicking the title will do nothing.

=== Add the Close Button ===

The first widget is an important one; this button will be used to close the opened UI.

Place a {{Link|enfusion://ResourceManager/~ArmaReforger:UI/layouts/WidgetLibrary/Buttons/WLib_ButtonText.layout|WLib_ButtonText.layout}} button. In the Hierarchy window, name it {{hl|ButtonClose}}.

{{Feature|informative|
* Widget names will be used later in the code.
* The WLib prefix means Widget Library and is used to find widget prefabs more easily.
* Buttons are only useful in Menu and Dialog; as a Display is not interactable
}}

To change this button's text, one could be tempted to change ButtonClose > SizeLayout > Overlay > Text's {{hl|Text}} property.

However, as this prefab uses a {{Link/Enfusion|armaR|SCR_ButtonTextComponent}} script component, the displayed value is set within this component.

Click on '''ButtonClose''' (the prefab's topmost widget) and under Scripts, find this said component to change its {{hl|Text}} property.

=== Add the Title Text ===

The second widget is the title.
Place a {{Link|enfusion://ResourceManager/~ArmaReforger:UI/layouts/WidgetLibrary/RichTextWidgets/RichText_Heading2.layout|RichText_Heading2.layout}} and name it "TextTitle".

=== Add the Change Text Button ===

Place another {{Link|enfusion://ResourceManager/~ArmaReforger:UI/layouts/WidgetLibrary/Buttons/WLib_ButtonText.layout|WLib_ButtonText.layout}} button and name it {{hl|ButtonChange}}.

----

== Menu/Dialog Setup ==

Menus and Dialogs share the same first steps:

* Add an enum by modding the {{Link/Enfusion|armaR|ChimeraMenuPreset}} enum in a new script file:<enforce>
modded enum ChimeraMenuPreset
{
TAG_LayoutTutorialExample,
};
</enforce>
* ''Override'' chimeraMenus.conf in the mod (right-click → override in LayoutTutorial)
* Declare this new layout in it by adding an entry (clicking the "+" button):
** The entry name ("object name" required on new entry) '''must''' match the enum entry, here {{hl|TAG_LayoutTutorialExample}}, otherwise the engine will not be able to find the menu and will throw an error
** '''Layout''' - the path to the created layout
** '''Action Context''' - ''unused in this tutorial''
** '''Class''' - the script class to be used with the menu/dialog, see the next chapter where we will create the {{hl|TAG_LayoutTutorialUI}} class.
** '''Menu Items''' - ''unused in this tutorial''
** '''Preload Count''' - ''unused in this tutorial''
** '''Persistent''' - ''unused in this tutorial''

== Class Setup ==

The menu/dialog class must inherit from at least {{Link/Enfusion|armaR|MenuBase}}, {{Link/Enfusion|armaR|ChimeraMenuBase}} or {{Link/Enfusion|armaR|MenuRootBase}}, depending on the required features.

Here is the example adapted to our earlier layout:
<spoiler text="Show TAG_LayoutTutorialUI code">
<enforce>
class TAG_LayoutTutorialUI : MenuBase
{
protected static const string TEXT_TITLE = "TextTitle";
protected static const string BUTTON_CLOSE = "ButtonClose";
protected static const string BUTTON_CHANGE = "ButtonChange";

//------------------------------------------------------------------------------------------------
protected override void OnMenuOpen()
{
Print("OnMenuOpen: menu/dialog opened!", LogLevel.NORMAL);

Widget rootWidget = GetRootWidget();
if (!rootWidget)
{
Print("Error in Layout Tutorial layout creation", LogLevel.ERROR);
return;
}

/*
Close button
*/

SCR_ButtonTextComponent buttonClose = SCR_ButtonTextComponent.GetButtonText(BUTTON_CLOSE, rootWidget);
if (buttonClose)
buttonClose.m_OnClicked.Insert(Close);
else
Print("Button Close not found - won't be able to exit by button", LogLevel.WARNING);

/*
Change button
*/

SCR_ButtonTextComponent buttonChange = SCR_ButtonTextComponent.GetButtonText(BUTTON_CHANGE, rootWidget);
if (buttonChange)
buttonChange.m_OnClicked.Insert(ChangeText);
else
Print("Button Change not found", LogLevel.WARNING); // the button can be missing without putting the layout in jeopardy

/*
ESC/Start listener
*/

InputManager inputManager = GetGame().GetInputManager();
if (inputManager)
{
// this is for the menu/dialog to close when pressing ESC
// an alternative is to have a button with the SCR_NavigationButtonComponent component
// and its Action Name field set to MenuBack - this would activate the button on ESC press
inputManager.AddActionListener("MenuOpen", EActionTrigger.DOWN, Close);
inputManager.AddActionListener("MenuBack", EActionTrigger.DOWN, Close);
#ifdef WORKBENCH // in Workbench, F10 is used because ESC closes the preview
inputManager.AddActionListener("MenuOpenWB", EActionTrigger.DOWN, Close);
inputManager.AddActionListener("MenuBackWB", EActionTrigger.DOWN, Close);
#endif
}
else if (!buttonClose)
{
Print("Auto-closing the menu that has no exit path", LogLevel.WARNING);
Close();
return;
}
}

//------------------------------------------------------------------------------------------------
protected override void OnMenuClose()
{
// here we clean action listeners added above as the good practice wants it
InputManager inputManager = GetGame().GetInputManager();
if (inputManager)
{
inputManager.RemoveActionListener("MenuOpen", EActionTrigger.DOWN, Close);
inputManager.RemoveActionListener("MenuBack", EActionTrigger.DOWN, Close);
#ifdef WORKBENCH
inputManager.RemoveActionListener("MenuOpenWB", EActionTrigger.DOWN, Close);
inputManager.RemoveActionListener("MenuBackWB", EActionTrigger.DOWN, Close);
#endif
}
}

//------------------------------------------------------------------------------------------------
protected void ChangeText()
{
Widget rootWidget = GetRootWidget();
if (!rootWidget)
return;

TextWidget textTitle = TextWidget.Cast(rootWidget.FindWidget(TEXT_TITLE));
if (!textTitle)
{
Print("Title as TextWidget could not be found", LogLevel.WARNING);
return;
}

string result;
switch (Math.RandomInt(1, 6))
{
case 1: result = "This is a title"; break;
case 2: result = "Random text"; break;
case 3: result = "Third text, actually"; break;
case 4: result = "Bonjour"; break;
case 5: result = "I like trains"; break;
}

textTitle.SetText(result);
}
};
</enforce>
</spoiler>

== Usage ==

In order to test more easily, we can place a prefab with an ActionsManagerComponent to add actions that trigger UI creation.
Each action targets a specific type (display, menu, dialog and their respective classes, {{hl|TAG_DisplayAction}}, {{hl|TAG_MenuAction}} and {{hl|TAG_DialogAction}}).

{{Feature|informative|See {{Link|Arma Reforger:Action Context Setup|Action Context Setup}} for more information.}}

=== Display ===

<enforce>GetGame().GetWorkspace().CreateWidgets(m_sLayout);</enforce>

=== Menu ===

<enforce>GetGame().GetMenuManager().OpenMenu(ChimeraMenuPreset.TAG_LayoutTutorialExample);</enforce>

=== Dialog ===

<enforce>GetGame().GetMenuManager().OpenDialog(ChimeraMenuPreset.TAG_LayoutTutorialExample, DialogPriority.INFORMATIVE, 0, true);</enforce>

=== Code ===

<spoiler text="Show Scripted Action code">
<enforce>
class TAG_ScriptedUserAction : ScriptedUserAction
{
[Attribute(defvalue: "{74A4182551CBD740}UI/layouts/TAG_LayoutTutorial.layout")]
protected ResourceName m_sLayout;

protected ref Widget m_wDisplay;
};

class TAG_DisplayAction : TAG_ScriptedUserAction
{
//------------------------------------------------------------------------------------------------
override void PerformAction(IEntity pOwnerEntity, IEntity pUserEntity)
{
if (m_wDisplay)
{
delete m_wDisplay;
return;
}

m_wDisplay = GetGame().GetWorkspace().CreateWidgets(m_sLayout);
}

//------------------------------------------------------------------------------------------------
override bool GetActionNameScript(out string outName)
{
if (m_wDisplay)
outName = "Delete display";
else
outName = "Create display";

return true;
};
};

class TAG_MenuAction : TAG_ScriptedUserAction
{
//------------------------------------------------------------------------------------------------
override void PerformAction(IEntity pOwnerEntity, IEntity pUserEntity)
{
if (m_wDisplay)
{
delete m_wDisplay;
return;
}

GetGame().GetMenuManager().OpenMenu(ChimeraMenuPreset.TAG_LayoutTutorialExample);
}

//------------------------------------------------------------------------------------------------
override bool GetActionNameScript(out string outName)
{
if (m_wDisplay)
outName = "Delete menu";
else
outName = "Create menu";

return true;
};
};

class TAG_DialogAction : TAG_ScriptedUserAction
{
//------------------------------------------------------------------------------------------------
override void PerformAction(IEntity pOwnerEntity, IEntity pUserEntity)
{
if (m_wDisplay)
{
delete m_wDisplay;
return;
}

GetGame().GetMenuManager().OpenDialog(ChimeraMenuPreset.TAG_LayoutTutorialExample, DialogPriority.INFORMATIVE, 0, true);
}

//------------------------------------------------------------------------------------------------
override bool GetActionNameScript(out string outName)
{
if (m_wDisplay)
outName = "Delete dialog";
else
outName = "Create dialog";

return true;
};
};
</enforce>
</spoiler>

Using these actions allow to see the different behaviours of said interface.

== See Also ==

{{Link/Enfusion|armaR|MenuManager}}'s various methods, including:
* <enforce inline>IsAnyDialogOpen()</enforce> - check if an existing dialog exists
* <enforce inline>GetTopMenu()</enforce> - get the topmost menu
* <enforce inline>CloseAllMenus()</enforce> - close all opened menus

{{GameCategory|armaR|Modding|Tutorials}}

← Older revision		Revision as of 13:19, 24 March 2023
Line 74:		Line 74:
	Menus and Dialogs share the same first steps:		Menus and Dialogs share the same first steps:

	* Add an enum by {{Link\|Arma Reforger:Scripting Modding\|modding}} the {{Link/Enfusion\|armaR\|ChimeraMenuPreset}} enum in a new script file:<enforce>		* Add an enum constant by {{Link\|Arma Reforger:Scripting Modding\|modding}} the {{Link/Enfusion\|armaR\|ChimeraMenuPreset}} enum in a new script file:<enforce>
	modded enum ChimeraMenuPreset		modded enum ChimeraMenuPreset
	{		{
Line 82:		Line 82:
	* ''Override'' chimeraMenus.conf in the mod (see {{Link\|Arma Reforger:Data Modding Basics#Overriding_assets}} - right-click → {{hl\|override in LayoutTutorial}})		* ''Override'' chimeraMenus.conf in the mod (see {{Link\|Arma Reforger:Data Modding Basics#Overriding_assets}} - right-click → {{hl\|override in LayoutTutorial}})
	* Declare this new layout in it by adding an entry (clicking the "+" button):		* Declare this new layout in it by adding an entry (clicking the "+" button):
	** The entry name ("object name" required on new entry) '''must''' match the enum ~~entry~~, here {{hl\|TAG_LayoutTutorialExample}}, otherwise the engine will not be able to find the menu and will throw an error		** The entry name ("object name" required on new entry) '''must''' match the enum constant, here {{hl\|TAG_LayoutTutorialExample}}, otherwise the engine will not be able to find the menu and will throw an error
	** '''Layout''' - the path to the created layout		** '''Layout''' - the path to the created layout
	** '''Action Context''' - ''unused in this tutorial''		** '''Action Context''' - ''unused in this tutorial''
Line 233:		Line 233:
	class TAG_ScriptedUserAction : ScriptedUserAction		class TAG_ScriptedUserAction : ScriptedUserAction
	{		{
	[Attribute(defvalue: "{74A4182551CBD740}UI/layouts/TAG_LayoutTutorial.layout")] // setup ~~your~~ layout here		[Attribute(defvalue: "{74A4182551CBD740}UI/layouts/TAG_LayoutTutorial.layout")] // setup the created layout here
	protected ResourceName m_sLayout;		protected ResourceName m_sLayout;