I've got a problem with rotated buttons in Flex. They seem to contaminate other components' focus rectangles.
Take the following source code, which couldn't be much simpler:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox width="100%" height="100%">
<mx:Spacer height="100" />
<mx:Button rotation="10" />
<mx:TextArea rotation="0" />
</mx:VBox>
</mx:WindowedApplication>
Now execute it. Click in the text area, the focus rectangle is correct. Press tab twice, the focus rectangle aroung the TextArea is rotated!
Is there a fix for this, or should I avoid rotating buttons altogether?
I'm using Flex SDK 3.5.
Thanks,
Daniel
I as well recently stumbled upon this bug. Here's a link to suggested fix.
However, I was wondering if there's a more general solution rather then extending each and every component and overriding adjustFocusRect.
I came up with extending FocusManger and overriding the getter for focusPane as follows:
override public function get focusPane():Sprite
{
var fp:Sprite = super.focusPane;
if (fp && fp.numChildren != 0)
fp.getChildAt(0).rotation = 0;
return super.focusPane;
}
and set it as application's focus manager:
private function onPreinitialize():void
{
application.focusManager = new FocusManagerEx(this);
}
This seems to work, though would be nice if some expert could tell if there aren't any pitfalls I'm not aware of.
Seems like a bug in Flex SDK. I see next options:
disable focus rectangles with focusSkin="{null}"
implement your own skin and handle rotations correctly
move to Spark, since 3.5 is the (currently)
last SDK of third generation
try to fix it yourself (I feel it will be
tricky...)
Also, you may file a bug in Adobe's tracker, but they're deep into 4-th generation of Flex.
Update: 3.6 nightly build contains this bug, too.
Related
I'm trying to hide Year2017 when the mxml page loads up. I'm using visible and includeInLayout attributes but it doesn't seems to be working.
Could somebody help me on this?
Some code written on -
Year2017.mxml,
Year2016.mxml,
Year2015.mxml
MainScreen.mxml
<mx:HBox
<component:PopupOpenerViewStack
id="payeVS"
borderStyle="none"
width="100%"
height="100%"
componentToFocusOn="{controlBar.overviewBut}"
selectedIndex="{ this.mainModel.navigator.selectedIndex }" >
<view1:Year2017
width="100%"
height="100%"
visible="{isVisible}"
includeInLayout="{isVisible}" />
<view1:Year2016
width="100%"
height="100%"/>
<view1:Year2015
width="100%"
height="100%"/>
</component:PopupOpenerViewStack>
</mx:HBox>
The way viewstacks work is they display a child based on index. In this case it will be opened in an Popup. I'd need the internals of the PopupOpener to give an more accurate answer.
Instead of setting the isVisble, can't you change the this.mainModel.navigator.selectedIndex?
It also depends on desired behaviour. What needs to happen if you have the popup open and you change it to visible?
I guess what you want is that Year2007 is not included in the stack, would not that be invisible. Have you tried to use states for it?
Thanks for all your inputs.The issue is resolved.
As Robin mentioned the visible or includeInLayout properties wont work with PopupOpenerViewStack. So I had to read the index values of each item in the viewStack and did payeVS.removeChildAt(0) whenever I wanted to hide an element.
Thanks,
Varatha
I need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.
I searched on the Net and the closest that I could get with source is
http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/
But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?
Then I decided to go with canvases and an input box
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput
text="This should be my label"
x="124" y="72"
width="166" height="32"
borderStyle="solid"
fontWeight="bold"
color="#003366" backgroundColor="#D81010"/>
<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>
</mx:Application>
But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture
Does anyone know how to resolve this or have a better idea?
thanks
What you are looking for is a component equivalent to "fieldset" in HTML. It would be easier to use create component for better styling control. For Flex 2/3, you may use jwopitz-lib; but if you could use Flex 4 or above, try the ShinyLib component (specifically the FieldSet class and FieldSet skin). It would be easier if you could migrate the application to Flex 4 or the latest Flex, you would be exposed to a lot more components.
To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)
The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.
I'm having a very odd issue where I am trying to use a text area to display some text on a mobile AIR app. It works fine whenever I am using the phone emulator on my desktop to debug, however whenever I put the app on my phone, the text displays, then disappears. I've also noticed that if I lock the screen and unlock, the text will display just fine when I come back.
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Program Overview">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
private var text:String = "Hey how are ya";
]]>
</fx:Script>
<s:TextArea text="{text}" editable="false" />
</s:View>
One other interesting thing to note is that it only happens on certain Views, and only on Views in the first ViewNavigator tab. This leads me to believe that there isn't really anything wrong with my use of the TextArea, but something else happening at a higher level in the application. Any ideas on what I should look for?
I think than the problem can be solved if you add the skinClass:
this is for TextArea:
<s:TextArea id="text1" skinClass="spark.skins.mobile.TextAreaSkin" text="{myVar}"/>
this is fot TextInput:
<s:TextInput id="text2" skinClass="spark.skins.mobile.TextInputSkin" text="{myVar}"/>
I hope this help you!
I ended up replacing all of my TextArea's with StyleableTextFields as #Al_Birdy suggested and that took care of the issue. Because you can only use them in AS it made layout and styling a little bit more difficult but it was definitely worth the fix.
I need to know that what is the state or property of text-area in the flex when we could not enter the text in it, my concern is that whether the text has entered(may after it deleted) or not.
(I think i try my best to explain my problem)
Thanks
Thanks of all of you that you provide the solution/answer
Both MX and Spark TextAreas supports editable and selectable properties. The first one prevent user to change text, the second - to select it:
<mx:TextArea editable="false" selectable="false"
text="Sample Text"/>
<s:TextArea editable="false" selectable="false"
text="Sample Text"/>
I am not sure if I understand your problem, but it sounds like it could be the Safari 5.1 / Flash Debug player bug. Try switching to another browser when debugging/testing your project. If you get the same behaviour, forget everything I just said.
Read more here:
https://discussions.apple.com/message/15666579#15666579
"I also don't think this was intentional at all. I think it was just a bit careless (Apple pushing out Safari 5.1 before it being thoroughly tested - the flash problem is only one of several issues I've noted with the new browser. Very dissapointing.)."
If you're talking about MX TextArea you can disable component:
myTextArea.enabled = false;
If you're using Spark TextArea you can use editable property.
I'm a beginner at Flex, and having the hardest time, working with Effects.
Right now I'm dealing with the problems faced when dealing with competing effects.
Please look at the following code. I have basically created a short reproducible tests sample which shows the problem I'm facing:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400">
<mx:Script>
<![CDATA[
private function showmenu():void
{Menu.visible= true;
}
private function hidemenu():void
{Menu.visible= false;
}
]]>
</mx:Script>
<mx:WipeDown id="wipedown" duration="900"/>
<mx:WipeUp id="wipeUp" duration="900" />
<mx:Canvas id="main" width="400" height="400"
rollOver="showmenu();" rollOut="hidemenu();">
<mx:Button label="Show Menu"
x="100" y="20">
</mx:Button>
<mx:Canvas id="Menu" visible="false"
width="100" height="200"
backgroundColor="#B8B8B8" x="96" y="35"
showEffect="{wipedown}" hideEffect="{wipeUp}">
</mx:Canvas>
</mx:Canvas>
</mx:Application>
This basically shows a Button, and when you roll over on the button, another canvas, which is going to be a sort of menu, will be displayed. When you roll out, the Menu disappears.
The menu also has some effects, and if you try to start one effect before another is over, it gets into an infinite loop.
To reproduce what I am talking about, rollover the button, and then rollout and then quickly rollover again. You will see that the menu effects get stuck in a loop.
How do I code around this?
If you're having problems with events playing when they shouldn't, just add EffectEvent.EFFECT_START listeners to your events and use it to stop any playing events. e.g,
function _handleEffectStart(e:EffectEvent):void {
if(e.target == wipedown) {
wipeup.stop();
} else {
wipedown.stop();
}
}
Or something similar.
I cannot reproduce your problem. No matter where/when I move my mouse in or out, it never goes into a loop. Note that I'm using Flex 3.2. Maybe it depends on which version your using?
Btw, your code doesn't completely match your description: You have the rollOver and rollOut events on the canvas that also contains the canvas that you are showing and hiding. Just a guess, but I can imagine that the effect itself actually causes your mouse to be over or not over the canvas anymore, triggering the rollOver/rollOut, which then again cause the mouse to move in/out... Is that the infinite loop you're experiencing?