You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by bilbosax <wa...@comcast.net> on 2017/07/06 16:43:19 UTC
Visibility Issue with PopUp Component
I have a PopUp that occupies about a third of the screen with several
components in it like a dropdownlist, a textInput, and sliders where a user
can set values that are needed by the program(i haven't included them all in
the example). Each time the PopUp is loaded, it obtains values from the
last time the PopUp was loaded to populate the components with the previous
values for the user. The problem that I am having is with the textInput.
The first time that they PopUp is displayed, everything displays perfectly.
I enter a city name like "Indianapolis" into the textInput, and then close
the PopUp. The next time the PopUp is opened, it should load all the
positions and sizes of the components, then load the values to populate the
components. But the textInput loads and displays "Indianapolis" to the left
of boundaries of the PopUp momentarily, and then it snaps into its proper
place inside the PopUp borders. I have tried every workaround that I can
think of which includes setting the initial visibility property of the PopUp
AND the textInput to false, then setting all of the position paramaters,
then loading the component values, and finally turning the visibility of the
PopUp and the textInput back to true. But for some reason, the textInput
still displays outside of the bounds of the PopUp for just a few frames and
then snaps into place. None of the other components, sliders or
dropdownlist do this??? Any thoughts???
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init(event)"
visible="false">
<fx:Script>
</fx:Script>
<s:Group id="topGroup">
<s:TextInput id="cityInput" color="#4F4F4F" visible="false"/>
<s:HSlider id="minPriceSlider" minimum="0" maximum="100"
showDataTip="false" snapInterval="1"
change="minPriceSliderChangeHandler(event)"/>
<s:CheckBox id="allCB" label="All" change="allCBChangeHandler(event)"/>
<s:CheckBox id="mfCB" label="Multi Family"
change="CBChangeHandler(event)"/>
<s:CheckBox id="sfCB" label="Single Family"
change="CBChangeHandler(event)"/>
<s:CheckBox id="coCB" label="Commercial"
change="CBChangeHandler(event)"/>
<s:CheckBox id="cndCB" label="Condo/Townhouse"
change="CBChangeHandler(event)"/>
<s:CheckBox id="lotCB" label="Lot/Land" change="CBChangeHandler(event)"/>
<s:Label id="mySpacer" text=""/>
</s:Group>
</s:BorderContainer>
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Visibility Issue with PopUp Component
Posted by Josh Tynjala <jo...@gmail.com>.
I recently noticed that StageText appeared slightly to the right of where
it should in AIR 26. If I remember correctly, it was working better in AIR
25.
- Josh
On Thu, Jul 6, 2017 at 8:04 PM, bilbosax <wa...@comcast.net> wrote:
> Erik, I appreciate your in depth explanation, and I think for the most part
> you are right. When I do not set a skinClass and let Flex use the default
> for mobile development is when I get the best performance from the
> textInput, meaning that the soft keyboard and all the features act as I
> want
> them to. But I also get this strange behavior where it shows the text off
> to
> the side before the PopUp gets centered. Setting input.text = null, or
> input.text = "" when I closed the popup had no effect the next time the
> popup was called, I still got strange text off to the side. So
> frustrating.
>
> Setting the skinClass for the textInput to mobile, or iOS solves the
> problem
> of the phantom text showing up off to the side, but for some reason when I
> click on the textInput to type in text, the text does not show up starting
> at the left edge of the component, it starts out right in the middle of the
> textInput component. When I close the soft keyboard, the text then jumps
> over to the left edge of the component where it belongs.
>
> So frustrated, any other thoughts??? I would welcome any suggestions on
> how
> to get the phantom text to be hidden, or how to get mobile or ios themed
> textInputs to align left when inputing text.
>
> Thanks!!
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/Visibility-Issue-with-PopUp-
> Component-tp15417p15424.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Visibility Issue with PopUp Component
Posted by Josh Tynjala <jo...@gmail.com>.
Hey Mike,
Visit the page about the Apache Flex mailing lists to find the email
address you can contact to automatically unsubscribe you from future
messages.
http://flex.apache.org/community-mailinglists.html
- Josh
On Fri, Jul 7, 2017 at 12:14 PM, Michael Gaston <mi...@live.com> wrote:
> Hello, My name is Mike. I have removed my name from this list. However, I
> still receive email from bilbosax. Would bilbosax be so kind to read this
> message in its entirety and remove my email. I have been polite. I ask the
> same in return regarding my request.
>
>
> Regards,
>
> Mike Gaston
>
>
> Sent from my LG Mobile
>
>
> ------ Original message------
>
> From: bilbosax
>
> Date: Fri, Jul 7, 2017 3:01 PM
>
> To: users@flex.apache.org;
>
> Cc:
>
> Subject:Re: Visibility Issue with PopUp Component
>
>
> Erik, thanks again for your invaluable input. It really helps and is an
> excellent read. I was not able to get the the StageText phantom text issue
> solved last night, but I also did not try using callLater to close the
> popup
> a frame later after deleting the text. I don't know if restarting my
> computer made a difference, but something interesting did happen that is
> currently working. Last night, I was assigning the skinClass directly in
> mxml like this:
>
> <s:TextInput id="cityInput" color="#4F4F4F"
> change="cityInputChangeHandler(event)"
> skinClass="spark.skins.mobile.TextInputSkin"/>
>
> This skinClass did not have the phantom text issue for me, but it did cause
> the textInput to enter text in the middle of the component instead of left
> justified. I restarted my computer, and tried assigning the skinClass
> using
> CSS, and voila!, everything is currently working as I need.
>
> s|TextInput {
> skinClass: ClassReference("spark.skins.
> mobile.TextInputSkin");
> fontFamily: "SanFrancisco";
> }
>
> Let me know if there is anything I should know about not using this
> particular skinClass over another.
>
> Thanks everyone!!
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/Visibility-Issue-with-PopUp-
> Component-tp15417p15430.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Visibility Issue with PopUp Component
Posted by bilbosax <wa...@comcast.net>.
Michael, I wish I could help you out, but I don't know how. I only post to
the mailing list, I have no control over who subscribes to the list, so I
don't believe that I personally can remove anyone from it. You need to
remove yourself from the list, or contact the administrators and have them
remove you.
Somebody please let me know if I am wrong about this. Sorry for any
inconvenience.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417p15432.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Visibility Issue with PopUp Component
Posted by Michael Gaston <mi...@live.com>.
Hello, My name is Mike. I have removed my name from this list. However, I still receive email from bilbosax. Would bilbosax be so kind to read this message in its entirety and remove my email. I have been polite. I ask the same in return regarding my request.
Regards,
Mike Gaston
Sent from my LG Mobile
------ Original message------
From: bilbosax
Date: Fri, Jul 7, 2017 3:01 PM
To: users@flex.apache.org;
Cc:
Subject:Re: Visibility Issue with PopUp Component
Erik, thanks again for your invaluable input. It really helps and is an
excellent read. I was not able to get the the StageText phantom text issue
solved last night, but I also did not try using callLater to close the popup
a frame later after deleting the text. I don't know if restarting my
computer made a difference, but something interesting did happen that is
currently working. Last night, I was assigning the skinClass directly in
mxml like this:
<s:TextInput id="cityInput" color="#4F4F4F"
change="cityInputChangeHandler(event)"
skinClass="spark.skins.mobile.TextInputSkin"/>
This skinClass did not have the phantom text issue for me, but it did cause
the textInput to enter text in the middle of the component instead of left
justified. I restarted my computer, and tried assigning the skinClass using
CSS, and voila!, everything is currently working as I need.
s|TextInput {
skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
fontFamily: "SanFrancisco";
}
Let me know if there is anything I should know about not using this
particular skinClass over another.
Thanks everyone!!
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417p15430.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Visibility Issue with PopUp Component
Posted by bilbosax <wa...@comcast.net>.
Erik, thanks again for your invaluable input. It really helps and is an
excellent read. I was not able to get the the StageText phantom text issue
solved last night, but I also did not try using callLater to close the popup
a frame later after deleting the text. I don't know if restarting my
computer made a difference, but something interesting did happen that is
currently working. Last night, I was assigning the skinClass directly in
mxml like this:
<s:TextInput id="cityInput" color="#4F4F4F"
change="cityInputChangeHandler(event)"
skinClass="spark.skins.mobile.TextInputSkin"/>
This skinClass did not have the phantom text issue for me, but it did cause
the textInput to enter text in the middle of the component instead of left
justified. I restarted my computer, and tried assigning the skinClass using
CSS, and voila!, everything is currently working as I need.
s|TextInput {
skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
fontFamily: "SanFrancisco";
}
Let me know if there is anything I should know about not using this
particular skinClass over another.
Thanks everyone!!
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417p15430.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Visibility Issue with PopUp Component
Posted by "Erik J. Thomas" <er...@linqto.com>.
The skin that shows text to the right of where it should in the input field is using the non-mobile "spark" theme. If you want TLF (spark skin if you are running in the mobile theme) you need to set the skinClass to:
spark.skins.mobile.TextInputSkin
This is the one that displays the text further to the right until you open the softkeyboard again like you saw. I suggest not using this one for mobile development. Reading the overview docs here will make all this clearer:
https://flex.apache.org/asdoc/spark/components/TextInput.html <https://flex.apache.org/asdoc/spark/components/TextInput.html>
The native TextInput control is used by default in mobile theme:
spark.skins.mobile.StageTextInputSkin
And it's the better one to use, overall, but you have to deal with the z-order issues and the fact you can't hide the contents of the control. There are significant limitations to using the StageText version:
Limitation of StageText-based controls:
Native text input fields cannot be clipped by other Flex content and are rendered in a layer above the Stage. Because of this limitation, components that use StageText-based skin classes will always appear to be on top of other Flex components. Flex popups and drop-downs will also be obscured by any visible native text fields. Finally, native text fields' relative z-order cannot be controlled by the application.
The native controls do not support embedded fonts.
Links and html markup are not supported.
text is always selectable.
Fractional alpha values are not supported.
Keyboard events are not dispatched for most keys. This means that the tab key will not dispatch keyDown or keyUp events so focus cannot be removed from a StageText-based control with the tab key.
StageText is currently not capable of measuring text.
At this time StageText does not support programmatic control of scroll position.
At this time StageText does not support an event model necessary to allow for touch-based scrolling of forms containing native text fields.
For more on StageText, go here: https://flex.apache.org/asdoc/spark/components/supportClasses/StyleableStageText.html <https://flex.apache.org/asdoc/spark/components/supportClasses/StyleableStageText.html>
I don't have a solid solution for you on the phantom text appearing. However, if the text is the text that you are deleting, I'd try these ideas:
Delete the text, and don't close the dialog until next frame (delete text, then do callLater(closeMe). That should ensure the native control no longer contains the text. I hate using callLater but in Flex development it's inevitable that you will find it's a valuable workaround.
Always create a new instance of the dialog by doing a new Dialog() assignment instead of caching it and hiding/showing using popup manager.
Ensure the content of the text property of your input field is empty in the Dialog() instance before you show it with popup manager.
The key is to ensure there is no text in the field before you show the dialog. Again, this problem is a pain, but working around this and using the native StageText control is better than the spark version. And there is a bug in the TextInputSkin that is causing the content part to show up to the right of where you want it. I tried extending that skin and replacing it to fix the issue and everytime I ran my app, it would throw Errors that didn't make sense. There is something strange about trying to us TextInputSkin (non-native) in a mobile app. I recommend not trying that.
Hope this helps.
Erik
> On Jul 6, 2017, at 8:04 PM, bilbosax <wa...@comcast.net> wrote:
>
> Erik, I appreciate your in depth explanation, and I think for the most part
> you are right. When I do not set a skinClass and let Flex use the default
> for mobile development is when I get the best performance from the
> textInput, meaning that the soft keyboard and all the features act as I want
> them to. But I also get this strange behavior where it shows the text off to
> the side before the PopUp gets centered. Setting input.text = null, or
> input.text = "" when I closed the popup had no effect the next time the
> popup was called, I still got strange text off to the side. So frustrating.
>
> Setting the skinClass for the textInput to mobile, or iOS solves the problem
> of the phantom text showing up off to the side, but for some reason when I
> click on the textInput to type in text, the text does not show up starting
> at the left edge of the component, it starts out right in the middle of the
> textInput component. When I close the soft keyboard, the text then jumps
> over to the left edge of the component where it belongs.
>
> So frustrated, any other thoughts??? I would welcome any suggestions on how
> to get the phantom text to be hidden, or how to get mobile or ios themed
> textInputs to align left when inputing text.
>
> Thanks!!
>
>
>
> --
> View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417p15424.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Visibility Issue with PopUp Component
Posted by bilbosax <wa...@comcast.net>.
Erik, I appreciate your in depth explanation, and I think for the most part
you are right. When I do not set a skinClass and let Flex use the default
for mobile development is when I get the best performance from the
textInput, meaning that the soft keyboard and all the features act as I want
them to. But I also get this strange behavior where it shows the text off to
the side before the PopUp gets centered. Setting input.text = null, or
input.text = "" when I closed the popup had no effect the next time the
popup was called, I still got strange text off to the side. So frustrating.
Setting the skinClass for the textInput to mobile, or iOS solves the problem
of the phantom text showing up off to the side, but for some reason when I
click on the textInput to type in text, the text does not show up starting
at the left edge of the component, it starts out right in the middle of the
textInput component. When I close the soft keyboard, the text then jumps
over to the left edge of the component where it belongs.
So frustrated, any other thoughts??? I would welcome any suggestions on how
to get the phantom text to be hidden, or how to get mobile or ios themed
textInputs to align left when inputing text.
Thanks!!
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417p15424.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Visibility Issue with PopUp Component
Posted by "Erik J. Thomas" <er...@linqto.com>.
Hey bilbosax:
If you are talking about a Flex Mobile app, just try deleting the contents of the TextInput when hiding the PopUp:
private function onCloseMe():void {
input.text = null;
}
When subsequently showing the popup, there will be no text to render and you won't see it.
In mobile apps, using mobile theme, this is well known issue because TextInput is using StyledStageText component which is essentially the native TextInput component for the platform, which makes interaction with input devices act and feel native, like soft keyboard, voice dictation, auto correct and auto suggest, etc. The non mobile theme version still does some of this stuff, but not natively so there are some issues.
Anyway if using mobile theme and TextInput you need to pay attention to the fact that the native component is being displayed above all of your application. It's Z order is higher (above) everything and it will show the text over things and when Popup shows visible before centering you'll see this sort of behavior.
In the end, TextInput on mobile is really a good thing, but it's a little quirky and you need to work around a couple issues like this.
However, if you plan to have input fields below the top half of a view where the TextInput field receives input focus and scrolls into view above the soft keyboard, be aware that there is a known problem with the caret showing up in some cases. Best to keep you input fields in the top 50% of the mobile screen so it doesn't have to scroll.
Cheers,
Erik
> On Jul 6, 2017, at 9:43 AM, bilbosax <wa...@comcast.net> wrote:
>
> I have a PopUp that occupies about a third of the screen with several
> components in it like a dropdownlist, a textInput, and sliders where a user
> can set values that are needed by the program(i haven't included them all in
> the example). Each time the PopUp is loaded, it obtains values from the
> last time the PopUp was loaded to populate the components with the previous
> values for the user. The problem that I am having is with the textInput.
> The first time that they PopUp is displayed, everything displays perfectly.
> I enter a city name like "Indianapolis" into the textInput, and then close
> the PopUp. The next time the PopUp is opened, it should load all the
> positions and sizes of the components, then load the values to populate the
> components. But the textInput loads and displays "Indianapolis" to the left
> of boundaries of the PopUp momentarily, and then it snaps into its proper
> place inside the PopUp borders. I have tried every workaround that I can
> think of which includes setting the initial visibility property of the PopUp
> AND the textInput to false, then setting all of the position paramaters,
> then loading the component values, and finally turning the visibility of the
> PopUp and the textInput back to true. But for some reason, the textInput
> still displays outside of the bounds of the PopUp for just a few frames and
> then snaps into place. None of the other components, sliders or
> dropdownlist do this??? Any thoughts???
>
> <?xml version="1.0" encoding="utf-8"?>
> <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
> xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init(event)"
> visible="false">
> <fx:Script>
>
> </fx:Script>
>
> <s:Group id="topGroup">
>
> <s:TextInput id="cityInput" color="#4F4F4F" visible="false"/>
> <s:HSlider id="minPriceSlider" minimum="0" maximum="100"
> showDataTip="false" snapInterval="1"
> change="minPriceSliderChangeHandler(event)"/>
> <s:CheckBox id="allCB" label="All" change="allCBChangeHandler(event)"/>
> <s:CheckBox id="mfCB" label="Multi Family"
> change="CBChangeHandler(event)"/>
> <s:CheckBox id="sfCB" label="Single Family"
> change="CBChangeHandler(event)"/>
> <s:CheckBox id="coCB" label="Commercial"
> change="CBChangeHandler(event)"/>
> <s:CheckBox id="cndCB" label="Condo/Townhouse"
> change="CBChangeHandler(event)"/>
> <s:CheckBox id="lotCB" label="Lot/Land" change="CBChangeHandler(event)"/>
> <s:Label id="mySpacer" text=""/>
> </s:Group>
>
> </s:BorderContainer>
>
>
>
> --
> View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Visibility Issue with PopUp Component
Posted by Olaf Krueger <po...@olafkrueger.net>.
It might be helpful to provide a simple test case including your PopUp
implementation.
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Visibility-Issue-with-PopUp-Component-tp15417p15420.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.