Modal Window Enhancement
I'm working on an application that requires user interaction to edit text and number fields using a alphanumeric keyboard, and also to make "menu" selections using the TGFX ScrollWheel.
I've designed data display and entry screens with objects that comprise labels and text fields which, when touched, make visible a popup window containing the editor (keyboard, or scrollwheel). In this manner, a single scrollwheel can be used to set values in different fields.
As part of the design, I wanted the background of the popup window to be partially transparent (alpha of 150) so that the background screen is visible underneath the popup, such as in this image of a popup window for scrollwheel selections:
Normally, one would use a TGFX ModalWindow for this purpose as it is designed to do basically the same thing. However, the ModalWindow has a requirement that is impossible to fulfill in our project: the foreground content of a ModalWindow must be placed on top of an image, and any spillover becomes subject to the alpha setting of the ModalWindow's background, such as in this example:
Our problem is that our application is severely constrained by the absence of external Flash, meaning that the image required by a Modal window will take up far too much space in our limited internal Flash. For example, a simple background of a rectangle of a single color is seen to take app. 320kB in ARGB8888 format, and app. 90kB in L8_ARGB8888. 90kB is almost 10% of available internal Flash, an unacceptable amount.
And, to boot, there can be no gaps in the background image. So, in the design I show in the first window above, the gap between the scrollwheel and the "Done"/"Cancel" buttons could not have transparency, reducing the perception of overlay.
However, there is one glaring issue with my design: the partially transparent background (a box widget) does not mask the touch sensitivity of the underlying screen. So, the buttons of that screen can still be activated when the popup is present, a problem not present in the ModalWindow.
I "solved" my issue with a workaround: I placed a full screen flex button behind the popup and in front of the underlying screen, added a text field to the button with a single space as its contents, and removed the default image from the flex button. Now the "invisible" Flex Button serves as a shield to the underlying screen, preventing touch access to its components.
So, finally my point: why not enhance the ModalWindow so that, instead of requiring an image for its center platform, one could simply use a box? This would represent a great savings in Flash storage when availability of that resource is in short supply (in my case, app .5kB kB vs 80kB).
