How to show a message in a rectangle with two buttons ?

Other
#1

Hello!
(Sorry for my bad English)

I’m new to Corona SDK and Lua language

Does anyone have a tutorial that teaches how to display a message on a transparent rectangle with two buttons, as shown in the following figure ?

http://img854.imageshack.us/img854/1673/samplemessagescreen.png

Do I have to draw this rectangle and the buttons in an graphic editor (Fireworks, Photoshop, etc…) ?

Or is there some native feature of Corona SDK to do that?

If I have to manually draw the rectangle and buttons, How would be the code to display them on the main screen of my app ?

Thank you very much !

Paulo - Brazil [import]uid: 173573 topic_id: 32790 reply_id: 332790[/import]

#2

here’s a quick little sample of what i’m doing in one of my games for a warning popup before reseting some values. the size of the text and the color my be a bit tricky to follow if your new to programming

[code]
local storyboard = require(“storyboard”)
local widget = require(“widget”)
local scene = storyboard.newScene()

local _w, _h = display.contentWidth/2, display.contentHeight/2
local box
local data = { { “Reset”, “”, “WARNING !!!”, “”, “this action will”, “reset level locks”, “and highscore.”, “continue ?”}, { “yes”, “no” }}
function scene:createScene( event )
local screenGroup = self.view

box = display.newRect( 0, 0, 600, 500)

box:setFillColor(0, 0, 0, 150)
box:setStrokeColor(255, 255, 255)
box.strokeWidth = 2
box.x = _w
box.y = _h
screenGroup:insert( box )

for a = 1, #data[1] do
local txt = display.newText(data[1][a], 0, 0, native.systemFont, (32+(a < 4 and 1 or 0) * (32 - (( a < 2 and 0 or 1 ) * 20)) - (a > 1 and 1 or 0 ) * 8))
txt.x = _w
txt.y = _h / 2.7 + ( ( a - 1 ) * 48 )
txt:setTextColor( 50 + (( a<2 and 0 or 1 ) * 155), 230 - (( a<2 and 0 or 1 ) * 230), 10 + (( a<2 and 0 or 1 ) * 240), 150 )
screenGroup:insert(txt)
end

resetFnct = function()
local btn = {}
function btn.yes( event )
– put here what to do if yes selected
storyboard.hideOverlay( “fade”, 500 )
end

function btn.no( event )
storyboard.hideOverlay( “fade”, 500 )
end

for a = 1, #data[2] do
local btn = widget.newButton({
id = a,
top = (_h * 1.53),
left = (_w / 1.75) + (( a - 1 ) * 320),
label = data[2][a],
labelColor = { default = {50, 230, 10, 150} },
defaultColor= { 150, 150, 150, 150 },
fontSize = 32,
width = 160,
height = 64,
onRelease = btn[data[2][a]]
})

screenGroup:insert( btn )
end
end
resetFnct()
end

function scene:enterScene( event )
storyboard.stage:toFront()
end

scene:addEventListener( “createScene”, scene )
scene:addEventListener( “enterScene”, scene )

return scene
[import]uid: 7911 topic_id: 32790 reply_id: 130384[/import]

#3

here’s a quick little sample of what i’m doing in one of my games for a warning popup before reseting some values. the size of the text and the color my be a bit tricky to follow if your new to programming

[code]
local storyboard = require(“storyboard”)
local widget = require(“widget”)
local scene = storyboard.newScene()

local _w, _h = display.contentWidth/2, display.contentHeight/2
local box
local data = { { “Reset”, “”, “WARNING !!!”, “”, “this action will”, “reset level locks”, “and highscore.”, “continue ?”}, { “yes”, “no” }}
function scene:createScene( event )
local screenGroup = self.view

box = display.newRect( 0, 0, 600, 500)

box:setFillColor(0, 0, 0, 150)
box:setStrokeColor(255, 255, 255)
box.strokeWidth = 2
box.x = _w
box.y = _h
screenGroup:insert( box )

for a = 1, #data[1] do
local txt = display.newText(data[1][a], 0, 0, native.systemFont, (32+(a < 4 and 1 or 0) * (32 - (( a < 2 and 0 or 1 ) * 20)) - (a > 1 and 1 or 0 ) * 8))
txt.x = _w
txt.y = _h / 2.7 + ( ( a - 1 ) * 48 )
txt:setTextColor( 50 + (( a<2 and 0 or 1 ) * 155), 230 - (( a<2 and 0 or 1 ) * 230), 10 + (( a<2 and 0 or 1 ) * 240), 150 )
screenGroup:insert(txt)
end

resetFnct = function()
local btn = {}
function btn.yes( event )
– put here what to do if yes selected
storyboard.hideOverlay( “fade”, 500 )
end

function btn.no( event )
storyboard.hideOverlay( “fade”, 500 )
end

for a = 1, #data[2] do
local btn = widget.newButton({
id = a,
top = (_h * 1.53),
left = (_w / 1.75) + (( a - 1 ) * 320),
label = data[2][a],
labelColor = { default = {50, 230, 10, 150} },
defaultColor= { 150, 150, 150, 150 },
fontSize = 32,
width = 160,
height = 64,
onRelease = btn[data[2][a]]
})

screenGroup:insert( btn )
end
end
resetFnct()
end

function scene:enterScene( event )
storyboard.stage:toFront()
end

scene:addEventListener( “createScene”, scene )
scene:addEventListener( “enterScene”, scene )

return scene
[import]uid: 7911 topic_id: 32790 reply_id: 130384[/import]

#4

What you showed is a native system alert. There is an API call that does all of that for you, which is named: native.showAlert()

You can look up the documentation for it with the documentation link at the top.

Now if you wanted to roll your own, you would need 2 rectangle graphics, one for the outer box, then another for the button. You would create them in a tool like Photoshop, make them .PNG files which supports transparency.

Then you would use the display.newImageRect() api call to load the big image. You would call that same call twice more, once for each button. Then you would use the display.newEmbossedText() API call to draw the three bits of text in the right place. Then you would probably want to put each item into a display group for the whole message box so you can hide/show it at once or remove it in one call.

Finally you would use :addEventListener() to add touch or tap handlers to each of the two buttons. The functions that event listener would call would be responsible for hiding or removing the box and doing whatever action you want to do with the buttons.

But if you want that native look, save your self a lot of time and just call native.showAlert() [import]uid: 19626 topic_id: 32790 reply_id: 130400[/import]

#5

What you showed is a native system alert. There is an API call that does all of that for you, which is named: native.showAlert()

You can look up the documentation for it with the documentation link at the top.

Now if you wanted to roll your own, you would need 2 rectangle graphics, one for the outer box, then another for the button. You would create them in a tool like Photoshop, make them .PNG files which supports transparency.

Then you would use the display.newImageRect() api call to load the big image. You would call that same call twice more, once for each button. Then you would use the display.newEmbossedText() API call to draw the three bits of text in the right place. Then you would probably want to put each item into a display group for the whole message box so you can hide/show it at once or remove it in one call.

Finally you would use :addEventListener() to add touch or tap handlers to each of the two buttons. The functions that event listener would call would be responsible for hiding or removing the box and doing whatever action you want to do with the buttons.

But if you want that native look, save your self a lot of time and just call native.showAlert() [import]uid: 19626 topic_id: 32790 reply_id: 130400[/import]

#6

how to show the combination of native.alert and native.newTextField ,

like the image is :http://www.edumobile.org/iphone/iphone-beginner-tutorials/uitextfield-use-in-iphone/ [import]uid: 157219 topic_id: 32790 reply_id: 133644[/import]

#7

i using the following code

local options = { to = {}, cc = {}, subject = "My Record ",   
 attachment={ {baseDir= system.DocumentsDirectory , filename="record.pcm" ,type="audio" } },  
 }  
native.showPopup("mail", options)

when press EMail Button the popup is coming But , without attachment audio file, what is the reason

In eclipse LogCat the following error is display.

Failed to find provider info for com.android.inputmethod.latin.dictionarypack
Could not find a dictionary pack
InputType.TYPE_NULL is specified

[import]uid: 157219 topic_id: 32790 reply_id: 133646[/import]

#8

how to show the combination of native.alert and native.newTextField ,

like the image is :http://www.edumobile.org/iphone/iphone-beginner-tutorials/uitextfield-use-in-iphone/ [import]uid: 157219 topic_id: 32790 reply_id: 133644[/import]

#9

i using the following code

local options = { to = {}, cc = {}, subject = "My Record ",   
 attachment={ {baseDir= system.DocumentsDirectory , filename="record.pcm" ,type="audio" } },  
 }  
native.showPopup("mail", options)

when press EMail Button the popup is coming But , without attachment audio file, what is the reason

In eclipse LogCat the following error is display.

Failed to find provider info for com.android.inputmethod.latin.dictionarypack
Could not find a dictionary pack
InputType.TYPE_NULL is specified

[import]uid: 157219 topic_id: 32790 reply_id: 133646[/import]

#10

I’m new to LUA and I think this looks useful, but before I try it, is there a way to customise the native.showAlert()?

In particular there is a bug/feature, where when you press the non-default button, the default button doesn’t de-highlight. So the last image you see before it dismisses is two highlighted buttons. I’m running Corona on a Mac with latest IOS.

The other things I wanted to do were move the dialog box, change the highlight colour, fonts etc. Are these possible, or should I attempt your customisation above.

Thanks

 

#11

native.showAlert() is based on the device’s native user interface. It will be styled as the Operating system styles it. There is no controls you can apply to it.

Rob

#12

Thanks Rob. So I decided to create my own alert box using composer.showOverlay() and composer.hideOverlay().

According to the documentation you can set the overly to Modal, which works fine. You can pass in params which is nice too.

You can also set a transition and a time on the transition, or so I thought. Am I reading the documentation correctly as this is not what happens? I can’t get a transition to work, but that’s not my main problem.

On my Mac running the latest IOS and the latest Corona for public release, the time actually just works on the Modality. So once the time, runs out the Overlay is no longer modal! I was hoping to set it to permanent, so that the alert box was modal and they had to click one of the buttons to dismiss it. I could do this with a very large number, but that doesn’t seem right to me. Any thoughts?

Here’s the example code I followed:

– In “scene1.lua” (parent scene)

local composer = require( “composer” )

local scene = composer.newScene()

– Custom function for resuming the game (from pause state)
function scene:resumeGame()
–code to resume game
end

– Options table for the overlay scene “pause.lua”
local options = {
isModal = true,
effect = “fade”,
time = 400,
params = {
sampleVar = “my sample variable”
}
}

– By some method (a pause button, for example), show the overlay
composer.showOverlay( “pause”, options )

return scene

– In “pause.lua”

local composer = require( “composer” )

local scene = composer.newScene()

function scene:hide( event )
local sceneGroup = self.view
local phase = event.phase
local parent = event.parent --reference to the parent scene object

if ( phase == “will” ) then
– Call the “resumeGame()” function in the parent scene
parent:resumeGame()
end
end

– By some method (a “resume” button, for example), hide the overlay
composer.hideOverlay( “fade”, 400 )

scene:addEventListener( “hide”, scene )
return scene

#13

I’m new to LUA and I think this looks useful, but before I try it, is there a way to customise the native.showAlert()?

In particular there is a bug/feature, where when you press the non-default button, the default button doesn’t de-highlight. So the last image you see before it dismisses is two highlighted buttons. I’m running Corona on a Mac with latest IOS.

The other things I wanted to do were move the dialog box, change the highlight colour, fonts etc. Are these possible, or should I attempt your customisation above.

Thanks

 

#14

native.showAlert() is based on the device’s native user interface. It will be styled as the Operating system styles it. There is no controls you can apply to it.

Rob

#15

Thanks Rob. So I decided to create my own alert box using composer.showOverlay() and composer.hideOverlay().

According to the documentation you can set the overly to Modal, which works fine. You can pass in params which is nice too.

You can also set a transition and a time on the transition, or so I thought. Am I reading the documentation correctly as this is not what happens? I can’t get a transition to work, but that’s not my main problem.

On my Mac running the latest IOS and the latest Corona for public release, the time actually just works on the Modality. So once the time, runs out the Overlay is no longer modal! I was hoping to set it to permanent, so that the alert box was modal and they had to click one of the buttons to dismiss it. I could do this with a very large number, but that doesn’t seem right to me. Any thoughts?

Here’s the example code I followed:

– In “scene1.lua” (parent scene)

local composer = require( “composer” )

local scene = composer.newScene()

– Custom function for resuming the game (from pause state)
function scene:resumeGame()
–code to resume game
end

– Options table for the overlay scene “pause.lua”
local options = {
isModal = true,
effect = “fade”,
time = 400,
params = {
sampleVar = “my sample variable”
}
}

– By some method (a pause button, for example), show the overlay
composer.showOverlay( “pause”, options )

return scene

– In “pause.lua”

local composer = require( “composer” )

local scene = composer.newScene()

function scene:hide( event )
local sceneGroup = self.view
local phase = event.phase
local parent = event.parent --reference to the parent scene object

if ( phase == “will” ) then
– Call the “resumeGame()” function in the parent scene
parent:resumeGame()
end
end

– By some method (a “resume” button, for example), hide the overlay
composer.hideOverlay( “fade”, 400 )

scene:addEventListener( “hide”, scene )
return scene