'AS3.0' 태그의 글 목록

오랫만에 블로그 유입경로를 보다가 코리아몽키라는 분의 블로그를 알게 되었습니다. [Actionscript 3.0] 간단하게 만들어 본 XML to arrayColection 함수 라는 글에서 제 글을 인용하셨더라구요. ;) 위의 글 말미에 코리아몽키님이 가진 의문이 있으셔서 덧글을 달다가 덧글이 좀 길어질 듯 하여, 간만에 포스팅을 하려고 합니다. ;)

'왜 XML을 Object로 파싱하여 그 데이터를 처리하고 이용하는 방법에 대해서 정리된 자료가 없는 것인가?' 라는 의문은 다른 각도로 접근해봐야 할 것 같습니다. '왜 방법이 없는가'에서 'XML을 Object로 파싱하지 않고 사용할 방법이 있는가?' 라는 것으로 말이죠. 단도직입적으로 말씀드리자면, XML 을 받은 것을 Object 로 변환해야할 필요성이 크지 않다는 것입니다(꼭 필요한 경우도 있겠습니다만). 게다가 XML 그대로 사용하는 것도 가능하고 HTTPService를 이용하면 XML을 Object로 변환 한 결과를 바로 받을 수도 있기 때문입니다.

그럼 먼저 HTTPService 를 이용하여 다양한 형태로 결과를 받는 방법에 대해서 알아보겠습니다.

HTTPService 의 resultFormat
HTTPService에는 resultFormat 이라는 속성이 존재합니다. 이는 HTTP를 호출하여 받은 결과값을 어떤 식으로 파싱할 것인지에 대해서 설정하는 속성인데, 아래의 표와 같이 총 6가지로 설정 가능합니다.

`object`	ActionScript의 Object 들의 트리형식으로 XML 을 파싱하여 반환합니다. (기본값)
`array`	ActionScript의 Object 들의 트리형식으로 XML 을 파싱하여 반환되나, 최상위의 Object가 Array가 아니라 새로 생성된 Array의 첫 번째 아이템이 됩니다. 만약 makeObjectsBindable 속성이 true로 설정되어 있을 경우 최상위 Array는 ArrayCollection으로 반환됩니다.
`xml`	ActionScript 의 XMLNode Object로 이루어진 XML로 XML을 파싱하여 반환합니다.
`flashvars`	ActionScript Object로 name과 value가 쌍으로 되어 있는(page=1) 텍스트를 파싱하여 반환합니다.
`text`	받은 그대로를 text로 반환합니다.
`e4x`	ECMAScript for XML(E4X)를 이용할 수 있는 ActionScript 의 XMLNode Object로 이루어진 XML로 XML을 파싱하여 반환합니다.

resultFormat를 object나 array로 설정하면 Object로 변환된 XML 데이터(서버측이 전달해준)를 전달받게 됩니다. 따로 파싱할 필요가 없는 것이죠. 물론 e4x나 xml로 설정하여 XML로 받아와서 사용할 수도 있습니다. 또는 특정 프로토콜에 의해 생성된 데이터라면 text로 설정하여 String 으로 받은 다음 프로토콜에 맞게 파싱하여 사용할 수도 있을 것입니다. (마치 구분자를 이용하여 소켓통신시 데이터 전달하는 것과 같이)

Object로 파싱하여 사용

rss 구조 (이미지 클릭하여 보세요.)

object로 resultFormat을 설정하여 데이터를 받아오는 예제를 한번 보겠습니다.
본 블로그의 rss를 읽어서 DataGrid에 넣어주는 예제인데, 우선 RSS 정보를 읽기 위해 구조를 먼저 보면 (우측이미지 참조) channel이라는 노드의 하위에 블로그의 정보들(타이틀, 주소, 이미지정보 등)이 있고 포스트의 정보는 item 이라는 노드들에 들어있습니다.

예제에서는 이 item 노드들을 가져다가 DataGrid에 넣어줄 것입니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	width="600" height="300" fontSize="12" creationComplete="{init()}" 
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" 
	borderStyle="solid">
	
	<mx:HTTPService id="myHTTPService" useProxy="false" resultFormat="object"
		url="http://blog.flashplatform.kr/rss" 
		result="{resultHandler(event)}" fault="{faultHandler(event)}"/>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			private function init():void
			{
				myHTTPService.send();	
			}
			
			private function resultHandler(event:ResultEvent):void
			{
				var rssData:Object = event.result.rss;
				var items:ArrayCollection = rssData.channel.item;
				
				myDataGrid.dataProvider = items;
			}
			
			private function faultHandler(event:FaultEvent):void
			{
				Alert.show("RSS 를 가져오지 못했습니다.", "알림");	
			}
			
		]]>
	</mx:Script>
	<mx:Label x="10" y="10" text="RSS Reader" fontWeight="bold"/>
	<mx:Label y="10" text="resultFormat - object" right="10"/>
	<mx:DataGrid id="myDataGrid" left="10" right="10" bottom="10" top="35">
		<mx:columns>
			<mx:DataGridColumn headerText="제목" dataField="title"/>
			<mx:DataGridColumn headerText="작성자" width="60" dataField="author"
				textAlign="center"/>
			<mx:DataGridColumn headerText="작성일" width="80" dataField="pubDate"/>
		</mx:columns>
	</mx:DataGrid>
	
</mx:Application>

위의 예제에서 resultHandler 메소드를 잠시 보시면 위에서 말한 item 노드들을 찾아서 DataGrid 에 넣어주는 구문을 보실 수 있으십니다. 위의 rss의 트리구조와 같이 Object 로 파싱되어 있기 때문에 동일하게 rss.channel.item 이런 식으로 item 을 읽어오고 있습니다. (하단 이미지 참조)

Object로 받아온 데이터

XML 그대로 사용하기
Flex의 DataGrid, Tree 와 같이 자주 사용하는 컴포넌트의 설계적 특성상 Object 혹은 XML 중 어떤 하나가 더 빠르다는 이야기는 둘째 치고라도 위의 예제같은 경우는 XML을 그대로 사용하시는 것이 오히려 개발 시에는 편할 수도 있습니다. 왜냐하면 resultHandler에 구현된 로직때문인데, resultFormat 속성을 e4x로 설정하여 결과로 받은 XML은 E4X를 사용할 수 있기 때문입니다. E4X에 대한 설명은 생략하도록 하겠습니다. 간단한 E4X에 대한 예제는 여기를 참고하세요.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	width="600" height="300" fontSize="12" creationComplete="{init()}" 
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" 
	borderStyle="solid">
	
	<mx:HTTPService id="myHTTPService" useProxy="false" resultFormat="e4x"
		url="http://blog.flashplatform.kr/rss" 
		result="{resultHandler(event)}" fault="{faultHandler(event)}"/>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			private function init():void
			{
				myHTTPService.send();	
			}
			
			private function resultHandler(event:ResultEvent):void
			{
				var rssData:Object = event.result as XML;
				
				myDataGrid.dataProvider = rssData..item;
			}
			
			private function faultHandler(event:FaultEvent):void
			{
				Alert.show("RSS 를 가져오지 못했습니다.", "알림");	
			}
			
		]]>
	</mx:Script>
	<mx:Label x="10" y="10" text="RSS Reader" fontWeight="bold"/>
	<mx:Label y="10" text="resultFormat - e4x" right="10"/>
	<mx:DataGrid id="myDataGrid" left="10" right="10" bottom="10" top="35">
		<mx:columns>
			<mx:DataGridColumn headerText="제목" dataField="title"/>
			<mx:DataGridColumn headerText="작성자" width="60" dataField="author"
				textAlign="center"/>
			<mx:DataGridColumn headerText="작성일" width="80" dataField="pubDate"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

resultFormat 속성을 e4x로 설정하고, resultHandler 메소드에서 e4x를 사용하여 간단하게 item을 DataGrid에 넣도록 구현하였습니다. 위의 예제와 비교하여 보셔도 크게 다른 것은 느끼지 못하실 것입니다. 오히려 위의 예제에서는 item 노드를 찾기가 훨씬 쉽게 되어있죠.

XML로 받아온 데이터

개발자 마다 스타일에 따라 차이는 있겠습니다만, 저의 경우는 HTTPService를 이용하는 어플의 경우 XML을 기반으로 데이터를 운용하고 있고, RemoteObject의 경우에는 VO를 기준으로 데이터를 운용하고 있습니다. 아무래도 HTTPService를 사용하는 경우는 서버와 주고받는 데이터를 XML기반으로 움직이는 것이 E4X 때문에 무지 편한 느낌이라.. ;^)

다른 분들은 어떻게 데이터를 운용하시는지 저도 궁금하네요. ;^) 트랙백 부탁드립니다.

'Dev > Flex' 카테고리의 다른 글

[Flex] Flash Builder4 에서 ANT 개발환경 구축하기 (6)	2010.03.25
[Flex] ASDoc 생성 (in MXML) (11)	2010.03.09
[Flex] DataGrid과 DataGridColumn (15)	2009.06.23
[Flex] 팝업매니저를 이용한 사용자 정의 컴포넌트의 제작 (21)	2009.06.02
[Flex] Flex와 포카요케(ポカヨケ, Poka-yoke) (13)	2009.04.17

오랫만에 블로그로 인사드립니다. (__)

최근에 BMP 파일을 Flex 에서 읽어다 쓸 일이 생겼습니다.
Flex에서 이미지를 보여주는 컴포넌트인 Image 컴포넌트는 JPEG, PNG, GIF, SWF, SVG 같은 확장자만을 지원하고 BMP은 지원하고 있지 않기 때문에 BMP을 바로 넣을 수는 없습니다.(웹에서 BMP 를 쓰는 무식한 짓을 하면 안되겠죠.. ㅜㅜ 크기도 큰데 말입니다.) JPG 파일이면 Image 컴포넌트에서 바로 읽어다 쓸 수 있을텐데 참 난감합니다.

그럼 방법이 없느냐? 아닙니다.
어떤 멋진 분께서 BMPDecoder 를 만들어놓으셨네요! :) 이미 FlexComponent 카페에서도 공유되었던 내용입니다.

http://ntt.cc/2008/10/01/using-bmpdecoder-class-to-load-an-external-bmp-file-rle-compression-support.html

위의 블로그에 들어가보시면 간단한 사용법에 대해서 나오고 BMPDecoder 라이브러리도 보입니다. 다만 BMPDecoder.as 파일이 다운로드가 안되네요. BMPDecoder.as 파일은 '삶의 향기'라는 블로그에 간단한 예제와 함께 업로드 되어 있으니 다운받아 사용하시면 되겠습니다.

간단하게 FP10 에서 추가된 FileReference의 load() 메소드를 이용해, BMP파일을 불러다 Image 컴포넌트에 넣는 예제를 만들어봤습니다. 예제 구성은 위에서 소개해드린 '삶의 향기' 블로그에 소개된 코드를 이용했습니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="{init()}" 
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
	<mx:Script>
		<![CDATA[
			import mcmall.core.codec.BMPDecoder;
			private var fileRef:FileReference;
			private function init():void
			{
				fileRef = new FileReference();
				fileRef.addEventListener(Event.COMPLETE, completeHandler);
				fileRef.addEventListener(Event.SELECT, selectHandler);
			}
			
			private function bmpLoad():void
			{
				fileRef.browse([new FileFilter("BMP", "*.bmp")]);
			}

private function completeHandler(event:Event):void {
				var byteArray:ByteArray = new ByteArray();
				fileRef.data.readBytes(byteArray);

var bmpDecoder:BMPDecoder = new BMPDecoder();
				var tempBitmap:Bitmap = new Bitmap();
				tempBitmap.bitmapData = bmpDecoder.decode( byteArray ); 
				// byteArray BitmapData 로 디코딩 	
				
				imgBmp.load(tempBitmap);
				imgBmp.width = imgBmp.contentWidth;
				imgBmp.height = imgBmp.contentHeight;            
	        }
	
	        private function selectHandler(event:Event):void {
	            var file:FileReference = FileReference(event.target);
	            file.load();
	        }

]]>
	</mx:Script>
	<mx:VBox height="100%" width="100%" 
		horizontalCenter="0" verticalCenter="0" 
		verticalAlign="middle" horizontalAlign="center" >
		<mx:Image width="101" height="145" id="imgBmp"/>
		<mx:Button label="BMP Load" click="{bmpLoad()}"/>
	</mx:VBox>
</mx:Application>

package mcmall.core.codec { import flash.display.BitmapData; import flash.errors.IOError; import flash.utils.ByteArray; import flash.utils.Endian; public class BMPDecoder { //___________________________________________________________ const private const BITMAP_HEADER_TYPE:String = "BM"; private const BITMAP_FILE_HEADER_SIZE:int = 14; private const BITMAP_CORE_HEADER_SIZE:int = 12; private const BITMAP_INFO_HEADER_SIZE:int = 40; private const COMP_RGB:int = 0; private const COMP_RLE8:int = 1; private const COMP_RLE4:int = 2; private const COMP_BITFIELDS:int = 3; private const BIT1:int = 1; private const BIT4:int = 4; private const BIT8:int = 8; private const BIT16:int = 16; private const BIT24:int = 24; private const BIT32:int = 32; //___________________________________________________________ vars private var bytes:ByteArray; private var palette:Array; private var bd:BitmapData; private var nFileSize:uint; private var nReserved1:uint; private var nReserved2:uint; private var nOffbits:uint; private var nInfoSize:uint; private var nWidth:int; private var nHeight:int; private var nPlains:uint; private var nBitsPerPixel:uint; private var nCompression:uint; private var nSizeImage:uint; private var nXPixPerMeter:int; private var nYPixPerMeter:int; private var nColorUsed:uint; private var nColorImportant:uint; private var nRMask:uint; private var nGMask:uint; private var nBMask:uint; private var nRPos:uint; private var nGPos:uint; private var nBPos:uint; private var nRMax:uint; private var nGMax:uint; private var nBMax:uint; /** * Constructor */ public function BMPDecoder() { nRPos = 0; nGPos = 0; nBPos = 0; } /** * decoder * * @param BMP file ByteArray */ public function decode(data:ByteArray):BitmapData { bytes = data; bytes.endian = Endian.LITTLE_ENDIAN; bytes.position = 0; readFileHeader(); nInfoSize = bytes.readUnsignedInt(); switch (nInfoSize) { case BITMAP_CORE_HEADER_SIZE: readCoreHeader(); break; case BITMAP_INFO_HEADER_SIZE: readInfoHeader(); break; default: readExtendedInfoHeader(); break; } bd = new BitmapData(nWidth, nHeight); switch (nBitsPerPixel) { case BIT1: readColorPalette(); decode1BitBMP(); break; case BIT4: readColorPalette(); if (nCompression == COMP_RLE4) { decode4bitRLE(); } else { decode4BitBMP(); } break; case BIT8: readColorPalette(); if (nCompression == COMP_RLE8) { decode8BitRLE(); } else { decode8BitBMP(); } break; case BIT16: readBitFields(); checkColorMask(); decode16BitBMP(); break; case BIT24: decode24BitBMP(); break; case BIT32: readBitFields(); checkColorMask(); decode32BitBMP(); break; default: throw new VerifyError("invalid bits per pixel : " + nBitsPerPixel); } return bd; } /** * read BITMAP FILE HEADER */ private function readFileHeader():void { var fileHeader:ByteArray = new ByteArray(); fileHeader.endian = Endian.LITTLE_ENDIAN; try { bytes.readBytes(fileHeader, 0, BITMAP_FILE_HEADER_SIZE); if (fileHeader.readUTFBytes(2) != BITMAP_HEADER_TYPE) { throw new VerifyError("invalid bitmap header type"); } nFileSize = fileHeader.readUnsignedInt(); nReserved1 = fileHeader.readUnsignedShort(); nReserved2 = fileHeader.readUnsignedShort(); nOffbits = fileHeader.readUnsignedInt(); } catch (e:IOError) { throw new VerifyError("invalid file header"); } } /** * read BITMAP CORE HEADER */ private function readCoreHeader():void { var coreHeader:ByteArray = new ByteArray(); coreHeader.endian = Endian.LITTLE_ENDIAN; try { bytes.readBytes(coreHeader, 0, BITMAP_CORE_HEADER_SIZE - 4); nWidth = coreHeader.readShort(); nHeight = coreHeader.readShort(); nPlains = coreHeader.readUnsignedShort(); nBitsPerPixel = coreHeader.readUnsignedShort(); } catch (e:IOError) { throw new VerifyError("invalid core header"); } } /** * read BITMAP INFO HEADER */ private function readInfoHeader():void { var infoHeader:ByteArray = new ByteArray(); infoHeader.endian = Endian.LITTLE_ENDIAN; try { bytes.readBytes(infoHeader, 0, BITMAP_INFO_HEADER_SIZE - 4); nWidth = infoHeader.readInt(); nHeight = infoHeader.readInt(); nPlains = infoHeader.readUnsignedShort(); nBitsPerPixel = infoHeader.readUnsignedShort(); nCompression = infoHeader.readUnsignedInt(); nSizeImage = infoHeader.readUnsignedInt(); nXPixPerMeter = infoHeader.readInt(); nYPixPerMeter = infoHeader.readInt(); nColorUsed = infoHeader.readUnsignedInt(); nColorImportant = infoHeader.readUnsignedInt(); } catch (e:IOError) { throw new VerifyError("invalid info header"); } } /** * read the extend info of BITMAP INFO HEADER */ private function readExtendedInfoHeader():void { var infoHeader:ByteArray = new ByteArray(); infoHeader.endian = Endian.LITTLE_ENDIAN; try { bytes.readBytes(infoHeader, 0, nInfoSize - 4); nWidth = infoHeader.readInt(); nHeight = infoHeader.readInt(); nPlains = infoHeader.readUnsignedShort(); nBitsPerPixel = infoHeader.readUnsignedShort(); nCompression = infoHeader.readUnsignedInt(); nSizeImage = infoHeader.readUnsignedInt(); nXPixPerMeter = infoHeader.readInt(); nYPixPerMeter = infoHeader.readInt(); nColorUsed = infoHeader.readUnsignedInt(); nColorImportant = infoHeader.readUnsignedInt(); if (infoHeader.bytesAvailable >= 4) nRMask = infoHeader.readUnsignedInt(); if (infoHeader.bytesAvailable >= 4) nGMask = infoHeader.readUnsignedInt(); if (infoHeader.bytesAvailable >= 4) nBMask = infoHeader.readUnsignedInt(); } catch (e:IOError) { throw new VerifyError("invalid info header"); } } /** * read bitfields */ private function readBitFields():void { if (nCompression == COMP_RGB) { if (nBitsPerPixel == BIT16) { // RGB555 nRMask = 0x00007c00; nGMask = 0x000003e0; nBMask = 0x0000001f; } else { //RGB888; nRMask = 0x00ff0000; nGMask = 0x0000ff00; nBMask = 0x000000ff; } } else if ((nCompression == COMP_BITFIELDS) && (nInfoSize < 52)) { try { nRMask = bytes.readUnsignedInt(); nGMask = bytes.readUnsignedInt(); nBMask = bytes.readUnsignedInt(); } catch (e:IOError) { throw new VerifyError("invalid bit fields"); } } } /** * read color palette */ private function readColorPalette():void { var i:int; var len:int = (nColorUsed > 0) ? nColorUsed : Math.pow(2, nBitsPerPixel); palette = new Array(len); for (i = 0; i < len; ++i) { palette[i] = bytes.readUnsignedInt(); } } /** * decode 1 bit BMP */ private function decode1BitBMP():void { var x:int; var y:int; var i:int; var col:int; var buf:ByteArray = new ByteArray(); var line:int = nWidth / 8; if (line % 4 > 0) { line = ((line / 4 | 0) + 1) * 4; } try { for (y = nHeight - 1; y >= 0; --y) { buf.length = 0; bytes.readBytes(buf, 0, line); for (x = 0; x < nWidth; x += 8) { col = buf.readUnsignedByte(); for (i = 0; i < 8; ++i) { bd.setPixel(x + i, y, palette[col >> (7 - i) & 0x01]); } } } } catch (e:IOError) { throw new VerifyError("invalid image data"); } } /** * decode 4bit RLE */ private function decode4bitRLE():void { var x:int; var y:int; var i:int; var n:int; var col:int; var data:uint; var buf:ByteArray = new ByteArray(); try { for (y = nHeight - 1; y >= 0; --y) { buf.length = 0; while (bytes.bytesAvailable > 0) { n = bytes.readUnsignedByte(); if (n > 0) { // encode data data = bytes.readUnsignedByte(); for (i = 0; i < n / 2; ++i) { buf.writeByte(data); } } else { n = bytes.readUnsignedByte(); if (n > 0) { // abs mode bytes.readBytes(buf, buf.length, n / 2); buf.position += n / 2; if (n / 2 + 1 >> 1 << 1 != n / 2) { bytes.readUnsignedByte(); } } else { // EOL break; } } } buf.position = 0; for (x = 0; x < nWidth; x += 2) { col = buf.readUnsignedByte(); bd.setPixel(x, y, palette[col >> 4]); bd.setPixel(x + 1, y, palette[col & 0x0f]); } } } catch (e:IOError) { throw new VerifyError("invalid image data"); } } /** * decode 4bit (no Compression) */ private function decode4BitBMP():void { var x:int; var y:int; var i:int; var col:int; var buf:ByteArray = new ByteArray(); var line:int = nWidth / 2; if (line % 4 > 0) { line = ((line / 4 | 0) + 1) * 4; } try { for (y = nHeight - 1; y >= 0; --y) { buf.length = 0; bytes.readBytes(buf, 0, line); for (x = 0; x < nWidth; x += 2) { col = buf.readUnsignedByte(); bd.setPixel(x, y, palette[col >> 4]); bd.setPixel(x + 1, y, palette[col & 0x0f]); } } } catch (e:IOError) { throw new VerifyError("invalid image data"); } } /** * decode 8bit( RLE Compression ) */ private function decode8BitRLE():void { var x:int; var y:int; var i:int; var n:int; var col:int; var data:uint; var buf:ByteArray = new ByteArray(); try { for (y = nHeight - 1; y >= 0; --y) { buf.length = 0; while (bytes.bytesAvailable > 0) { n = bytes.readUnsignedByte(); if (n > 0) { // encode data data = bytes.readUnsignedByte(); for (i = 0; i < n; ++i) { buf.writeByte(data); } } else { n = bytes.readUnsignedByte(); if (n > 0) { // abs mode data bytes.readBytes(buf, buf.length, n); buf.position += n; if (n + 1 >> 1 << 1 != n) { bytes.readUnsignedByte(); } } else { // EOL break; } } } buf.position = 0; for (x = 0; x < nWidth; ++x) { bd.setPixel(x, y, palette[buf.readUnsignedByte()]); } } } catch (e:IOError) { throw new VerifyError("invalid image data"); } } /** * decode 8bit(no Compression) */ private function decode8BitBMP():void { var x:int; var y:int; var i:int; var col:int; var buf:ByteArray = new ByteArray(); var line:int = nWidth; if (line % 4 > 0) { line = ((line / 4 | 0) + 1) * 4; } try { for (y = nHeight - 1; y >= 0; --y) { buf.length = 0; bytes.readBytes(buf, 0, line); for (x = 0; x < nWidth; ++x) { bd.setPixel(x, y, palette[buf.readUnsignedByte()]); } } } catch (e:IOError) { throw new VerifyError("invalid image data"); } } /** * decode 16bit */ private function decode16BitBMP():void { var x:int; var y:int; var col:int; try { for (y = nHeight - 1; y >= 0; --y) { for (x = 0; x < nWidth; ++x) { col = bytes.readUnsignedShort(); bd.setPixel(x, y, (((col & nRMask) >> nRPos) * 0xff / nRMax << 16) + (((col & nGMask) >> nGPos) * 0xff / nGMax << 8) + (((col & nBMask) >> nBPos) * 0xff / nBMax << 0)); } } } catch (e:IOError) { throw new VerifyError("invalid image data"); } } /** * decode 24bit BMP */ private function decode24BitBMP():void { var x:int; var y:int; var col:int; var buf:ByteArray = new ByteArray(); var line:int = nWidth * 3; if (line % 4 > 0) { line = ((line / 4 | 0) + 1) * 4; } try { for (y = nHeight - 1; y >= 0; --y) { buf.length = 0; bytes.readBytes(buf, 0, line); for (x = 0; x < nWidth; ++x) { bd.setPixel(x, y, buf.readUnsignedByte() + (buf.readUnsignedByte() << 8) + (buf.readUnsignedByte() << 16)); } } } catch (e:IOError) { throw new VerifyError("invalid image data"); } } /** * decode 32bit BMP */ private function decode32BitBMP():void { var x:int; var y:int; var col:int; try { for (y = nHeight - 1; y >= 0; --y) { for (x = 0; x < nWidth; ++x) { col = bytes.readUnsignedInt(); bd.setPixel(x, y, (((col & nRMask) >> nRPos) * 0xff / nRMax << 16) + (((col & nGMask) >> nGPos) * 0xff / nGMax << 8) + (((col & nBMask) >> nBPos) * 0xff / nBMax << 0)); } } } catch (e:IOError) { throw new VerifyError("invalid image data"); } } /** * check color mask */ private function checkColorMask():void { if ((nRMask & nGMask) | (nGMask & nBMask) | (nBMask & nRMask)) { throw new VerifyError("invalid bit fields"); } while (((nRMask >> nRPos) & 0x00000001) == 0) { nRPos++; } while (((nGMask >> nGPos) & 0x00000001) == 0) { nGPos++; } while (((nBMask >> nBPos) & 0x00000001) == 0) { nBPos++; } nRMax = nRMask >> nRPos; nGMax = nGMask >> nGPos; nBMax = nBMask >> nBPos; } /** * print information */ public function traceInfo():void { trace("---- FILE HEADER ----"); trace("nFileSize: " + nFileSize); trace("nReserved1: " + nReserved1); trace("nReserved2: " + nReserved2); trace("nOffbits: " + nOffbits); trace("---- INFO HEADER ----"); trace("nWidth: " + nWidth); trace("nHeight: " + nHeight); trace("nPlains: " + nPlains); trace("nBitsPerPixel: " + nBitsPerPixel); if (nInfoSize >= 40) { trace("nCompression: " + nCompression); trace("nSizeImage: " + nSizeImage); trace("nXPixPerMeter: " + nXPixPerMeter); trace("nYPixPerMeter: " + nYPixPerMeter); trace("nColorUsed: " + nColorUsed); trace("nColorUsed: " + nColorImportant); } if (nInfoSize >= 52) { trace("nRMask: " + nRMask.toString(2)); trace("nGMask: " + nGMask.toString(2)); trace("nBMask: " + nBMask.toString(2)); } } } }

BMP 파일을 선택하시면 Image 컴포넌트에 깔끔하게 출력되는 것을 보실 수 있습니다.

하지만 다음과 같은 버그가 존재합니다.

170픽셀 16bit BMP

171픽셀 16bit BMP 파일

위의 이미지에서 볼수 있는 것 처럼 BMP을 로드했을 때 이미지가 뒤틀려버리는 버그가 존재합니다.
왜 그럴까 한참을 고민했는데, 저희 팀장님이 힌트를 주시더군요. '윈도우어플에서도 비트맵 크기가 홀수일 경우 이미지가 저렇게 깨진다'고 말이죠. 실제로 테스트해보니 위와 같이 16bit이고 이미지의 너비가 홀수일 경우 위 처럼 이미지가 뒤틀려버리는 버그가 있습니다. (24bit, 32bit에서는 괜찮더군요)

이 버그에 해결책으로 저는 아래와 같이 decode() 메소드에서 이미지 너비를 결정해주는 로직 밑에 너비가 홀수일경우 강제로 1픽셀 늘리는 방법을 사용했습니다. 더 좋은 방법이 있을 것 같은데, 아시는 분은 알려주세요 :)

그럼 좋은 하루되세요!

예제파일 다운로드 :

invalid-file

'Dev > ActionScript' 카테고리의 다른 글

[ActionScript] Array를 왜 Hash로 쓰나요? Object 놔두고. (21)	2009.07.01
[Flex&Flash] useCodePage = true 가 한글 깨짐 방지 코드라고? (26)	2009.03.27
[Flex] with 를 아십니까? (12)	2008.06.09
[Flex] int나 uint보다 Number를 쓰세요! (29)	2008.06.05
[Flex] for문 쓸때 조건문에 유의하자. (23)	2008.05.09

안녕하세요? 검쉰입니다.

제가 Flex를 처음 접하고, '이거 정말 멋지다!' 라고 생각을 했습니다. 그 뒤로 이어지는 생각은 '이거 한글 입력은 왜 이리 느려?'. 몇 년이 지난 아직도 한글 입력은 느리기만 한데, 언제 수정될지는 아무도 모른다죠. 비 영어권의 설움이라고 할까요? 과학적이고 독창적인 자랑스런 한글을 쓰는게 죄(?)가 되는 이상한 상황.

이런 상황을 헤쳐나가고자 지난 1월 이희덕님의 제안으로 'Flash Platform 한글문제 공동대응팀'이 생겼습니다. (짝짝짝)
그간 오프모임을 진행하면서 팀원간 의견도 나누고, 최근 Flex SDK 3.2 + FP 10 에서의 한글 입력문제가 해결되는 기쁨을 맛보기도 하였습니다.

이제 다른 많은 Flash Platform 개발자 분들과 만나, 한글문제와 개발 노하우를 이야기해보고자 합니다.

＊행사 개요

   날짜 : 2009년 4월 11일 (토)
   장소 : 숭실대학교 벤처관 3층 대강의실
   시간 : 오후 2시 ~ 6시
   주최 : Flash Platform 한글문제 공동대응팀
   주관 : 숭실대학교 글로벌미디어학부
   후원

＊Agenda

   14:00 ~ 14:10 : 학교 시설 사용과 관련된 안내 (이희덕)
   14:10 ~ 14:30 : 한글 대응팀 소개 및 기조연설 (이희덕)
   14:30 ~ 15:00 : Flash Platform 게임개발 노하우 (이정웅)
   15:00 ~ 15:30 : FlarToolKit으로 구현하는 증강 현실 (옥상훈)
   15:30 ~ 16:00 : Flash Platform 한글문제 (이희덕)
   16:00 ~ 16:40 : 토론의 장 (대응팀 전원)
   16:40 ~ 17:20 : 잡부 Flex 개발자를 위한 Flex 스킨 (김학영)
   17:20 ~ 17:50 : Creating Visual Experiences with Flex (이준하)
   17:50 ~ 18:00 : 정리 및 폐회

행사 참석 신청 및 자세한 소개는 온오프믹스 를 통해 신청해주시면 감사하겠습니다. ;)
많은 참석 부탁드립니다 !!!
함께해요~ ㅎㅎ

저작자표시 비영리

'Dev > 행사 이모저모' 카테고리의 다른 글

[후기] 파워플(Powerfl) 킥오프 모임 (2)	2010.04.28
[Flex&Flash] 사진으로 보는 Flash Platform 한글문제 공동대응팀 해오름 모임 (48)	2009.04.12
[Flex] RIA Camp 2nd in Seoul 에 참석하고 왔습니다. (18)	2008.09.30
제 1회 Flex Camp에 다녀왔습니다. ;) (38)	2008.07.13
Flex 3와 AIR 런칭 행사인 Adobe RIA World 2008이 열립니다! (6)	2008.02.28

안녕하세요! 검쉰입니다.

요즘 전혀 블로그에 글을 못쓰고 있습니다. 반성중이예요. ㅜㅜ
회사에서 하고 있는 프로젝트가 이제 막바지에 들어서면서 요구사항도 수정되고 정신이 없네요 ;-( 아마도 12월까지는 쭈욱~ 바쁠듯 합니다. 그래도 이제 좀 한숨 돌렸습니다. 게다가 덕분에 여러분께 알려드릴만한 것들을 또 알게되었네요. 좋은 글꺼리가 생겼습니다.

요즘은 Flex4U 라는 카페에서 ActionScript 3.0 강좌를 진행하고 있습니다.
지난달 10월 28일부터 매주 화,목 밤 11시에 저와 영구기님이 각자 화, 목에 강좌를 진행하고 있답니다.
교재는 ActionScript 3.0 Programming 을 사용하고, 영구기님은 Display, 저는 Non-Display 강의를 맡고 있어요.
가끔 대타로 공룡님께서 해주시기로 했고요. ;)
이제 2주째 강의가 진행되었는데, 생각보다 준비해야 될 것이 많네요.
몸이 피곤한 날은 무슨 말한건지도 잘 모르겠고 ^^
강의 들어주시는 분들이 이쁘게 봐주셔서 재미있게 강의 중입니다.

관심있는 모든 분들이 다 들으셨으면 좋겠습니다만, 서버 최대 접속자 문제로 모든 분이 참여하실 수는 없고, 대신 아프리카로 동일시간에 중계중이니 관심있으신 분은 카페에 가입하셔서 접속 관련 정보 얻으셔서 같이 들으시면 좋겠습니다. ;) 이전 강의와 마찬가지로 현재 강의도 동영상으로 녹화하고 있으니 참고해보시는 것도 좋겠어요. (물론 일정 시간 후에 공개됩니다. ㅎ)

강좌때문에 고생해주시는 많은 분들이 계십니다.

우선 이런 강좌를 계획하시고 진행해주시며 고생하시는 공룡(유성용)님
항상 뒤에서 버팀목이 되시며 매번 늦은 시간까지 강좌 동영상 편집하여 주시는 그날(이정칠)님
강의 프로그램을 짜주신 류(류종택)님
같이 강의하신다고 고생 많으신 영구기(원영국)님 (결혼축하드려요!! - 내일 부산에서 결혼하신답니다-)
신입이라 바쁘실텐데, 매번 늦은 시간까지 동영상 녹화 백업해주시는 밥사마(박영관)님
여타 다른 많은 수강생 여러분 들~

좋은 분들 많이 알게되어 정말 영광입니다. ;) 앞으로도 잘 부탁드려요!

이건 잡담입니다만,
제 노트북 문제로 집에서 강의진행이 불가하여, 이정칠님 회사에서 강의를 매주 하고 있답니다.
매주 나가는 택시비가 아까워 자전거를 한대 사려고 하는데, 옆에 있는 스트라이다(Strida)라는 녀석이 맘에 들더군요. 그런데 가격이 가격인지라...;

접이식이 꼭 필요(골목많은 동네에 사는 처지라, 집안에 들여놓지 않으면 잃어버리기 쉽상)해서 찾던 도중에 찾은건데, 너무 비싸요.. ㄷㄷ 누구 저한테 중고라도 파실 분~~ ㅋ
아니면 유사한 것들이라도 사야되나... (가격이 절반쯤 하더군요 ㅋ)
다른 자전거도 봤는데, 눈에 들어오는 것들은 엄청 비싸더군요.....
브롬튼(brompton) 이라는 것은 더 비싸더란....;

아무튼 이런 것에도 고민중입니다. ㅎㅎ

회사 프로젝트와 강좌, 기타 제가 스스로 계획한 일들 떄문에 몸도 마음도 힘듭니다만, 그래도 열심히 해야겠죠?
다들 좋은 주말 보내시고(저는 좀 쉬고), 곧 좋은 포스트으로 찾아뵙겠습니다. ;)

'주절주절' 카테고리의 다른 글

드디어 ActionScript 3.0 강의를 마쳤습니다. (16)	2009.01.15
아이팟터치 2세대가 생겼습니다! (17)	2008.11.17
동원훈련 다녀오겠습니다아- (22)	2008.09.22
Flex ACE 자격증 도착! (28)	2008.09.11
Adobe Flex 2 Developer 시험을 봤습니다! (44)	2008.08.23

단도직입적으로 말씀드리자면, new 키워드는 비용이 비쌉니다. 많은 리소스를 사용하게 된다는 말이죠. 물론 안쓸 수야 없죠. 새로운 객체를 생성하려면, 당연히 써야됩니다. 하지만, 사용하게 되면 그만큼의 연산과 메모리의 차지는 어쩔 수가 없습니다. 이런 문제들로 인해 좀 더 효율적인 객체의 사용을 위해 객체 풀(Object Pool) 을 구성하여 사용한다던가 하는 방법을 고민하게 되죠.
본 포스트에서는 객체 풀에 대해서 설명하지는 않겠습니다. 위에 링크로 걸어놓은 영구기님의 포스트를 참고하시도록 하시고요, 이번 포스트에서 제가 설명하고자 하는 것은 new 키워드를 사용하지 않고서도 사용할 수 있는 타입들에 대한 사용방법입니다.

데이터형태는 아래와 같이 2가지의 데이터형이 존재합니다.

Primitive Data Type : Boolean, int, uint, Null, Number, String, void
Complex Data Type : Object, Array, Date, Error, Function, RegExp, XML, XMLList

기본적인 데이터 형태(Primitive Date Type)의 변수선언시에는 물론 new 키워드는 사용하지 않습니다. 하지만 사용하지 못한다는 것은 아닙니다.
문자열을 저장할 때에 String 를 사용하게 됩니다. 이 String 형 변수는 다음과 같이 선언하게 됩니다.

하지만 아래와 같이 new String() 이라고 할 수도 있습니다.

int, uint, Number, Boolean 도 마찬가지로 new 키워드를 이용하여 변수에 할당해줄 수 있습니다. 허나 그렇게 사용하지는 마십시오. 기본적인 데이터 형태의 변수는 new 키워드를 사용하지 않아도 메모리가 할당되게 됩니다. 게다가 더 빠르고 간편합니다.

그래도 확인하고 넘어가는 차원에서 Number 형태의 변수의 할당에 대해 살짝 실험해보도록 하겠습니다. 아래의 코드를 보시면 Number 변수를 할당시에 new Number()를 사용하는 것과 직접 값을 입력하는 것에 대해서 속도를 비교해보고 있습니다. new 키워드를 사용하지 않는 것이 더 간편합니다. 그 아래에는 실제 결과물입니다. 테스트 버튼을 클릭하셔서 테스트 해보시기 바랍니다.

그렇다면 보다 복잡한 데이터 형태(Complex Data Type)의 변수를 선언시에는 new 키워드를 어떻게 쓰지 말라는 말일까요?

가장 먼저 많이 사용하는 Array에 대해서 말씀드려보겠습니다. 우선 Array를 선언시에 아래와 같이 선언할 수 있습니다.

이전 포스트에 살짝 언급하였습니다만, Array의 경우는 [] 를 이용하여 새로운 Array를 할당할 수 있습니다.

이와 비슷하게 Object를 할당할 때에도 new Object() 대신에 {} 를 이용하여 새로운 Object 할당이 가능합니다.
아래와 같은 선언을 다른 예제 소스코드에서 흔히 보셨을겁니다.

위에서 설명드린 것과 같이 Array 를 할당시에 [] 를 이용하고 Array 내부의 값을 {}를 이용하여 Object 형태로 정의하였습니다.
만약 [], {} 없이 선언하려고 한다면 아래와 같이 하여야할 것입니다. (물론 이렇게 사용할 일은 거의 없죠. 매우 극단적인 예랄까요? )

RegExp 같은 경우도 new 키워드를 사용하지 않고 선언 가능합니다.

XML 도 마찬가지입니다. 아래와 같이 흔히 사용하시고 있죠?
2번째 라인에 있는 것처럼 사용하실 일은 없을 듯합니다. 물론 String 형태의 XML 데이터라면 XML 로 변환하려면 2번째 라인처럼 해야겠죠.

마지막으로 위에서 말씀드린 Array와 Object 의 new 키워드 사용 유무에 대한 속도차 테스트를 해보고 마무리 짓겠습니다.
(RegExp 는 속도차가 거의 없어서 생략하였고, XML은 쓸일이 없을 것 같아 생략하였습니다. ㅎ)
아래는 Array를 테스트한 코드입니다.

아래는 Object를 테스트한 코드입니다.

뭐 결론은 new Array() 대신에 [], new Object() 대신에 {} 를 사용하자는 것입니다. ;)
긴 글 읽어주셔서 감사합니다. ;) 다 읽으신 후에는 덧글 하나 써주시는 센스!!

참고자료 :
객체 풀[Object pool]을 이용해 보자. - 영구기님 블로그
ActionScript3.0 너는 누구냐? - 엄진영님 Flex 챔피언 블로그

'Dev > Flex' 카테고리의 다른 글

[Flex] Flex와 포카요케(ポカヨケ, Poka-yoke) (13)	2009.04.17
[Flex] 캐리지리턴(\r)의 처리 (22)	2008.12.03
[리뷰] Adobe Flex 공식사이트 기술문서 'Flex와 Flash간의 파라미터 주고 받기' (10)	2008.09.07
[Flex] MXML은 어떻게 AS로 변환되는가? (Event Handler 에 파라미터 넣기) (9)	2008.08.07
[Flex] TitleWindow를 이용한 팝업(Popup)에 대한 간단한 설명과 Tip (28)	2008.07.30

TitleWindow 입니다 ;)

Flex에서 팝업용도로 많이 쓰는 TitleWindow이라는 클래스가 있습니다.
TitleWindow 의 구현코드를 보신 분은 아시겠지만 TitleWindow 에는 그렇게 많은 코드가 있지는 않습니다. (오히려 뭐가 이렇게 없어! 할 정도) 저도 상당히 의아했습니다. 주석을 빼면 정말 몇줄 안되는 코드였기 떄문이죠.

그 이유는 TitleWindow는 Panel을 상속해서 만들었는데 실제 TitleWindow에서 필요한 닫기버튼은 이미 Panel에서 구현되어 있고 단지 보이지만 않는 상태이기 때문입니다. TitleWindow에서는 showCloseButton 라는 get/set 메소드로 닫기 버튼의 보여지는 유무만 설정하면 됩니다.

그런데 여기서 좀 재미있는 부분이 있습니다. Panel에서 닫기 버튼이 구현되어 있다면 Panel을 상속받으면 그 닫기버튼도 사용할 수 있을까요? 그냥은 안됩니다. 왜냐하면 닫기버튼이 보이거나 안보이도록 설정하는 변수인 _showCloseButton이 mx_internal 로 선언되어 있기 때문입니다.

그럼 이걸 어떻게 사용하면 될까요? TitleWindow의 showCloseButton 라는 get/set 메소드 를 보면 해답을 찾을 수 있습니다.

// mx.containers.TitleWindow 내부 구현 소스
    
    //----------------------------------
    //  showCloseButton
    //----------------------------------

[Inspectable(category="General")]

/**
     *  Whether to display a Close button in the TitleWindow container.
     *  The default value is <code>false</code>.
     *  Set it to <code>true</code> to display the Close button.
     *  Selecting the Close button generates a <code>close</code> event,
     *  but does not close the TitleWindow container.
     *  You must write a handler for the <code>close</code> event
     *  and close the TitleWindow from within it.
     *
     *  @default false
     *
     *  @tiptext If true, the close button is displayed
     *  @helpid 3986
     */
    public function get showCloseButton():Boolean
    {
        return mx_internal::_showCloseButton;
    }

/**
     *  @private
     */
    public function set showCloseButton(value:Boolean):void
    {
        mx_internal::_showCloseButton = value;
    }

showCloseButton 속성의 코드가 좀 특이하죠?
TitleWindow 의 코드 상단에

use namespace mx_internal;

이라고 작성되어 있습니다. mx_internal 이라는 namespace를 사용하겠다는 것이지요. 이렇게 설정되면 showColoseButton 속성과 같이 mx_internal로 선언된 _showCloseButtion 변수에 접근하시면 됩니다.

return mx_internal::_showCloseButton; //이렇게 해도 되고 또는,
return _showCloseButton; //이렇게만 해도 되긴 합니다

그렇다면 TitleWindow 는 Panel을 상속받았으니 그렇다 치고, 외부에서 Panel 객체의 _showCloseButton 변수를 바로 접근할 수는 없을까요? 안된다고요? 그럼 안되는데요! 안되면 제가 이 글을 쓸 이유가 없어집니다. ;) 바로 아래와 같이 가능합니다.

그래도 화면에 보이는 예제가 하나 필요하겠죠? 이번에는 TextArea로 예제를 하나 만들어보겠습니다.
(loveDev 블로그에서 아이디어 얻었습니다)
Flex에서 한글을 입력시에는 버벅이는 문제(천천히 타이핑 되는 문제)가 있었습니다. 이 문제를 해결하기 위해서 frame rate 를 올린다던가 하는 방법을 사용했었는데, Adobe Flex 공식사이트에 블로그에 올라온 글에서 어이없게도(?) TextField 의 alwaysShowSelection 속성을 true로 바꾸어주면 해결된다는 것이었습니다. 왜 그런지는 저도 정확하게는 잘 모르겠고... ^^;

아 무튼 Flex에서 한글 입력을 받는 TextInput, TextArea 등도 내부적으로 TextField를 상속한 UITextField 를 사용하고 있습니다. 그렇다면 이 UITextField 를 받아와야겠습니다만, 이게 또 골치아픕니다. TextArea나 TextInput 은 이 UITextField가 protected로 선언되어 있기때문에 외부에서 접근하는 것이 불가능합니다. 그래서 상속을 받아서 접근하던지, 아니면 여기와 같이 해결을 해야됩니다.

그러나 다행이도 이 TextField를 반환해주는 getTextField()라는 메소드가 존재합니다.

그렇다면 UITextField에 직접 접근하여 텍스트를 입력하려면 getTextField() 메소드를 사용하여야 할텐데요, 위의 코드에서 보셨다시피 mx_internal 로 선언되어있습니다. 이럴때는 위에서 설명드린데로 하면 되겠죠?

이 getTextField를 이용하여 TextArea에 한글입력을 개선한 예제입니다.
아래에 있는 TextArea에만 alwaysShowSelection의 값을 true로 설정을 해주었습니다. 위 아래 TextArea에 한글을 입력해보세요. ;)

유용한 정보 되셨길 바랍니다. ;) (오창훈님 감사합니다. ㅎ)

--- 파폭3에서 예제에 한글 입력이 안되네요.. ㅡㅡ; 왜 이러지;; 티스토리에 swf 업로드 하면 object 태그는 생성되는데 embed 태그가 없네요. 이래서 한글 입력이 안되었군요. ㅡㅡ; wmode 속성이 window 일때는 한글 입력이 됩니다. opaque나 transparent 속성은 한글 입력이 안됨..;

'Dev > Flex' 카테고리의 다른 글

[Flex] Event 메타태그 (22)	2008.07.08
[Flex] 주민등록번호 Validator (18)	2008.07.02
[Flex] 더블클릭(doubleClick)을 사용해보자. (6)	2008.06.03
[Flex] XML을 String 으로 만들기 (15)	2008.05.28
[Flex] Mask 를 이용한 둥근 컴포넌트 만들기 (19)	2008.05.13

'Dev > Flex' 카테고리의 다른 글

'Dev > ActionScript' 카테고리의 다른 글

'Dev > 행사 이모저모' 카테고리의 다른 글

'주절주절' 카테고리의 다른 글

'Dev > Flex' 카테고리의 다른 글

'Dev > Flex' 카테고리의 다른 글

티스토리툴바