Page History

...

With FlexJS there are also several techniques, but FlexJS offers a straightforward design and presentation method: states. The concept of a state in FlexJS is different than that of ReactJS, although at a conceptual level they both imply the current state or setting of the component. Here, for example, is a small ReactJS class that uses the value of its state to display one of two labels:

var Notice = React.createClass({
    getInitialState: function() {
		return {status: false, message: ""};
	},
	render: function() {
		if (this.state.status) {
			return <span class="Alert">{this.state.message}</span>;
		} else {
			return <span class="Normal">All is well</span>;
		}
	}
});

Whenever the Notice's state.status changes, ReactJS runs the Notice.render function which returns a <span> with a message or "All is well". 

In FlexJS, the UI is always in a state. That is, what you see on the screen is being shown through a filter that displays only those UI components which are allowed to be seen in the current state. An example makes this clearer:

<js:states>
	<js:State name="NormalState" />
	<js:State name="LoginStateAlertState" />
</js:states>

The component being developed is given two states: NormalState and LoginState AlertState. The idea is that when in LoginState AlertState, you will see a dialog to ask for login credentialsspecial message. In the NormalState, the dialog does not appearmessage reads, "All is well". This is achieved by setting the state on the definition of the Login containera label:

<js:ContainerLabel idtext.NormalState="loginBackground" includeIn="LoginState" className="LoginBackground">
    <!-- items in the login dialog -->
</js:Container>All is well" text.AlertState="{alertMessage}" />

By adding the state to the property, FlexJS will set the component's property to the appropriate value (for NormalState, a static string, for AlertState, data-binding is used to produce a variable message)By adding includeIn="LoginState" to the Container element, FlexJS will only show this component (and its children) when the application's state is set to LoginState.  To display it, you just set the component's currentSate:

currentState = "LoginStateAlertState"

Suddenly the login dialog appears. You can even control its appearance with transitions:

<js:transitions>
    <js:Transition fromState="NormalState" toState="LoginState">
		<js:Fade alphaFrom="0" alphaTo="1" />
	</js:Transition>
	<js:Transition fromState="LoginState" toState="NormalState">
		<js:Fade alphaFrom="1" alphaTo="0" />
	</js:Transition>
</js:transitions>

The two transitions - one for each direction (into and out of the LoginState), declare the use of the Fade effect to make the components in the LoginState fade in and out. Just the presence of the transitions and their connections to the states is enough to hook things together. The application just changes the currentState to LoginState or NormalState to make the login dialog appear (fades in) and disappear (fades out).

message changes from "All is well" to some alert message.

States States and transitions can easily enhance your application's experience and are convenient to use. For a complex example, including transitions that use effects, look at the FlexJS Store demo that is packaged under "examples" with the FlexJS SDK.

...