Corona Scroll with buttons and/or images = Scrolling + Clicking - scrollview

How can buttons or images inside a scrollview work when clicked,
but if they are moved(scrolled) still keep the scrolling functionality?
I read about returning true from event handling function. http://developer.anscamobile.com/content/events-and-listeners#Touch_Events
But this appears to work only for buttons on top of buttons (tap/click). Anyways tried returning true after event handler but did not help.
I can detect if button was moved, but don't know if that can activate/propagate to scroll.
Here's a simpler version of the code
-- ScrollView listener
local function scrollListener( event )
local phase = event.phase
local direction = event.direction
return true
end
-- Create the widget
local scrollView = widget.newScrollView
{
...
listener = scrollListener
}
-- Create a image and insert it into the scroll view
local background = display.newImageRect( "assets/scrollimage.png", 768, 1024 )
-- Image/Button Listener
function blaBla( event )
if event.phase == "ended" then
-- do something on click
elseif event.phase == "moved" then
-- can't do anything to propagate this event to the scroll
end
return true
end
background:addEventListener( "touch", blaBla )
scrollView:insert( background )

returning true from the touch listener inhibits propagation of the event to other listeners. you should not return true.
you could also just call the scroll listener from the touch listener.

Related

Gtk - Intercept Mouse Button Events in Top Level Window

Keyboard events in Gtk propagates bottom up, starting from the top level window and then up the Z order. However mouse button events are first delivered to the widget at the top of the Z order and it is propagated down only if it is not handled there.
I am trying to implementing a UI lock feature where mouse button / touch events are to be ignored unless the user is clicking on the unlock button.
Is there any way in which I can intercept button presses at the top level window itself? I tried connecting to the signal_button_press_event with the after argument set to false. Even then the events are delivered to the child widget first.
Earlier I was using gdk event filters (Gdk::Window::add_filter) to do this however that works only on X11 backend and does not work for Wayland.
Updated after comment for adding minimal code
CTestWindow is a top level window derived from Gtk::Window. The button press signal is intercepted as below in the class constructor.
signal_button_press_event().connect(sigc::mem_fun(*this,
&CTestWindow::HandleButtonPress),
false);
This is how the handler is implemented
bool CTestWindow::HandleButtonPress(GdkEventButton *pEvent)
{
bool bRet = false;
/*
* If the button press coordinate is outside the allocated area of the unlock button,
* discard the event (by returning as processed).
*/
if (!CCommon::IsWithinBounds(m_oUnlockButton.get_allocation(),
(int)pEvent->x,
(int)pEvent->y))
{
bRet = true;
}
return bRet;
}

Checking values in a parent object

Recently, I have been working on a game project and decided to learn how to make a gui from scratch in love2d while I was at it. I decided to use OOP where I had menu objects and button objects within the menu objects. I had a problem where I only wanted to draw the buttons only if the menu was active. The easiest/best way to do this is probably to have a function in the menu object that checks if the menu is active and draw the buttons if it is like this...
menu = {
-- menu stuff
button = require("path")
active = false,
buttons = {}
}
function menu.newButton()
--create new button object from button table
end
function menu:drawButton()
if self.active then
for k,v in pairs(buttons)
menu.buttons[k]:draw() -- some draw function that sets the size, pos, and color of the button
end
end
end
This got me wondering though. Is there some way to check values in the menu's table from a function located in the button's table?
You can use composition to access properties of Menu object from a Button. To do that you would need to pass a reference to the menu object when constructing every new Button. For instance:
Button = {}
function Button.new (menu)
return setmetatable({menu = menu}, {__index = Button})
end
function Button:getMenuName()
return self.menu.name
end
menu = {
name = "menu1",
buttons = {},
}
function menu:newButton ()
local button = Button.new(self)
table.insert(self.buttons, button)
return button
end
local btn = menu:newButton()
print(btn:getMenuName())
Would print the property name of menu from object btn.

Cancel WinJS.UI.Animation.pointerDown if not clicked

I'm using WinJS.UI.Animation.pointerDown and WinJS.UI.Animation.pointerUp within a WinJS repeater's item template.
The problem is if a user holds their finger or the mouse button down on an item and moves off it, the pointerUp animation doesn't seem to fire or it fires but has no effect because the element that the up event is on is not the same as the one before. The best example of this is in the animation sample in example 6 (tap and click). Hold down the mouse button on a tile and move it off. It will stay in it's animated state and won't fire the pointerup event. Here's the code I'm using.
How can I cancel the pointerdown animation if the user moves off the element?
target1.addEventListener("pointerdown", function () {
WinJS.UI.Animation.pointerDown(this);
}, false);
target1.addEventListener("pointerup", function () {
WinJS.UI.Animation.pointerUp(this);
}, false);
target1.addEventListener("click", function () {
//do something spectacular
}, false);
I'm using the click event to commit the click action so that the right click remains clear for launching the navigation at the top of the app.
Have you tried adding an event listener for pointerout? That's the event that's dispatched when a pointing device (e.g. mouse cursor or finger) is moved out of the hit test boundaries of an element.
See the docs on pointer events here:
http://msdn.microsoft.com/en-us/library/ie/hh772103(v=vs.85).aspx

WinJS AppBar button flash on Hide

My application has a WinJS AppBar control at the bottom of the screen. I use .showOnlyCommands(buttonsToShowArray) to show and hide buttons on ListView itemSelectionChanged event.
The problem I have right now is that when every I call .showOnlyCommands, the buttons to be hidden (or you may say "replaced") are going to flash on the top of the screen.
I tried to use the Microsoft sample app, this doesn't happen. I tried to use .showCommands + .hideCommands method, it is the same behavior. Note that this didn't happen before the Release Preview version of Win8.
I have no idea what is going on. Any idea?
EDIT:
I did further investigation, the problem happens on hideCommands. Say I have 3 buttons displayed on the appbar. I call hideCommands to hide all 3 buttons. The icon of the 3 buttons would disappear on the appbar, then pile up at the top-left corner of the screen and then disappear. (i.e. there would be a flash of 3 piled up buttons at the corner of the screen).
You may be invoking showOnlyCommands when the AppBar is in the process of 'showing'. I've found that when calling these methods in the beforeshow or aftershow handler that this happens. This quote from Animating your UI sheds light on why:
Use fade in and fade out animations to show or hide transient UI or controls. One example is in an app bar in which new controls can appear due to user interaction.
The sample app shows/hides the buttons before the appbar is shown. You may be calling show on the app bar before calling showOnlyCommands.
A temporary hack for this problem is:
Set the button be invisible before calling showOnlyCommands or HideCommands.
Here is the code that I use for now:
/*
* #param {WinJS.UI.AppBar} appbar winControl
* #param {Array} array of appbar buttons to be shown
*/
function showOnlyCommands(appbarControl, buttonsToShow) {
var toShow = {};
for (var i = 0; i < buttonsToShow.length; i++) {
toShow[buttonsToShow[i].id] = true;
}
for (var i = 0; i < visibleButtonsList.length; i++) {
var id = visibleButtonsList[i].id;
if (!toShow[id]) {
// set the display property of the buttons to be hidden to "none"
var button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
}
}
// update the visible buttons list
visibleButtonsList = buttonsToShow;
// Note that we don't need to set the "display" property back for the buttons,
// because WinJS.UI.AppBar.showOnlyCommands would set it back internally
appbarControl.showOnlyCommands(buttonsToShow);
}

How do I determine the page number for the tab I just clicked on in gtk#?

I have a GTK notebook with multiple tabs. Each tab label is a composite container containing, among other things, a button I want to use to close the tab. The button has a handler for the "clicked" signal.
When the signal is called, I get the button widget and "EventArgs" as a parameter.
I need to determine the page number based on the button widget, but myNotebook.PageNum(buttonWidget) always returns -1. I've even tried buttonWidget.Parent which is the HBox which contains the widget.
Any ideas on what I can do or what I am doing wrong?
One easy work around is to pass the page number to your button's Clicked event as you construct the buttons.
for (int page = 0; page < n; page++){
int the_page = page;
NotebookPage p = new NotebookPage ();
...
Button b = new Button ("Close page {0}", the_page);
b.Clicked += delegate {
Console.WriteLine ("Page={0}", the_page);
};
}
The "the_page" is important, as it is a new variable that will be captured by the delegate.