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.
Related
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?
We are having answer options to a questions is set as label to the RadioButton. When answer is more than one line's length it is being truncated and followed with ... which in hovering shows the complete answer as tooltip.
We want to wrap the answer in multiple lines instead of truncating. How can we do it?
The code is:
...
a1.label = answers[_index].atext;
a1.id = answers[_index].cans+ "_" + answers[_index].id;
...
<s:VGroup id="Answers" left="145" bottom="193" width="725" height="372"
chromeColor="#F7F9FB" gap="20" horizontalCenter="8" verticalCenter="46" click="enablenext();">
<s:RadioButton id="a1" x="568" y="346" width="500" height="60" click="enablenext();"
fontFamily="Arial" fontSize="16"/>
<s:RadioButton id="a2" x="1068" y="346" width="500" height="60" click="enablenext();"
fontFamily="Arial" fontSize="16"/>
<s:RadioButton id="a3" x="437" y="305" width="500" height="60" click="enablenext();"
fontFamily="Arial" fontSize="16"/>
<s:RadioButton id="a4" width="500" height="60" fontFamily="Arial" fontSize="16"/>
</s:VGroup>
The display sample is:
=================================================================
UPDATE 1:
Used the control shared in the link to implement MultilineRadioButton.
But the problem now is line length is two less how to increase to around 500 pixels?
Current screenshot:
======================================================================
Update 2
I created a custom skin using RadioButton class
Applied the skin in styles section to RadioButton
First I deleted maxDisplayedLines under Label. Not working. Then I set its value to 3. Still not working....
In skin for label added lineBreak first to explicit then toFit.... to no result still getting tooltip for longer sentences.
Update 3
I created a new project with only RadioButton and Button to add text to radioButton. It was working fine.... so it goes worse...
Finally solved the issue.
It seems the skin has to applied in mxml containing application even if the control is going to be used in mxml with Group in it.
Solved this issue with the help of my co-workers.
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 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?
Here is my problem, fairly obvious: [img at bottom]
The problem, as you can see, is that the text (height and width) is nothing like the Height and Width of the compoent (Spark TextArea) that I have set via the Main.mxml file in Flex 4. This is pissing me off so much because nobody can tell me why this is happening, or how to fix it. Text is dynamically added to the TextArea as people send messages in the server, hence the valueCommit line.
I don't understand this, because I know it's not the fault of my fx:Script. I know this, because when I switch over to the Design tab of Adobe Flex Builder 4; the lines are just as messed up as in the screen shot.
I've been tearing my hair out (metaphorically) over this issue, please help me come to an answer.
<!-- State: interface -->
<s:TextArea id="incomingMessages" includeIn="interface"
heightInLines="{NaN}" widthInChars="{NaN}"
y="10" x="9" minWidth="426" minHeight="442"
text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
valueCommit="incomingMessages_valueCommitHandler(event)"/>
<!-- Toolbar -->
<s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
<mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
<s:Label id="curname" height="22" width="100" text="<user>" fontSize="16" includeIn="interface"/>
<s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
<s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = "";"/>
</s:HGroup>
<!-- end Toolbar -->
<s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
<s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
<s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
<s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->
Here is the FX:SCRIPT for incomingMessages_valueCommitHandler(event) if you care:
protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
if (scrollToggle.selected)
incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}
I'm not allowed to post images [less than 10 repute] so here is a link: Image Link
Edited to include the surrounding code as asked for. What you all don't seem to understand is that the text box is taking up the size I set it to, but the TEXT inside the text box is only taking up like 100px wide and high of the total text box area, please check the picture link.
Okay so, we found the problem, graphite.styles.TextAreaSkin ... WHAT WAS ADOBE SMOKING?
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
<s:RichEditableText id="textDisplay"
lineBreak="toFit"
textAlign="left"
selectable="true"
verticalAlign="top"
paddingBottom="4"
paddingTop="4"
paddingLeft="4"
paddingRight="4"
height="125"
width="125"
maxWidth="125"
maxHeight="125"/>
</s:Scroller>
What type of component is the parent to your TextArea? Without knowing any of the surrounding mxml, you may want to set width and height to 100%. If that doesn't work, post some more of your mxml and we'll try to figure it out. Hope that helps.
As you said, this is a problem with the graphite textarea skin. I created a new skinClass for my textarea(based on graphite text area skin). and replaced the scroller and richeditabletext with the Spark text area ones. And added textAlign = "left". And it started working fine. Let me know if this helped. Thanks.