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.
Related
I have a datagrid where the data in the dataprovider changes every 30 seconds automatically. Everytime it does, if I chose to sort the column by clicking on the header, it will revert back to the default sort (before I clicked on the header). I want to know how I can control the sorting so that if I had clicked on it previously, it will remain sorted as so the next 30 seconds.
<mx:DataGrid id="id" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="#col1" headerText="Type1" itemRenderer="itemRenderer" />
<mx:DataGridColumn dataField="#col2" headerText="Type2" itemRenderer="itemRenderer" />
</mx:columns>
<mx:dataProvider>
{xmllist_extractedfromAnotherSourceEvery30Seconds}
</mx:dataProvider>
</mx:DataGrid>
A guess... The sort order is stored within the dataProvider (ArrayCollection), and it gets lost when you re-assign a new dataProvider.
You could either:
update the dataProvider using ArrayCollection update functions,
instead of re-assigning it
if not possible, get the ISort from the dataProvider before changing it; then apply this ISort to the new dataProvider after
loading (and remember to refresh() the dataProvider)
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 am working with google map api ...
http://code.google.com/p/gmaps-samples-flash/source/browse/trunk/samplecode/GeocodingSimple.mxml
What i want to do is to take up all the steps of direction, and place them in a datagrid.
but the problem that the google map api provide description on in HTML format. and then i put this steps data in my flex datagrid, it shows up all the html tags in it too, including with the data.
Can there be some way i can do this, without the html tags.
My code for the google maps look like this :
private function processTurnByTurn():void {
var stepText:String;
var stepMarker:Marker;
for (var turnCounter:int=dir.getRoute(0).numSteps-1; turnCounter >= 0; turnCounter--)
{
StepArray.addItem({step: dir.getRoute(0).getStep(turnCounter).descriptionHtml});
}
}
This is the function to create the step ArrayCollection for the datagrid
and the datagrid code looks like this:
<mx:DataGrid width="100%" height="100%"
dataProvider="{StepArray}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="step"/>
</mx:columns>
</mx:DataGrid>
Can someone help me out with this issue.
Regards
Zeeshan
You need to create an itemRenderer component: http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_3.html
Check the docs. There's simple ones you can define right in your datagrid definition, and there's others, like my link, that you create as custom component depending on how much control you want over the display.
The point is, you can control whether your label sets the "htmlText" field vs. the "text" field. Or you can write a control that strips out the html and displays the required text. It all depends on how you want to show those direction elements.
Use htmlText property instead of text in the itemRenderer
Yes, Html text, but be careful that a small number of html tags are supported by Flex
Is it possible to control the properties of 'advancedgridcolumns' in 'advanceddatagrid' mxml tag. For e.g. suppose the grid data provider has 3 different fields. Out of these 3 fields, one field is 'to_be_decided'. This field should not be displayed initially. Only the remaining 2 columns should be displayed (visible true) and the third column (one with data field as 'to_be_decided', visible flag will be false here ) should be hidden. It will be visible when some event like a button click or something is fired.
We can do this in action script coding by accessing individual columns of grid and taking appropriate actions. But will it be possible to do so in mxml? Is there some default property in grid that can be used here ?
In mxml I can not access them individually in the grid (under tag) and hence I can not set the visible attributes individually for each of them. To add them one by one in 'columns' tags I would be required to know the data field in array collection and that I dont know. Only data field known is 'to_be_decided', rest two fields will vary time to time. Therefore even if I addd this one gridcolumn in 'columns' tag what about the other two?
Something like this :
<mx:columns>
<mx:AdvancedDataGridColumns dataField='to_be_decided' visible=false>
<!-- How to add other 2 columns here ? -->
</mx:columns>
Any suggestions/ideas in this regard?
If I failed to make myself clear please let me know I will try to reframe my question.
Thanks in advance.
You could try
<mx:columns>
<mx:Repeater id="rp" dataProvider="{yourArrayCollection}">
<mx:AdvancedDataGridColumns dataField="{rp.currentItem.fieldName}" visible="{rp.currentItem.show}">
</mx:Repeater>
</mx:columns>
where your dataProvider (yourArrayCollection) is an ArrayCollection of objects with properties "fieldName" (String) and "show" (Boolean).
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.