Actionscript 3 :: Flex : Style Callout In Flex PieChart?
Feb 17, 2011
Is it possible to style the string returned from the labelFunction so I can change color and font of the callout (inside)? Or some other way? (It seems like a big limitation to have that only return a string that is unstylable.)
Adobe's docs describe how to apply an outline to the pie chart by using the mx:stroke element within a PieSeries, however this only changes the border of the entire chart.
How do I add a border around each of the wedges in the chart?
I'm working on a simple auto complete function for my Flex mobile app. For that I've got a CalloutButton that triggers a Callout.The Callout holds some lists from which the user can select items. On item select, the callout gets closed (calloutButton.closeDropDown())The very same behavior is done for a TextInput. The user inputs text, the callout opens and according to the entered text, the lists change. Works fine so far. Now, when the user selects an item from any of the lists, the callout closes. Also fine.Now the issue, after the callout is closed, the TextInput automatically regains focus.On a mobile device this is more than disturbing.
I narrowed this behavior down to the mobile TextInput skin spark.skins.mobile.TextInputSkin) since a TextInput without this skin class doesn't show this behavior.Now you might say just use the default skin instead but unfortunately I can't. The default skin has a bug with Android devices that doesn't pass though the enter event. That I could live with since I'n not necessarily dependent on the enter event, however, the spark mobile skin allows be to continue entering text in the TextInput even after the callout has been opened, which is desperately needed as the lists change according to the entered text.I can't provide any code as the problem has been narrowed down to the skinClass, thus should not be in my own code. Believe me, I tried every nice and not so nice method to prevent the TextInput from getting focus again, but nothing worked.
Edit:Below the steps of my application's behaviour. (to be fair, the workflow inside the callout is a little more complex, I'm working with several lists and a SplitViewNavigator here (thus can't use the Flextras autocomplete), but that doesn't affect the TextInput focus issue I'm facing).ter text in TextInputOn key change a Callout with two Lists is opened.The first List receives results according to the entered text from a webserviceUser selects item from listSecond list receives results according to selection from first list from webservice User selects item on second listCallout closes
I have created a style in which i am defining a font family.When i apply this style to label it reflects the font were as there is no change when it is applied to a spark button.I Tried various way to Apply font style but it doesn't work.Other properties work fine except font family. Even i tried creating skin class and set the font family style of label in it. While previewing the skin i can see the changes but when i apply it to buttonApproach 1
If you have two text areas with different styles (fontFamily, weight, color etc) and you copy text from one to the other it also copies the style from the originating text area. Is there any slick way to prevent that?
Here is a sample of code that will illustrate the problem. Type some text in the top box and some text in the bottom, then copy some characters from the top box to the bottom. I'm not using htmltext.[code]...
I'm interested in finding out the best approach to this issue, it's not technically difficult but there must be an elegant solution. Basically i have a form that features mostly text inputs, i would like to change the style of the input boxes based on the current state. I can do this in the mxml on each input...
I'm using flash builder 4.5 to make a website. At the moment I'm trying to work on the layout of my website but I'm facing some problems. First of all my CSS looks like this.
I do a lot of work with GWT but don't have experience of Flex. I was talking to a guy today who was looking at moving some large Flex based applications to GWT due to the Flex application getting too big and using too much memory in the browser. This is a problem I have had before with GWT - browser apps using lots of memory as all the code gets loaded when it starts.
However, in GWT 2.0 there is now a code splitting feature to overcome the problem of the client code getting too big. This allows all the code (javascript) not to be loaded as one big file on start up but instead code split into different files that can be loaded when required.
I was thinking as to if there is anything similar in Flex. I assume the Flex application code all lives in one single SWF file which loads at start-up so this approach is not possible but thought there might be other solutions.
I have a fairly complex Flex application that uses many different components. I want the application to be able to custom styling and/or skinning. I also want to be sure that the styling approach makes the most efficient use of system resources (memory, CPU, network), and that it does not adversely impact performance. We currently are using a hybrid approach to styling the application that uses both CSS and a Flash skin created in CS3. It seems odd to me to have a two-pronged approach to styling an application and ideally would like to settle on one approach or the other. Some outline about advantages and disadvantages of using either exclusively CSS or a Flash skin? Is there a justification for using both within the same app?
Using CSS exclusively seems advantageous because it is approachable by anyone with a basic understanding of other uses of CSS, especially when using the Flex 2 Style Explorer. On the other hand, I know that the CS3 skin we use declares up/over/down/disabled/pressed skins for each component where these states are needed and Flex manages the transitions to the appropriate skins as each state is (de)activated. However, my impression is that creation of a Flex skin in CS3 requires somewhat specialized skills and tools. So what would you recommend for styling a Flex application if performance, customization, and efficient resource utilization are priorities?
I'm using a CSS file to style my flex application. can I use components IDs to change their style from the CSS file? Or I should add the styleName attribute for each element?
Hopefully simple question: I'm trying to set the alternatingItemColors on a datagrid via some values that I set in a CSS file but nothing seems to work. the CSS file looks something like this:
I was wondering if anyone has run across a style or stylesheet replicating the default Flex 4 style (Spark) over to Flex 3. I love the cleaner and less blue look of Flex 4, but I have to develop an application with Flex 3 for compatibility purposes.
So i decided to implement some themes in my AIR app. I have converted my CSS files into SWF files, removed the Style linkage from my main file. Based on the user preferences stored in a file, I decide which theme to use. i.e; load the SWF file using StyleManager class.
I made my application window invisible, added a StyleEvent.COMPLETE event listener for the IEventDispatcher object returned by StyleManager.loadStyleDeclarations method. After the StyleEvent.COMPLETE occurs, I made my main window visible.
The problem i have now is, for a few seconds, i can see white canvases and all my components without any styles before using the style selected. I want to know if my approach is correct or do I need to make any changes to implement this properly?
I got struck with tooltip position as well as style. I used string validator to perform validation. Error tooltip is coming right hand side by default. I want to change it on top of the text field as well as its clolor also. but I just want it to perform with every tooltip not with any specific one.
I have figured out a way to change the style of tabs at run time with following logic:
var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyTabs"); cssStyle.setStyle("borderColor", "red");
But here ".MyTabs" class is applicable to all the tabs between first and last tab. As per getStyleDeclaration javadoc, it only accepts "class selector" and "type selector" not the id selector.
How can I change the individual tab style at run time?
My air app is using the FlexChrome instead of the system chrome. The problem is I also have a .CSS for skinning that sets the skins for the Button class. This is also changing the 3 buttons (minimize, maximize, close) in the flex chrome which is undesired. Is there a way to make it not effect the Flex chrome buttons?Also the css file is in a central location and I use it for many apps so I would like not to have to change the css file but change something in my app only so I do not effect other projects.
Several new UI/Query frameworks allow you to "bind" UI elements to data structures. When data in the structure is updated, the change propagates to the UI element, automatically. Some examples of this include the [Bindable] tag in Adobe Flex, and the "Bindable LINQ" extension for .NET .
Is there any documentation link where I can find list of styles applicable to flex controls? In particular the AdvancedDataGridControl. Like border, border-left,top,bottom,indent, etc like list of all possible style elements.
#1: Link provided by Lior below is the complete list. #2 : found this looks quite cool.
I have a Flex DataGrid, which has some columns, i had put a item renderer, which makes all the elements in that column hyperlinked, i have a requirement, where i need to see the type of user, based on that i have to either enable or disable the hyper link.
Is there any good way , where i can get the style properties at the cell level...?
I'm having trouble changing the font size of my TextInput tooltip. The text input looks like this:
<s:TextInput id="first" toolTip="Hello"/>
then I create a style like this:
<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo";
[Code]....
P.S. I also get a yellow warning: "CSS type selectors are not supported in components: 'mx.controls.ToolTip'" but it still compiles since it's just a warning, but nothing happens.
Is it possible to set their width with Style, something like this: I tried it, but auto-complete isn't working, which leads me to think that there's something wrong with the syntax. Basically my goal is to not have the width property set specifically for all 4.
I am trying to change the datagrid header color by editing headerColor style. I could change the font size, font family...etc except the headerColor. My code
My application's creationComplete="onInit()" has a lot of processing. Therefore I want to mask the entire application with a lightbox-style loading screen while the processing is being handled. The screen should be dark and a loading animation image in the center. After onInit() is completed the loading screen is removed.My thoughts are to add a UIComponent to the stage, and to remove it at the end of onInit().