Matt MacKenzie

I was looking to add a gift certificate generator for a Flex Mobile application I developed, which takes a blank PNG that has the gift certificate look and feel I was looking for and write text onto it to personalize it. The certificate is then saved to the iOS (or Android) Camera Roll.

This isn’t the prettiest yet, but it took me a lot of googling to figure out what would work. Take this as a hopefully valuable example.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="GiftCertificateView" viewActivate="viewActivated(event)" actionBarVisible="false">
	<fx:Script>
		<![CDATA[
			import mx.formatters.DateFormatter;
			import mx.utils.UIDUtil;

			import spark.components.Button;
			import spark.components.Image;
			import spark.components.Label;
			import spark.events.ViewNavigatorEvent;
			import spark.primitives.BitmapImage;

			[Embed(source='../resources/images/gc_blank.png')]
			public var GCBlank:Class;

			protected function viewActivated(event:ViewNavigatorEvent):void
			{
				stage.setAspectRatio(StageAspectRatio.LANDSCAPE);
				var bitmapData:BitmapData = new BitmapData(480, 320, true, 0xFF82DC);
				bitmapData.draw(new GCBlank());
				var df:DateFormatter = new DateFormatter();
				df.formatString="DD-MM-YYYY";
				var dateIssued:Date = new Date();
				var dateExpired:Date = new Date(dateIssued.fullYear +1, dateIssued.month, dateIssued.date);

				var uuid:String = UIDUtil.createUID();

				drawString(bitmapData, "For: " + data.recipient, 50, 75);
				drawString(bitmapData, "From: " + data.from, 50, 100);
				drawString(bitmapData, "Amount: $" + data.amount, 50, 125);
				drawString(bitmapData, "Issued:" + df.format(dateIssued), 50, 150);
				drawString(bitmapData, "Expires:" + df.format(dateExpired), 50, 175);
				var format:TextFormat = new TextFormat();
				format.color = 0x000000;
				format.size = 12;
				format.font = "Sans-Serif";

				drawString(bitmapData, uuid, 75, 220, format);

				format.size = 10;
				drawString(bitmapData, "Book anytime at www.foo.com.", 130, 270, format);

				var img:Image = new Image();
				img.source = bitmapData;
				container.addElement(img);
				var cr:CameraRoll = new CameraRoll();
				cr.addBitmapData(bitmapData);
				var button:Button = new Button();
				button.x = 400;
				button.y = 250;
				button.label = "Ok";
				button.addEventListener(MouseEvent.CLICK, function():void {
					stage.setAspectRatio(StageAspectRatio.PORTRAIT);
					navigator.popToFirstView();
				});
				container.addElement(button);
				var label:Label = new Label();
				label.x=400;
				label.y=235;
				label.text = "Saved!";
				container.addElement(label);
			}

			protected function drawString(target:BitmapData,text:String,x:Number,y:Number,formatOveride:TextFormat=null):void {
				var tf:TextField = new TextField();
				tf.antiAliasType = AntiAliasType.ADVANCED;
				var format:TextFormat = new TextFormat();
				format.size = 20;
				format.font = "Sans-Serif";
				format.color = 0xFFFFFF;
				if (formatOveride != null) format = formatOveride;
				tf.defaultTextFormat = format;

				tf.background = false;
				tf.text = text;
				tf.width = 350;
				var bmd:BitmapData = new BitmapData(tf.width,tf.height, true, 0xFF82DC);

				bmd.draw(tf);
				var mat:Matrix = new Matrix();
				mat.translate(x,y);
				target.draw(bmd,mat);
				bmd.dispose();
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Group width="100%" height="100%" id="container"/>
	</s:View>