wurst-table-layout

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

Documentation

Install

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.

Basics

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)

Rows and Cells

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()

Padding

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()

Alignment

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()

Presets

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)

Events and Framehandles

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()

Nested Tables

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)

Dynamic changes

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.