In AIR how to set focus on textinput on application load? - apache-flex

On my application I have a login form. On application start, I want the focus/selected one is set on the user id textinput.
I tried normal setFocus method and didnt worked.
How can i make it work?

This works for me with Flex 3 and AIR 1.5:
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:applicationComplete>
ti.setFocus();
</mx:applicationComplete>
<mx:TextInput id="ti"/>
</mx:WindowedApplication>

Related

Drag & drop of files from the file system into Flex doesn't work

I am trying to implement drag & drop of files from the file system into Flex, but somehow it doesn't work.
To be precise, it refuses to register when the nativeDragEnter event happens, meaning, it doesn't do anything when i drag a file system file into a component. I tried it with mx and spark components, using flex 3.6A and 4.10 but nothing works.
I am working on Windows 8.1. Could this be the problem?
Below is what i did, did i miss something?
<mx:Script>
<![CDATA[
protected function hbox1_nativeDragEnterHandler(event:NativeDragEvent):void
{
var a:String = "segdfsh";
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%" nativeDragEnter="hbox1_nativeDragEnterHandler(event)">
</mx:HBox>
The code in the question seems to work after all, but for some reason it didn't work if i debug it from Flashbuilder, but when i release my project, then it works like a charm, so yeah, no issue here, i guess.

Setting focus on a TextField when application starts when there are two states

I have next application header:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" creationPolicy="all" enterState="focusManager.setFocus(employeeIDTextInput);">
public function init():void {
focusManager.showFocusIndicator = true;
focusManager.showFocus();
focusManager.setFocus(theTextInput);
}
And theTextInput is on the default state. But when application starts theTextField is focused (a blue rectangle is around theTextField) but the cursor isn't inside theTextField. But in the next state I have anotherTextInput and when you switch between states both text inputs are focused correctly as you expect and the cursor appears inside every one of them correctly.
<mx:State name="secondState" enterState="{focusManager.setFocus(anotherTextInput)}">
My question is, Why when application starts the cursor isn't inside theTextInput as commanded on init() function?
Thank you for your answer
I solved it, That problem was because this is a component and is called from a main menu, and the creationComplete event is dispatched just in the moment when the menu is created just before the component appears in screen. What I did was to attach an event handler to show event and that is.
<mx:Canvas width="100%" height="100%" xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()" creationPolicy="all"
show="focusManager.setFocus(employeeIDTextInput)"
>
Thank you very much to every one who ask my question...

Make Flex mobile full screen in desktop (as an air app)

I need to make flex mobile application to be full screen when it runs on desktop OSs (I've packaged it as an air app)
I'm pretty sure that your view will dispatch it's creationComplete event before the main Application is added to the stage, which is probably why you got the error.
In the past, I've used the applicationComplete event and the StageDisplayState.FULL_SCREEN. Here is an old blog post I wrote about it.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" alwaysInFront="true"
applicationComplete="onApplicationComplete()">
<mx:Script><![CDATA[
public function onApplicationComplete():void{
this.stage.displayState = StageDisplayState.FULL_SCREEN;
}
]]></mx:Script>
</mx:WindowedApplication>
I see no reason why this code wouldn't work in a Flex 4 / Spark app.
Switching to full screen through stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE can not be done on a creation complete handler. It must be done through user interaction. I actually just did this yesterday. Add a button to your app and set the onClick to a function that sets full screen and hides the button. That's how I did it anyways.

Creating First Application of Flex "How to Change Button label", learning resources for Flex from Flash background

I'm just getting started switching from flash to flex for the better components. I am trying the simple experiment of adding a button and then changing the label. This code does not work. It does not recognize myButton. In flash I could access a button instance after adding it using the instance name. Can't you do this in flex?
Thanks
<s:Button x="50" y="42" label="Button" id="myButton"/>
<fx:Script>
<![CDATA[
myButton.label="winning";
]]>
</fx:Script>
Flex have an Event based structure you can not just put command/expression in script block
it should be wrapped in function
like
private function changelabel():Void
{
myButton.label="winning";
}
and you need to call this function on an event like Click event of Button as
<s:Button x="50" y="42" label="Button" id="myButton" click="{changelabel()}"/>
You should read Migrating a Flash application to Flex
and to take a look in Flex you should vist Flex Developer Center
Hopes that helps

Flex - Checking for change in fields under a tab

I'm developing a flex application with 4 tabs. When the user switches a tab I want to reset the previous tab to its initial state. Also I need to alert the user, if he hasn't saved the changes he made if any, will be lost.
I'm planning to set a variable in the Model, and set/reset it if any change happens in a field under a tab. But how do I monitor this? Is there any listener available for this?
Also how do I check and reset the state of the previous tab? The contents that come under the tab is from components only.
[EDIT]
My questions are:
How do I check if the user has made any edits in the current tab? Some fields are generated dynamically too.
I'm calling a function in the onchange event of TabNavigator and asks the user if he really want to switch the tab.I want the other tab to load its contents only if the user clicks Yes to the Alert box I'm popping up. But now the confirmation box pops up, and the contents are loaded into the other tab and if the user clicks No it goes back to the other tab. How do I prevent the action of loading the contents of the other tab at all till the user presses Yes?
Please provide your valuable inputs.
Answer to question 1 is as follows;
Use a Boolean variable to track if a user has edited data. When the user selects a tab set this variable to false. Listen for the change event on all fields within the tab. Set the change event handler for all fields to be a method which sets the Boolean to true. For the dynamic fields, add the same change event handler that the other fields have. Do this as soon as you create each dynamic field. See the code below;
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var userChangedData:Boolean=false
function onUserChangedData()
{
trace("onUserChangedData")
userChangedData=true
}
function onTabChanged()
{
trace("ontabchanged")
trace(userChangedData)
userChangedData=false
}
]]>
</mx:Script>
<mx:Panel title="TabNavigator Container Example"
height="90%"
width="90%"
paddingTop="10"
paddingLeft="10"
paddingRight="10"
paddingBottom="10">
<mx:TabNavigator id="tn"
width="100%"
height="100%"
change="onTabChanged()">
<!-- Define each panel using a VBox container. -->
<mx:VBox label="Panel 1">
<mx:Label text="TabNavigator container panel 1"/>
<mx:TextInput text="default"
change="onUserChangedData()"/>
<mx:CheckBox label="check something"
change="onUserChangedData()"/>
</mx:VBox>
<mx:VBox label="Panel 2">
<mx:Label text="TabNavigator container panel 2"/>
</mx:VBox>
<mx:VBox label="Panel 3">
<mx:Label text="TabNavigator container panel 3"/>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
For 1) you could dispatch an Event every time a user edits a field. The event can be handled by a command which will update some properties in your model with the right info about what got updated. Then whoever cares in your view can bind to those properties.
For 2) in the onChange() handler call event.preventDefault(). Then you can programatically select the next tab only if the user clicks Yes.
I don't have the reputation to add comments yet, but to answer your question:
"Is it possible to add a global onchange/onkeypress method that hooks to the complete application and sets the boolean? Otherwise I'll have to edit at multiple places to add the onchange event. – Basani"
Yes, have each place that needs to signal that "something changed" dispatch an Event. Then have a Command watching for dispatches of that event. That Command can do all the processing you need, including setting the userDataChanged boolean in the model.
It sounds like you're using Cairngorm based on how you tagged the question, so this should be easily supported.

Resources