IOS style keyboard behavior

Solar2D General Questions/Discussion
#1

Hi,
I’m writing a keypad / calculator class using Corona UI buttons.
In iOS keyboards, when you press a key, any other key will turn on to an ‘over’ state when you slide your finger over it without lifting your finger. The end phase is handled according to the last key pressed during the touch event, which is not necessarily the initial touched key.

Is there a way to throw event handlers from one key to another? Or would a better approach be to completely dump the individual button idea and make the keypad group respond to the touch event, with current ‘over’ button selected by finger coordinates?

Thanks for any suggestions! [import]uid: 33608 topic_id: 16106 reply_id: 316106[/import]

#2

if you use the touch event handler, you can highlight the event.target based on the event.phase, so you can start on button 1, which will give you event.phase as began and the event.target as 1, then you move your finger to 2, it will give you event.phase as moved and the target as 2, then move the finger to 3 and release, you will get event.phase as ended and the event.target as 3

now you need to un-highlight all the buttons and then highlight the one in event.target

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 16106 reply_id: 59887[/import]

#3

Thanks for the help, that works :slight_smile: [import]uid: 33608 topic_id: 16106 reply_id: 59975[/import]

#4

Here is the code, if it helps anyone. Still have one problem tough. When the user touches a key and drags his finger away from the keyboard no key detects any event (not even a cancelled event) so the last key touched stays highlighted.
Is there an elegant way to reset all the buttons in this situation?

P.S
I’m intending to expand this into a full class of different style keyboards and text fields and will publish it in the community code area when its done.
cheers
Amir

[code]

–function to construct keboard buttons

local function newBtn(btnWidth,btnHeight,txt)
local btn = display.newGroup();
local bg = display.newRect(0,0,btnWidth,btnHeight);
bg:setStrokeColor(100,100,100);
bg.strokeWidth = 1;
local label = display.newText(txt,0,0,native.systemFontBold, btnHeight*.4 * 2);
label:scale(.5,.5) --retina display trick to make sure text is sharp

bg.x, bg.y = bg.contentWidth*.5, bg.contentHeight*.5
label.x, label.y = bg.contentWidth*.5, bg.contentHeight*.5
label:setTextColor(255,255,255)
btn:insert(bg);
btn:insert(label);

–public functions
function btn:reset()
local gradient = graphics.newGradient( { 20, 20, 60 }, { 10,10,30 }, “down” );
bg:setFillColor(gradient);
end

function btn:over()
bg:setFillColor(0,0,255);
end

function btn.getTag()
return txt;
end

return btn;
end

–function to assemble the keyboard

local function newKeyboard (keyboardWidth,keyboardHeight)
local newKeyboard = display.newGroup();
local numOfHorizontalBtns = 3;
local numOfVerticalBtns = 4;
local btnWidth = keyboardWidth / numOfHorizontalBtns;
local btnHeight = keyboardHeight / numOfVerticalBtns;

–create keypad keys
local keys = {};
for i=1,12 do
keys[i] ={};
end
–setup num 1-9 keys
for i=1,9 do
keys[i].tag = i;
end
–setup “.” , “0” and “Del” keys
keys[10].tag = “.”;
keys[11].tag = “0”;
keys[12].tag = “del”;

–private functions
local function resetAllKeys()
–removes the over state highlights from all keys
for i=1,#keys do
keys[i].btn:reset();
end
end

local function keyTouched(event)
–responds to key touches
local t = event.target
if event.phase == “began” then
–highlight the touched key
t:over();
elseif event.phase == “moved” then
–remove all key over highlight
resetAllKeys();
t:over();
elseif event.phase == “ended” or event.phase == “cancelled” then
resetAllKeys();

–do something with the last touched key
print(t.getTag()…" was pressed")
end
end

–initialize keypad
for i=1,#keys do
keys[i].btn = newBtn(btnWidth,btnHeight,keys[i].tag);
newKeyboard:insert(keys[i].btn);
keys[i].btn:setReferencePoint(display.TopLeftReferencePoint);

–position keys on the keyboard
local row = math.floor((i-1) / numOfHorizontalBtns)
local column = (i-1) % numOfHorizontalBtns;
keys[i].btn.x = column * btnWidth
keys[i].btn.y = row * btnHeight

–add an event touch listener to each key
keys[i].btn:addEventListener(“touch”,keyTouched)
end

resetAllKeys();
return newKeyboard;
end

–Main program

local function main()

local myKeypad = newKeyboard(display.contentWidth , display.contentHeight*.6);
myKeypad.x = 0
myKeypad.y = display.contentHeight - myKeypad.contentHeight
end

main();
[/code] [import]uid: 33608 topic_id: 16106 reply_id: 60072[/import]

#5

Anyone please? [import]uid: 33608 topic_id: 16106 reply_id: 60251[/import]