air.Typograf

Делать простые приложения с Adobe AIR мы уже научились, делать красивые окошки тоже, а теперь поставим себе реальную задачу и попробуем ее осуществить.
Сегодня будем писать очень простенькую обертку под Типографический веб-сервис.




Как всегда, особо разглагольствовать на эту тему я не буду, а просто приведу код с большим количеством комментариев.
Из кода мы узнаем о том, как посылать запросы через air.URLRequest, работать с буфером обмена и открывать ссылки во внешнем браузере.

Будем считать, что эта статья является продолжением предыдущей Делаем красиво в AdobeAIR с ExtJS, все остается так же, только меняется содержимое application.js:

var app = {
	
	_mainWindow: null,
	_textarea: null,
	_statusbar: null,

	/*
	 * инициализация
	 */
	init: function() {
		window.nativeWindow.maximize();
		
		app.doCreateMainWindow();
		app.setupListeners();
		
		window.nativeWindow.visible = true;
	},
	
	/*
	 * обработчики событий
	 */
	setupListeners: function() {
		// события нативного окна
		window.nativeWindow.addEventListener('displayStateChanging', app.doDisplayStateChanging); 
		
		// события главного окна
		this._mainWindow.on('minimize', app.doMinimize);
		this._mainWindow.on('close', app.doClose);
		
		// события в textarea
		this._textarea.on('specialkey', app.doSpecialKey);
	},
	
	/*
	 * создание главного окна
	 */
	doCreateMainWindow: function() {
		this._statusbar = new Ext.StatusBar({
			// текст по-умолчанию
        	text: 'http://www.typograf.ru',
        	items: [ 
				// разделитель
				'-',
				{ // кнопка "открыть в браузере" на статусбаре
					text: 'открыть в браузере',
					handler: function() {
						// функция отработает по щелчку на кнопке
						// смысл ее в том, чтобы открыть ссылку в браузере по-умолчанию
						var request = new air.URLRequest( 'http://www.typograf.ru' );
						air.navigateToURL(request);
					}
				}
			]
		} );
		
		this._textarea = new Ext.form.TextArea( {
			// текст по-умолчанию
			emptyText: 'Введите текст, который нужно оттипографировать и нажмите Ctrl + Enter',
			region: 'center'
		} );
				
		this._mainWindow = new Ext.Window({
			width:  800,
			height: 600,
			minWidth: 300,
			minHeight: 200,
			layout: 'border',
			x: 100,
			y: 100,		  
			minimizable: true,
			maximizable: true,
			title: "Типограф",
			iconCls: 'icon',
			
			// тулбар
			tbar: [
				{
					text: "вставить из буфера",
					handler: function() {
						// а у нас в буфере обмена действительно текст?
						if ( air.Clipboard.generalClipboard.hasFormat(air.ClipboardFormats.TEXT_FORMAT) ) {
							// вставляем текст
							app._textarea.setValue(
								// из буфера =)
								air.Clipboard.generalClipboard.getData(air.ClipboardFormats.TEXT_FORMAT)
							);
						}
					}
				},
				{
					text: "копировать в буфер",
					handler: function() {
						// получаем введенный текст
						var text = app._textarea.getValue();
						
						// если пусто, то ничего не делаем
						if (text == '')
							return;
						
						// очищаем буфер обмена
						air.Clipboard.generalClipboard.clear();
						// и копируем туда данные в текстовом (TEXT_FORMAT) формате
						air.Clipboard.generalClipboard.setData(air.ClipboardFormats.TEXT_FORMAT, text);
					}
				},
				{
					text: "очистить",
					handler: function() {
						// очищаем поле для ввода
						app._textarea.reset();
					}
				}
			],
			// статусбар
			bbar: this._statusbar,
			
			// поле для ввода текста
			items: this._textarea
		});
		
		this._mainWindow.show();
	},
	
	/*
	 * обработка события на изменение состояния окна
	 * @param {Event} событие displayStateChanging
	 */
	doDisplayStateChanging: function( e ) {
		if ( e.afterDisplayState == 'normal' ) {
			e.preventDefault();
			window.nativeWindow.visible = false;
			window.nativeWindow.maximize();
			window.nativeWindow.visible = true;
		}
		else
		if ( e.afterDisplayState == 'minimized' ) {
			e.preventDefault();
			window.nativeWindow.visible = false;
			window.nativeWindow.minimize();
			window.nativeWindow.visible = true;
		}
	},
	
	/*
	 * обработка события нажатия служебных клавиш в _textarea
	 * @param {Ext.form.TextField} элемент
	 * @param {Event} событие keypress
	 */
	doSpecialKey: function( field, e ) {
		var keyCode = e.getKey();
		
		if ( keyCode == 13 ) {
			// не надо в этом случае каретку двигать
			e.preventDefault();
			
			// обрабатываем текст, если он есть
			if ( app._textarea.getValue() != '' )
				app.doProcess();
		}
	},

	/*
	 * обработка события закрытия главного окна
	 * @param {Ext.window} окно
	 */
	doClose: function( win ) {
		air.NativeApplication.nativeApplication.exit();
	},
	
	/*
	 * обработка события на сворачивание главного окна
	 * @param {Ext.window} окно
	 */
	doMinimize: function( win ) {
		window.nativeWindow.visible = false;
		window.nativeWindow.minimize();
		window.nativeWindow.visible = true;
	},
	
	// обработка текста типографом
	doProcess: function() {
		this._textarea.disable();
		this._statusbar.setStatus( 'Обработка...' );
		
		// загрузчик
		var loader = new air.URLLoader();
		// будем воспринимать полученную информацию в текстовом виде
		loader.dataFormat = air.URLLoaderDataFormat.TEXT;
		// указываем обработчик на получение данных
		loader.addEventListener(air.Event.COMPLETE, app.doGetProcessed); 
		
		// запрос
		var request = new air.URLRequest('http://www.typograf.ru/webservice/');
		// указываем способ передачи данных в сервис - post
		request.method = air.URLRequestMethod.POST;
		// и указываем, собственно, то, что мы передаем в сервис

		request.data = 'chr=utf-8&text=' + this._textarea.getValue();
		
		// поехали ;)
		loader.load(request);
	},
	
	/*
	 * получение данных с сервера
	 * @param {Event} событие air.Event.COMPLETE
	 */
	doGetProcessed: function( e ) {
		// получаем loader
		var loader = e.target;
		
		app._textarea.setValue( loader.data );
		
		app._textarea.enable();
		app._statusbar.setStatus('http://www.typograf.ru');
	}

}


Пишу второпях, возможно что-то забыл. Не стесняйтесь и спрашивайте, если что.

Для тех, кому не хочется возиться, а посмотреть охота, можете скачать установочный пакет (около 400 кб)

Всем спасибо за внимание.

P.S. обновил статью и air-пакет. Спасибо автору за починку utf-8 режима.

Кросспост из личного блога.
+37
18 июня 2008, 03:03
35
silentroach –56,0

комментарии (27)

+3
Kupyc #
Вы молодец.
0
iBear #
Согласен. 5+
0
akira #
Под линуксом лучше не запускать :))
0
silentroach #
можно попробовать.
+2
Spearance #
Может я щас глупость скажу, но у Типографа есть ещё один недокументированный параметр chr=кодировка. Именно он и отвечает за то во что сконвертить текст на выходе. На сколько работоспособен - не знаю, не проверял. Но должен работать с: windows-1251, koi8-r, utf-8. Возможно это как раз и есть решение вашей проблемы.

P.S. http://www.typograf.ru/notebook/?page=21
0
silentroach #
попробовал на скорую руку, попробовал писать так: chr=utf-8,text=...
вернул мне "
0
Spearance #
я полагаю так должно быть chr=utf-8&text=...
0
silentroach #
а, что-то я об этом не подумал. торопился =)
спасибо, я попробую вечером.
0
silentroach #
chr=UTF-8&text=' + this._textarea.getValue()

не вышло. приходит кракозябра.
0
silentroach #

Т

0
Spearance #
нужно разбираться с обоих сторон, предлагаю разговор перевести в почту...
0
valedo #
Спасибо, очень интересно, ждем следующих статей!
0
silentroach #
и Вам спасибо за внимание.
буду стараться, надеюсь, в ближайшее время что-нибудь придумаю еще.
если есть идеи — пишите.
0
valedo #
кстати, интересно, каким IDE вы пользуетесь?
0
silentroach #
Notepad++ обычно
щас Aptana пробую. Не нравится она мне чем-то, обратно перелезу =)
+1
valedo #
я пробовал Aptan'y тоже, но мне больше понравился Spket.IDE Spket.com там даже реализовано создание своей цветовой схемы для ExtJs
0
silentroach #
спасибо, посмотрю
0
Tims #
В mac osX не работает, после обработки получаю такой экран:

0
Tims #
http://img-fotki.yandex.ru/get/4/vedmamovie.0/0_10a47_3aac37e7_L.jpg
0
silentroach #
прочитайте внимательно статью или просто ту часть, которая сразу после большого куска кода.
автор типографа уже написал в топике про скрытую возможность указать кодировку при отправке запроса с текстом. если это работает, то вечером я подправлю статью и выложу пакет заново.
0
Tims #
Просто я данный продукт рассматривал не с точки зрения алгоритма решения, а с точки зрения использования продукта =) было бы клево тупо выставить дропдаун с выбором кодировок.... Т.е. объединить по идеологии Типограф и Декодер
0
silentroach #
на тот момент я так и не нашел способа перевести из utf-8 в windows-1251.
после ответа автора вебсервиса этот дропдаун уже не будет нужен, все будет отсылаться как надо и как надо приниматься. как приду с работы, сразу посмотрю (около 22 часов, GMT+3), перевыложу и обновлю статью, если все получится.
0
silentroach #
попробуйте сейчас, должно заработать. я обновил статью.
0
Tims #
Ага, забрал, вечером потестирую
0
spycode #
По моему счас вышла Adobe AIR 1.1 и один из пунктов нововведений это поддержка кодировок. Правда, может я что-то путаю...
0
silentroach #
пакет на нем и собран как раз. там по кодировкам не то, что нам нужно.
0
name #
О, отличная заметка!!!

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.