Technically, I reckon it could either via parent.currentState, or
parentDocument.currentState or something... but that's horrible OOP
practice. You don't let your children in real life control you; code
should be no different.
You can use the transition tag in any Flex component that extends
UIComponent. All GUI classes of the Flex framework do, thus if your
classes extend them, you can too.
For examples of state usage, which unfortunately is very verbose, go
here:
http://www.jessewarden.com/flex/flash_flex/source/srcview/
And look for com.jxl.downloads.views.DownloadsPanel.mxml
I'm sure there are wayyyyy more simpler examles on the interweb from
poeple on this list.
On Jan 22, 2007, at 1:49 PM, David Terry wrote:
Wow! Remember I said I was a beginner. I'm sure this is great
information JesterXL, but it is WAY over my head for now.
So, a custom component on the 'parent' can not change the 'parent
state'?
You can not transition between custom components?
How would I code this?
~David T.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED]
On Behalf Of JesterXL
Sent: Monday, January 22, 2007 12:06 PM
To: flexcoders@yahoogroups.com
Subject: Re: [flexcoders] Please Help - Components, States, &
Transitions
Components should never "know" about other components, in this case,
a View knowing about another View. They should emit events about
their state changing, or some other action being peformed. In the
case of a LoginForm, a user clicking the submit button.
Additionally, while states are really nice to have a comopnent
represent different visual states, they shouldn't necessarely assume
these states are exposed. They technically are since the
currentState function is public, so shouldn't assume others won't set
it. It's nicer if you provide a public method to change state
internally, but for brevity's sake, let's just assume a parent will
set it.
Here's the scenario:
- user submits signup1.mxml; it emits event
- MXML view that is hosting signup1.mxml responds to event, and
changes state in child ops_v1.mxml
- user clicks cancel in ops_v1.mxml; it emits event
- MXML view that is hosting ops_v1.xml responds to event, and changes
state in signup1.mxml
Rule of thumb: Views handle their own internal workings, and emit
events about what happened. Parent can respond how they so choose.
Parent in this case being the MXML form that hosts the child (Canvas
embedding your signup1.mxml for example).
Transitions are the change in one state to another. State being the
state tag that has a string ID name in an MXML / AS component.
Transition tags have a fromState and toState properties that are the
names of the states you wish to transition between.
In the case of a Login component that has, say "main", "loggingIn",
"error", and "success". You want to disable the form fields when the
user hits submit, and goes to the loggingIn state. You could easily
do this by simply setting all fields enabled property to false. That
looks boring, and is quite abrupt to the user. Why not fade + blur
while placing a progress bar atop that waits for the server to tell
it success or false?
You can do this by making a transition tag that starts with the
fromState being "main" and the toState being "loggingIn". Whenever
your loginform has it's currentState change from "main" to
"loggingIn", the transition will be triggered autoatically. Within
the transition tag is where you can create animations, changes in
form properties, styles, etc. Additionally, if your first attempt at
creating a cool effect fails, you can simply delete the transition
tag, and all code + states remain intact; transitions are only
coupled to state names; that's it. If you don't have transitions,
state changes are instaneous.
Some people disagree with me, but I highly recommend all View's start
with a "main" state that is the default currentState value so you can
easily add more states later; either based off the main state or some
other diffrent state. FlexBuilder the IDE is really helpful in
starting these for you, although, the state tags are usually put at
the top of your MXML and need to be moved lower manually.
On Jan 22, 2007, at 12:46 PM, David Terry wrote:
Hello,
First, let me apologize. I am very, very new to Flex 2 &
ActionScript 3, and the learning process has been very slow going and
painful.
I truly do not understand the relationship between components,
states, and transitions.
I have a main application page (ops_v1.mxml) with 2 custom components
- login.mxml and signup1.mxml. I have figured out how to hide and
show the components depending on states in the ops_v1.mxml page. But
here is where I am completely lost. When someone clicks the register
button within the login custom component how do I change the state on
the ops_v1.mxml page? Conversely… How do I change back to the login
state when someone clicks the cancel button on the register custom
component?
Next question. After figuring out how to change states; how do you
apply a transition between those 2 custom controls? I am guessing I
am really transitioning between the states, but I am lost here also.
This is a really big problem for me. I have an application I need to
make, but I am totally stuck here. The application will have many
different custom controls and this is my first big step in
understanding how integration between the components will work.
Enclosed is the code for each item mentioned above.
Thank you for all your help in advance.
Best regards,
David T.
<<code.zip>>
<code.zip>
