Modding tutorial for styles

[ixu]

Is there a tutorial for using styles? I am desperately trying to get the system to do what I want.
Examples:
- Size, Height and Widths, are they pixels or millimeters or what?
- How do I determine how big a scroll-pane is?
- If I want to reuse a build-in style, how do I find out what it is called?

Sometimes I am successful, but it is always try-and-error.
Maybe it is a standard that is described elsewhere?

[PFQNiet]

One thing that may help you is Ctrl+F6 - this will toggle the "style inspector" that lets you see what styles are applied to various GUI elements, including the names of built-in styles.

[ixu]

I want to display a line of sprite buttons that should have a maximum width, for example 6 buttons wide. If there are more buttons than can be displayed, a horizontal scrollbar should appear.

Code: Select all

function result.SelectTarget()
    local frame = global.Current.Player.gui.screen.add {type = "frame", direction = "vertical"}

    frame.caption = "select"
    local subFrame = frame.add {
        type = "flow",
        direction = "horizontal",
        style = "ingteb-recipe-pane",
    }
    local scroll = subFrame.add {
        type = "scroll-pane",
        direction = "horizontal",
        horizontal_scroll_policy = "always",
        vertical_scroll_policy = "never",
        style = "ingteb-recipe-scroll-pane",
    }
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    scroll.add {type = "sprite-button", sprite = "utility/go_to_arrow"}

    frame.force_auto_center()
    global.Current.Player.opened = frame
    global.Current.Frame = frame
    return frame

end

How do I define the associated styles now? I have tried that:

Code: Select all

data.raw["gui-style"].default["ingteb-recipe-pane"] =
    {
        type = "horizontal_flow_style",
        witdth = 600,
        height = 40,
        horizontally_squashable = "off",
        vertcally_squashable = "off",

    }

data.raw["gui-style"].default["ingteb-recipe-scroll-pane"] =
    {type = "scroll_pane_style", parent = "scroll_pane", witdth = 500, height = 40}

but it does not work. I get something that I cannot understand at all:

StyleHowto.PNG (377.98 KiB) Viewed 853 times

[ixu]

... Hours later I found a solution. I'll post it here so that the next ones can benefit from it.

Code: Select all

function result.SelectTarget()
    local frame = global.Current.Player.gui.screen.add {
        type = "frame",
        direction = "vertical",
    }

    frame.caption = "select"
    local scroll = frame.add {
        type = "scroll-pane",
        direction = "horizontal",
        horizontal_scroll_policy = "always",
        vertical_scroll_policy = "never",
        style = "ingteb-scroll-6x1",
    }

    local subsubFrame = scroll.add {
        type = "flow",
        direction = "horizontal",
        style = "ingteb-flow-right",
    }

    local scroll2 = frame.add {
        type = "scroll-pane",
        direction = "horizontal",
        horizontal_scroll_policy = "always",
        vertical_scroll_policy = "never",
        style = "ingteb-scroll-6x1",
    }

    local subsubFrame2 = scroll2.add {
        type = "flow",
        direction = "horizontal",
        style = "ingteb-flow-right",
    }

    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame.add {type = "sprite-button", sprite = "utility/go_to_arrow"}

    subsubFrame2.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame2.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame2.add {type = "sprite-button", sprite = "utility/go_to_arrow"}
    subsubFrame2.add {type = "sprite-button", sprite = "utility/go_to_arrow"}


    frame.force_auto_center()
    global.Current.Player.opened = frame
    global.Current.Frame = frame
    return frame

end

And in data.lua:

Code: Select all

data.raw["gui-style"].default["ingteb-scroll-6x1"] =
    {
        type = "scroll_pane_style", --
        parent = "scroll_pane",
        width = 42 * 6,
    }

data.raw["gui-style"].default["ingteb-flow-right"] =
    { --
        type = "horizontal_flow_style", --
        horizontally_stretchable = "on",
        horizontal_align = "right",
    }

The result can be seen here - I even managed to do the right-alignment:

StyleHowto2.PNG (443.64 KiB) Viewed 828 times