My button doesn't have a blue focus ring around it, even though it has focus.
I've got a component with a RadioButtonGroup and a Button. After a selection is made in the RadioButtonGroup, focus is switched to the Button. I added click="focusManager.setFocus(myCloseButton)" on the VBox.
After, a radioButton is selected, if the user clicks the spacebar the Button fires.
So, as I understand it focus was switched to the button. But, the button doesn't get a blue focus ring surrounding it. How do I get the focus ring?
(I have visible="false". I turn them to visible, after some effects are finished. So, don't let that throw you.)
<mx:VBox id="radioVBox" visible="false" click="focusManager.setFocus(myCloseButton)" >
<mx:RadioButtonGroup id="rgb1" itemClick="goClickHandler(event); "/>
<mx:RadioButton groupName="rgb1" label="{answerA}" value="{answerA}" />
<mx:RadioButton groupName="rgb1" label="{answerB}" value="{answerB}" />
<mx:RadioButton groupName="rgb1" label="{answerC}" value="{answerC}" />
</mx:VBox>
<mx:Button id="myCloseButton" label="Close"
width="100" height="40"
fontSize="20" fontWeight="bold"
click="closeHandler(event)"
visible="false" fontFamily="Verdana" />
Any suggestions?
Thank you.
-Laxmidi
You can force Flex show the focus drawing after your component get focus with something like this:
focusManager.getFocus().drawFocus(true);
also, you can try someting like:
myCloseButton.drawFocus(true);
Hope it helps.
Related
I have a mobile AIR app with a simple layout:
<s:layout><s:VerticalLayout /></s:layout>
<s:TextArea width="100%" height="100%" />
<HGroup width="100%" >
<s:Button label="button" />
<s:Button label="button" />
<s:Button label="button" />
</HGroup>
The application is set to resize when the soft keyboard opens by setting resizeForSoftKeyboard="true" in the main app. The textArea uses the default Flex 4.6 skin.
My problem is, that if the user opens the keyboard by typing text into my texArea, he will be unable to click the buttons below the TextArea, because as soon as he tries to click a button the soft keyboard lowers (because the focus it out of the TextArea?) and immediately opens again (because the mouseDown position is now above the TextArea?).
How can i prevent the soft keyboard from closing, so the user is able to click the buttons between the TextArea and the keyboard?
Thanks
This is very strange. I tried running your program myself, and I have no trouble at all:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="320" resizeForSoftKeyboard="true">
<s:layout><s:VerticalLayout /></s:layout>
<s:TextArea width="100%" height="100%" />
<s:HGroup width="100%" >
<s:Button label="button" click="trace('clicked')"/>
<s:Button label="button" click="trace('clicked')" />
<s:Button label="button" click="trace('clicked')" />
</s:HGroup>
</s:Application>
The keyboard opens when I touch the text area, closes when I click a button (without opening again), and the clicks show up in the console when debugging.
You didn't post the entire app, do you have anything in the complete program that I don't? In that case, I would see if any of that could interfere with the UI.
Maybe add an event to bring up the keyboard when the button is clicked i.e. in the click event handler of that button.
Also (and I havnt tried this myself), but in the deactivate event for the keyboard for that view, add event.preventDefault()
Brian
How can I have two labels on a Flex button, one label on top and another on the bottom?
With a Spark architecture button, you should just be able to create a custom button skin.
If you're using the Halo/MX architecture, then you'll have to extend the component. IF you google for multilabel button, a bunch of solutions come up.
You can make custom skin for your button. In that skin's Label, set the maxDisplayedLines attribute to as many lines as you need.
<mx:VBox verticalGap="0" x="60" y="107">
<mx:Canvas cornerRadius="5" backgroundColor="0xff0000" backgroundAlpha=".5" borderStyle="solid">
<mx:Label text="Step 1" fontSize="20" fontStyle="italic" fontWeight="bold" width="171" />
</mx:Canvas>
<mx:Canvas cornerRadius="5" backgroundColor="0xff0000" backgroundAlpha=".5" borderStyle="solid">
<mx:Label text="Initial Request" fontSize="20" fontStyle="italic" fontWeight="bold" width="100%" />
</mx:Canvas>
</mx:VBox>
This is not the correct solution, but you can make a Canvas feel like button if you want. Flexlib has a component where they provide solution for Multiline Label.
I've made this sample:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window width="400" height="300"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<textbox id="textBox1"/>
<textbox id="textBox2" style="-moz-user-focus: ignore;"/>
<textbox id="textBox3"/>
</window>
And, at least here, the style applied to the second textbox is doing nothing. I expected it to avoid the user focus, as the doc says.
Does someone experienced this?
--edit
To whom it may concern, the working version:
<window width="400" height="300"
onload="document.getElementById('textBox2').tabIndex='-1';"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<textbox id="textBox1"/>
<textbox id="textBox2" onmousedown="return false;"/>
<textbox id="textBox3"/>
</window>
The textbox itself never takes focus. Instead, XBL creates an anonymous XHTML input element inside the textbox, and this is what takes focus. You can stop the textbox taking keyboard focus by setting its tab index to -1, and mouse focus by preventing the default action of mousedown events.
Another approach is to set the textbox to disabled or readonly, depending on why you don't want the textbox to be focused.
I opened a bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=627691
Hey, how can I hide an element in Flash Builder? I can do visible=false but the element is still there (other buttons are not centered). I'm looking for display:none style property.
<mx:HBox horizontalAlign="center">
<mx:Button id="publishButton" label="Start" />
<mx:Button label="Stop" visible="false" />
</mx:HBox>
Thx!
visible="false" includeInLayout="false", they should be used together.
I'm trying to add a cancel icon to my TabBarButtons in Flex 4.0 (Spark), and I've gotten close, but now I'm stuck on getting the icon to be "clickable"
I have seen other approaches, like FlexWiz Blog (http://flexwiz.amosl.com/flex/spark-tabs-with-close-button/), but was hoping to figure out something cleaner.
Using the similar approach found in the Tour de Flex sample on Tabbed Navigation, here is what I have in my skin so far:
<s:HGroup top="5" right="5" left="5" verticalAlign="middle">
<s:Label id="labelDisplay"
textAlign="left"
maxDisplayedLines="1"
top="10"
width="100%">
</s:Label>
<s:Graphic x="16" y="16"
buttonMode="true"
mouseEnabledWhereTransparent="false"
useHandCursor="true"
click="closeEmployeeButtonClicked()"
color="0x00FF00">
<s:BitmapImage source="#Embed('assets/images/icons/close.png')"
height="16" width="16" fillMode="scale"/>
</s:Graphic>
</s:HGroup>
The icon appears in the tab, however, I can't click it. I also tried a button and it's almost like the parent button container does not allow the child to be clickable. I did play with some parent properties (like super.mouseChildren), but couldn't get it to work.
Any thoughts!
Kind regards,
=Dave
I see that the post is pretty old, but I just came along the same issue.
In order for button to be clickable, you need to enable mouseChildren at a TabBarButtonSkin. You can do it as follows:
override protected function commitProperties():void
{
super.commitProperties();
hostComponent.mouseChildren = true;
}
Now your button should be clickable. At least it worked for me.
It's already done in flexlib library. You can find some examples here:
http://flexlib.googlecode.com/svn/trunk/examples/SuperTabNavigator_Sample.swf
and here is its project home page:
http://code.google.com/p/flexlib/
Here's a Flex 4 based tab control that appears to be very well done, full source included:
http://saturnboy.com/2010/08/terrifictabbar-custom-component/