-
Notifications
You must be signed in to change notification settings - Fork 123
Scripting: User Interface
The AngelScript interface has been designed to resemble Javascript as closely as possible. Due the nature of the language, this is more possible in Python than C++.
Not all aspects of libRocket/Qfusion UI are accessible from AngelScript; for example, custom decorators can only be created in C++. However the vast majority is accessible, enabling you to easily and efficiently develop the functionality of your documents.
AngelScript code can be embedded into RML files. Inline responses to events are executed as AngelScript code. Functions, structures and variables can be declared or included with the <script> tag, then referenced from the inline code.
The AngelScript plugin for libRocket, coming with Qfusion, installs an event listener instancer to execute inline event responses as AngelScript code. For example, in the following sample the element will run the print command when it is clicked:
<button onclick="console.log('Hello world!\n');" />Separate lines can be separated by semi-colons like Javascript.
<button onclick="console.log('Hello'); console.log(' world!\n');" />Two local auto variables are accessible to inline event handlers. These are:
- event: The event currently being processed (ie, the event that triggered the handler).
- self: The element currently responding to the event.
<button onclick="console.log(self.tagName + '\n');" />
<button onclick="console.log(event.getType() + '\n');" />AngelScript code can be embedded into an RML document with the <script> tag. Similarly to Javascript, the script 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. For example, the following document declares a AngelScript function in the <script> tag and calls it from an element's onclick hander.
<rml>
<head>
<script>
void Test() {
console.log('Hello world!\n');
}
</script>
</head>
<body>
<button onclick="Test();">Continue</button>
</body>
</rml>AngelScript code declared inline in an RML file like this must begin at the beginning of the line like a normal AngelScript file.
The following sample imports the test.as file instead of declaring the script inline (it is assumed the AngelScript file declares a Test() function).
<rml>
<head>
<script src="test.as"></script>
</head>
<body>
<button onclick="Test();">Continue</button>
</body>
</rml>A document can include multiple <script> tags.