Widget Help?

[rothgerry]

I have several questions about the widget.newButton function. First, can you change the color of the button? If so, how? I couldn’t find anything on changing the color of widget buttons.

Also, this is a bug in my app. I have this code in the main.lua file to generate a back button for the rest of my code in my other .lua files:

function _G.createBackButton(grp)

    grp:insert(widget.newButton{

    left = display.contentWidth-60,

    top = display.contentHeight+10,

    label = “Back”, fontSize = 12,

    width = 60, height = 30, cornerRadius = 8,

    onEvent = function(e)

        storyboard.gotoScene(“titleScene”,“fade”)

    end

    })

end

However it only creates the button for two out of the four scenes, even though I have the function called with self.view as an argument in the beginning of the :createScene() function. The two that don’t work have no other code in them besides the storyboard set up and calling the above function like so: createBackButton(self.view) inside of the :createScene() function.

[rothgerry]

Ok so I did some research and found this:

labelColor _^(optional)

Table. Table of two RGB+A color settings, one each for the default and over states.

labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 0, 0.5 } }

 

 

(This is an argument to the table options of the widget.newButton function).

 

However, when I tried this, the default changed the text color, and the over did nothing. I want to change the background color of the button as well as the text color.

[zvonimir.juranko]

Use default and over image files:

local button1 = widget.newButton
{
width = 240,
height = 120,
defaultFile = “buttonDefault.png”,
overFile = “buttonOver.png”,
label = “button”,
onEvent = handleButtonEvent
}

[rothgerry]

Oh ok. I was looking more for a way to recolor Widget buttons without having to create files. Is there a way to do that?

[bjsorrentino]

Hi @rothgerry,

At this time there’s not, but you can “link up” a rectangle display object and manage its color in the button handler. Something like this:

[lua]

local function handleButtonEvent( event )

    if ( event.phase == “began” ) then

        event.target.buttonRect:setFillColor(0.7,0.1,0.2)

    elseif ( event.phase == “ended” ) then

        event.target.buttonRect:setFillColor(1,0,0)

    end

end

local myButton = widget.newButton {

    left=240,

    top=100,

    width = 240,

    height = 120,

    label = “button”,

    labelColor = { default={1,1,1}, over={0,0,0,1} },

    fontSize = 30,

    onEvent = handleButtonEvent

}

local bv = myButton._view

myButton.buttonRect = display.newRect( bv.x, bv.y, bv.width, bv.height )

myButton.buttonRect:setFillColor(1,0,0)

myButton.buttonRect:toBack()

[/lua]

Hope this helps,

Brent

[rothgerry]

Ok so I did some research and found this:

labelColor _^(optional)

Table. Table of two RGB+A color settings, one each for the default and over states.

labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 0, 0.5 } }

 

 

(This is an argument to the table options of the widget.newButton function).

 

However, when I tried this, the default changed the text color, and the over did nothing. I want to change the background color of the button as well as the text color.

[zvonimir.juranko]

Use default and over image files:

local button1 = widget.newButton
{
width = 240,
height = 120,
defaultFile = “buttonDefault.png”,
overFile = “buttonOver.png”,
label = “button”,
onEvent = handleButtonEvent
}

[rothgerry]

Oh ok. I was looking more for a way to recolor Widget buttons without having to create files. Is there a way to do that?

[bjsorrentino]

Hi @rothgerry,

At this time there’s not, but you can “link up” a rectangle display object and manage its color in the button handler. Something like this:

[lua]

local function handleButtonEvent( event )

    if ( event.phase == “began” ) then

        event.target.buttonRect:setFillColor(0.7,0.1,0.2)

    elseif ( event.phase == “ended” ) then

        event.target.buttonRect:setFillColor(1,0,0)

    end

end

local myButton = widget.newButton {

    left=240,

    top=100,

    width = 240,

    height = 120,

    label = “button”,

    labelColor = { default={1,1,1}, over={0,0,0,1} },

    fontSize = 30,

    onEvent = handleButtonEvent

}

local bv = myButton._view

myButton.buttonRect = display.newRect( bv.x, bv.y, bv.width, bv.height )

myButton.buttonRect:setFillColor(1,0,0)

myButton.buttonRect:toBack()

[/lua]

Hope this helps,

Brent