Использование States во Flash Builder


Одной из замечательных вещей во Flex является возможность использования States. States могут быть использованы, чтобы управлять поведением Вашего приложения в зависимости от состояния приложения на данный момент.

Предположим, что мы хотим иметь режим редактированияи режим отображенияв нашем приложении, и мы хотим отображать разные поля и контролы в этих режимах. Давайте создадим простое Flex приложение, на примере которого, посмотрим как используются States и как работают эти режимы.

Для начала Вы должны определить, какие режимы Вы хотите использовать в Вашем Flex приложении, для нашего примера всё просто : редактирование и отображение. Но я уверен, что Вы можете легко придумать и другие режимы для Ваших приложений.

Для нашего примера, мы должны определить States в нашем MXML:

<mx:states>
		<mx:State name="edit" />
		<mx:State name="display" />
	</mx:states>

Добавим небольшой ActionScript 3скрипт, который будет управлять переключением этих двух режимов посредством свойства currentStateнашего приложения. Также будем использовать это свойство для отображения нужной надписи на кнопке переключения.

<mx:Script>
<![CDATA[
[Bindable]
private var nameValue:String = "http://www.mainview.ru";
private function handleClick(event:MouseEvent):void
{
currentState = (currentState == "display" ? "edit" : "display");
}
]]>
</mx:Script>

Добавим кнопку, которая будет отображаться в обоих режимах

<mx:states>
		<mx:State name="edit" />
		<mx:State name="display" />
	</mx:states>
<mx:Button x="10" y="130" label="{currentState == 'edit' ? 'Switch to display' : 'Switch to edit'}" id="button1" click="handleClick(event)"/>

После этого нам осталось только добавить нужный функционал для наших режимов и запустить приложение.
Полный код приложения приведён ниже:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html" currentState="display">

<mx:Script>
<![CDATA[
[Bindable]
private var nameValue:String = "http://www.mainview.ru";
private function handleClick(event:MouseEvent):void
{
currentState = (currentState == "display" ? "edit" : "display");
}
]]>
</mx:Script>

	<mx:states>
		<mx:State name="edit">
			<mx:AddChild position="lastChild">
				<mx:Label x="10" y="10" text="Edit state" fontSize="20"/>
			</mx:AddChild>
			<mx:AddChild position="lastChild">
				<mx:Label x="10" y="49" text="Name:"/>
			</mx:AddChild>
			<mx:AddChild position="lastChild">
				<mx:TextInput x="10" y="75" id="tiName" text="{nameValue}"
change="nameValue = tiName.text" width="150"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="display">
			<mx:AddChild position="lastChild">
				<mx:Label x="10" y="10" text="Display state" fontSize="20"/>
			</mx:AddChild>
			<mx:AddChild position="lastChild">
				<mx:Label x="10" y="49" text="Name: {nameValue}"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	<mx:Button x="10" y="130" label="{currentState == 'edit' ? 'Switch to display' : 'Switch to edit'}" id="button1" click="handleClick(event)"/>

</mx:Application>
http://www.flex-blog.com/using-states-in-flash-builder/
Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Добавить коментарий

десять + 16 =