<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Зона 51 &#187; Event</title>
	<atom:link href="http://www.bushnev.com/blog/tag/event/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bushnev.com/blog</link>
	<description>мои заметки на тему RIA, Flex и всего остального…</description>
	<lastBuildDate>Sat, 21 Nov 2009 22:47:49 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Модуль авторизации для Flex-приложений (part 2)</title>
		<link>http://www.bushnev.com/blog/2009/11/13/flex-authorization-part-2/</link>
		<comments>http://www.bushnev.com/blog/2009/11/13/flex-authorization-part-2/#comments</comments>
		<pubDate>Fri, 13 Nov 2009 00:48:04 +0000</pubDate>
		<dc:creator>Alexey Bushnev</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Custom Event]]></category>
		<category><![CDATA[Event]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[TitleWindow]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://www.bushnev.com/blog/?p=32</guid>
		<description><![CDATA[Продолжение по теме: &#8220;Модуль авторизации для Flex-приложений&#8221;
начало тут
Итак строим Flex-client side
Проект состоит из следующих файлов.
1. index.mxml &#8211; главное приложение в котором нам необходима авторизация
2. com/control/maincontrol.as &#8211; вся логика главного приложения по обработке событий авторизации
3. com/events/LoginEvent.as &#8211; Custom event при помощи которого передаем данные в главное приложение
4. com/view/LoginWindow.mxml &#8211; модуль авторизации, построенный на базе TitleWindow
5. com/vo/GALLuserVO.as [...]]]></description>
			<content:encoded><![CDATA[<p>Продолжение по теме: &#8220;Модуль авторизации для Flex-приложений&#8221;<br />
начало <a href="http://www.bushnev.com/blog/2009/11/10/flex-authorization-part-1/">тут</a></p>
<p>Итак строим Flex-client side</p>
<p>Проект состоит из следующих файлов.<br />
1. index.mxml &#8211; главное приложение в котором нам необходима авторизация<br />
2. com/control/maincontrol.as &#8211; вся логика главного приложения по обработке событий авторизации<br />
3. com/events/LoginEvent.as &#8211; Custom event при помощи которого передаем данные в главное приложение<br />
4. com/view/LoginWindow.mxml &#8211; модуль авторизации, построенный на базе TitleWindow<br />
5. com/vo/GALLuserVO.as &#8211; value-object класс содержащий все данные пользователя</p>
<p><span id="more-32"></span><br />
<strong>Логика:</strong><br />
- По нажатию кнопки &#8220;cbLogin&#8221; создается окно для авторизации<br />
- в LoginWindow по нажатию кнопки &#8220;cbSubmit&#8221; передаются данные (login/password) в файл login.php<br />
- login.php генерирует различные XML (смотри part1)<br />
- LoginWindow анализирует входящие XML и генерирует alert или объект с данными<br />
- объект с данными передается через CustomEvent главному приложению<br />
<strong><br />
Несколько замечаний:</strong><br />
- Естественно в реальном приложении данные об ошибках не выводятся пользователю, а пишутся в лог-файл.</p>
<div id="attachment_39" class="wp-caption aligncenter" style="width: 222px"><img src="http://www.bushnev.com/blog/content/2009/11/project.png" alt="Структура проекта" title="Структура проекта" width="212" height="293" class="size-full wp-image-39" /><p class="wp-caption-text">Структура проекта</p></div>
<p><strong>главный файл<br />
index.mxml</strong></p>
<pre class="brush: xml;">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
				layout=&quot;absolute&quot;&gt;

	&lt;mx:Style&gt;
		Application
			{
		    paddingLeft: 10px;
		    paddingRight: 10px;
		    paddingTop: 10px;
		    paddingBottom: 10px;
		    backgroundGradientColors: #2F3D45, #5B7685;
		    }
	    Alert
	    	{
			backgroundColor:#eeeeee;
			color: #323232;
			borderColor: #cc0000;
			fontWeight:bold;
			borderAlpha: 0.7;
			headerHeight:20;
			themeColor: #848484;
			titleStyleName:alertTitle;
			}
		.alertTitle
		{
		color:#ffffff;
		fontWeight:bold;
		}
	&lt;/mx:Style&gt;

	&lt;!-- базовая логика --&gt;
	&lt;mx:Script source=&quot;com/control/maincontrol.as&quot;/&gt;

   	&lt;mx:ApplicationControlBar id=&quot;appContolBar&quot; dock=&quot;true&quot; paddingTop=&quot;2&quot; paddingBottom=&quot;2&quot;  alpha=&quot;1.0&quot;&gt;
		&lt;mx:Spacer width=&quot;100%&quot; /&gt;
		&lt;mx:Button id=&quot;cbLogin&quot; label=&quot;Login&quot;
			   click=&quot;showLoginWindow()&quot;
			   icon=&quot;@Embed(source='assets/icons/user.png')&quot;
			   /&gt;

	&lt;/mx:ApplicationControlBar&gt;

&lt;/mx:Application&gt;
</pre>
<p>и файл базовой логики <strong>maincontrol.as</strong></p>
<pre class="brush: as3;">
/******************************************************************************
 *  импорт components
 ******************************************************************************/

// import своих компонент
import com.events.LoginEvent;
import com.view.LoginWindow;
import com.vo.GALLuserVO;

// Импорт Flex компонент
import mx.controls.Alert;
import mx.managers.PopUpManager;

/******************************************************************************
 * объявление переменных
 ******************************************************************************/

// переменная содержащая данные пользователя
private var userData:GALLuserVO;

// создание переменных для окон
private var loginWindow:LoginWindow;

/******************************************************************************
 * блок обработки кнопок
 ******************************************************************************/

// перехватчик нажатия кнопки Login
private function showLoginWindow():void{
	// добавляем окно авторизации в главное приложение
	var loginForm:LoginWindow = LoginWindow(PopUpManager.createPopUp(this, LoginWindow, false));
		loginForm.setStyle(&quot;borderAlpha&quot;, 0.8);

	// добавляем прослушку окна Login
	loginForm.addEventListener(&quot;user&quot;, loginFormHandler);
	}

// перехватчик события по авторизации
private function loginFormHandler(event:LoginEvent):void{
	// получаем данные из евента
	userData = event.userVO;

	//выводим на экран данные о пользователе
	var UserMessage:String = event.userVO.usersUsername;
		UserMessage += &quot;\n\n&quot; + event.userVO.usersFirstname;
		UserMessage += &quot;\n\n&quot; + event.userVO.usersLastname;
		UserMessage += &quot;\n\n&quot; + event.userVO.usersDepartment;
		UserMessage += &quot;\n\n&quot; + event.userVO.usersAppointment;
		UserMessage += &quot;\n\n&quot; + event.userVO.usersEmail;
		UserMessage += &quot;\n\n&quot; + event.userVO.usersPermission;

	Alert.show(UserMessage, &quot;Данные о пользователе&quot;);

	// в принципе здесь размещаем переход на действие которое мы планируем...
	// do it something with userdata

	// я в зависимости от содержания usersPermission открывал некоторые кнопки

	}
/******************************************************************************
 * конец
 ******************************************************************************/
</pre>
<p>В итоге получим примерно такую картинку:<br />
<img src="http://www.bushnev.com/blog/content/2009/11/MainWindow.png" alt="MainWindow" title="MainWindow" width="198" height="131" class="aligncenter size-full wp-image-38" /></p>
<p>Создаем новый MXML component<br />
<strong>LoginWindow.mxml</strong></p>
<pre class="brush: xml;">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:TitleWindow xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
	horizontalCenter=&quot;0&quot; verticalCenter=&quot;0&quot;
	layout=&quot;absolute&quot;
	width=&quot;200&quot; height=&quot;200&quot;
	title=&quot;Авторизация&quot;
	status=&quot;Close&quot;
	creationComplete=&quot;init();&quot;
	showCloseButton=&quot;true&quot;
	close=&quot;closeWin()&quot;
	&gt;

	&lt;!-- обязательный тег с метаданными где мы присваиваем имя нашему Custom Event --&gt;
	&lt;mx:Metadata&gt;
		[Event(name=&quot;user&quot;, type=&quot;com.events.LoginEvent&quot;)]
	&lt;/mx:Metadata&gt;

	&lt;mx:Script&gt;
		&lt;![CDATA[
			import com.events.LoginEvent;
			import com.vo.GALLuserVO;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.http.HTTPService;

			private var tempUserName:String;

			private var myData:Object;

			private var UserData:GALLuserVO = new GALLuserVO();
			private var gateway:HTTPService = new HTTPService();

			private function init():void{

				PopUpManager.centerPopUp(this);
				username.setFocus();

			}

			private function closeWin():void{
				// сброс полей
				username.text = &quot;&quot;;
				password.text = &quot;&quot;;
				// убираем с экрана
				PopUpManager.removePopUp(this);
			}

			private function loginSubmitHanler():void {
				// объект содержащий поля с логином и паролем для отсылки
				var UserLoginObj:Object;
				UserLoginObj = {&quot;username&quot;:username.text, &quot;password&quot;:password.text};
				// отправка на проверку имени и пароля
				sendUser(UserLoginObj);
			}

			private function sendUser(setUser:Object):void
			{
				// сохраняем имя
				tempUserName = setUser.username;

				// заносим в запрос данные и отправляем на сервер
				gateway.url = &quot;assets/php/login.php&quot;;
				gateway.method = &quot;POST&quot;;
				gateway.useProxy = false;
				gateway.showBusyCursor = true;
				gateway.addEventListener(ResultEvent.RESULT, checkUser);
				gateway.addEventListener(FaultEvent.FAULT, faultHandler);
				gateway.request = setUser;
				gateway.send();
			}

			private function checkUser(event:ResultEvent):void
			{
				// загружаем данные из XML
				myData = event.result.data;

				// проверка ошибок соединения
				if (myData.error == &quot;yes&quot;)
					{
						// передаем в алерт описание ошибки
						mySQLAlert(myData.error_num, myData.error_desc);
					}
					else
					{
						// успешное соединение - пользователь есть в базе
						if(myData.loginsuccess == &quot;yes&quot;)
						{
							// наполнение объекта данными
							UserData.usersUsername = tempUserName;
							UserData.usersFirstname = myData.Ufirstname
							UserData.usersLastname = myData.Ulastname;
							UserData.usersEmail = myData.Uemail;
							UserData.usersDepartment = myData.Udepartment;
							UserData.usersAppointment = myData.Uappointment;
							UserData.usersPermission = myData.Upermission;

							// сброс полей
							username.text = &quot;&quot;;
							password.text = &quot;&quot;;

							// отправка данных через евент в главное приложение
							var e:LoginEvent = new LoginEvent(&quot;user&quot;, UserData);
							dispatchEvent(e);

							// закрываем окно
							closeWin();
						}
						else
						// успешное соединение - но пользователя нет в базе
						{
							// сброс полей
							username.text = &quot;&quot;;
							password.text = &quot;&quot;;
							Alert.show(&quot;Invalid username or password&quot;, &quot;Alert!&quot;);
						}
					}
			}

			/******************************************************************************
			 * отслеживание ошибок mySQl и при соединении
			 ******************************************************************************/
			private function mySQLAlert (num:String, message:String):void
				{
				Alert.show(message, &quot;mySQL Error! &quot; + &quot;Error #&quot; + num);
				}

			private  function faultHandler(event:FaultEvent):void
			{
				var errorMessage:String = &quot;Connection error: &quot; + event.fault.faultString;
				if (event.fault.faultDetail)
				{
					errorMessage += &quot;\n\nAdditional detail: &quot; + event.fault.faultDetail;
				}
				Alert.show(errorMessage);
			}

		]]&gt;
	&lt;/mx:Script&gt;

	&lt;mx:Label x=&quot;10&quot; y=&quot;10&quot; text=&quot;Login:&quot; width=&quot;160&quot;/&gt;
	&lt;mx:TextInput x=&quot;10&quot; y=&quot;36&quot; id=&quot;username&quot;  width=&quot;160&quot;/&gt;
	&lt;mx:Label x=&quot;10&quot; y=&quot;66&quot; text=&quot;Password:&quot; width=&quot;160&quot;/&gt;
	&lt;mx:TextInput 	id=&quot;password&quot;
					x=&quot;10&quot; y=&quot;92&quot;
					displayAsPassword=&quot;true&quot;
					enter=&quot;loginSubmitHanler()&quot;
				  	width=&quot;160&quot;/&gt;

	&lt;mx:Button 	id=&quot;cbSubmit&quot;
				label=&quot;OK&quot;
				click=&quot;loginSubmitHanler()&quot;
			   	x=&quot;10&quot; y=&quot;122&quot;
			   	width=&quot;75&quot;/&gt;

	&lt;mx:Button 	id=&quot;cbCancel&quot;
				label=&quot;Cancel&quot;
				click=&quot;closeWin()&quot;
				x=&quot;95&quot; y=&quot;122&quot;
				width=&quot;75&quot;
			    /&gt;

&lt;/mx:TitleWindow&gt;
</pre>
<p><strong>Внешний вид:</strong><br />
<img src="http://www.bushnev.com/blog/content/2009/11/LoginWindow.png" alt="LoginWindow" title="LoginWindow" width="217" height="220" class="aligncenter size-full wp-image-37" /><br />
Сопутствующие файлы: <strong>LoginEvent.as</strong> &#8211; Custom Event</p>
<pre class="brush: as3;">
package com.events
{
	import com.vo.GALLuserVO;

	import flash.events.Event;

	public class LoginEvent extends Event
	{
		public var userVO:GALLuserVO;

		public function LoginEvent(type:String, userVO:GALLuserVO)
		{
			super(type);
			this.userVO = userVO;
		}
	}
}
</pre>
<p>и <strong>GALLuserVO.as</strong> &#8211; value-object class</p>
<pre class="brush: as3;">
package com.vo
{
	public class GALLuserVO
	{
		public var usersUsername:String;
		public var usersFirstname:String;
		public var usersLastname:String;
		public var usersEmail:String;
		public var usersDepartment:String;
		public var usersAppointment:String;
		public var usersPermission:String;
	}
}
</pre>
<p>При успешном запросе мы получаем следующие данные в дебаге:<br />
<img class="aligncenter size-full wp-image-33" title="debuguserdata" src="http://www.bushnev.com/blog/content/2009/11/debuguserdata.png" alt="debuguserdata" width="431" height="233" /></p>
<p>или для отладки через Alert:<br />
<img class="aligncenter size-full wp-image-40" title="userdata" src="http://www.bushnev.com/blog/content/2009/11/userdata.png" alt="userdata" width="228" height="286" /></p>
<p>Для различных ситуаций с ошибками выводятся следующие алярмы.<br />
1. Не прошла авторизация<br />
<img class="aligncenter size-full wp-image-35" title="error_user" src="http://www.bushnev.com/blog/content/2009/11/error_user.png" alt="error_user" width="265" height="236" /><br />
2. Ошибка при коннекте с базой данных<br />
<img class="aligncenter size-full wp-image-36" title="error_usersql" src="http://www.bushnev.com/blog/content/2009/11/error_usersql.png" alt="error_usersql" width="431" height="231" /><br />
3. Ошибка в синтаксисе SQL<br />
<img src="http://www.bushnev.com/blog/content/2009/11/error_syntax.png" alt="error_syntax" title="error_syntax" width="447" height="242" class="aligncenter size-full wp-image-34" /></p>
<p>Вроде как все. Готов выслушать предложения по улучшению данного модуля <img src='http://www.bushnev.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.bushnev.com/blog/2009/11/13/flex-authorization-part-2/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

