Librocket - Revision history

MjnMixael: Replaced content with "{{SCPUI moved|https://github.com/MjnMixael/SCPUI/wiki/Librocket}}"

2026-10-28T18:30:02Z

Replaced content with "{{SCPUI moved|https://github.com/MjnMixael/SCPUI/wiki/Librocket}}"

← Older revision		Revision as of 18:30, 28 October 2026
Line 1:		Line 1:
	~~Librocket is the UI library that [[~~SCPUI]] uses to layout, draw, and implement the upgraded ui system within FreeSpace Open. It uses the open standards XHTML1.0 and CSS2.0 (while borrowing features from HTML5 and CSS3), and extends them with features suited towards real-time applications.		{{SCPUI moved\|https://github.com/MjnMixael/SCPUI/wiki/Librocket}}

	~~FSO's version of the library is a bugfixed fork of the original. [~~https://github.com/~~asarium~~/~~libRocketMod The source code is available here.]~~

	~~==Basics==~~
	~~The basic implementation of a librocket UI within FSO contains three files: RML, CSS, and LUA.~~

	~~==Development and Debugging==~~
	~~There are three main things to know when working with the librocket library within FSO.~~

	~~#You can view the librocket debugger by pressing '''''ctrl-shift-d'''''~~
	~~#You can live-reload RML and RCSS files by pressing '''''ctrl-shift-r'''''~~
	**It's worth noting that Librocket will drop the existing elements and lose them in memory. This will cause a warning on game-exit.
	~~#Librocket API warnings and errors are not currently forwarded to FSO's error handling. Because of this, simple bugs in your Lua code that uses the API cause cause FSO to crash.~~

	~~==RML==~~
	RML is based loosely around XHTML 1.0 and HTML 4.01, however element names are (mostly) open-ended in RML and can be used in any way that is logical for your application. All documents follow strict XML1.0 specification and where possible all libRocket elements follow their HTML equivalent.

	RML maintains the core components of HTML4, including CSS and scripting. It provides a number of basic elements including input fields, radio buttons and check boxes as well as more complex enhancements such as templates and datagrids.

	*[[RML_Elements\|Elements]] - The basic RML element.
	*[[RML_Documents\|Documents]] - The HEAD and BODY of a document.
	*[[RML_Images\|Images]] - Referencing images.
	*[[RML_StyleSheets\|Style Sheets]] - Adding style to RML documents.
	*[[RML_Forms\|Forms]] - User-input forms.
	*[[RML_Controls\|Controls]] - Tabsets and window handles.
	*[[RML_DataDisplay\|Data Display]] - Data grids and data selects.
	*[[RML_Templates\|Templates]] - Making all your windows look consistent.
	*[[RML_Events\|Events]] - Mouse clicks, movement, key presses, text entry.

	~~==RCSS==~~
	RCSS is based on the CSS2 specification, with certain elements removed or altered to suit the needs of libRocket. In some cases, elements have been taken from the CSS3 working draft. This document provides an overview of RCSS and the differences between RCSS and CSS, and should be read in conjunction with the CSS2 specification.

	RCSS interacts with RML in an identical fashion to CSS and HTML. Style properties declared in a RCSS are attached selectively to elements defined in RML to affect layout, positioning and other style attributes (such as font, color, text decoration, etc).

	If you are familiar with CSS, a good place to start is the [[RCSS_Properties\|property index]], which outlines the properties and values supported in RCSS and the new functionality included. Next, read up on decorators, the new, flexible way to skin elements.

	~~If you are not, read through this documentation while consulting the CSS2 specification for detailed examples and technical details, or skip all this for now and play around with the samples!~~
	*[[RCSS_Syntax\|Syntax and basic data types]]
	*[[RCSS_Selectors\|Selectors]]
	*[[RCSS_BoxModel\|Box model]]
	*[[RCSS_VisualModel\|Visual formatting model]]
	*[[RCSS_VisualEffects\|Visual effects]]
	*[[RCSS_ColorsBackgrounds\|Colors and backgrounds]]
	*[[RCSS_Fonts\|Fonts]]
	*[[RCSS_Text\|Text]]
	*[[RCSS_CursorsDragTab\|Cursors, Dragging and Tabbing]]
	*[[RCSS_Decorators\|Decorators]]
	*[[RCSS_FontEffects\|Font effects]]
	*[[RCSS_Scrollbars\|Scrollbars and Sliders]]
	*[[RCSS_Properties\|Property Index]]

	~~==LUA API==~~
	The Lua interface to libRocket has been designed to resemble Javascript as closely as possible. It is how the librocket UI will actually interact with the Freespace Open engine. Below is a list of property and API references.

	*[[Librocket_API_Element\|Elements]]
	*[[Librocket_API_Document\|Documents]]
	*[[Librocket_API_Context\|Contexts]]
	*[[Librocket_API_Event\|Events]]
	*[[Librocket_API_Reference\|API Reference]]

	~~===Embedding Script===~~
	Lua code can be embedded into RML files. Inline responses to events are executed as Python code. Functions, structures and variables can be declared or included with the <script> tag, then referenced from the inline code.

	Similarly to Javascript, the lua can be included from a separate file with the src attribute, or otherwise declared inline as loose content within the <script> tag. Any code embedded in this manner will be compiled with the document and will be available to inline event handlers in the RML. See the following examples.
	~~<pre>~~
	~~<rml>~~
	~~<head>~~
	~~<script>~~
	~~def Test():~~
	~~print 'Hello world!'~~
	</~~script>~~
	</~~head>~~
	~~<body>~~
	~~<button onclick="Test()">Continue</button>~~
	~~</body>~~
	~~</rml>~~
	~~</pre>~~
	~~<pre>~~
	~~<rml>~~
	~~<head>~~
	~~<script src="test.py"></script>~~
	~~</head>~~
	~~<body>~~
	~~<button onclick="Test()">Continue</button>~~
	~~</body>~~
	~~</rml>~~
	~~</pre>~~
	~~===Attaching To Events===~~
	~~You can attach to user interface events statically in the RML or dynamically in the lua scripts.~~
	*A list of events available to attach to is in the [[RML_Events\|RML Events]] documentation.

	~~====Statically====~~
	~~With this method you write your code directly into the RML files, using the on* attributes. When the event is fired three global variables are set up, document, event and self.~~
	*[[Librocket_API_Element\|self]] - The element thats currently being processed
	*[[Librocket_API_Document\|document]] - The document the element thats currently being processed belongs to
	*[[Librocket_API_Event\|event]] - The event thats currently being processed
	~~Using the on* attributes you write your code inline~~
	*Example: <code><button onclick="ba.print('Clicked!')"/></code>
	~~LibRocket allows multiple lines of code to be put on one line, separated by a semicolon.~~
	*Example: <code><button onclick="ba.print('Line 1');ba.print('Line 2')"/></code>

	~~====Dynamically====~~
	~~The AddEventListener() method allows you to bind any callable LUA method to an event.~~
	~~<pre>~~
	~~function print(message)~~
	~~ba.print(message)~~
	~~end~~

	~~function createListener()~~
	~~element = document:GetElementById('button')~~
	~~element:AddEventListener('click', function(_, _, _)~~
	~~print("clicked!")~~
	~~end)~~
	~~end~~
	~~</pre>~~

MjnMixael: /* Basics */

2023-04-24T15:02:51Z

Basics

← Older revision		Revision as of 15:02, 24 April 2023
Line 5:		Line 5:
	==Basics==		==Basics==
	The basic implementation of a librocket UI within FSO contains three files: RML, CSS, and LUA.		The basic implementation of a librocket UI within FSO contains three files: RML, CSS, and LUA.

			==Development and Debugging==
			There are three main things to know when working with the librocket library within FSO.

			#You can view the librocket debugger by pressing '''''ctrl-shift-d'''''
			#You can live-reload RML and RCSS files by pressing '''''ctrl-shift-r'''''
			**It's worth noting that Librocket will drop the existing elements and lose them in memory. This will cause a warning on game-exit.
			#Librocket API warnings and errors are not currently forwarded to FSO's error handling. Because of this, simple bugs in your Lua code that uses the API cause cause FSO to crash.

	==RML==		==RML==

MjnMixael: /* RCSS */

2023-04-22T17:09:03Z

RCSS

← Older revision		Revision as of 17:09, 22 April 2023
Line 40:		Line 40:
	*[[RCSS_Decorators\|Decorators]]		*[[RCSS_Decorators\|Decorators]]
	*[[RCSS_FontEffects\|Font effects]]		*[[RCSS_FontEffects\|Font effects]]
			*[[RCSS_Scrollbars\|Scrollbars and Sliders]]
	*[[RCSS_Properties\|Property Index]]		*[[RCSS_Properties\|Property Index]]

MjnMixael: /* RCSS */

2023-04-22T17:02:28Z

RCSS

← Older revision		Revision as of 17:02, 22 April 2023
Line 33:		Line 33:
	*[[RCSS_BoxModel\|Box model]]		*[[RCSS_BoxModel\|Box model]]
	*[[RCSS_VisualModel\|Visual formatting model]]		*[[RCSS_VisualModel\|Visual formatting model]]
	*[[RCSS_VisualModelDetails\|Visual formatting model details]]
	*[[RCSS_VisualEffects\|Visual effects]]		*[[RCSS_VisualEffects\|Visual effects]]
	*[[RCSS_ColorsBackgrounds\|Colors and backgrounds]]		*[[RCSS_ColorsBackgrounds\|Colors and backgrounds]]

MjnMixael: /* RCSS */

2023-04-22T16:30:22Z

RCSS

← Older revision		Revision as of 16:30, 22 April 2023
Line 31:		Line 31:
	*[[RCSS_Syntax\|Syntax and basic data types]]		*[[RCSS_Syntax\|Syntax and basic data types]]
	*[[RCSS_Selectors\|Selectors]]		*[[RCSS_Selectors\|Selectors]]
	*[[RCSS_AssigningCascading\|Assigning property values, Cascading and Inheritance]]
	*[[RCSS_BoxModel\|Box model]]		*[[RCSS_BoxModel\|Box model]]
	*[[RCSS_VisualModel\|Visual formatting model]]		*[[RCSS_VisualModel\|Visual formatting model]]

MjnMixael at 20:21, 21 April 2023

2023-04-21T20:21:13Z

← Older revision		Revision as of 20:21, 21 April 2023
Line 1:		Line 1:
	Librocket is the UI library that SCPUI uses to layout, draw, and implement the upgraded ui system within FreeSpace Open. It uses the open standards XHTML1.0 and CSS2.0 (while borrowing features from HTML5 and CSS3), and extends them with features suited towards real-time applications.		Librocket is the UI library that [[SCPUI]] uses to layout, draw, and implement the upgraded ui system within FreeSpace Open. It uses the open standards XHTML1.0 and CSS2.0 (while borrowing features from HTML5 and CSS3), and extends them with features suited towards real-time applications.

	FSO's version of the library is a bugfixed fork of the original. [https://github.com/asarium/libRocketMod The source code is available here.]		FSO's version of the library is a bugfixed fork of the original. [https://github.com/asarium/libRocketMod The source code is available here.]

MjnMixael: initial writeup

2023-04-21T20:20:46Z

initial writeup

← Older revision		Revision as of 20:20, 21 April 2023
Line 1:		Line 1:
	~~Placeholder home~~ for librocket ~~explainer~~, ~~methods~~, and ~~relevant~~ documentation ~~as it relates~~ to ~~FSO~~.		Librocket is the UI library that SCPUI uses to layout, draw, and implement the upgraded ui system within FreeSpace Open. It uses the open standards XHTML1.0 and CSS2.0 (while borrowing features from HTML5 and CSS3), and extends them with features suited towards real-time applications.

			FSO's version of the library is a bugfixed fork of the original. [https://github.com/asarium/libRocketMod The source code is available here.]

			==Basics==
			The basic implementation of a librocket UI within FSO contains three files: RML, CSS, and LUA.

			==RML==
			RML is based loosely around XHTML 1.0 and HTML 4.01, however element names are (mostly) open-ended in RML and can be used in any way that is logical for your application. All documents follow strict XML1.0 specification and where possible all libRocket elements follow their HTML equivalent.

			RML maintains the core components of HTML4, including CSS and scripting. It provides a number of basic elements including input fields, radio buttons and check boxes as well as more complex enhancements such as templates and datagrids.

			*[[RML_Elements\|Elements]] - The basic RML element.
			*[[RML_Documents\|Documents]] - The HEAD and BODY of a document.
			*[[RML_Images\|Images]] - Referencing images.
			*[[RML_StyleSheets\|Style Sheets]] - Adding style to RML documents.
			*[[RML_Forms\|Forms]] - User-input forms.
			*[[RML_Controls\|Controls]] - Tabsets and window handles.
			*[[RML_DataDisplay\|Data Display]] - Data grids and data selects.
			*[[RML_Templates\|Templates]] - Making all your windows look consistent.
			*[[RML_Events\|Events]] - Mouse clicks, movement, key presses, text entry.

			==RCSS==
			RCSS is based on the CSS2 specification, with certain elements removed or altered to suit the needs of libRocket. In some cases, elements have been taken from the CSS3 working draft. This document provides an overview of RCSS and the differences between RCSS and CSS, and should be read in conjunction with the CSS2 specification.

			RCSS interacts with RML in an identical fashion to CSS and HTML. Style properties declared in a RCSS are attached selectively to elements defined in RML to affect layout, positioning and other style attributes (such as font, color, text decoration, etc).

			If you are familiar with CSS, a good place to start is the [[RCSS_Properties\|property index]], which outlines the properties and values supported in RCSS and the new functionality included. Next, read up on decorators, the new, flexible way to skin elements.

			If you are not, read through this documentation while consulting the CSS2 specification for detailed examples and technical details, or skip all this for now and play around with the samples!
			*[[RCSS_Syntax\|Syntax and basic data types]]
			*[[RCSS_Selectors\|Selectors]]
			*[[RCSS_AssigningCascading\|Assigning property values, Cascading and Inheritance]]
			*[[RCSS_BoxModel\|Box model]]
			*[[RCSS_VisualModel\|Visual formatting model]]
			*[[RCSS_VisualModelDetails\|Visual formatting model details]]
			*[[RCSS_VisualEffects\|Visual effects]]
			*[[RCSS_ColorsBackgrounds\|Colors and backgrounds]]
			*[[RCSS_Fonts\|Fonts]]
			*[[RCSS_Text\|Text]]
			*[[RCSS_CursorsDragTab\|Cursors, Dragging and Tabbing]]
			*[[RCSS_Decorators\|Decorators]]
			*[[RCSS_FontEffects\|Font effects]]
			*[[RCSS_Properties\|Property Index]]

			==LUA API==
			The Lua interface to libRocket has been designed to resemble Javascript as closely as possible. It is how the librocket UI will actually interact with the Freespace Open engine. Below is a list of property and API references.

			*[[Librocket_API_Element\|Elements]]
			*[[Librocket_API_Document\|Documents]]
			*[[Librocket_API_Context\|Contexts]]
			*[[Librocket_API_Event\|Events]]
			*[[Librocket_API_Reference\|API Reference]]

			===Embedding Script===
			Lua code can be embedded into RML files. Inline responses to events are executed as Python code. Functions, structures and variables can be declared or included with the <script> tag, then referenced from the inline code.

			Similarly to Javascript, the lua can be included from a separate file with the src attribute, or otherwise declared inline as loose content within the <script> tag. Any code embedded in this manner will be compiled with the document and will be available to inline event handlers in the RML. See the following examples.
			<pre>
			<rml>
			<head>
			<script>
			def Test():
			print 'Hello world!'
			</script>
			</head>
			<body>
			<button onclick="Test()">Continue</button>
			</body>
			</rml>
			</pre>
			<pre>
			<rml>
			<head>
			<script src="test.py"></script>
			</head>
			<body>
			<button onclick="Test()">Continue</button>
			</body>
			</rml>
			</pre>
			===Attaching To Events===
			You can attach to user interface events statically in the RML or dynamically in the lua scripts.
			*A list of events available to attach to is in the [[RML_Events\|RML Events]] documentation.

			====Statically====
			With this method you write your code directly into the RML files, using the on* attributes. When the event is fired three global variables are set up, document, event and self.
			*[[Librocket_API_Element\|self]] - The element thats currently being processed
			*[[Librocket_API_Document\|document]] - The document the element thats currently being processed belongs to
			*[[Librocket_API_Event\|event]] - The event thats currently being processed
			Using the on* attributes you write your code inline
			*Example: <code><button onclick="ba.print('Clicked!')"/></code>
			LibRocket allows multiple lines of code to be put on one line, separated by a semicolon.
			*Example: <code><button onclick="ba.print('Line 1');ba.print('Line 2')"/></code>

			====Dynamically====
			The AddEventListener() method allows you to bind any callable LUA method to an event.
			<pre>
			function print(message)
			ba.print(message)
			end

			function createListener()
			element = document:GetElementById('button')
			element:AddEventListener('click', function(_, _, _)
			print("clicked!")
			end)
			end
			</pre>

MjnMixael: create

2023-04-21T16:24:44Z

create

New page

Placeholder home for librocket explainer, methods, and relevant documentation as it relates to FSO.

← Older revision		Revision as of 17:09, 22 April 2023
Line 40:		Line 40:
	*[[RCSS_Decorators\|Decorators]]		*[[RCSS_Decorators\|Decorators]]
	*[[RCSS_FontEffects\|Font effects]]		*[[RCSS_FontEffects\|Font effects]]
			*[[RCSS_Scrollbars\|Scrollbars and Sliders]]
	*[[RCSS_Properties\|Property Index]]		*[[RCSS_Properties\|Property Index]]

← Older revision		Revision as of 17:02, 22 April 2023
Line 33:		Line 33:
	*[[RCSS_BoxModel\|Box model]]		*[[RCSS_BoxModel\|Box model]]
	*[[RCSS_VisualModel\|Visual formatting model]]		*[[RCSS_VisualModel\|Visual formatting model]]
	*[[RCSS_VisualModelDetails\|Visual formatting model details]]
	*[[RCSS_VisualEffects\|Visual effects]]		*[[RCSS_VisualEffects\|Visual effects]]
	*[[RCSS_ColorsBackgrounds\|Colors and backgrounds]]		*[[RCSS_ColorsBackgrounds\|Colors and backgrounds]]

← Older revision		Revision as of 16:30, 22 April 2023
Line 31:		Line 31:
	*[[RCSS_Syntax\|Syntax and basic data types]]		*[[RCSS_Syntax\|Syntax and basic data types]]
	*[[RCSS_Selectors\|Selectors]]		*[[RCSS_Selectors\|Selectors]]
	*[[RCSS_AssigningCascading\|Assigning property values, Cascading and Inheritance]]
	*[[RCSS_BoxModel\|Box model]]		*[[RCSS_BoxModel\|Box model]]
	*[[RCSS_VisualModel\|Visual formatting model]]		*[[RCSS_VisualModel\|Visual formatting model]]