button in scrollview breaks when it's pressed and moved

Getting Started Newbie Questions
#1

I have a widget.newButton in a scrollview, it works fine.  But when I click and drag on the button, the focus goes back to the scrollview and the button stops working.  One little move of the scrollview and the button stops being a button, it’s onEvent isn’t called.

local myImageButton = widget.newButton                   {                      id = imageString,                      left = 0,                      top = 0,                      defaultFile = imageString,                      onEvent = ImageButtonEvent                   }                 myImageButton.anchorX, myImageButton.anchorY = 0, 0                 myImageButton.x = 0                 myImageButton.y = startY - yOffset                 scrollView:insert( myImageButton )  

and

function ImageButtonEvent( event )   print ("ImageButtonEvent " .. tostring(event.target.id))    local phase = event.phase    local target = event.target    if ( "ended" == phase ) then      print( tostring(event.target.id) .. " was released" )      doPopUp ( event.target.id )    elseif "moved" == phase then      local dy = math.abs( ( event.y - event.yStart )       if dy \> 10 then          scrollView:takeFocus( event )      end    end end  

an ideas what is stopping the onEvent?  Thanks!

#2

Any time you handle an event and you don’t want it to pass to an underlying object return true from the event listener.

So just put a return true at the end of your ImageButtonEvent.

#3

Hi @mfor1967,

If you want a bit more “distance” before the scroll view takes back control (and starts moving), you can change “dy > 10” to something like “dy > 20”. This will allow the user to slide a bit more up/down on the button without giving control back to the scroll view via the “:takeFocus()” call.

Hope this helps,

Brent

#4

Ah sorry Brent’s right. I forgot how widget.newButton behaves.

#5

@primoz.cerar — no worries… and this basically applies to buttons within a scroll view. Obviously, none of that distance sensing and “takeFocus” code is necessary for buttons that are outside a scroll view.

@mfor1967, you can also make the button retain its focus across its entire region if you want, but just not giving focus back to the scroll view at all. But that behavior may seem odd to the end user.

Brent

#6

The image in the scrollview takes up the whole screen, but I’m using it as a button so the use can bring up an Overlay scene where they can zoom and pan to see the image details, the little text.  So I’m trying to give them the option to keep scrolling past it if they are not interested in the fine print.

the distance being 10 or 90 doesn’t change that trouble I’m having.  if the finger drags the button to scroll the window, I can’t press it afterwards.  

#7

It’s a bit unclear what you are doing. As I understand you have a button that fills up the whole screen and it’s not scrollable. Then if the user presses it you bring up an overlay with what? Same image or bigger version of the image on a scroll view? Then if the user presses again it’s supposed to close the overlay? Explain a bit more please or post the overlay code.

#8

Sorry if I was unclear before.  The short answer, this is a print document with text and images that I have turned into an app.

I have a scrollview where I have lots of text and and Images.  It scrolls vertically so the user can read the 1000’s of words there.  In the text there is a picture.  That picture scrolls along with the text and the reader may not want a closer look at the picture.  If the user clicks on the image, I am popping up an overlay so they can inspect that image only.  To close the pop-up they have a little X and they are right back reading where they left off.

#9

Ah I see. Well the code you posted should be fine and it should not prevent the next touch to be passed to the button. There might be something else in your code that is preventing it. Is there maybe some other object like a rect or a group that is over or under the button and has a touch event listener also?

#10

I have tested this and I can not reproduce your problem. Are you seeing this behavior before you press any buttons or only after you have pressed a button.

Try running the sample code from here: http://docs.coronalabs.com/api/type/ScrollViewWidget/takeFocus.html

Do you get the same problem there?

#11

That’s the page where I got the “if dy > 10 then” 

The button works fine initially.  I can get it to work many times.  But if I click and then drag to scroll the window, the button no longer works.

I’ll start a new little project with that code to see if it works for me too.

#12

Yes try that.

What i’m interested in is this:

start -> slide -> press

or

start -> press -> slide -> press

Does the first sequence break already or only second?

#13

I found the line that is breaking the button, and it’s “storyboard.showOverlay( “ImagePopUP”, options )”

if I comment that out, the button always works and functions as expected.  But if I use showOverlay, the button breaks the next time it’s dragged.  

press -> slide, breaks it ONLY if showOverlay has been called.   You can press -> slide all day and the next press will bring up the overlay, but now that the overlay has been called the next press -> slide will break the button.

#14

That’s what I thought.

Can you post the doPopUp function and the ImagePopUP scene code.

#15

Here’s the function that calls showOverlay

function doPopUp ( theImageName )   local options =     {         effect = "fade",         time = 400,         isModal = true,         params = { data = theImageName }     }     storyboard.showOverlay( "ImagePopUP", options )     print("Pop up") end  

The imagePopUp.lua is a little long, I’ll post it here.

#16

The only obvious thing I see is this:

In your doneButtonEvent you have event.target:removeSelf( ).

That could be a problem since you are removing the object in it’s event handler.

I imagine you are doing this because you don’t insert the circleXbutton in to the scene view.

If you insert it then you don’t have to remove it manually, the scene will remove it.

Also I suggest creating your scene in createScene method not enterScene.

Good luck

#17

well, I never got it to work so I did it a different way.  Any time that button listener did a scrollView:takeFocus() it lost it’s onEvent.  Other scenes are behaving properly with no troubles using similar code, I just had to stop and let it go.  

Here is how i solved it.

local pageImage = display.newImage(tostring(word), system.ResourceDirectory) pageImage.anchorX, pageImage.anchorY = 0, 0 pageImage.x = 0 pageImage.y = startY - yOffset scrollView:insert( pageImage )   --pageImage:addEventListener( "touch", ImageButtonEvent ) function pageImage:tap( event ) if (event.numTaps \>= 2 ) then   print( "The pageImage was double-tapped." )     local options =     {       effect = "slideLeft",       time = 400,       isModal = true,       params = { data = word}     }     storyboard.showOverlay( "ImagePopUP", options )     return true;   elseif (event.numTaps == 1 ) then     print("The pageImage was tapped once.")   end end                 pageImage:addEventListener( "tap" )  

so now a double tap will open the overlay where the user can zoom and pan the image.

#18

If that serves your needs that’s great.

Have you tried to change what I suggested?

#19

Yes I did, but the button still lost it’s mojo when I did a “scrollView:takeFocus()”
 

#20

Any time you handle an event and you don’t want it to pass to an underlying object return true from the event listener.

So just put a return true at the end of your ImageButtonEvent.