I have a flex application, which consists of several tabs. One tab contains a columnchart and a datagrid, which contains collection of results (after selecting another datagrid result, another line in the chart shows up). This stops, however, after I go to another tab and come back. At this point, after datagrid line is selected, chart's dataProvider changes, which causes labels to change, but chart remains the same.
Tab navigation is implemented through states, like this:
<s:states>
<s:State name="tabWithChart"/>
<s:State name="anotherTab"/>
<s:State name="yetAnotherTab"/>
</s:states>
...................
<s:Group>
<chartTab:ChartTab includeIn = "tabWithChart"/>
<tab1:Tab1 includeIn = "anotherTab"/>
<tab2:Tab2 includeIn = "yetAnotherTab"/>
</s:Group>
Clicking navigation button causes state to change. What may be causing the problem?
Related
I have a flex datagrid (an advancedDatagrid precisely) due different columns.
The fourth and fifth columns have an editor which display a maskedtextinput for enabling the field editing.
The adjacent column (6th) is clickable (rendered though a linkbutton).
the issue is that if the fifth column shows the textinput after user interaction (after clicking/selecting text/typing) moving the mouse over the linkbutton doesn0't shows the hand cursor, and clicking is not working.
Enlarging the column size makes this issue disappear and the hand cursor is correctly displayed, so I guess it's something related to default width of the textinput used in the fifth column.
Those 2 imageds shows the issue before and after enlarging the column:
This is the editor code for the textinput column, I tried to reduce the width manually costraining it to the real size of the column.
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
xmlns:components="it.sabacom.generale.view.components.*"
focusIn="mxadvanceddatagriditemrenderer1_focusInHandler(event)"
focusEnabled="true">
<mx:VBox width="50" horizontalAlign="center">
<controls:MaskedTextInput id="smOraFine" inputMask="##:##" change="error10=true;"
width="50" text="{data.hhFine} "/>
</mx:VBox>
I even tried to set mouseChildren="false" useHandCursor="true" buttonMode="true" on the clickable column, with no result.
I'm trying to create my own modal window (the built in popup manager won't work for this application) and get objects behind the window to be blurred. The code below is obviously wrong since it doesn't work but can someone point me in the right direction? Do I have to manually blur each object behind the window?
<s:Button label="Testing" left="512" top="300">
</s:Button>
<s:Rect width="1024" height="768" alpha=".5">
<s:fill>
<s:SolidColor color="#000000">
</s:SolidColor>
</s:fill>
<s:filters>
<s:BlurFilter>
</s:BlurFilter>
</s:filters>
</s:Rect>
Your code is obviously just going to blur that black rectangle and nothing else. The issue here is that you want to blur the entire application, except the modal window.
I can think of two solutions:
solution 1
Put your entire application in a separate class and apply the filter to that:
<s:Application>
<s:States>
<s:State name="normal" />
<s:State name="modal" />
</s:States>
<view:Main>
<view:filters.modal>
<s:BlurFilter>
</view:filters.modal>
</view:Main>
<s:Group includeIn="modal">
<view:ModalWindow />
</s:Group>
</s:Application>
(this is not a working code sample: its purpose is just to convey the idea)
Solution 2
Take a screenshot of your app (create a BitMap) before the window pops up. Place that image over your app and apply the blur filter to that image. Then place the modal window. You couldn't click on anything because of the image overlaying everything, but that's the behavior you want from a modal window.
Newbie here,
I have a skinned button at x=47 y=126 which is later "covered" by a .png that loads dynamically. Once the .png loads, the button disappears. How can I tell Flash Builder 4 to place the .png behind the button so that it is always clickable. FYI: if I move the button away from the graphic, it works just fine, but, for design purposes, I really would like it to stay where it is.
Thanks,
Jason M.
You could also try giving the button a depth value of 1 or higher.
"Spark containers order their items based on their depth property, with the lowest depth in the back, and the higher in the front.Items with the same depth value appear in the order they are added to the container."
<s:Button x="47" y="126" depth="1" skin="customSkin"/>
Conversely you could add a smaller depth to the .png, or if you are drawing them in the same container change the order they are in there. (From the quote above on depth)
If you need to have an image as a background for your button you should place it behind button the following way:
<s:Group>
<s:BitmapImage />
<s:Button />
</s:Group>
I suppose your case is the following:
<s:Group>
<s:Button />
<s:BitmapImage />
</s:Group>
I have a title window based component in Flex 4 that has two states: A & B.
The title window is wider in state B.
I want the title window to animate when I switch states by using the Resize effect to widen the component.
What's the correct way to do this? Should define state specific width for the component or should I just run a transition effect that does this? The first option seems cleaner to me, but I can't figure out how to tell flex to use an effect and figure out by itself how much to resize the component..
Assaf, You can use tween, Parallel, Move and Resize properties for the same.
I implemented something similar to your request: I needed to add a transition effect, (Resize effect), between two states included in a TitleWindow component. This is how I did it:
My two states:
<s:states>
<s:State name="State1"/>
<s:State name="myInfoState"/>
</s:states>
My transition effect:
<s:transitions>
<s:Transition id="myTransition" fromState="*" toState="myInfoState">
<s:Parallel target="{this}">
<s:Resize duration="400"/>
</s:Parallel>
</s:Transition>
</s:transitions>
Note the {this} property. This is because my TitleWindow doesn't have an id.
Finally, you just need to call your currentState declaration as always:
<s:Button click="currentState = 'myInfoState'"/>
I guess that the keyword is {this} instead of the element's id.
Greetings from Pachuca, México!
I have a TabNavigator that has a handful of children. The flow of the application allows the possibility of a user leaving the screen with this TabNavigator, then returning. When this happens, a method called on show of the parent canvas sets selectedChild to the first tab. When actually tested, the TabNavigator returns showing the text on the first tab, but the tab that is highlighted is whatever tab the user was on just before leaving.
Here is some pseudo-code that looks something like what I have:
<mx:Canvas show="init()">
<mx:Script>
<![CDATA[
private function init():void {
menutabs.selectedChild = tab1;
}
]]>
</mx:Script>
<mx:TabNavigator id="menutabs">
<mx:VBox id="tab1" label="Tab 1"><mx:Label text="First Tab Text" /></mx:VBox>
<mx:VBox id="tab2" label="Tab 2"><mx:Label text="Second Tab Text" /></mx:VBox>
<mx:VBox id="tab3" label="Tab 3"><mx:Label text="Third Tab Text" /></mx:VBox>
</mx:TabNavigator>
</mx:Canvas>
So what I am experiencing, for example, is going to another canvas with the application, having been on Tab 2, then returning to this canvas to see the text "First Tab Text" but the highlighted tab along the top is "Tab 2." I have tried handfuls of variations within the init() method of invalidateDisplayList, validateNow, and so on, with no change in the outcome.
Any ideas welcome.
This is the same issue seen in this question
I have also been suffering from the same problem and it appears to be a bug in the Flex framework's TabNavigator control. I have yet to find the solution though.
I have managed to find a temporary workaround:
TabNavigator's parent, referred to as The Parent, should dispatch an additional hide event on the TabNavigator when The Parent's visibility is set to false and dispatches the hide event on The Parent. This will trigger the redrawing of the control which eliminates overlapping content areas.
The Parent should reset TabNavigator selectedIndex to 0 in the hide handler for The Parent.
If you are having issues with TabNavigator tab styling when visibility changes, you can use
tabNavigator.notifyStyleChangeInChildren('tabStyleName',false) in the show handler for the tabNavigator to redraw the tab styles correctly.
I hope these are sufficient to cover your cases.
Did you observe that 'selectedChild' is an actual property of ViewStack, and not TabNavigator?
Since TabNavigator can be considered as ViewStack + TabBar, setting selectedChild has no effect on TabBar.
I suggest to use 'selectedIndex' than to set selectedChild. You can obtain the selectedIndex from the Container itself, using getChildIndex()
I left out a bit of information. My init() method does more than just selectedChild, and I think this other stuff, that didn't necessarily need to run every time, was what was screwing up the re-drawing of the tabs. So I created a new goHomeTab() method to call on show, and call my init() method only on initialize. All seems to be fine now. Thanks.