Button Events

Features demonstrated:

This example shows you how to create buttons in various ways by using the "ui" library.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
-- Load external button/label library (ui.lua should be in the same folder as main.lua)
local ui = require("ui")
 
local background = display.newImage("carbonfiber.png", true) -- flag overrides large image downscaling
background.x = display.contentWidth / 2
background.y = display.contentHeight / 2
 
local roundedRect = display.newRoundedRect( 10, 50, 300, 40, 8 )
roundedRect:setFillColor( 0, 0, 0, 170 )
 
local t = ui.newLabel{
        bounds = { 10, 55, 300, 40 },
        text = "Waiting for button event...",
        font = "AmericanTypewriter-Bold",
        textColor = { 255, 204, 102, 255 },
        size = 18,
        align = "center"
}
 
-------------------------------------------------------------------------------
-- Create 5 buttons, using different optional attributes
-------------------------------------------------------------------------------
 
 
-- These are the functions triggered by the buttons
 
local button1Press = function( event )
        t:setText( "Button 1 pressed" )
end
 
local button1Release = function( event )
        t:setText( "Button 1 released" )
end
 
 
local buttonHandler = function( event )
        t:setText( "id = " .. event.id .. ", phase = " .. event.phase )
end
 
 
-- This button has individual press and release functions
-- (The label font defaults to native.systemFontBold if no font is specified)
 
local button1 = ui.newButton{
        default = "buttonRed.png",
        over = "buttonRedOver.png",
        onPress = button1Press,
        onRelease = button1Release,
        text = "Button 1 Label",
        emboss = true
}
 
 
-- These other four buttons share a single event handler function, identifying themselves by "id"
-- Note that if a general "onEvent" handler is assigned, it overrides the "onPress" and "onRelease" handling
 
-- Also, some label fonts may appear vertically offset in the Simulator, but not on device, due to
-- different device font rendering. The button object has an optional "offset" property for minor
-- vertical adjustment to the label position, if necessary (example: offset = -2)
 
local button2 = ui.newButton{
        default = "buttonYellow.png",
        over = "buttonYellowOver.png",
        onEvent = buttonHandler,
        id = "button2",
        text = "Button 2 Label",
        font = "Trebuchet-BoldItalic",
        textColor = { 51, 51, 51, 255 },
        size = 22,
        emboss = true
}
 
local button3 = ui.newButton{
        default = "buttonGray.png",
        over = "buttonBlue.png",
        onEvent = buttonHandler,
        id = "button3",
        text = "Button 3 Label",
        font = "MarkerFelt-Thin",
        size = 28,
        emboss = true
}
 
local buttonSmall = ui.newButton{
        default = "buttonBlueSmall.png",
        over = "buttonBlueSmallOver.png",
        onEvent = buttonHandler,
        id = "smallBtn",
        text = " I'm Small",
        size = 12,
        emboss=true
}
 
-- Of course, buttons don't always have labels
local buttonArrow = ui.newButton{
        default = "buttonArrow.png",
        over = "buttonArrowOver.png",
        onEvent = buttonHandler,
        id = "arrow"
}
 
button1.x = 160; button1.y = 160
button2.x = 160; button2.y = 240
button3.x = 160; button3.y = 320
buttonSmall.x = 85; buttonSmall.y = 400
buttonArrow.x = 250; buttonArrow.y = 400