This library allows you to easily create and align framehandles in a table-ish layout inspired by flex-box. Table-ish because there are no columns. A table simply consists of rows, which themselves consist of cells which contain a framehandle as content. After setting up the layout you can apply it to any framehandle.
The table layout can not be used with scaling
Install as dependency via grill:
grill install https://github.com/Frotty/wurst-table-layout
Make sure you have the latest wurstscript version with transitive dependencies.
The layout is applied to a framehandle which becomes the base frame all other framehandles are children of. You can either provide your own or use the default escape menu border which is race dependent.
// Default parent
new TableLayout(0.3, 0.35)
..createFrame()
// Provide custom parent
new TableLayout(0.3, 0.35)
..applyTo(yourCustomFrame)
The API makes heavy use of the cascade operator to apply changes to the root element.
First create a table layout, passing width and height of relative screen space.
Then start adding rows and cells via .row()
and .add()
.
The functions will always work on the most recently added row/cell.
new TableLayout(0.2, 0.15)
..row()
..add(p("1"))
..add(p("2"))
..add(p("3"))
..row()
..add(p("4"))
..add(p("5"))
..add(p("6"))
..createFrame()
By default cells have no padding, making them appear right next to each other. We can introduce some space between the cells by adding padding to each of the four sides left, right, top and bottom.
new TableLayout(0.2, 0.15)
..row()
..add(p("1"))..padRight(0.01)..padTop(0.01)
..add(p("2"))..padRight(0.01)..padTop(0.01)
..add(p("3"))..padRight(0.01)..padTop(0.01)
..row()
..add(p("4"))..padRight(0.01)..padTop(0.01)
..add(p("5"))..padRight(0.01)..padTop(0.01)
..add(p("6"))..padRight(0.01)..padTop(0.01)
..createFrame()
By default the alignment in a table is top left. You can adjust horizontal alignment on a per row basis.
new TableLayout(0.2, 0.15)
..row()..center()
..add(p("1"))..padRight(0.01)..padTop(0.01)
..add(p("2"))..padRight(0.01)..padTop(0.01)
..add(p("3"))..padRight(0.01)..padTop(0.01)
..row()..end_()
..add(p("4"))..padRight(0.01)..padTop(0.01)
..add(p("5"))..padRight(0.01)..padTop(0.01)
..add(p("6"))..padRight(0.01)..padTop(0.01)
..createFrame()
You can also make certain cells grow horizontally. This can be used to distribute cells evenly.
new TableLayout(0.2, 0.15)
..row()
..add(p("1"))..growX()..padBot(0.01)
..add(p("2"))..growX()
..add(p("3"))..growX()
..row()
..add(p("4"))
..add(p("5"))..growX()
..add(p("6"))
..createFrame()
As you should have noticed from the previous examples we were using the p()
function, which analagous to html represents a paragraph text element.
Because you cannot use scaling with the table layout, several presets are provided for common types, similar to html tags:
- Headings
h1
,h2
,h3
,h4
- Paragraph
p
,p2
,p3
- Image
img
- Button
btn
- ImageButton
imgBtn
- Custom (Progress-)Bar
UIBar
- Custom Checkbox
UICheckbox
let baseFrame = defaultFrame()
let bar1 = new UIBar(0.075, 0.01)
let nestedTable1 = new TableLayout(0.1, 0.05)
..row()..center()
..add(img(Icons.bTNAcolyte))
..row()..center()
..add(p("Acolyte"))..padTop(0.01)
let nestedTable2 = new TableLayout(0.1, 0.05)
..row()..center()
..add(img(Icons.bTNAbomination))
..row()..center()
..add(p("Abomination"))..padTop(0.01)
new TableLayout(0.25, 0.35)
..row()
..add(h1("h1"))
..row()
..add(h2("h2"))
..row()
..add(h3("h3"))
..row()
..add(h4("h4"))
..row()
..add(h5("h5"))
..row()
..add(p("p1"))
..row()
..add(p2("p2"))
..row()
..add(p3("p3"))
..row()
..add(img(Icons.bTNAcorn1))
..row()
..add(btn("button")..setWidth(0.125)..setHeight(0.02))
..row()
..add(imgBtn(Icons.bTNHumanBuild))
..row()
..add(bar1.create())
..row()
..add(nestedTable1.createContainer(baseFrame))..padRight(0.0025)
..add(nestedTable2.createContainer(baseFrame))
..applyTo(baseFrame)
Since the table is just a layout container, you can modify the contained framehandles as you like. You can use the cascade operator for inline notation or simply save the framehandle in a variable.
let titleHandle = h1("Hello")
new TableLayout(0.2, 0.25)
..row()..center()
..add(titleHandle)
..row()
..add(btn("button")..setWidth(0.125))
..createFrame()
You can combine this with the ClosureFrames
package to add event listeners.
new TableLayout(0.5, 0.25)
..row()..center()
..add(btn("button")..onClick(() -> print("clicked")))
..createFrame()
A table can be applied to an arbitrary framehandle and thus be easily inserted into another table. You only need to make sure that the parent fame already exists when creating the child frame.
The #createContainer
function can be used to create a container framehandle without any visuals which can be added to other tables.
let baseFrame = defaultFrame()
let nestedTable1 = new TableLayout(0.1, 0.05)
let nestedTable2 = new TableLayout(0.1, 0.05)
new TableLayout(0.25, 0.35)
..row()
..add(nestedTable1.createContainer(baseFrame))..padRight(0.0025)
..add(nestedTable2.createContainer(baseFrame))
..applyTo(baseFrame)
There currently is no change detection. If you changed the contained frames and want the table to recognize the change, you have to call table.layout()
to update the table and its contents.