Любой, кто меня знает, знает, что я люблю новые игрушки. Иногда это новое железо или новая игра. Иногда, однако, это просто идея, чтобы поиграть. Этот пост полностью посвящен идее. Некоторое время я был заинтригован
QR-кодами . На самом деле, моя любовь к штрих-кодам восходит к тому времени, когда я использовал компьютерные системы в компании моих родителей. Уже тогда я видел, как они могли что-то изменить. В наши дни штрих-коды широко распространены в розничной торговле, но не покидают нишу бизнеса. QR-коды готовы изменить это. Учитывая, что большинство смартфонов могут переводить их, они делают отличный способ связать реальный мир с сетью.

В Интернете есть большие ресурсы для создания QR-кодов и сохранения их на вашем компьютере для последующего использования. Тем не менее, будучи разработчиком, я хотел что-то, с чем я мог бы поиграть и включить в свои собственные приложения. Проблема в том, что генерирование QR-кода не является тривиальной вещью. К счастью для нас, Google уже выполнил сложную часть, и все, что мне действительно нужно, — это обернуть их API в класс, и я могу использовать это в своих собственных приложениях.

Что нужно для начала

Если вы хотите создавать QR-коды, вы должны уметь делать две вещи, создавать их и читать их. Так как этот пост посвящен их созданию, я оставлю вам их чтение. Если у вас есть смартфон, вероятно, есть хорошее приложение для проверки вашей работы. Для ОС Android я использую сканер BarCode .

Вот и все. Все, что вам нужно, это способ проверить свою работу. Google делает тяжелую работу по созданию графики, и приведенный ниже код предоставляет вам удобную оболочку, позволяющую включать ее в приложения Flash Builder 4.

Весёлая часть

Хорошо, давайте разберем код. Это один из моих первых компонентов Flex, который я достаточно уверен, чтобы выпустить. Тем не менее, я приветствую любые комментарии или критику в отношении класса.

Если вы еще этого не сделали, перейдите на страницу Google Chart API на QR-кодах . Google свел это к основам, 3 обязательным параметрам и двум необязательным. Сердце класса объединяет эти параметры и вызывает API. Он берет изображение, которое он возвращает, и помещает его в форму, которую приложения Flex могут изменить.

Планирование всех событий

[Event(name="imageCreated", type="ImageCreatedEvent")]
[Event(name="imageFailed",  type="ImageFailedEvent")]

Сначала мы должны подготовиться к событиям, которые могут произойти. В нашем случае либо это работает, либо нет. В любом случае, мы должны предоставить разработчику, использующему этот класс, способ обрабатывать обе возможные ситуации в их коде, поэтому нам не нужно это делать в нашем коде.

Код для событий находится ниже, после основного класса. ImageFailedEvent является просто подклассом FaultEvent и служит только маркером, который может быть захвачен отдельно.

Однако ImageCreatedEvent имеет дополнительное свойство thisImage. Когда запускается четное событие, он передает копию объекта QRCode всем слушателям, что позволяет им легко извлекать и включать полученную графику в приложение.

BINDABLEs

[Bindable] public var qualityArray:ArrayCollection = new ArrayCollection(["L","M","Q","H"]);
[Bindable] public var marginArray:ArrayCollection  =  new ArrayCollection([1,2,3,4,10,40]);

Из всех имеющихся у нас свойств только два являются связываемыми, два массива данных, которые определяют приемлемые параметры для исправления ошибок и поля.

Все остальные параметры имеют разумные значения по умолчанию, но при использовании класса нет никаких оснований делать их привязываемыми.

Суть дела

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageComplete);
loader.load(request);

Сердцем класса является метод createImage (). Чтобы использовать класс, вы создаете его экземпляр, устанавливаете необходимые свойства и затем вызываете createImage (). В рамках этого метода первое, что мы делаем, это проверка параметров. Убедитесь, что мы дали изображению правильную высоту и ширину, и нам действительно есть, что кодировать. Как только мы сможем сделать разумный вызов API, мы настроим вызов, сделаем его и обработаем результаты.

Еще в феврале я написал пост о динамической загрузке изображений из Интернета . В нем я говорил о том, что вызов API, который не возвращает XML или JSON, не так прост, как это может быть во Flex. Я использовал методы (и, вероятно, код), которые я отображал в этом посте, для вызова API Google Chart. Я не буду перефразировать предыдущий пост, вы можете просмотреть его как досуг. По своей сути это вызов import flash.display.Loader для загрузки содержимого из Интернета.

У createImage () есть одна новая функция отладка. Если вы установите debug = true, вы получите предупреждение о том, что параметры передаются в API Google. Я большой сторонник того, чтобы дать разработчикам возможность увидеть, что происходит, без необходимости взламывать код. Если у вас установлен и работает Чарльз, вы можете увидеть, что вызов действительно выполняется, однако мне проще включить в код отладку и предоставить разработчикам возможность выбора. Темная сторона этого заключается в том, что разработчики имеют возможность снимать себя в еде таким же образом. Более одного разработчика оставили отладку включенной при выпуске своего кода.

Имея дело с последствиями

Поскольку Flex асинхронный, у нас должен быть метод для работы с изображением после выполнения вызова API. imageComplete () — обработчик для события COMPLETE. В нем мы устанавливаем высоту и ширину фактического изображения, а также данные самого изображения. Затем мы отправляем событие imageComplete, чтобы основная программа могла что-то сделать с изображением.

Завершение

Вот и все для класса. Чтобы использовать его, просто создайте экземпляр, установите параметры и запустите createImage (). Потому что мы говорим с API в Google, это работает только с приложениями AIR. Если вам нужно приложение Flash, которое запускается из вашего собственного домена, чтобы иметь возможность использовать QRCode.as, вам придется настроить проект на своем сервере, чтобы прокси-вызов Google. (Тривиально, но выходит за рамки того, что мы обсуждаем здесь.)

До следующего раза,
я <3 | <
= C =

Код

/*
 * Instantiate the object
 */
var qrCode:QRCode = new QRCode();
 
/*
 * Add our event listeners
 */
qrCode.addEventListener('imageCreated',this.displayImage);
qrCode.addEventListener('imageFailed',this.cannotDisplayImage);
 
 
/*
 * Setup for the call
 */
qrCode.width                = parseInt(imageWidth.text);
qrCode.height               = parseInt(imageHeight.text);
qrCode.margin               = margin.selectedIndex;
qrCode.errorCorrectionLevel = errorCorrectionLevel.selectedIndex;
qrCode.content              = contentToEncode; 			
qrCode.imageType            = grpImageType.selectedValue.toString();
 
/*
 * make the call
 */
qrCode.createImage();

/**
 * 
 * http://code.google.com/apis/chart/docs/gallery/qr_codes.html
 */
package
{
	[Event(name="imageCreated", type="ImageCreatedEvent")]
	[Event(name="imageFailed",  type="ImageFailedEvent")]
 
	public class QRCode
	{
		import flash.display.BitmapData;
		import flash.display.Loader;
		import flash.display.LoaderInfo;
		import flash.net.FileReference;
		import flash.net.URLRequest;
		import flash.net.URLVariables;
		import flash.utils.ByteArray;
 
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import mx.controls.Image;
		import mx.graphics.codec.JPEGEncoder;
		import mx.graphics.codec.PNGEncoder;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;
 
 
		[Bindable] public var qualityArray:ArrayCollection = new ArrayCollection(["L","M","Q","H"]);
		[Bindable] public var marginArray:ArrayCollection  =  new ArrayCollection([1,2,3,4,10,40]);		
 
		public var height:int = 150;
		public var width:int  = 150;
 
		public var content:String           = "";		
		public var debug:Boolean            = false;		
		public var errorCorrectionLevel:int = 0;
		public var imageType:String         = 'PNG';
 
		public var margin:int               = 0;
 
		protected var _image:Image = new Image();
		protected var apiUrl:String         = 'http://chart.apis.google.com/chart';
 
		public function QRCode()
		{
			/*
			* cht=qr
			* chs=<width>x<height>
			* chl=<data>
			* chd
			* choe=<output_encoding>
			* chld=<error_correction_level>|<margin>
			* 
			* Notes:
			* changing the quality needs to make sure the max number of chs hasn't been exceeded.
			* Add Types
			*/
		}
 
 
 
		public function createImage():void
		{
			// do a property check and throw appropriate error for missing properties like content to encode
			if (this.width<1) {
				dispatchEvent(new ImageFailedEvent(ImageFailedEvent.IMAGE_FAILED,false,false));
				return;
			}
			if (this.height<1) {
				dispatchEvent(new ImageFailedEvent(ImageFailedEvent.IMAGE_FAILED,false,false));
				return;
			}
			if (this.content.length<1) {
				dispatchEvent(new ImageFailedEvent(ImageFailedEvent.IMAGE_FAILED,false,false));
				return;
			}
 
			var params:URLVariables = new URLVariables();
			params.cht  = 'qr';
			params.chs  = this.height +'x'+ this.width;
			params.chl  = this.content;
			params.chld = qualityArray[errorCorrectionLevel]+"|"+marginArray[margin];
 
			var request:URLRequest = new URLRequest(apiUrl);
			request.method="POST";
			request.data = params;
 
			// DEBUGGING
			if (this.debug) {
				var a:String = apiUrl + 
					'?cht='+params.cht
					+"&chs="+params.chs
					+"&chld="+params.chld
					+"&chl="+params.chl
				Alert.show(a);			                                                       
			} // if (this.debug)
 
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageComplete);		 	
			loader.load(request);
		} // protected function createImage():void
 
 
		protected function imageComplete(event:Event):void
		{
			var loader:Loader = (event.target as LoaderInfo).loader;
			_image.data   = loader.content;
			_image.width  = loader.width;
			_image.height = loader.height;
			dispatchEvent(new ImageCreatedEvent(ImageCreatedEvent.IMAGE_CREATED,false,false,_image)); 
			return;
		} // protected function displayImage(event:Event):void
 
		protected function cannotDisplayImage(event:FaultEvent):void
		{
			dispatchEvent(new ImageFailedEvent(ImageFailedEvent.IMAGE_FAILED,false,false)); 
		} // protected function cannotDisplayImage(event:FaultEvent):void
 
		public function getImage():Image{
			return this._image;
		}
 
	}
}

ImageCreatedEvent.as

package 
{
	import flash.events.Event;
	import mx.controls.Image;
 
	public class ImageCreatedEvent extends Event
	{
		public static const IMAGE_CREATED:String = 'imageCreated';
		protected var _image:Image;
 
		public function ImageCreatedEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, thisImage:Image=null)
		{
			super(type, bubbles, cancelable);
			_image = thisImage;
			return;
		}
 
		override public function clone():Event 
		{
			return new ImageCreatedEvent(type, bubbles, cancelable, _image);
		}
 
	}
}

ImageFailedEvent.as

package
{
	import mx.rpc.events.FaultEvent;
 
	public class ImageFailedEvent extends FaultEvent
	{
		public static const IMAGE_FAILED:String = 'imageFailed';
 
		public function ImageFailedEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
 
	}
}