Или домены “.рф” это первый шаг к цензуре интернета? Для начала типа клуба для своих, а дальше как у нас водится по рекомендации…

P.S. Update. Интересно если в имени домена будет часть букав, типа “у”, “е”, “а” на русском, а часть на англицком? Застрелиться

Итак строим Flex-client side

Проект состоит из следующих файлов.
1. index.mxml – главное приложение в котором нам необходима авторизация
2. com/control/maincontrol.as – вся логика главного приложения по обработке событий авторизации
3. com/events/LoginEvent.as – Custom event при помощи которого передаем данные в главное приложение
4. com/view/LoginWindow.mxml – модуль авторизации, построенный на базе TitleWindow
5. com/vo/GALLuserVO.as – value-object класс содержащий все данные пользователя

Логика:
- По нажатию кнопки “cbLogin” создается окно для авторизации
- в LoginWindow по нажатию кнопки “cbSubmit” передаются данные (login/password) в файл login.php
- login.php генерирует различные XML (смотри part1)
- LoginWindow анализирует входящие XML и генерирует alert или объект с данными
- объект с данными передается через CustomEvent главному приложению

Несколько замечаний:
- Естественно в реальном приложении данные об ошибках не выводятся пользователю, а пишутся в лог-файл.

Структура проекта

главный файл
index.mxml

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

	<mx:Style>
		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;
		}
	</mx:Style>

	<!-- базовая логика -->
	<mx:Script source="com/control/maincontrol.as"/>

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

	</mx:ApplicationControlBar>

</mx:Application>

и файл базовой логики maincontrol.as

/******************************************************************************
 *  импорт 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("borderAlpha", 0.8);

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

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

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

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

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

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

	}
/******************************************************************************
 * конец
 ******************************************************************************/

В итоге получим примерно такую картинку:

Создаем новый MXML component
LoginWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
	horizontalCenter="0" verticalCenter="0"
	layout="absolute"
	width="200" height="200"
	title="Авторизация"
	status="Close"
	creationComplete="init();"
	showCloseButton="true"
	close="closeWin()"
	>

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

	<mx:Script>
		<![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 = "";
				password.text = "";
				// убираем с экрана
				PopUpManager.removePopUp(this);
			}

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

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

				// заносим в запрос данные и отправляем на сервер
				gateway.url = "assets/php/login.php";
				gateway.method = "POST";
				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 == "yes")
					{
						// передаем в алерт описание ошибки
						mySQLAlert(myData.error_num, myData.error_desc);
					}
					else
					{
						// успешное соединение - пользователь есть в базе
						if(myData.loginsuccess == "yes")
						{
							// наполнение объекта данными
							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 = "";
							password.text = "";

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

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

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

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

		]]>
	</mx:Script>

	<mx:Label x="10" y="10" text="Login:" width="160"/>
	<mx:TextInput x="10" y="36" id="username"  width="160"/>
	<mx:Label x="10" y="66" text="Password:" width="160"/>
	<mx:TextInput 	id="password"
					x="10" y="92"
					displayAsPassword="true"
					enter="loginSubmitHanler()"
				  	width="160"/>

	<mx:Button 	id="cbSubmit"
				label="OK"
				click="loginSubmitHanler()"
			   	x="10" y="122"
			   	width="75"/>

	<mx:Button 	id="cbCancel"
				label="Cancel"
				click="closeWin()"
				x="95" y="122"
				width="75"
			    />

</mx:TitleWindow>

Внешний вид:

Сопутствующие файлы: LoginEvent.as – Custom Event

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;
		}
	}
}

и GALLuserVO.as – value-object class

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;
	}
}

При успешном запросе мы получаем следующие данные в дебаге:

или для отладки через Alert:

Для различных ситуаций с ошибками выводятся следующие алярмы.
1. Не прошла авторизация

2. Ошибка при коннекте с базой данных

3. Ошибка в синтаксисе SQL

Вроде как все. Готов выслушать предложения по улучшению данного модуля

Идея сводится к одному – необходимо авторизовать пользователя в приложении и выдать ему какие-то права доступа.

База данных для пользователей – MySQL.
Данные передаются в формате XML через PHP.

На стороне Flex за передачу и прослушку отвечает HTTPService.

Оговорюсь сразу, данный пример НЕ ИСПОЛЬЗУЕТ сессии. Хотя как будет время, я постараюсь его доработать для этого.

Итак. Создаем базу данных MySQL:

CREATE DATABASE  `common` DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;

CREATE TABLE `users` (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL DEFAULT '' COMMENT 'логин',
`password` varchar(50) NOT NULL DEFAULT '' COMMENT 'пароль',
`firstname` varchar(50) DEFAULT NULL COMMENT 'Имя',
`lastname` varchar(50) DEFAULT NULL COMMENT 'Фамилия',
`email` varchar(50) DEFAULT NULL COMMENT 'электронная почта',
`department` varchar(10) DEFAULT NULL COMMENT 'отдел',
`appointment` varchar(100) DEFAULT NULL COMMENT 'должность',
`permission` varchar(10) NOT NULL DEFAULT '' COMMENT 'разрешения',
PRIMARY KEY (`user_id`),
UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT;

Движок InnoDB так как возможно подключение других таблиц (например таблица разрешений по различным проектам).

Данные я забивал через phpmyadmin, у меня их было немного. А так, можно конечно сделать отдельную админку…
Пароли хэшируются алгоритмом sha1. Для генерации хэша паролей пользователей на локальном серваке сделал страничку со следующим файлом pass-gen.php
Затем результат присылали мне.
код pass-gen.php :

<?php
if(!$_POST)
 {
?>
 <form method="post">
 <input type="text" name="pass">
 <input type="submit">
 </form>
<?php
 }
else
 {
 $data=$_POST['pass'];
 print sha1($data);
 }
?>

За соединение с базой отвечает файл: login.php
в качестве имени сервера используется “localhost”, пользователь “db_user”, пароль “db_pass”, которые вы замените на свои.

<?php
/***********************************************************************
*  - используется mySQLi
*  - XML формируется при помощи DOM
************************************************************************/

// описываем параметры соединения
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "db_user" );
define( "DATABASE_PASSWORD", "db_pass" );
define( "DATABASE_NAME", "common" );
$table = "users";

//содаем объект содержащий соединение с базой данных
$conn = @new mysqli(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD, DATABASE_NAME);

// проверка ошибок соединения
if (mysqli_connect_errno() !==0 )
{
 // если ошибка при коннекте с базой данных
 $error_num = mysqli_connect_errno();
 $error_message = mysqli_connect_error();

 // передаем данные об ошибке в функцию
 sendErrorData($error_num, $error_message);

}
 else
{
 // если нет ошибки при коннекте с базой данных

 // устанавливаем кодировку соединения
 //$conn->query("SET CHARACTER SET 'utf8'");
 $conn->query("SET NAMES 'utf8'");

 // Данные из Flex передаются в переменную POST
 $username = mysqli_real_escape_string($conn, $_POST["username"]);

 //для проверки скрипта, пока не готов Flex-модуль можно использовать предварительно забитый в базу testuser
 //$username = mysqli_real_escape_string($conn, "testuser");

 // шифруем входящий пароль
 // sha1 - 40 знаков, md5 - 32 знака
 $password = sha1($_POST["password"]);

 //для проверки скрипта, пока не готов Flex-модуль можно использовать предварительно забитый в базу пароль для testuser - "testpass"
 //$password = sha1("testpass");

 // запрос в базу данных
 $query_str = "SELECT * FROM $table WHERE username = '$username' AND password = '$password'";
 $resultData = @$conn->query($query_str);

 // проверям на ошибки после запроса
 if ($resultData === FALSE)
 {
 $error_num = $conn->errno;
 $error_message = $conn->error;
 // передаем данные об ошибке в функцию
 sendErrorData($error_num, $error_message);
 // закрываем соединение
 $conn->close();
 }
 else
 // формирование ответа
 {

 $result_row = $resultData->fetch_object();
 // проверка есть ли такой пользователь
 if(!$result_row)
 {
 // нет записи
 sendLoginError();

 }else{
 // добавим авторизациооные данные
 sendLoginData($result_row);
 }
 // закрываем соединение
 $conn->close();
 }

}
// Функция возвращает данные об ошибках при соединении с базой данных или при выполнении запроса.
function sendErrorData($myerr_num, $myerr_desc) {

 $dom = new DOMdocument('1.0', 'utf-8');    # Создание XML DOM Document
 $dom->formatOutput = true;                # Форматируем вывод
 $rows = $dom->appendChild($dom->createElement('data'));    # Создадим root XML element
 $rows->appendChild($row = $dom->createElement('error', 'yes'));    # Создадим первый элемент - error
 $rows->appendChild($row = $dom->createElement('error_num', $myerr_num));    # Создадим второй элемент - номер ошибки
 $rows->appendChild($row = $dom->createElement('error_desc', $myerr_desc));    # Создадим третий элемент - описание ошибки

 // выводим ответ
 print $dom->saveXML();
}

// Функция возвращает данные  - авторизация не прошла.
function sendLoginError() {

 $dom = new DOMdocument('1.0', 'utf-8');    # Создание XML DOM Document
 $dom->formatOutput = true;                # Форматируем вывод
 $rows = $dom->appendChild($dom->createElement('data'));    # Создадим root XML element
 $rows->appendChild($row = $dom->createElement('error', 'no'));    # Создадим первый элемент - error
 $rows->appendChild($row = $dom->createElement('loginsuccess', 'no'));    # Создадим второй элемент - прошла ли авторизация

 // выводим ответ
 print $dom->saveXML();
}

// Функция возвращает данные  - авторизация прошла успешно + все данные пользователя.
function sendLoginData($my_result) {

 $dom = new DOMdocument('1.0', 'utf-8');    # Создание XML DOM Document
 $dom->formatOutput = true;                # Форматируем вывод
 $rows = $dom->appendChild($dom->createElement('data'));    # Создадим root XML element
 $rows->appendChild($row = $dom->createElement('error', 'no'));    # Создадим первый элемент - error
 $rows->appendChild($row = $dom->createElement('loginsuccess', 'yes'));    # Создадим второй элемент - прошла ли авторизация
 // добавление данных
 $rows->appendChild($row = $dom->createElement('Ufirstname', $my_result->firstname));     # Создадим элемент - FirstName
 $rows->appendChild($row = $dom->createElement('Ulastname', $my_result->lastname));         # Создадим элемент - LastName
 $rows->appendChild($row = $dom->createElement('Uemail', $my_result->email));             # Создадим элемент - Email
 $rows->appendChild($row = $dom->createElement('Udepartment', $my_result->department));    # Создадим элемент - Department
 $rows->appendChild($row = $dom->createElement('Uappointment', $my_result->appointment));# Создадим элемент - Appointment
 $rows->appendChild($row = $dom->createElement('Upermission', $my_result->permission));    # Создадим элемент - Permission

 // выводим ответ
 print $dom->saveXML();
}

?>

В итоге мы получим 4 вида XML данных.
1. Ошибка соединения с базой данных

<?xml version="1.0" encoding="utf-8"?>
<data>
  <error>yes</error>
  <error_num>1045</error_num>
  <error_desc>Access denied for user 'testuser'@'localhost' (using password: YES)</error_desc>
</data>

2. Ошибка в коде запроса

<?xml version="1.0" encoding="utf-8"?>
<data>
  <error>yes</error>
  <error_num>1064</error_num>
  <error_desc>You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'SEL#ECT * FROM users WHERE username = 'testuser' AND password = 'c06aa3f4a6aa99f' at line 1</error_desc>
</data>

3. Авторизация не прошла

<?xml version="1.0" encoding="utf-8"?>
<data>
  <error>no</error>
  <loginsuccess>no</loginsuccess>
</data>

4. Авторизация прошла успешно

<?xml version="1.0" encoding="utf-8"?>
<data>
  <error>no</error>
  <loginsuccess>yes</loginsuccess>
  <Ufirstname>Василий</Ufirstname>
  <Ulastname>Пупкин</Ulastname>
  <Uemail>mail@microsoft.com</Uemail>
  <Udepartment>FIN</Udepartment>
  <Uappointment>финансовый директор</Uappointment>
  <Upermission>RO</Upermission>
</data>

На днях опубликую вторую часть, где приведу код анализа этих данных, со стороны Flex.

P.S. Сильно камнями не кидайте, так как это мой первый опыт использования mySQLi и DOM

Сегодня получил замечательное письмо от них: “Каждый зарегистрированный участник нашего мастер класса получит бесплатную лицензию Flex Builder 3 Pro для персонального использования.”

Достаточно приятное дополнение. А программа тренинга внушает уважение.

Узнал про форум абсолютно случайно, причем регистрировался ночью между первым и вторым днем конференции. Странно, что такому семинару не придали должной рекламы. Тем более участие было абсолютно бесплатным. В итоге в зале было 20-30 человек.

Получил много инфы на переваривание по возможностям Adobe InDesign CS4. Не скажу, что меня все обрадовало. В частности, идеи устраивать весь предпечатный процесс в пространстве RGB, а конвертация в CMYK на финальной стадии (непосредственно при создании PDF). Для Америки это демократия, для нас чревато нехорошими последствиями. Идея понятна с одного источника – хочешь в печать, хочешь PDF для веба, а можно и просто flash-журнал сделать.

В России пока, чем меньше вмешиваются в пре-пресс — тем лучше.

Чем старше версия пакета Adobe, тем сильнее уклон в веб-технологии. Из ИнДизайна делают инструмент для создания интерактивных PDF и Flash. Для себя еще не определился хорошо это или плохо.

Новые возможности в InDesign по поддержке работе с переменными данными и GREP впечатлили.
GREP – стили теперь можно забивать в документ и колбасить ими все что угодно. Например, корявый кернинг некоторых шрифтов (пары с первыми буквами Г и Т).

Приятный финал этого дня – я выиграл пакет Adobe CS4 Design Standard с автографом Дэвида. Будет время – начну его распиливать… Для начала конечно надо посмотреть, что изменилось в объектной модели документа, чтобы адаптировать свои старые скрипты.

Наконец я словил первую багу во флексе. Хотя она очень странная. Угораздило меня дома поставить новый Flex SDK 3.4. Начал делать простенькое приложение с использованием графиков. После прихода на работу, начал вносить правки – естественно Эклипс выдал кучу алярмов о несоответствии SDK (стоял 3.2). Исправил быстро, благо новый SDK был на флешке. Скопировал, указал пути – все как обычно. Какое же было мое удивление, когда в режиме “design” из закладки Components полностью исчезла папка Charts. После переключения на 3.2 – вернулась обратно. Но дома все работает, на обеих версиях. Пока не разобрался, что к чему.

В ноябре прошлого года я поехал на конференцию Adobe Max 2008, которая проходила в Милане. Главной целью поездки было желание познакомиться с таким интересным продуктом как InDesign Server, а также посетить прочие семинары на тему Photoshop, InDesign, и Acrobat. Что это конференция в основном для Flash-разработчиков, я узнал немного позднее

Сейчас даже не могу вспомнить почему я оказался на одной из lab-session посвященных Flex. Вот тогда я и пропал…

Первые шаги начал делать только в этом году. Для первых экспериментов удачно подвернулись Новогодние праздники. Все таки 10 дней халявы. На конференции мне дали диск с первой демкой Flex Builder 4 (Gumbo) и установщиком TourDeFlex. Последнюю иметь для домашнего использования крайне желательно. В качестве первого туториала – must have. Самое ценное – что он регулярно обновляется.

Так как основная работа связана с препрессом, на изучение времени было мало. Все ограничивалось примерами а-ля “Hello World”. Потом сделал для себя вывод что Flex прекрасно подходит для разработки продуктов с использованием внутри корпоративной сети.
Здесь и начались долгие ночи с эротическими позами между мной и Flex. И продолжаются до сих пор

Несколько замечаний:
1. Я не спец во флексе – я только учусь.
2. В качестве server-side выбрал PHP – дешево и сердито. До J2EE еще не дорос. Да и WAMPserver оказался очень кстати.
3. Для связки Flex с PHP выбрал AMFPHP (на Zend и WebORB смотрю, но руки еще не дошли).
4. В качестве редактора – остановился на Eclipse и Flex как плагин. Определенный плюс при прикручивании PDT (PHP Development Tools).