Function to creates buttons

I'm trying to create a function to create a button (so keep the "clean" code).

Here is the code:

(
Window.closeAll;

~w = Window.new(
    name: "Xylophone",
    resizable: true,
    border: true,
    server: s,
    scroll: false);

~w.alwaysOnTop = true; 

/**
 * Function that creates a button.
 */
createButtonFunc = {
    |
        l = 20, t = 20, w = 40, h = 190, // button position
        nameNote = "note", // button name
        freqs // frequency to play
    |

    Button(
        parent: ~w, // the parent view
        bounds: Rect(left: l, top: t, width: w, height: h)
    )
    .states_([[nameNote, Color.black, Color.fromHexString("#FF0000")]])
    .action_({Synth("xyl", [\freqs, freqs])});
}
)


(
SynthDef("xyl", {
    |
        out = 0, // the index of the bus to write out to
        freqs = #[410], // array of filter frequencies
        rings = #[0.8] // array of 60 dB decay times in seconds for the filters 
    |

    ...
)

The error is: ERROR: Variable 'createButtonFunc' not defined. Why?

Sorry but I'm a beginner.

Thanks!

Probably a little late to answer this, but I hope this might help someone else with the same question.

The reason you're getting that error is because you're using a variable name before you're declared it.

In other words, if you try to evaluate

variableName

on its own, you'll always get an error, because the interpreter can't match that name to anything else it knows. To solve this, you can use a global interpreter variable (a-z), an environment variable (like ~createButtonFunc), or declare var createButtonFunc earlier on in your code. Note that this last one means you won't be able to access that variable name after interpreting that chunk, which may or may not be a good thing. If you want to be able to access it later, I think it makes the most sense to write ~createButtonFunc.

By the way, you can just use w instead of ~w; single-letter variable names are global by default, and that's the idiomatic usage.

-Brian