I have having a problem in my flex/air application, in which when the left mouse button is clicked on a TextInput the focus is stolen by the parent.
So in more detail I have an hierarchy as follows...
accordion
->panel(Custom)
->TextInput
->TextInput
So some really annoying reason when I click on the TextInput's the focus goes to the accordion.
But when i add the same Custom Panel to a Canvas the TextInput works as per normal.
I don't understand why this would be happening?
Does your parent panel have a click effect that shifts focus? This could cause the issue because of event bubbling.
Edit: Could it be an issue with your custom panel? try taking the input text boxes out of the custom panel, putting them in a regular panel, and then putting that into the accordian...you probably won't have the issue still.
Can't reproduce the problem with this tiny example - it works correctly.
<mx:Accordion>
<mx:Panel label="Test">
<mx:TextInput />
<mx:TextInput />
</mx:Panel>
</mx:Accordion>
So, my suggestions would be:
try removing any custom code you have in the accordion (event handler, etc)
try using simple container instead of your custom and see if it still happens. If it doesn't then the problem is in your custom container.
Related
I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.
First off here is the portion of .mxml that I am working with.
<s:Scroller id="scroller">
<s:VGroup id="vGrp" >
<mx:Form id="form"/>
</s:VGroup>
</s:Scroller>
I need the form to auto scroll based on the focused FormItem child that has focus. I have looked at this and tried this method. The issue that I am having is that my form is dynamically populated with FormItems. The example that I liked looks to only take into account that focusing will only happen to children of the VGroup. For me this is not the case and implementing the functions laid out in the linked website did not work for me (even after I did try to modify it to my particular case I was unable to get the scrolling to work properly). Any help would be much appreciated.
I have a basic mouseover in my flex application which changes an image onmouseover and changes it back onmouseout using the code mouseOver="functionToChangeImageSource()" and another one to mouseout.
It works fine when you slowly mouse over and out, however if I quickly move the mouse over it, it occasionally stays on the mouseover image and the mouseout function doesnt appear to kick in. Is there anything I can do to fix this, or does anyone have any ideas why its happening?
Also, I've tried the rollOver and rollOut instead but it has the same problem.
Code is as follows (I switched it to hide and show the two images on mouseover/out to see if it solved the problem but it didnt):
<mx:Image source="images/logout.jpg"
left="0"
top="350"
top.dataViewState="470"
id="logoutimg"
includeIn="dataViewState, dataDayViewState"
rollOver="logoutimg_mouseOverHandler(event)"
click="doLogout()"
/>
<mx:Image source="images/logoutover.jpg"
left="0"
top="350"
top.dataViewState="470"
id="logoutoverimg"
includeIn="dataViewState, dataDayViewState"
rollOut="logoutoverimg_mouseOutHandler(event)"
visible="false"
click="doLogout()" />
And the functions are as follows:
protected function logoutimg_mouseOverHandler(event:MouseEvent):void
{
logoutimg.visible = false;
logoutoverimg.visible = true;
}
protected function logoutoverimg_mouseOutHandler(event:MouseEvent):void
{
logoutoverimg.visible = false;
logoutimg.visible = true;
}
I'd imagine you're correct about the mouseover event not completing before mouseout is but how to I fix this?
You'd better use this one line code
<mx:Image source="images/logout.jpg"
left="0"
top="350"
top.dataViewState="470"
id="logoutimg"
includeIn="dataViewState, dataDayViewState"
rollOver="event.currentTarget.source = 'images/logoutover.jpg'"
rollOut="event.currentTarget.source = 'images/logout.jpg'"
click="doLogout()"
/>
I'm guessing it's a problem with would is available to take the handler at the time of the over/out depending on how quickly flash switches visibility.
But the main problem here is you're doing it wrong.
You don't need 2 images, just have one image and change the source attribute:
<mx:Image source="images/logout.jpg"
left="0"
top="350"
top.dataViewState="470"
id="logoutimg"
includeIn="dataViewState, dataDayViewState"
rollOver="logoutimg_mouseOverHandler(event)"
rollOut="logoutoverimg_mouseOutHandler(event)"
click="doLogout()"
/>
protected function logoutimg_mouseOverHandler(event:MouseEvent):void
{
logoutimg.source="images/logoutover.jpg";
}
protected function logoutoverimg_mouseOutHandler(event:MouseEvent):void
{
logoutimg.source="images/logout.jpg";
}
Edit: If you're seeing a flicker, try the embed syntax. You could also do it with Flex Css and hover attributes I think (no code required).
We've recently run into the same issue and the only real solution seems to be to replace the images with a Button and changing its up, down, over and disabled skins to embedded versions of the images.
If you just use mouseUp and mouseDown, the only problem you'll have is when the user clicks down on the image, then with the mouse still down, moves the mouse clearly away from the image. In this case, the image stays in the mouseDown version. To fix this, you also need to include a rollOut condition that reverts to the mouseUp image. Now, all bases are covered.
i want to add minmun/maximum button on tabnavigator header.......how i could be possible
put the tab navigator and a button in a canvas
set the X and Y of button Y=0 and X=tabnavigator.width - button-width-10
on click of button use Resize function set HeightTo=0 and heightFrom= tabnavigator.width
then play() the resize
to restore heightFrom=0 and heightTo=previous size of navigator
then you got the illusion of minimizing ang maxizing the tab navigator.. please do add some more effects of your desire..
Hope this gives you a idea on it..
Forget how it looks at first. Create a button that simply hides the TabNavigator. I'm sure there are plenty of tutorials out there on how to animate show/hide. Once you have that, move the button where you want it and style it as you wish.
Ive never heard of a tabNavigator header, but if you mean adding buttons to the tabs themselves, then theres an example and source code you could work from with FlexLib SuperTabNavigator
I have a TabNavigator that has a handful of children. The flow of the application allows the possibility of a user leaving the screen with this TabNavigator, then returning. When this happens, a method called on show of the parent canvas sets selectedChild to the first tab. When actually tested, the TabNavigator returns showing the text on the first tab, but the tab that is highlighted is whatever tab the user was on just before leaving.
Here is some pseudo-code that looks something like what I have:
<mx:Canvas show="init()">
<mx:Script>
<![CDATA[
private function init():void {
menutabs.selectedChild = tab1;
}
]]>
</mx:Script>
<mx:TabNavigator id="menutabs">
<mx:VBox id="tab1" label="Tab 1"><mx:Label text="First Tab Text" /></mx:VBox>
<mx:VBox id="tab2" label="Tab 2"><mx:Label text="Second Tab Text" /></mx:VBox>
<mx:VBox id="tab3" label="Tab 3"><mx:Label text="Third Tab Text" /></mx:VBox>
</mx:TabNavigator>
</mx:Canvas>
So what I am experiencing, for example, is going to another canvas with the application, having been on Tab 2, then returning to this canvas to see the text "First Tab Text" but the highlighted tab along the top is "Tab 2." I have tried handfuls of variations within the init() method of invalidateDisplayList, validateNow, and so on, with no change in the outcome.
Any ideas welcome.
This is the same issue seen in this question
I have also been suffering from the same problem and it appears to be a bug in the Flex framework's TabNavigator control. I have yet to find the solution though.
I have managed to find a temporary workaround:
TabNavigator's parent, referred to as The Parent, should dispatch an additional hide event on the TabNavigator when The Parent's visibility is set to false and dispatches the hide event on The Parent. This will trigger the redrawing of the control which eliminates overlapping content areas.
The Parent should reset TabNavigator selectedIndex to 0 in the hide handler for The Parent.
If you are having issues with TabNavigator tab styling when visibility changes, you can use
tabNavigator.notifyStyleChangeInChildren('tabStyleName',false) in the show handler for the tabNavigator to redraw the tab styles correctly.
I hope these are sufficient to cover your cases.
Did you observe that 'selectedChild' is an actual property of ViewStack, and not TabNavigator?
Since TabNavigator can be considered as ViewStack + TabBar, setting selectedChild has no effect on TabBar.
I suggest to use 'selectedIndex' than to set selectedChild. You can obtain the selectedIndex from the Container itself, using getChildIndex()
I left out a bit of information. My init() method does more than just selectedChild, and I think this other stuff, that didn't necessarily need to run every time, was what was screwing up the re-drawing of the tabs. So I created a new goHomeTab() method to call on show, and call my init() method only on initialize. All seems to be fine now. Thanks.