|
| 1 | +This is a basic guide on how to create a UI with XML. |
| 2 | + |
| 3 | +In XML you are not able to create logic, but you could refer to logic - i will show you how. |
| 4 | +But first i will show you how you are able to create some basic XML design. |
| 5 | + |
| 6 | +First we will need a .lua file - we need to process the XML stuff, and this is only possible in lua. |
| 7 | +So let's create a lua file: |
| 8 | + |
| 9 | +```lua |
| 10 | +local basalt = require("basalt") -- as always we will need basalt |
| 11 | + |
| 12 | +local main = basalt.createFrame() -- and atleast 1 base frame is needed |
| 13 | + |
| 14 | +basalt.autoUpdate() -- starting the event and draw handler is also needed |
| 15 | +``` |
| 16 | + |
| 17 | +The code above you are just not able to do in XML, you are not able to create base frames and you are also not able to start the event/draw handlers. |
| 18 | +This can only be done in Lua. |
| 19 | + |
| 20 | +In Basalt XML Code will always be loaded into frames. Which means all the objects created in XML are always childrens of that particular frame. Here is a example to show what i mean: |
| 21 | + |
| 22 | +Lua: |
| 23 | +```lua |
| 24 | +local basalt = require("basalt") |
| 25 | +local main = basalt.createFrame():addLayout("example.xml") |
| 26 | +basalt.autoUpdate() |
| 27 | +``` |
| 28 | + |
| 29 | +XML: |
| 30 | +```xml |
| 31 | +<button x="5" y="3" text="Hello" /> |
| 32 | +``` |
| 33 | + |
| 34 | +This would be exactly the same like if you would use the following lua code: |
| 35 | +```lua |
| 36 | +local basalt = require("basalt") |
| 37 | +local main = basalt.createFrame() |
| 38 | +main:addButton():setPosition(5, 3):setText("Hello") |
| 39 | +basalt.autoUpdate() |
| 40 | +``` |
| 41 | + |
| 42 | +You can also add a layout multiple times, or create multiple frames and always use the same layout. For example a design layout for more frames and then you could also use |
| 43 | +a unique layout for each frame. I wont show you a example, you just have to use :addLayout multiple times on different frames. |
| 44 | + |
| 45 | +Another thing is, you could add/load XML files IN XML: |
| 46 | +example.xml: |
| 47 | +```xml |
| 48 | +<frame layout="anotherExample.xml" /> |
| 49 | +``` |
| 50 | + |
| 51 | +anotherExample.xml: |
| 52 | +```xml |
| 53 | +<button x="2" y="3" width="parent.w - 2" text="Greetings" /> |
| 54 | +``` |
| 55 | + |
| 56 | +# Events |
| 57 | + |
| 58 | +Using events in XML is also pretty simple. For that basalt has a function called basalt.setVariable. This is to store functions or other things which you can access via |
| 59 | +XML. Obviously the logic you want to add has to be done in lua, here: |
| 60 | + |
| 61 | +Lua: |
| 62 | +```lua |
| 63 | +local basalt = require("basalt") |
| 64 | + |
| 65 | +basalt.setVariable("buttonClick", function() |
| 66 | + basalt.debug("i got clicked!") |
| 67 | +end) |
| 68 | + |
| 69 | +local main = basalt.createFrame():addLayout("example.xml") |
| 70 | +basalt.autoUpdate() |
| 71 | +``` |
| 72 | + |
| 73 | +And then you just have to link your function in your XML file: |
| 74 | +```xml |
| 75 | +<button x="2" y="3" width="parent.w - 2" text="Greetings" onClick="buttonClick" /> |
| 76 | +``` |
| 77 | + |
| 78 | +This is pretty simple! BUT there is one thing you shouldn't forget: In Lua you always have to create the function's before you want to access it, which means |
| 79 | +always use basalt.setVariable before you use frame:addLayout() - otherwise basalt is not able to find the function |
0 commit comments