What's the right way of coding function arrangements that change button labels upon button click?

Hi there, I’m Chris. I just started getting into Coronalabs and I’m really enjoying it so far. However I have encountered problems that I couldn’t solve and worse, my hair is almost gone. I’m a .NET developer and I understand the fact that unlike .NET, code arrangement is very important in Corona. In .NET, wherever I put my function, the compiler handles the function search whenever I use that function. In Corona, functions must be placed above the variable declarations. Button declarations must be coded below the button touch event function for it to work. I currently have this code so far… This app doesn’t make any sense for now because I’m just looking for a way to do this feature…

Screenshot.png?dl=0

local widget = require( “widget” )

display.setDefault( “background”, 1, 1, 1 )
local controlwidth = display.contentWidth-20
local controlheight = display.contentHeight/10

local questiontextproperties = {
   text = “”,    
   x = display.contentCenterX,
   y = (display.contentHeight/10)*2,
   fontSize = 30,
   width = display.contentWidth,
   height = controlheight,
   align = “center”
}

local questiontext = display.newText( questiontextproperties )
questiontext:setFillColor( 0, 0, 0 )
questiontext.text = “”

local function generateQuestion()
    question=“What is your name?”
    button2:setLabel(“Chris”)
    button3:setLabel(“John”)
    button4:setLabel(“Steph”)
    return question
end

–Functions
local function buttonTouch(event)
    --take in the event and get the associated display object
    local myButtons = event.target
    --now find out which button it is
    local nameString = myButtons.id
    
    --use began and ended phases to change text based on touches
    if event.phase == “began” then
        --set the label text to the id
        if nameString == “button1” then
            questiontext.text = generateQuestion()
        end
    elseif event.phase == “ended” then
        --back to default
        --label.text = “No Button Touch”
    end
    return true
end

local button1 = widget.newButton{
    id = “button1”, – id is unique and essential when using event handlers (see addEventListener below)
    label = “Start”,
    emboss = false,
    shape=“roundedRect”,
    left = 10,
    top = (display.contentHeight/10)*6,
    width = controlwidth,
    height = controlheight,
    cornerRadius = 2,
    fillColor = { default={ 1, 0.2, 0.5, 0.7 }, over={ 1, 0.2, 0.5, 1 } },
    --strokeColor = { default={ 1, 0.4, 0, 1 }, over={ 0.8, 0.8, 1, 1 } },
    strokeWidth = 4,
    onEvent = buttonTouch
}

local button2 = widget.newButton{
    id = “button2”, – id is unique and essential when using event handlers (see addEventListener below)
    label = “”,
    emboss = false,
    shape=“roundedRect”,
    left = 10,
    top = ((display.contentHeight/10)*7)+10,
    width = controlwidth,
    height = controlheight,
    cornerRadius = 2,
    fillColor = { default={ 1, 0.2, 0.5, 0.7 }, over={ 1, 0.2, 0.5, 1 } },
    --strokeColor = { default={ 1, 0.4, 0, 1 }, over={ 0.8, 0.8, 1, 1 } },
    strokeWidth = 4,
    onEvent = buttonTouch
}

local button3 = widget.newButton{
    id = “button3”, – id is unique and essential when using event handlers (see addEventListener below)
    label = “”,
    emboss = false,
    shape=“roundedRect”,
    left = 10,
    top = ((display.contentHeight/10)*8)+20,
    width = controlwidth,
    height = controlheight,
    cornerRadius = 2,
    fillColor = { default={ 1, 0.2, 0.5, 0.7 }, over={ 1, 0.2, 0.5, 1 } },
    --strokeColor = { default={ 1, 0.4, 0, 1 }, over={ 0.8, 0.8, 1, 1 } },
    strokeWidth = 4,
    onEvent = buttonTouch
}

local button4 = widget.newButton{
    id = “button4”, – id is unique and essential when using event handlers (see addEventListener below)
    label = “”,
    emboss = false,
    shape=“roundedRect”,
    left = 10,
    top = ((display.contentHeight/10)*9)+30,
    width = controlwidth,
    height = controlheight,
    cornerRadius = 2,
    fillColor = { default={ 1, 0.2, 0.5, 0.7 }, over={ 1, 0.2, 0.5, 1 } },
    --strokeColor = { default={ 1, 0.4, 0, 1 }, over={ 0.8, 0.8, 1, 1 } },
    strokeWidth = 4,
    onEvent = buttonTouch
}

I have 4 buttons and when I click the 1st button, the question “What is your name?” should pop out and the 2nd, 3rd and 4th buttons will have their labels with generated names. My code doesn’t work because the declaration of buttons are below the function I am using. If I moved my generateQuestion() function below the button declaration codes, then the button touch event function won’t be able to use the function anymore. I’m really running out of ideas. How do I get this to work? Thank you very much.
 

There are several ways to solve this. Here is one.

Change your generate function to:

ocal function generateQuestion( button ) question="What is your name?" if button.id == "button1" then button:setLabel("Chris") end --etc return question end -- question assignment to questiontext.text = generateQuestion( myButtons )

I would also probably assign a list of possible labels to your button objects

Ex:

button1.labels = { "john", "fred" } -- then in the function above you could do.. button:setLabel( button.labels[1] ) -- for instance

Hope this helps

Chris,

An easy fix is to ‘forward declare’ either the function or the buttons.  I usually ‘forward declare’ the buttons.  So, just below :

local widget = require( “widget” )

local button1, button2, button3, button4

– down where you create each button remove ‘local’

so instead of :

local button1 = widget.newButton{

you will have

button1 = widget.newButton{  …

etc

now the function ‘generateQuestion’ will recognize the buttons, since they are ‘declared’ above that function

Good Luck

Bob

There are several ways to solve this. Here is one.

Change your generate function to:

ocal function generateQuestion( button ) question="What is your name?" if button.id == "button1" then button:setLabel("Chris") end --etc return question end -- question assignment to questiontext.text = generateQuestion( myButtons )

I would also probably assign a list of possible labels to your button objects

Ex:

button1.labels = { "john", "fred" } -- then in the function above you could do.. button:setLabel( button.labels[1] ) -- for instance

Hope this helps

Chris,

An easy fix is to ‘forward declare’ either the function or the buttons.  I usually ‘forward declare’ the buttons.  So, just below :

local widget = require( “widget” )

local button1, button2, button3, button4

– down where you create each button remove ‘local’

so instead of :

local button1 = widget.newButton{

you will have

button1 = widget.newButton{  …

etc

now the function ‘generateQuestion’ will recognize the buttons, since they are ‘declared’ above that function

Good Luck

Bob