I have an application which displays employee information. If the user opening the detailed employee information page is not authorized to make changes I set the TextInput to disabled.
Some users are reporting rendering issues with this. The TextInput's text value does not appear inside the box but is misaligned and is outside of the component. You can see the screenshow below of the disabled ID column where the numbers which are supposed to be in the TextInput box are far off to the right.
Does anyone know what is causing this?
Screenshot of issue
EDIT:
I am using Flex SDK 4.1.0.16076. Enabled property and text are controlled through a Swiz presentation model that gets injected into the MXML. I don't really have any issues with the setup except for this visual gitch.
I am not able to reproduce this on IE9 with Windows 7 using the latest Flash player but I can get the issue every time using IE6 with Windows XP. The text will correctly appear in the box if I reenable the TextInput but when I disable it again (via a checkbox through the interface controlling the enable property) it will misalign.
I also see the issue for the Spark List component, but it does not happen for mx:DateField or s:ComboBox which I also use.
Here is the code:
<mx:GridRow height="24">
<mx:GridItem verticalAlign="middle">
<s:Label text="ID:" fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem verticalAlign="middle">
<s:TextInput id="IDTI" width="150" enabled="{model.IDTIEnabled}" text="{model.Id}" change="{model.Id = IDTI.text}" errorString="{model.IdError}"/>
</mx:GridItem>
</mx:GridRow>
Related
Flex 3.5 has this bug where in IE (and some others) where if you push the backspace key in some text boxes, the browser acts like you just pushed its back button. According to the bug report this is "resolved" because it works in 4.0. But I need a workaround for 3.5. Is there one?
In my case, it seems that this has nothing to do w/the <mx:TextInput /> or whatever other people were saying it is. This was all because I was using the <mx:TabNavigator />. In any case, getting rid of that tag and replacing it w/a combination of <mx:TabBar /> and <mx:ViewStack /> eliminated the problem for me under IE.
Unfortunately, this was a very large undertaking for me, because even though I had only half a dozen <mx:TabNavigator />s to fix, the order in which events are thrown is different, so component construction resulted in a lot of components not being created when first accessing tabs and stuff. I found I had to use <mx:TabBar />'s itemClick event for some things, and then <mx:ViewStack />'s change for others.
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
I'm having a problem where I'm not able to set up a custom reading order for text in my Flex application. I'm setting the tabIndex property on each text element, which I understand is the proper way to set the reading order for a screen reader.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute">
<mx:Label x="10" y="10" text="1" tabIndex="2" />
<mx:Label x="10" y="36" text="2" tabIndex="1" />
<mx:Label x="10" y="62" text="3" tabIndex="3" />
</mx:Application>
For this small test application, the screen reader (JAWS 12) reads "1 2 3" instead of "2 1 3".
Some testing seems to indicate that this is only a problem for my particular configuration. I am compiling the application with Flex SDK 4.1, but using the MX component set only, and the Halo theme. We've got a fairly complex app which started out before Flex 4 was around, so while we have made the jump to compile with the latest SDK, we have not yet upgraded anything to use the Spark component set.
When I make a similar test app using the 4.1 SDK and the Spark components+theme, the reading order is set correctly. Same result if I make a test app and compile using the 3.5 SDK - everything works.
I know I could switch to using Spark components, but I'm trying to avoid that if I can as it would mean timelines would have to change on the current project I'm working on.
Has anyone run into any similar issues, or have any suggestions that might get this to work?
You'll want to use Text instead of Label. Documentation:
A Label control is read by a screen
reader when it is associated with
other controls, or when the Forms mode
is inactive. The Label control is not
focusable in Forms mode, or by the
keyboard.
...
A Text control is not focusable and is
read by screen readers only when Forms
mode is inactive.
I also found this which might be a better solution. The example is in Flex 4, but you can do the same with Label in Flex 3, just need to implement the IFocusManagerComponent interface.
Im working with JAWS 11 in Flex 3 at the moment, so havnt had that problem yet. But, i've read about one option of putting copies of the components offstage, its too complicated for our needs, and letting the screen reader just read these components in order:
http://www.adobe.com/accessibility/products/flash/reading.html#off_stage
Also, a trick I saw was to set the TabIndex in increments of 10. JAWs only cares about their order, and if you need to add extra components, you wont need to renumber everything. i.e. 10, 20, 30 then if you need you can add 11, rather than renumbering everything.
Brian
I want to display the grid control in Flex ( version 3 )
1. with a marker/(or)icon (which acts like a button) in each colum header of the grid.
2. on click of the button i want o popup a textaread to capture some comments.
3. on close of the popup i wan to then change the marker\icon in a way highliting it which would indicate that some comments(footnotes) are present for this column.
I am very new to flex looking at the data grid control at this point. I understand that the standard features can be easily plugged in by msxml. Do i need to write some complex action script for above feature listed?
If you have experience with any such or related encounter with flex grid, please provide some inputs it will be of great help.thanks.
Here is one of the way
<mx:DataGridColumn dataField="desc">
<mx:headerRenderer>
<mx:Component>
<mx:Image toolTip="This is a column with an image " source="#Embed(source='IconInHeader.png')" verticalAlign="middle" horizontalAlign="center"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
</mx:columns>
but there are othere ways also from http://softologia.com/node/25
Just add sortItemRenderer="{null}" in your AdvanceDataGrid tag and will get rid of sorting icon(like a verticle line)in your AdvanceDataGrid header.
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.