In building the mobile dating app Xuland, one of its key features will be the ability to add many profile photos. Your admirers can tap each photo from a list, see the larger version and vote on whether they like it or not.

The thing is, because buttons are typically over-sized on mobile devices to make them fat-finger friendly, it leave little room on the screen for many of them. You could utilize the off-screen menu option on Android but iOS devices lack this seemingly basic feature. Instead you could design your app to have contextual popup menus appear when holding or pressing down on an icon, button or other object on the screen.

Unfortunately, the current version of Flex (4.5) doesn’t support a long-touch or long-click event from what I can see, but it was easy enough to simulate one using a timer:

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

private var timer:Timer;
private var confirmPopup:ConfirmPopup;
 
private function onTouchBegin():void
{
	timer=new Timer( 1000 );
	timer.addEventListener( TimerEvent.TIMER, onTimerComplete );
	timer.start();
}
 
private function onTimerComplete( event:TimerEvent ):void
{
	timer.stop();
	confirmPopup=ConfirmPopup.open( "delete photo?" );
	confirmPopup.addEventListener( ConfirmPopup.CONFIRMED, onDeletePhotoConfirmed );
}
 
private function onDeletePhotoConfirmed( event:Event ):void
{
	confirmPopup.close();
 
	//put additional photo deletion logic here
}
 
public function onTouchEnd():void
{
	timer.removeEventListener( TimerEvent.TIMER, onTimerComplete );
	timer.stop();
}

And the MXML…

1
2
3
4
5
6

<s:Image id="image"
	source="{ xyzSource }"
	touchBegin="onTouchBegin()"
	touchEnd="onTouchEnd()"
	mouseDown="onTouchBegin()"
	mouseUp="onTouchEnd()" />

Essentially what happens here is that once the user touches a photo, the timer activates and starts ticking. If the user at any time during the timeout period takes his finger off the photo, the timer is stopped, otherwise when the timer reaches is preset delay, it opens a confirmation popup prompting the user to take some action.

Here’s the results: