I'm working on a Flex app and am having problems with a DropDownList - clicking on any item in the list just closes the list instead of selecting the item. I don't just mean that my change event isn't getting called - the currently selected item on the dropdown visibly doesn't change.
The DropDownList uses the default skinning. Here's the code:
<s:VGroup width="100%" horizontalAlign="center" verticalAlign="middle">
<s:Label text="Make a selection:" />
<s:DropDownList id="dropdownList" dataProvider="{optionsArrayList}" width="100%" selectedIndex="0" change="_onListSelectionChange(event);" />
</s:VGroup>
Why would clicking a list item close the list without changing the selection?
Related
I've got a repeater using an array of objects as the dataprovider. For each object, I want to create a label inside a container. Each container should be the same size even if the label is too long to display.
<mx:HBox width="100%">
<mx:Repeater id="repeater" dataProvider="{objList}">
<mx:Box width="11%" verticalAlign="middle" horizontalAlign="center">
<mx:Label text="{repeater.currentItem.Text}" width="100%" textAlign="center" truncateToFit="true"/>
</mx:Box>
</mx:Repeater>
</mx:HBox>
If I know the list has 9 items, I can set the width to 11% and be happy. But I want to be able to handle a list of 6-15 items.
I've considered setting the width of the box to the result of a function, but the width will not accept a string result. Returning a number will just set it to that exact width rather than a percentage.
<mx:Box width="{GetPercent()}" verticalAlign="middle" horizontalAlign="center">
I've also considered looping over the repeater items to set the percentWidth, but it would be preferable to have the width defined before rendering.
With a Spark label you can simply set each label to 100% width and force it to automatically truncate, like this: <s:Label showTruncationTip="true" maxDisplayedLines="1" width="100%"/>. Not sure if that works the same with the MX label component. With the Spark components it's important to also set the maxDisplayedLines to get truncation working properly.
Since I don't have spark, I eventually got this to work by replacing the Box with a Canvas (that had clipContent set to true). The weird part was that also I had to remove width="100%" from the label (and of course set horizontalCenter to 0).
<mx:Repeater id="repeater" dataProvider="{objList}">
<mx:Canvas verticalScrollPolicy="off" horizontalScrollPolicy="off" clipContent="true">
<mx:Label text="{repeater.currentItem.Text}" horizontalCenter="0" textAlign="center"/>
</mx:Canvas>
</mx:Repeater>
I observed when we use VGroup in the HDividedBox dragging is not completely moving to the left side.The components in the VGroup are still appearing when we drag the hdivider completely.But when we use VBox in the HDividedBox dragging is working perfectly.
Here is sample code
<mx:HDividedBox id="hdivbox" width="100%" height="100%" liveDragging="true">
<s:VGroup width="50%" height="100%" >
<s:ComboBox/>
<s:ComboBox/>
</s:VGroup>
<s:VGroup width="50%" height="100%" >
<s:Panel width="100%" height="100%"/>
</s:VGroup>
</mx:HDividedBox>
Now when we drag divider completely to the left side first combobox is visible but when i replace the same code with VBox dragging is working fine. Can any one help me on how to fix this without using VBox
It took me some time to understand why this happens, but it was really interesting, so thank you for a question. If you just need to fix it use clipAndEnableScrolling="true"in first VGroup.
The problem is that in VBoxproperty clipContent defaults to true, but in VGroupalmost the same property clipAndEnableScrolling dafaults to false. This cause this different behavior.
I have a weird thing going on with my skins. I'm hoping to fix it by doing a workaround that involves triggering the click of a sparks buttonbar button, but I'm not exactly sure how to do that.
Here's my button bar code
<s:ButtonBar id="tabs" dataProvider="{vs}"
skinClass="skins.hatchedbuttonbarskins.TabBarSkin"
depth="100" width="80%" visible="true"
bottom="0" horizontalCenter="0" height="25" />
<mx:ViewStack id="vs" width="95%" height="625"
borderVisible="true" horizontalCenter="0">
<s:NavigatorContent width="80%" height="100%"
label="My Label"
skinClass="skins.lg.TabNavigatorContent">
<lists:ListCenter myLists="{this}" myButtons="{tabs}"/>
</s:NavigatorContent>
...
There are three more navigatorcontent objects after this one.
In ListCenter.mxml, I want to trigger a click of the tabs button bar buttons. Here's the action script call I'm making.
myButtons[1].dispatchEvent(new MouseEvent(MouseEvent.CLICK));
It's giving me the following error:
Error #1069: Property 1 not found on spark.components.ButtonBar and there is no default value.
How do I access the button objects?
I'm not sure what you are trying to achieve, but you can try to change the ButtonBar.selectedIndex like this:
myButtons.selectedIndex = 1;
If you really want to access buttons, then use:
var btnBarBtn:ButtonBarButton = myButtons.dataGroup.getElementAt(0) as ButtonBarButton;
Or you can describe your skin problem, maybe there is another way to solve it.
I have a component with 2 states and I have added transitions for switching between the states, where 2 Move affects are applied to 2 different objects. This all works fine, however, after the transition from the first state to the second has completed the second state doesn not render correctly. It contains a TextInput control which is not visible, and a Button with a custom skin that is only sometimes visible and vanishes if you click on it. I have tried called invalidateDisplayList() and validateNow() after loading the second state but that has done nothing. I also have a VBox with a cornerRadius property set, strangely this does not seem to apply anymore and the corners are square, where they displayed correctly before I added the transition in. Does anyone have any ideas?
Thank you!
Here is the code for my states and their transitions:
<!-- different states of this component -->
<mx:states>
<s:State name="useForFree"
enterState="renderState()"/>
<s:State name="enterLicence"
enterState="renderState()"/>
</mx:states>
<!-- transitions between different states -->
<mx:transitions>
<!-- transition from useForFree to enterLicence state -->
<s:Transition id="toEnterLicence"
fromState="useForFree"
toState="enterLicence">
<s:Parallel id="p1"
targets="{[freeBtn, _enterLicenceMask]}">
<s:Move yFrom="250"
yTo="0"
duration="500"
targets="{[freeBtn]}"/>
<s:Move yFrom="289"
yTo="39"
duration="500"
targets="{[_enterLicenceMask]}"/>
</s:Parallel>
</s:Transition>
<!-- transition from enterLicence to useForFree state -->
<s:Transition id="toUseForFree"
fromState="enterLicence"
toState="useForFree">
<s:Parallel id="p2"
targets="{[enterLicenceBtn, _useForFreeMask]}">
<s:Move yFrom="0"
yTo="240"
duration="500"
targets="{[enterLicenceBtn]}"/>
<s:Move yFrom="-250"
yTo="0"
duration="500"
targets="{[_useForFreeMask]}"/>
</s:Parallel>
</s:Transition>
</mx:transitions>
and here is the code for my layout:
<mx:Canvas id="freeStateCanvas"
width="100%">
<mx:VBox width="100%"
horizontalAlign="center"
top="0"
mask="{_useForFreeMask}">
<mx:VBox id="freeBox"
includeIn="useForFree">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:Image source="image path"/>
<s:Spacer height="20"/>
<mx:Button id="connectBtn"/>
<s:Spacer height="10"/>
<mx:HBox >
<s:Label text="some text"/>/>
</mx:HBox>
</mx:VBox>
<s:Label text="some text"
includeIn="useForFree"/>
</mx:VBox>
<mx:Button id="enterLicenceBtn"
includeIn="useForFree"/>
</mx:Canvas>
<!-- enter licence state -->
<mx:Canvas id="enterLicenceStateCanvas"
width="100%">
<mx:VBox id="enterLicenceBox"
mask="{_enterLicenceMask}"
includeIn="enterLicence">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:TextInput id="licenceInput"
width="200"
height="30"/>
<s:Spacer height="20"/>
<mx:Button id="registerBtn"/>
<s:Spacer height="10"/>
<mx:HBox>
<s:Label text="some text"/>
<s:Label text="some more text"/>
</mx:HBox>
</mx:VBox>
<mx:Button id="freeBtn"
includeIn="enterLicence"/>
</mx:Canvas>
where the variables being set as masks are UIComponent instances where I have used their graphics property to draw a rectangle.
Okay, so I found what the problem was, but thanks for trying to help shaunhusain.
In my code you can see I have 2 VBox containers called "freeBox" and "enterLicenceBox" and these actually had a white background and rounded corners, and a DropShadowFilter applied to them (I removed these properties when putting up the code as I felt they were irrelevant, that was a mistake).
This DropShadowFilter was the cause of all my problems and on removing it, the transitions worked fine and all content was rendered correctly. I assume this is just a strange Flex bug, and I didn't find a workaround, I just used images as the box backgrounds for a quick fix.
I have a ViewStack, with a bunch of NavigatorContainers in. Each NavigatorContainer contains a different category of settings for the application.
I would like to be able to display a popup prompting the user if they try to leave the current NavigatorContainer without saving the changes they have made to the container's settings.
What would be ideal is something like the 'changing' event in the List component, whereby you are able to cancel or defer the event. Calling preventDefault() on the change event in ViewStack doesn't prevent the index change from happening.
Is there a way of doing this with a minimum of hoop-jumping?
Thanks
It depends what is changing your viewstack. For example if you have ButtonBar as view changer, then you can easily write like this:
protected function btnBar_changingHandler(event:IndexChangeEvent):void
{
event.preventDefault();
//enter code here
}
and
<s:VGroup width="100%" height="100%" horizontalAlign="center">
<s:ButtonBar id="btnBar" dataProvider="{viewStack}" requireSelection="true" changing="btnBar_changingHandler(event)">
<s:layout>
<s:ButtonBarHorizontalLayout gap="2" />
</s:layout>
</s:ButtonBar>
<mx:ViewStack id="viewStack" width="100%" height="100%">
<s:NavigatorContent width="100%" height="100%" label="First View">
<comp:FirstView/>
</s:NavigatorContent>
<s:NavigatorContent width="100%" height="100%" label="Second View">
<comp:SecondView/>
</s:NavigatorContent>
</mx:ViewStack>
</s:VGroup>
If nothing dreadful happens on index change, why not keep a current index and then in your change event just pop them back and give your alert?