Skinning a button in Flex through document states

Question

I came across this piece of code and it intrigued me. I haven't seen skinning like this before. I'd like to know if there are any downsides and alternatives to it. For example, is it cpu intensive like addChild calls are?

<s:Button id="loginoutBtn" right="10" top="10" label="Log out" label.loggedout="Log in" skinClass.loggedin="skins.FBLogoutButtonSkin" skinClass.loggedout="skins.FBLoginButtonSkin" click.loggedin="logout()" click.loggedout="login()"/>

Background: The button above is part of a Login example. I've worked with skinning a lot but the process has almost always resulted in a new component to go with the new skin. Also, would a ToggleButton but a good use case for the above?

A better question would be if you had to have a login and logout button in the x y location how would you do it?

I think in this case I'd have two buttons set to their relevant skins and a includeIn for each, so,

<s:Button id="loginBtn" includeIn="loggedIn" right="10" top="10" skinClass="skins.FBLoginButtonSkin" click="login()"/>

<s:Button id="logoutBtn" includeIn="loggedOut" right="10" top="10" skinClass="skins.FBLogoutButtonSkin" click="logout()" />

Answer 1

In this particular case I would go for the ToggleButton with a custom skin.

Why?

• Only one custom skin required instead of two
• Cleaner code in the 'host' component: no two Buttons required or a bunch of state-related attributes; just 'selected' needs to be bound to the state.
• Since you've asked: probably the less CPU-intensive option (because A. there is only one Button and B. there is only one skin). But to be honest I think it really doesn't matter anyway: the performance of a single Button really isn't relevant.

.

<s:ToggleButton id="loginBtn" selected.loggedin="true" selected.loggedout="false"
                skinClass="skins.FBLoginToggleButtonSkin" 
                click="logInOrOut(loginBtn.selected)" />

note: the two labels would be defined inside the custom ToggleButtonSkin:

<s:Label text="log in" text.selectedStates="log out" />

Answer 2

You can either do two buttons or the one button and change the properties. To see the impact difference in performance, you might want to keep the generated AS3 code. See this link for details.

http://saravananrk.wordpress.com/2008/05/26/keep-generated-actionscript-in-flex/

Both approaches are valid but I would prefer two different button as they are likely to be changed in the future and become more and more different. There is not much point having the one button with all the properties being based on the state. Might as well have two buttons, it keeps the code clean.