How do "States" work in Flash Builder and Flex? - apache-flex

I'm a little unclear as to how "states" work in Flex and Flash Bilder 4. Are states like "frames" in Flash Pro, or am I getting them wrong?
How would I show difference "screens" to a user? (login, admin panel - settings, main menu)I take it that I need to use states, but I haven't figured out how to do so. Should I be using Actionscript somewhere, something else?

States are a way of grouping layout & property settings, so that when a particular state is active, all of it's associated properties are set to state specific values.
By doing this, you can show the user a different layout of a view by setting up different states and then applying different state properties for components of that view.

it's just a kind of event system :)

You may want to watch a screencast on View States here:
http://www.firststepsinflex.com/

Related

Flex 4 - What is meant by skinning and what is meant by custom components?

I want to know what is skinning and what is custom components? I know this is so chilly question. But I would like know about it. And where we have to use skinning and where we have to use custom components? If it has any similarities , please tell me about it.
I just want the clear explanation about these two things.
Thank you.
Skinning -
For example, dropdownlist open dropdown, which has default hovered color, selected color, etc. which you have to change according to your application, then you can change it by skinning the dropdownlist component...
Custom component -
For example, button component has default events like, click event, mouse evnt, etc. and according to your application you have to remove some of events or modify some then create button with your event...
Please check below links...which will help you more...
Need the example to use custom component in FLEX application
http://coenraets.org/blog/2010/01/creating-a-custom-component-and-skins-in-flex-4/
Skinning is about the look and feel of the application. What colors to use, drops shadows etc.
Custom component is tweaking an existing widget, combining widgets or creating a new one from scratch to achieve functionality that does not exist in the standard Sdk. Good examples of custom components are charts from 3rd party vendors

Flex navigate to another Mxml page?

I am having difficulty navigating to different MXML pages in my Flex application. I checked some other questions on SO about it but they seemed to be to do with tab navigation.
I am trying to navigate from one MXML page to another via Actionscript code. How is this possible?
Cheers
Edit:
I am a real beginner in Flex and I worked out that I actually needed to use States, and have now discovered how to use them. Thanks for your help.
You don't navigate between MXML pages. MXMLs are not pages to begin with. Instead they are components, that are displayed in the application. So if you want to change the current display, then you need to remove the already added components, and add others that should be displayed now.
There are different approaches to do this. The very raw way of manually removing elements is rarely used, instead there are two main methods: ViewStacks and display states. Display states should be used when there are not many different changes in a view, for example when you click a checkbox that adds new options to an existing formular. If you want to change the whole displayed content (this does not have to be the whole application content though, think in components instead), you can use ViewStacks.
ViewStacks are like a stack of paper, where each paper reflects a single view. So if you want to display something else, you move the new view to the top, hiding all others below. Many components, including TabNavigators, are just ViewStacks with an additional menu to select the view that should be displayed. But you can also just use a ViewStack and manually change to what you want to show.
Flex is not sidebased like html.
You have to instantiate or remove classes, components or all this stuff.
i would use the states.
You can register handler to buttons and swap the state.
Then you are able to instatiate or remove components via the tsates.
Which flex version dou you use? The management of the states are changing between flex3 and flex4
Assume, you have one app with two content areas, home and gallery. First you have to create these two areas with project->new->component and named there related.
After that, you instanciate both components in your app.
Define two states, home and gallery and swap these with a button or two.
set the propert excludefrom or include with the name of the states. finally, you have an app with two content areas, but you never swap pages, you instanciate or remove components in runtime.
br
Frank
BR
Frank

Does Flex allow full control over UI components?

I'm wondering what the best tool is for developing a mobile UI is. My requirements are that I retain full control over the look and movement of every UI component. I think Flex might be the best way to do this but I can't tell if I'll have that level of control using their UI components.
Any links would be appreciated. Thanks!
Edit: For example, looking at the documentation I see there's a an 'enabled' field which dims the color of a container and it's children if false. Am I able to change that so, maybe a repeated bitmap pattern appears if false?
Or, if there's a sliding menu can I edit the speed and change in speed as it closes?
You can create any component you like and make it look like anything you want. You don't have to use standard components. You can reskin any components just by specifying a new skin. It's really pretty easy.
You can create custom skins for Flex, for both Spark and Halo components. You also can create custom components, either based on other existing components, or based on the base component. You could even create custom objects which are just based on Sprites or similar (if you like to have control over everything :P).
edit
In response to your updated question. Regarding the enabled/disabled property, yes, it is possible to skin that. Spark components have states, for example a Button has a up, over and down state – and an disabled state. That state is exactly what is active when the enabled property is set to false. So yes, you can skin that.
Regarding the sliding menu animation, I'm not totally sure if that would be easily possible as I believe that this is coded into the component itself and not part of the skin to decide. However even if that is the case, you could instead create your own component that basically features exactly the same functionality but has a changed animation there.
I'm not sure if the Spark skinning wouldn't be able to do this though, because what you definitely can do is creating transitions between states. So if the slide is made with different states, you'll probably be able to change the transition as well.

ViewStack Vs State

Can anyone explain difference between the ViewStack and States?
Thanks,
Ravi
The ViewStack and States actually aren't really related. Can you rephrase to make your question more specific?
The ViewStack is a component that is used to display different views (normally of different data, but not necessarily), one at a time.
States are related views of a single set of data. For example, you may want to have a 'normal' view and an 'advanced' view of, say, a user's profile - where the advanced view displays more options, or a larger picture, etc.
States work with Transitions, which are coordinated animations that elegantly switch between states.
That's a real brief explanation. Hope it's useful.
Although, you can use both for the same purpose, but the way I see it, I think ViewStack is more of a container, think of it as like a book that you can flip to the different pages of.
In a State, you can apply a set changes to various different components, and when you change to that state, those changes will be applied. When you go back to original state, the changes are removed. That way you wouldn't have to recode all the components if you want to show them again, but only slightly differently. You'd have to do that if you use a ViewStack.
There are a lot of changes between Flex 3 and Flex 4 State changes.
http://blog.everythingflex.com/2009/05/12/flex-3-vs-flex-4-state-management/

Edit Multiple States At Once in Flash Builder 4

While in Design mode in Flash Builder 4 (gumbo, beta 2), is it possible to edit multiple states at once? In the "states" window, it would seem like I should be able to shift-select multiple states so changes made will affect all the selected states, and if all are selected it will not add the state selector to the property in the mxml tag. No?
No, there is no way in flex/flash builder to make a change to multiple states at once. What you can try to do though, and im not sure this will do what you are wanting in this particular case, but you can make your states based on one particular state. Then when you change the base state it will apply to the states that are based on it.
You can also simply copy the code that was generated from the changes in one state to a new state.

Resources