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
Related
I opened up flash builder, made a new Flex project, and then inserted that label into the mxml file.
<?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"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:Label id="label" text="myLabel"/>
</s:Application>
Now I run this (Using either Internet Explorer or Google Chrome) and I see a simple white screen with nothing on it (http://i101.photobucket.com/albums/m59/plinios/Untitled-4_zps1ef1127d.png).
Is it just me being silly? I've looked everywhere and I could not find a solution. This seems to be a very very simple problem. Why is the label not showing up?
EDIT:
I restarted my PC and re-installed Flash builder. I then tried the simple code above and it still displayed a white screen for Chrome and IE. Interestingly enough, I put a panel for the label to rest on and it displayed in IE, but not in Chrome.
<s:Panel x="41" y="36" width="250" height="200">
<s:Label id="label" x="10" y="-20" text="myLabel"/>
</s:Panel>
EDIT:
When right-clicking the screen, I get a flash menu, not an HTML menu.
Would using the Windows 8 operating system affect this in anyway? I don't see any other reason as to why it wouldn't be showing up normally.
I have solved this issue. The first thing to realize is that only IE will display this correctly. When you start coding, you need to wrap everything in a Spark Group. That's it!
I'm attempting to build a desktop AIR app using flex/Action Script in Flash Builder.
My desired functionality is this:
- transparent background
- semitransparent (alpha 0.5) item/element that ignores all mouse events and "passes clicks through" to the application behind the app
So essentially what I want to have is that the element handles mouse events in exactly the same way a transparent background does - ie. it is like you're clicking on the application behind
Here is a code example of what I have tried. In the below example clicking on the button fires the "window clicked" alert to demonstrate that the click is being ignored by the button and reaching the window with the transparent background. When I remove the click handler though, clicking on the button does not result in the click being passed through to application behind, like a click anywhere else on the transparent background does.
Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
alwaysInFront="true"
creationComplete="maximize();">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
s|WindowedApplication
{
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
background-color:#999999;
background-alpha:"0";
}
</fx:Style>
<fx:Script>
import mx.controls.Alert;
public function windowClicked():void{
Alert.show("window clicked");
}
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Window id="mainWindow" height="100%" width="100%" mouseChildren="false" backgroundAlpha="0">
<s:Button label="Click Through Me Please" alpha="0.5"/>
</s:Window>
</s:WindowedApplication>
I made a quick comment to your question but thought I would elaborate in an answer.
Since I'm sure you are going to do more than your example up there, here is how those properties work:
mouseEnabled="false" - this says you can't click me but you can click my children. This works well when you are disabling a single item or want click event to pass through an item to it's children.
mouseChildren="false" - this says you can't click my children. This is useful if you are goin to build complex overlays in your app that might contain 10 display objects and want want the mouse to ignore them all.
Hope this helps!
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.
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/
I have an small application in flex in which I have defined 2 canvases. On one of them I added controls and the other one is used to draw something and no controls are added:
<mx:Canvas x="0" y="80" width="100%" height="520%" id="Canvas1"/>
<mx:Canvas x="0" y="0" width="100%" height="80" id="Canvas2"/>
I add an keydown event handled to the application but it is triggered only after I click with the mouse on the first Canvas(the one where controls have been added). Otherwise the event is not triggered when keys are presses.
I've tried several things: to set focus on the second canvas, to add the keydown handler to the application(this),stage, canvas... Unfortunately I didn't find a solution to trigger keydown no matter where the focus is.
This is for flex 4.
<?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"
xmlns:mx="library://ns.adobe.com/flex/mx"
name="MyApp"
width="480" height="480"
creationComplete="init();">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
public function init():void
{
trace("init");
this.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
}
private function keyDown(event:KeyboardEvent):void
{
trace(event.charCode);
}
</fx:Script></s:Application>
The first problem you describe (having to click the mouse before any KeyboardEvents are dispatched) is likely due to the browser not giving focus to the Flex application itself. You can use Javascript in the HTML wrapper to programmatically give focus to the Flex app on the "body" element's "onLoad" event. I know for certain this works in Firefox and I believe it works okay in IE as well. I'll try to dig up the relevant Javascript code.
As far as the second problem, have tried adding an event listener to Application.application for catching all KeyboardEvents?