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/
Related
I am looking for some advice in regards to getting a very quick display of our reports. The problem I am working with is I receive an XML data structure that defines our layout. The report can be anywhere from 2 to 3 pages to perhaps 20 to 30. So to make the report display as quickly as possible I would like to just render the visible portion of the report. Here are the issues I need to overcome to accomplish this and I am looking for some advice how how to accomplish this.
To get a better visualization, Think of this like a word document. The reports have sections and I want to be able to get them to display as quickly as possible.
1) Of course I do not know the height of the child components I will be adding. Is there any techniques where I can determine if the components I am adding are not include in the view port and could I trigger off scroll bar movement.
2) I was thinking of adding estimation to the children components and then using that to set the height of the parent container. then when I receive scroll bar move event, I would check if the child components have been added to the parent and if not add them. Is there anyway to get the height of a component without rendering it?
3) Does Flex support anything built in that will accomplish this.
Any other techniques would be welcome. Basically I want to get the report displayed to the user as quickly as possible and delay the rendering of components that are off the screen.
Any suggestions would be welcomed. Thanks in advance.
Added Info.
Hard to provide code since I have not coded it yet. Let me try and expand with some details. I have a Parent Container where I take the some XML and using the XML creating children components based on the information in the XML. Right now when we do this it can take a long time to render a long report. What I want to do is to reduce the rendering time by delaying the rendering of those children objects. I have looked into things like the creation policy and createDeferredContent, but not sure if this is the right way to go. Guess the general problem I need to attack is how to do you stop rendering objects once you are outside the parents viewport. What I want is an item renderer like functionality but there is no similarity between the children. Perhaps a picture might be useful (will add as soon as I get to 10 points)?
Use spark List with useVirtualLayout turned on. This is what it does.
There is always similarity between children, but if you can't find it, you can use an itemRendererFunction.
I think I'm overusing the Flex states model. The way the Spark architecture teaches it, states should mainly be used for changing the visual appearance of a certain component. However, being overly excited about the simplicity of using Flex states, and also willing to reuse existing object instances at runtime, I made my components really "thick", injecting different view models, as well as other stuff, based on a certain state change. This created a bunch of problems with synchronization, so I decided to subclass and specialize instead of relying on states that much.
In general, as a rule of thumb, where should the boundary between states and subclassing be put?
Well, from what I understand, you have a huge view that you now want to use inheritance to split it up? Won't that still make your component heavy and hard to manage?
The better solution here is to use composition, not inheritance. Create new, self-managing and small components that come as a whole into a larger one. There really shouldn't be a 'boundary between states and subclassing' because they do 2 completely different things. One is for view based changes while the other is to add functionality.
I think you're just really mixing up your OOP concepts and should really stop what you're doing and go over the theory a bit before continuing. If you continue on your current path, you'll end up where you're heading; spaghetti code.
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/
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.
While reviewing the tutorials and example Flex projects, they seem to focus mainly on form elements and data grids, rather than delivering content in a more visual way. Which is what I will need for this upcoming project. As a result, I have a gap in my comfort level that I'm hoping that a seasoned Flex developer can help me hurtle.
The project that I have is a collaboration index tool to display customers products and services using an user interface with four separate panels.
the top-left panel will contain a list of categories in a vertical scroll.
The bottom left panel will contain a wheel effect of sub-categories, based on the category chosen.
The top right panel will contain the detail information - The selected Category Title and Description. And below that, the selected sub-category title and description.
The bottom right panel will contain a list of the service and product items that belong to the sub-category. Below each item in the list will be a link-group accordion with url links for more information in each.
There will be an XML file containing the complete data tree driving this collaboration index.
Additionally, depending on the category chosen, color variances will occur in the background of the some of layout sections.
So, It appears that I will need to create a few custom components, maybe adopt a few existing components, and re-skin everything so that it carries a synonymous look and feel to the client's branding.
Although I have a bunch of questions, tackling the first section seems logical, and the first question that comes to mind in this section is: in the top left panel, should the list of categories be standard Flex buttons that are re-skinned? or should they be object instances somehow brought in to Flex.
Then in the second section, I was had seen a component that displayed images in a way that was perfect for this section. But, the items show here would be just visual, rounded corner blocks with subcategory names in them. So, I'm not sure if that component will work or not.
AS3 is very different from AS2. I'm sure you've noticed by now, but it's worth mentioning in case you hadn't.
Flex Components are basically just a package of Flash objects. So you can, sort of, write every Flex component on your own using just Sprites and/or TextFields. This includes skins. A skin is pretty much just a Shape attached to an object with custom drawing.
A button is just a combination of image+textField+skin, with all the events and skin transitions managed for you.
The reason I mention this is that there is no right way to do what you want. If you're using the List control, you should probably write a component that implements IListItemRenderer. Button does, so you can simply override the Button, no problems. You can have buttons with a label + icon. Or just icon. Or just a label. You can also define where the label is positioned relative to the icon (labelPosition="above|below|left|right"). There is a lot of built-in flexibility.
Thanks for the mention of FlexSpaces. Note that it was finally ported to Flex 4 including a first pass conversion to spark controls earlier this year. Still to do: add dependency injection with Spring ActionScript, remove use of Cairngorm 2.x.
I have been developing Flex 4 quite heavily the past 6 months and must say it would make your job very easy.
Here's what I would do:
1) Check out FlexSpaces for the best Flex 3 project architecture. It's a fully featured CMS in Flex with categories, tags, searching, filesystem, collaboration, etc.
2) Download the Flex 4 SDK and install that. There's no need to use Flex 3 anymore, if you're just getting started, DEFINITELY go with Flex 4. If you need custom components, Spark (the new component architecture) has a very simple way of doing them (here's a cool blog post building a Rating Component in Spark that shows you how do it). Flex 4 is backward compatible with Flex 3 components, so you can use projects/components you find on the internet if you want to, no problem.
3) For the top-left category list, if the categories aren't nested, I would use the spark.components.List, (here's one using more complex item renderers). Then just extend the spark.components.supportClasses.ItemRenderer, which acts just like a Skin. If categories are nested, just use the mx.controls.Tree. Check out that FlexSpaces project for that (they show how to use XML/ArrayCollections in the tree, your "object instances brought into flex somehow" question).
4) For the wheel effect, the only thing I don't like about Spark so far is that it's difficult to animate layouts. But people are starting to make 3D layouts, check out Here's 5 3D Layouts for Flex 4 by Ryan Campbell. There's also OpenFlux if you want very easily animated layouts. Flex effects in general are quite clunky, so I end up just using Tweener or TweenMax for animations.
5) As for reskinning, trying to reskin using the Flex 3 architecture would be a monumental task, if you wanted to make it look clean and nice, and it would be insane trying to reuse that code in the next project. For Spark, it's a snap, and it's 100% mxml. Just copy the whole sparkSkins folder from the SDK and start changing things, and you're good to go.
But yeah, that FlexSpaces project is a very solid example for what you're talking about. Totally open source.
Cheers