Flex :: How Does A Component Know Whether One Of Its Styles Got Changed
Jun 26, 2009
I inherited a custom component from TextField. The component needs to know when any of its styles got changed at runtime via setStyle. How would I do that? It's probably obvious but I couldn't find an event or appropriate method to override.
In MXML, there is a Button class which you can instantiate like so: <mx:Button id="something /> But what if you wanted to dynamically build this in AS3 and add it to the Flex app dynamically, without the use of components (just AS3) and then modify Flex's styles, for example, here you access the Button's properties and set them:
var btn:Button = new Button(); btn.height = 50; btn.width = 75; btn.x = 100; btn.y = 40;
But how would you go about changing the Style, for example: btn.downSkin = "something"; btn.color = "0xfffff";
I'm sort of starting to lean towards making a flex component in MXMLand than just making it visible true/false, but I like the fact that i create an object in AS3 and then destroy it when I don't need it anymore, than create it again once needed.
I have simple combobox component in flash cs4, I try to add and event listener like this
mycombo.addEventListener(Event.ADDED_TO_STAGE, added); function added(e:Event):void { trace("HI"); }
never get called even if I have the component in the stage manually or via AS, but if I add a listener to MouseOver it works, why the ADDED_TO_STAGE event don't work, also I have a problem with the textFormat style if I use
mycombo.setStyle("textFormat", tf);//suppose tf is a TextFormat object
doesn't work too, but if I put that line inside the MouseOver event it work's why??
My overall project is to create a gallery app (sort of like the mac album browser app) Anyway, all images are loaded from an xml file:
Code: <imageSet> <image>[code]....
The reassignment of the _x and _y are visually changed, but for some reason it is towards the bottom and not the middle like it should be. (1000x400px document). Something is up with the component...
I have a custom item renderer which I use for my DataGrid. The DataGrid has specified selectionColor, rollOverColor and themeColor. The Problem is that the custom item renderer, does ignore those colors, and doesn't give any Feedback...
I tried to add the lines: setStyle("selectionColor", 0xEDF1F7); setStyle("rollOverColor", 0xE1F5DE); setStyle("themeColor", 0x3569B0); But with no effect...
Can a flex module have styles different from the main application which loads the modules? Meaning... can I have a main set of styles for the application, and separate styles for each module.. with each of them rendering their own styles without disturbing the other at runtime?
My specific case:The main application is developed by me... and the modules are developed by different people who want to contribute to the main application. I want to provide some way for each of the module developers to have their own styles for their modules, without touching the main application or its styles.
I want to be able to style or set properties dynamically.[code]I want to be able to set these properties in the skin so the skin can be styled differently for each component that uses it.
today I wanted to change the border color of TextInput when user has a focus on it. I could not find any style that would allow me to change thatlittle bit of Google searching and I found answer to be themeColor.Why is it that there are some styles that work and which are not even mentioned in the Flex documentation? (and how can one find out about em, except doing some web searching?)
I have the following code to create and apply a few styles for a custom TextArea in ActionScript 3.
public class MyCustomTextArea extends TextArea { override protected function createChildren():void {
[code]....
I have two problems with this code.this.styleSheet is always null when I create an instance of the class. If this.styleSheet is initialized to new StyleSheet() to avoid this issue, then the TextArea instance does not seem to recognize any of the HTML tags that can be used with the htmlText property.
I'm creating a Flex 4 application which contains different modules in it. The main application contains a style sheet and the modules inherit the styles defined in this file.Its working fine when the swf's are generated using Flash Builder. But when I'm generating it using Ant script, the modules does not inherit the styles and everything looks weird.I added isolate-styles="false" as an additional parameter to mxmlc, but still its not working.
When you have a flex project, is it better to use different skins for different components or to use just one big css that has all the styles together?
I made a Form container with few TextInput fields in Flex and I would like to change a style of clicked TextInput element. I managed to do it with MouseEvent.CLICK event listener but it is not what I expected. I would like to change style of TextInput when user try to edit that field. However, I want to change back to 'default' style when user clicks another TextInput field or outside any field. Is there some event listener made specific for such interactions? I have also a question, is it possible to make width of TextInput depending on amount of text? I mean to resize it to width of text inside of it? Text comes from some database and is always different widths...
I have a tooltip for each datagrid row. Which is fine. I also can style it with with mx:Style which is great.However, I desire to have multiple styles ie a header and the rest of the text in the tooltip.
I am trying to figure out why I am getting an error when using the chromeColor (or other spark style related items): <s:Button x="10" y="208" label="CALL" width="185" fontWeight="bold" id="bCall" chromeColor="#F90000"/>
This is the error: The style 'chromeColor' is only supported by type 'spark.components.Button' with the theme(s) 'spark'.
Yet in project - properties, the theme is set to Spark. I also tried setting it to Halo and then back to Spark. Here is my app definition: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="[URL]" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="800" minHeight="600" width="100%" height="100%">
I have seen references that define the mx namespace as "xmlns:mx="library://ns.adobe.com/flex/halo", but then my mx components break (TabNavigator for example) - not sure if that would fix it anyway. I is using flex 4.1 library (I believe the project was originally created when flex builder was at 4.0 if that matters).
No other libraries included. Project - properties is set to MX+Spark.
Also, if I remove that chromeColor, the project compiles, BUT there are warnings such as: The style 'borderAlpha' is only supported by type 'spark.components.TitleWindow' with the theme(s) 'spark'. Flex Problem (and others - borderColor, cornerRadius, dropShadowVisible).
I have a following issue:My task is to style a datatip for two charts in Flex 4.5.Both charts reside in two different <Group> based components which are added to the <Application>
So after a thorough research here is what I tried to do.First applying a css descending selectors:
Then I would like to be able to get access to the instance of the CustomDataTip class.But I can't .So currently the only thing I can do is to create a distinct custom datatip renderer class for each chart.That could be fine if you have only a couple of charts you want to style but what can we do if we have many of them?
I made a custom LabelItemRenderer, inside it I want to give some additional style to a StyleableTextField. How can I do it without losing inherited styles? I tried different things, but always got an error saying antiAliasType must be set.
s|List.customListStyle { fontFamily: Arial;
[Code].....
How should I set my text field style, and then set it in the createChildren method?
I want to load my styles (in swf format) at run time for my flex mobile application. For that requirement, I have compiled my css files into swf format and I loaded for my application using "StyleManager.loadStyleDeclarations("style.swf");". I get my styles for application when I run it on my desktop, but after building my files into apk format, I couldn't get the styles applied for my application in device. When I debug my application from my android device, I got the following error message.
Error: Unable to load style(RSL app:/framework_4.5.1.21328.swz failed to load. Error #2032: Stream Error. URL: app:/framework_4.5.1.21328.swz): style.swf. at Function/<anonymous>()[E:dev4.5.1frameworksprojectsframeworksrcmxstylesStyleManagerImpl.as:1551] at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() [Code] .....
I am trying to load different styles at run time. In my css files there is only description of the Application tag. If I point to the file in my mxml code: Code:<mx:Style source="name_of_the_file.css"/> it is working. The problem is that I don't know how to do this with as3. I have managed to load datawiththis:Code:StyleManager.loadStyleDeclarations( 'name_of_the_file.swf' ); My question is how I can load not swf but .css file like in the example above.
My DateChooser code and its style code is shown below: <mx:DateChooser id="dc" cornerRadius="0" bottom="0" width="100%" allowMultipleSelection="true" allowDisjointSelection="false" styleName="dateChooserGradient" change="fetchDateAgenda(dc.selectedDate)"/>
And the dateChooserGradient: .dateChooserGradient { header-colors: #133c59, #29506c; todayStyleName: myTodayStyleName; headerStyleName: myHeaderStyleName; weekDayStyleName: myWeekDayStyleName; dropShadowEnabled: false; arrowBorderThickness:2; arrowColor: #062338; arrowAlpha: 0.1; } What I actually want for my arrows is a transparent background, with borderthickness to be 2, and the arrows and bordercolor to be #062338. Also if I can make the width and height of the arrow itself a bit bigger then what it is as default.
I have a component "child" which has a cancel button. Now this component is placed in a state called "newChildComp" I also have another component called "parent". In the parent component, i have a button that dispatches an event. Here is the event code:
[Code].....
so, basically,i am checking to see if the cancel button component in the Child component, while i am still in the parent Compoent, was clicked, if it was clicked, call the cancelButtonHandler. The problem is by the time the addNewChild handles the event, that cancel button was still null. My question is how do i solve this without using the itemCreationPolicy on the cancel button?
I'm implementing some kind of combobox control (by extending spark.components.supportClasses.DropDownListBase)
Now, inside this control; I need to know:
If the dataprovider is changed/assigned. (which I can do... the first approach below works); if any item in the dataprovider collection has changed.
I tried 2 methods that did not do the trick...
1ST APPROACH:
2ND APPROACH:
UPDATE: Edited above.. The first approach lets me know if the dataprovider is changed but not if any item is updated in the dataprovider collection. The second approach does not work at all..
I have a project in which i need to pop up an alert to the user before a combobox value is changed. This feature is to allow the user to stay in current state if modifications were not saved. Meaning that the user will be able to cancel the change. I have sub classed ComboBox and tried to hook on ITEM_CLICK of ComboBox.dropdown but this event is triggered after the value is changed. Also, I've tried MOUSE_CLICK ans MOUSE_DOWN but without success.
In my code, I have added a "preChange" event to my CustomComboBox. This event should be triggered before a change is made. Also, I've introduced a method called commitChange that will be called manually to actually commit the change.
I am developing an AIR application and I want to change my project theme to one of the additional included themes that is packaged with Flash Builder 4. So, I went to the Project Theme and changed it and it looks like it is supposed to in the Design View. When I run the application, the components (eg: a button) themselves look like it is supposed to, but the application's background is just white instead of the displayed color in the design view.
I have an editable grid and would like to update values based on the edited cell and I am doing this in the itemEditEndHandler such that when they finish editing a cell I update other cells that are dependent on it. the only problem is in the itemEditEndHandler the new value has not registered yet. If I try and get the value of the cell i find that its still giving me the old value and not the new value that I have entered.
I have a weird problem with verticalScrollPosition in Flex.I have a content Canvas and a wrapper Canvas. The content is large (5000px X 5000px), the wrapper is 800px X 800px.
public var wrapper:Canvas = new Canvas(); public var content:Canvas = new Canvas(); wrapper.addChild(content); application.addChild(wrapper);
I would like to set the wrapper's scrollbar position dynamically anytime. I can do it by calling its properties:
I have an image which its source depends on a bindable property of another object.I'd like to know when this source changes, for example, by capturing the bind event or another related event of the Image control.
I have a List with textInput as itemrenderer. Initially the list is loaded with data from a data provider. However since the items are rendered in textInputs, I have the ability to change the value of a particular item.
But when trying to access the value of the changed item using the function below, I still get the old value in my trace:
private function addItem(event:Event):void { trace(myDataProvider.getItemAt(myList.selectedIndex).label); }
what I need to do for the new value to be available. My itemrenderer is shown below:
Trying to add handling for when the selected item changes in a drop-down. However, the Change/Changing events are fired before the drop down panel closes. This is too soon. I need to do some handling after the drop down is closed with the new selected value.
I am working in air application , i need to know how to add event listener when any object is updated,how can i implement this.Example:i have Class name Vehicle, and child class are Car,Bus,Bikes,Scooter,..etc, child class also have many properties like color,model no,....etc
I have array collection and AddChild() method in Vehicle class by this, i will add, child class to the vehicle class.I need a event listener which can trigger if any of the property is updated or changed in any of the child class property, how can i implements this in Flex3.