Understanding the Issue with Adobe AIR App Clickability on iOS

As a developer, there’s nothing more frustrating than dealing with issues that seem impossible to resolve. In this article, we’ll delve into the world of Adobe AIR and explore why an app built using Flex might not be clickable at the upper right corner only on iOS.

Background: What is Adobe AIR?

Adobe AIR (Application Runtime Environment) is a set of APIs for building cross-platform desktop applications that can run on multiple operating systems, including Windows, macOS, Android, and iOS. It allows developers to create applications using HTML, CSS, JavaScript, and other web technologies, which can then be packaged into a standalone executable.

Understanding the Issue

The problem at hand is that the upper right corner buttons in an Adobe AIR Flex app are not clickable on iOS devices, despite working perfectly on Android and other platforms. The user has reported that it takes multiple attempts to click these buttons, suggesting some sort of delay or inhibition mechanism might be at play.

Possible Causes: Exploring the Native Screen

One potential explanation for this issue is the native screen’s ability to drag down in iOS devices. When this happens, the operating system temporarily modifies the window manager to accommodate the pull-down notification bar. This could potentially interfere with the touch area of the button, making it harder or impossible to click.

Solution: Increasing Touch Area of Buttons

The answer provided by a fellow developer suggests increasing the touch area of buttons by adjusting their size and image placement. Specifically, the suggestion is to set the image for the button to 30x30 pixels instead of the default 44x44 pixels. By doing so, the touch area increases, making it easier to click the button.

Setting Image Size

The key here is to understand how Adobe AIR handles button images and their associated touch areas. When creating a button in Flex, developers can specify an image for the button’s background. However, this image does not directly dictate the touch area of the button.

To achieve the desired effect, developers need to adjust the size of the button’s container, which includes setting the width and height properties of the Button component in their application’s MXML file. By reducing these values, the overall size of the button decreases, but more importantly, the touch area becomes smaller as well.

Here’s an example of how to adjust the image size:

{< highlight ACTIONScript >}
var myButton:Button = new Button();
myButton.width = 30;
myButton.height = 30;
// Add the image to the button
var img:Image = new Image();
img.src = "button_image.png";
myButton.addChild(img);
</highlight>}

Adding a Layer on Top

Another potential solution is to create a separate layer that covers the entire window and adds an overlay on top of it. This can be achieved by creating a transparent PNG image with the desired size (e.g., 44x44 pixels) and positioning it at the center of the button.

This approach works because, on iOS devices, the operating system temporarily modifies the window manager to accommodate the pull-down notification bar. By adding an overlay layer, we can “trick” the touch area into being larger than it actually is, making it easier to click the button.

Here’s an example code snippet that demonstrates this technique:

{< highlight ACTIONScript >}
var myButton:Button = new Button();
// Set up the image and position it at the center of the button
var img:Image = new Image();
img.src = "button_image.png";
myButton.addChild(img);

// Create a separate overlay layer that covers the entire window
var overlay:Sprite = new Sprite();
overlay.graphics.beginFill(0x00000000); // Set to transparent
overlay.graphics.drawRect(0, 0, myButton.width, myButton.height);
myButton.addChild(overlay);

// Add an event listener to capture touch events
myButton.addEventListener(TouchEvent.TOUCH_DOWN, function(event:TouchEvent):void {
    // Handle touch event here...
});
</highlight>}

Conclusion

In this article, we explored the issue of Adobe AIR app clickability on iOS and discovered that it’s related to the native screen’s ability to drag down notifications. By adjusting the size and image placement of buttons, developers can increase their touch area, making them easier to click.

Additionally, we discussed an alternative approach involving overlay layers that cover the entire window and add an extra layer of protection for the button. This technique can be particularly useful when dealing with issues related to iOS devices’ pull-down notification bars.

By understanding the underlying mechanisms and techniques involved in creating cross-platform desktop applications, developers can better troubleshoot and resolve issues like this one, ensuring their apps work seamlessly across different platforms.

Last modified on 2023-12-31