Take the following code from spark.skins.spark.ButtonSkin.mxml:
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="21" minHeight="21"
alpha.disabled="0.5">
What does alpha.disabled mean? Because alpha is a Number-type getter in class mx.core.UIComponent, and Numbers don't have a property called disabled. Even if they did, I've never seen a property of a getter being set to something in an MXML element tag before, at least that I can remember.
I've tried to look in a couple of other spots to find what's going on there, but what does setting alpha.disabled like this mean? What construct of the language is being used here? Thanks.
This is a reference to the "new" state syntax introduced in Flex 4.0. It means that when the state of the component is set to disabled the alpha property will be 0.5 . Otherwise the alpha state will be the default value--which I I assume 1.
When creating my own components; and using this approach, I like to specify values for every state. Sometimes I use the 'catch' all. Like this:
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="21" minHeight="21"
alpha="0.7"
alpha.normal="1"
alpha.disabled="0.5"
>
The above code means that in the disabled state the alpha property will be 0.5. In the normal state the alpha will be 1. In all other states the alpha will be 0.7.
The 'state' name after the property can also refer to a state group instead of an explicit state.
Related
According to this document from Adobe Create and apply view states is <s:State/> a state object.
How to create the view states in code-behind ActionScript class?
I have found a simple solution, and I don't have to declare the states using skinning architecture. I don't even to declare the states in my ApplicationClass which extends WindowedApplication.
The solution is: declare the states only in the Main.MXML and by all means with the right namespace, in my case it should be "custom".
Here is the Main.MXML:
<?xml version="1.0" encoding="utf-8"?>
<custom:ApplicationClass xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:custom="components.*">
<custom:states>
<s:State name="loginState"/>
<s:State name="infoState"/>
</custom:states>
<s:Panel id="loginPanel" title="Login" includeIn="loginState" />
</custom:ApplicationClass>
I only want to change between different Panels, so this method works well for me. There are certainly other cases, in which the states need to be declared in skinning.
I have got this solution form this link: Error: Could not resolve to a component implementation.
I am confused on how to get this.. so i have a user list when someone joins it adds them to a List (their username) i have a way to find out if they are admin or not i just need to know how i can change the color of each user in that list... this is an example....
If list supported html this would work fine
onlineUsers.addItem({label:"<font color='$ffffff'>users[i].userName+"_GUEST</font>",id:users[i].userID,guest:"True"});
userList.dataProvider = onlineUsers
But list do not support html, anyone know a work around with this?
Generically, your answer is to use an itemRenderer.
All a list class does is display other components (renderers) and send those components data from the dataProvider to display. Really, you mean the default itemRenderer doesn't support HTML. Technically you could make an itemRenderer that would support HTML to give you the color change you need; but I'd take a different.
Add a property to the user object that specifeis whether they are an admin user or not. Then iF the user is an admin user; then; change the color. Conceptually like this:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="false" dataChange="onDataChange()">
<fx:Script>
<![CDATA[
public function onDataChange():void{
labelDisplay.text = data.userName + "_Guest";
if(data.isAdmin){
labelDisplay.setStyle('color',0xff0000);
} else {
labelDisplay.setStyle('color',0x00FF00);
}
}
]]>
</fx:Script>
<s:Label id="labelDisplay"
/>
</s:ItemRenderer>
In flex3, List has isItemSelected() method, but I didn't find them in flex4. My scenario is determining whether the current ItemRenderer is selected or not, and then depends on the selected value, do some logic on specific component in the ItemRenderer(suppose ItemRenderer has an Image component and Label component, I only want to do some logic on the Image)
In Flex 4, item renderer functionality can make better use of states. What this means is that they have the default states, which we can use them to implement state-specific logic:
normal
hovered
selected
up
If you want to do something when the item becomes selected, you could add a listener for the stateChangedComplete event, and implement your logic in that handler (of course, you would have to test if the current statate is 'selected'). The code could look something like this:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
stateChangeComplete="stateChangedHandler()"
autoDrawBackground="false">
<fx:Script>
<![CDATA[
protected function stateChangedHandler():void
{
if(currentState == "selected")
{
// implement your logic here
}
}
]]>
</fx:Script>
<!-- Your original MXML code here -->
</s:ItemRenderer>
This would be the way to go, if you need some non-trivial logic done. If, however, you just need to change some attributes on the image, when the item renderer becomes selected, you could just specify a state-specific property/value pair on the element instead, like so (let's assume the images are faded by default, and when the item is selected, you want to fade them in, for the sake of the explanation):
<s:Image alpha="0.5" alpha.selected="1" />
This way, no listener/handler is required.
Hope this helps. Have a great day.
i can do this:
<s:Button id="Btn" enabled.State1="false" />
But the following code is giving me an error.
private function enableDisable():void{
Btn.enabled.State1="false"; //Error: Access of undefined property State1
}
how to code enabled.State1 in ActionScript?
Thanks
I know this is not what you want to hear, but here it goes anyway: why do you want to do that? The whole purpose of the states is that you wouldn't have to write tons of ActionScript to do the same thing.
Why you can't do it like that
By writing Btn.enabled.State1 in ActionScript you're essentially saying: give me the property called 'State1' of the Boolean instance called 'enabled'. Obviously that won't work because a Boolean doesn't have such a property. You're confusing the MXML dot (.) notation - used for assigning values to properties based on states - with the ActionScript dot notation - used for reading/writing properties.
A solution or as close as it gets
Since it's the very nature of this feature that you would use it in MXML, you can't do exactly what you're asking for in ActionScript. The next best thing would be to listen for StateChangeEvent en set the Button's 'enabled' property according to the new state name.
addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, onStateChange);
private function onStateChange(event:StateChangeEvent):void {
switch (event.newState) {
case "wrong": Btn.enabled = false; break;
case "correct": Btn.enabled = true; break;
}
}
(I'm using the same states as in James' answer)
I think you may be using states in the wrong context. For instance, you have component which contains a user input with a button next to it. The button is only enabled when the correct word is input. You would define two states for the component, perhaps correct and wrong.
<s:states>
<s:State name="wrong" />
<s:State name="correct" />
<s:states>
You would then, similar to what you've done above, set individual properties for the buttons depending on the state:
<s:Button id="Btn" enabled.wrong="false" enabled.correct="true" />
By default, the state of the component would be wrong. After handling user input and checking if the correct word is entered, the state of the component would be changed to correct.
Normally the state-specific properties of components are set at compile time and the state of the component itself changed at runtime.
Here is an overview of states in Flex 4.6
I'm trying to do this using only mxml, no <script> tags, although I don't necessarily need a solution that's only mxml. It was more of an educational exercise to see if I could do it all in mxml.
I have a custom component that has a slider and textinput and their value/text properties are bound together. I'm surfacing a few properties of the slider in my component so that it can sort of be treated like a slider.
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" horizontalGap="0">
<mx:int id="value">{slider.value}</mx:int>
<mx:int id="minimum">0</mx:int>
<mx:int id="maximum">100</mx:int>
<mx:int id="tickInterval">25</mx:int>
<mx:Array id="labels">['0%','50%','100%']</mx:Array>
<mx:HSlider id="slider" liveDragging="true" snapInterval="1"
value="{int(input.text)}"
minimum="{minimum}"
maximum="{maximum}"
tickInterval="{tickInterval}"
labels="{labels}"/>
<mx:Spacer width="25"/>
<mx:TextInput id="input" restrict="0-9" text="{slider.value}" maxChars="3" width="30"/>
<mx:Label text="%"/>
</mx:HBox>
Notice the slider's VALUE property is bound to the input field's TEXT property, and vice versa. A two-way binding. This lets the user slide the thumb or type in the input field to select a value and they stay in sync with each other.
Also, the component's VALUE property is bound to the slider's VALUE property so that the value of this component will always contain the value of the slider (so that the component can be used like a slider).
The slider's properties are also bound to the component's properties (min, max, tick marks)
The problem is that I want to initialize the value of the slider from the value of the component, but the slider's value is already bound to the textinput. Can I also bind it to the component?
My application will have something like this:
<local:mycomponent minimum="20" maximum="80" labels="['20','50','80']" value="40"/>
A few things I tried that didn't work:
(1) I had an initialize handler.
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="slider.value=value">
This worked if my app had
myslider.value = 40;
but didn't work if I had
<local:mycomponent value="40"/>
(2) I tried a creationComplete handler
(3) I tried mx:binding
<mx:Binding source="slider.value" destination="this.value"/>
It seems like I'm missing something simple.
Note the curly brackets:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="{slider.value=value}">
In the brackets, there may be any code. Without them, there can only be event handler (function).