GitHub/Basalt
1
0
Fork 0
Code Issues 28 Pull Requests 3 Actions Packages Projects Releases 9 Wiki Activity

Merge pull request #65 from thesabinelim/dynamic-attributes

Browse Source 
Reactive properties
This commit is contained in:
Robert Jelic
2023-05-08 12:03:50 +02:00
committed by GitHub
parent 9b932704e6 e4de37e8c2
commit 4966384d0c
2 changed files with 636 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

824
Basalt/plugins/xml.lua
View File

File diff suppressed because it is too large Load Diff

23
docs/guides/xml.md
View File

@@ -82,9 +82,9 @@ Here's an example of using the shared table to share data between two `<script>`
In this example, we first store a value in the shared table in one `<script>` tag, and then access that value in another `<script>` tag to update the titleLabel's text.
You can also include Lua code directly within event attributes of UI elements. This allows you to execute specific actions or manipulate UI elements when certain events occur.
You can also include Lua code directly within event properties of UI elements. This allows you to execute specific actions or manipulate UI elements when certain events occur.
To include Lua code in an event attribute, simply add the Lua code within the event attribute's value in the XML tag. The Lua code will be executed when the specified event is triggered.
To include Lua code in an event property, simply add the Lua code within the event property's value in the XML tag. The Lua code will be executed when the specified event is triggered.
```xml
<label id="titleLabel" text="Welcome to Basalt!" x="10" y="2" />
@@ -107,3 +107,22 @@ In both examples, you can see that XML provides a straightforward way to build a
Notably, you can access UI elements by their assigned ID directly in the event code. In the examples above, the titleLabel and okButton elements are accessed simply by referencing their IDs. This convenient feature eliminates the need to search for or store references to the elements in your code.
Remember: IDs have to be unique!
## Reactive properties (BETA)
Most properties can also be set to track a shared variable using the curly braces {} syntax. In this case, the initial value for the variable should be set inside the `<script>` tag. When this variable is modified, the rendered value will be automatically updated.
The earlier example rewritten using reactive properties:
```xml
<label id="titleLabel" text="Welcome to Basalt!" x="10" y="2" />
<button id="okButton" text={shared.okButtonText} x="10" y="5">
<onClick>
shared.okButtonText = "Button clicked!"
</onClick>
</button>
<script>
shared.okButtonText = "OK"
</script>
```