Eirene's Blog

AIR 한글 텍스트 삭제 버그 수정 - 2

article id #47
categorized under Development/AIR & written by eirene

일단 코드부터 보기로 하자

}
			private var prevTxt:String="";
			private var backSpaceMode:Boolean = true;
			private var allowDeletion:Boolean = true;
			
			private function upHandler(event:KeyboardEvent):void {
				var str:String = event.currentTarget.text;
				if (event.keyCode ==8 && prevTxt == str) {
					if (allowDeletion) {
						event.currentTarget.text = str.substr(0,txt.selectionEndIndex)
                                          + str.substr(txt.selectionEndIndex+1);
						allowDeletion = false;
					}
				}
				prevTxt = event.currentTarget.text;  
				backSpaceMode = false;
			}
			private function downHandler(event:KeyboardEvent):void {
				if (event.keyCode==8) {
					if (backSpaceMode) {
						//trace(event.currentTarget.text);
						backSpaceMode = false;
						event.currentTarget.setSelection(event.currentTarget.selectionEndIndex+1,
                                            event.currentTarget.selectionEndIndex+1);
					}
					allowDeletion = false;
				} else {
					backSpaceMode = true;
					allowDeletion = true;
				}
			}
		]]>
	</mx:Script>
	
	<mx:TextInput id="txt" fontSize="12" />
</mx:WindowedApplication>

그렇다.. 저번 보다 코드가 엄청 복잡해 졌다.

사실 말이야 바른 말이지,

뭔가를 제대로 하려면

코드는 대개 복잡해 지기 마련이다.

문제를 요약하면 이렇다.

사실, TextField의 keyDown 이벤트는

실제 보이는 한글 글자를 반영해 주지 못한다.

실제 보이는 한글 글자를 반영해 주는 건

keyUp 이벤트이다.

따라서, 만일 사용자가 희덕님의 지적대로

키보드를 꾹 누르고 안 떼면

keyUp 이벤트는 한 번도 발생하지 않고

이렇게 되면, 개발자는 정말 어둠속을 헤매야 한다.

실제 반영된 글자를 알 수 없는 상황에서 어둠속을 헤집고 다니듯이

글자를 처리해 줘야 하니까 말이다.

그래서 나는 이 문제를 도대체 어떻게 해결해야 할까 고민에 고민을 거듭했다.

그래서 내린 결론이

두 개의 플래그를 추가해서

하나는 keyDown 이벤트에 쓰고

다른 하나는 keyUp 이벤트에 쓰는 방식이다.

이렇게 하면 두 이벤트가 서로 충돌하지 않으면서

keyDown 이벤트는 keyDown 이벤트의 기능을 하게 되고

keyUp 이벤트는 keyUp 이벤트의 기능을 할 수 있게 된다.

keyUp 이벤트를 처리하는 upHandler는 사용자가 글자를 한 글자씩 백스페이스를 눌러서

제거할 때 사용된다.

반대로 keyDown 이벤트는 사용자가 백스페이스를 계속 누르고 있을 때 사용된다.

이 때 keyDown 이벤트에서는 단 한번만 selection을 우측으로 1 이동시킴으로써

글자를 지우기 시작한 지점 이후에 나오는 다른 글자들이

지워지지 않도록 했다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

REPLY AND TRACKBACK RSS http://joshy21.com/weblog/rss/response/47
REPLY AND TRACKBACK ATOM http://joshy21.com/weblog/atom/response/47

받은 트랙백이 없습니다, 댓글 6개가 달렸습니다.

TRACKBACK ADDRESS
http://joshy21.com/weblog/trackback/47

REPLY RSS http://joshy21.com/weblog/rss/comment/47
REPLY ATOM http://joshy21.com/weblog/atom/comment/47

우야꼬

wrote at 2008/12/03 13:54

링크 편집 답글

멋지십니다 -_-b

eirene

wrote at 2008/12/05 01:58

링크 편집

모 허접합니다.. ㅠㅠ

머드초보

wrote at 2009/01/09 01:07

링크 편집 답글

감사합니다 ^^
근데, styleName에 이름을 적으니 var tf:UITextField = txt.getChildAt(1) as UITextField; 부분에서 tf가 null이 되더라구요.
잘 몰라서-_- var tf:UITextField = UITextField(this.textField); 이렇게 하니까 되더라구요. 왜그럴까요? ㅠㅠ

eirene

wrote at 2009/01/10 10:01

링크 편집

으흐흐... 저건 그냥 말하자면, 러프하게 만든 코드이고, 실제 적용하실 때는 TextInput이나 TextArea 클래스를 상속해서 내부 UITextField를 직접 제어하시는 게 좋을 거 같습니다 ^^

머드초보

wrote at 2009/01/11 02:17

링크 편집

헉...바보같은 짓을 해버렸네요-_-;
사실 상속받았는데 이런 코드를 사용했네요-_-;
var tf:UITextField = UITextField(this.textField);
그냥 this.textField.addEventListener하면 되는데-_-;
감사합니다 ^^

eirene

wrote at 2009/01/13 13:47

링크 편집

var tf:UITextField = UITextField(this.textField);
일케 안해도 그냥 this.textField.addEventListener~
이런 식으로 하셔도 됩니다 ㅇㅇ

AIR 1.1 이후 한글 입력 버그 수정하기

article id #40
categorized under Development/AIR & written by eirene

문제점 : AIR 1.1 이후 한글 입력시 글자를 지우기 시작한 글자의 초성이 잘 삭제되지 않는 버그가 있다.

해결책 : 내부 TextField 객체에 접근해 커스텀 이벤트 핸들러를 추가하고, 특정 조건에 따라 초성을 강제 삭제하도록 한다.

이 문제는 꽤나 중요한 문제로 AIR 1.0 버전에서는 없던 문제이다.

나는 이 문제에 대해 어도비사에 공식적으로 버그 리포팅을 한 적이 있고,

나뿐 아니라, 이희덕님이나 다른 여러 한국 개발자들도 이 문제에 대한 버그 수정을

어도비에 요구한 것으로 알고 있다.

그런데, 방금 전에 플렉스로 잠깐 코딩을 해 보니,

이 문제는 의외로 간단하게 해결할 수 있다.

TextInput과 같은 컨트롤 내부에 있는 텍스트 필드에 접근해

이벤트 리스너를 추가하고, 특정 조건에 따라

초성을 제거하면 되기 때문이다.

이 때 특정 조건은 다음과 같다.

1. keyUp 이벤트가 일어날 때마다 이전 문자열을 전역 변수에 저장해 놓는다.

2. 백스페이스를 누른 상태에서 현재 텍스트필드의 텍스트와 이전 텍스트가 같은지

확인한다. 이 때 혹시 뒤에 공백이 있을 수 있으므로, 공백을 제거한 문자열을 비교한다.

3. 만일 두 텍스트가 같다면, 이것 참 이상한 일이다. 어떻게 두 문자가 같을 수 있을까? 분명히 백스페이스를 눌렀는데 말이다!!!

4. 이런 경우는 백 스페이를 누른 위치를 기준으로 앞의 문자열과 뒤의 문자열을 잘라 새로운 텍스트를 텍스트 필드의 텍스트로 집어 넣는다. 이렇게 하는 이유는, 꼭 마지막 글자에서 백스페이스를 눌러서 글자를 지우지 않더라도, 글자 중간에 커서를 이동해 글자 중간부터 쓰다가 다시 글자 중간부터 지울 경우도 대비하기 위해서이다.

5. 이제 버그 없는 텍스트 인풋 컨트롤을 맘껏 사용한다.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" creationComplete="completeHandler(event);">
	<mx:Script>
		<![CDATA[
			import mx.core.UITextField;
			import mx.events.FlexEvent;
			private function completeHandler(event:FlexEvent):void {
				var tf:UITextField = txt.getChildAt(1) as UITextField;
				tf.addEventListener(KeyboardEvent.KEY_UP,keyHandler,false,0,true);
				tf.addEventListener(KeyboardEvent.KEY_DOWN,keyHandler,false,0,true);
			}
			private var prevTxt:String="";
			private function keyHandler(event:KeyboardEvent):void {
				var str:String = event.currentTarget.text;
				if (txt.selectionEndIndex!=0) {
					if (event.keyCode ==8 && prevTxt == str) {
						event.currentTarget.text = str.substr(0,txt.selectionEndIndex)
                         + str.substr(txt.selectionEndIndex+1);
					}
				}
				prevTxt = event.currentTarget.text;  
				
			}
		]]>
	</mx:Script>
	
	<mx:TextInput id="txt" fontSize="12" />
</mx:WindowedApplication>

물론 실제로 현업에서는 이렇게 애플리케이션 단에서 코딩을 하면 안된다.

방법은 두 가지가 있을 수 있는데,

하나는 TextInput이나 TextArea를 상속해 이 클래스에 위와 같은 로직을

추가하는 방식이고,

다른 하나는 유틸리티 클래스를 만들어서 TextInput 등의 컨트롤을 입력받아

이런 로직을 처리하도록 하는 방식이다.

두 방식 중 어떤 것을 사용해도 상관은 없겠지만,

기왕이면 전자의 방식이 보다 OOP 설계에 맞다고 할 수 있다.

액션스크립트 원리 : TextInput, Text, Label, TextArea 등의 컨트롤은 모두 TextField 인스턴스에 대한 래퍼클래스들이다. 이들 인스턴스 안에 있는 TextField 인스턴스에 접근하면, 한글의 자,모음을 하나씩 제어하는 게 가능하다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

REPLY AND TRACKBACK RSS http://joshy21.com/weblog/rss/response/40
REPLY AND TRACKBACK ATOM http://joshy21.com/weblog/atom/response/40

트랙백 2개, 댓글 7개가 달렸습니다.

TRACKBACK ADDRESS
http://joshy21.com/weblog/trackback/40

tracked from 희희덕하며 웃어보자

AIR 한글 삭제문제 해결하기 x

tracked from 우야꼬의 Adobe RIA

[AIR] 한글 입력 버그에 대한 대안 x

REPLY RSS http://joshy21.com/weblog/rss/comment/40
REPLY ATOM http://joshy21.com/weblog/atom/comment/40

희희덕

wrote at 2008/11/27 16:31

링크 편집 답글

이야! 킹왕짱 에어레네님!
멋지십니다 ㅋㅋㅋ

eirene

wrote at 2008/11/27 20:11

링크 편집

저야 모 허접합니다 ㅇㅇ ㅠ

hong!

wrote at 2008/11/27 18:55

링크 편집 답글

좋은팁 감사합니다. ^^

eirene

wrote at 2008/11/27 20:12

링크 편집

맆흘 감사드립니다 (_ _)/

eirene

wrote at 2008/11/28 01:00

링크 편집 답글

살짝 버그가 있어서 수정했습니다.

생각해 보니, 공백을 제거한 문자열을 비교하는 건 맞지 않은 것 같고요 (이건 저의 판단 착오)

백스페이스 키를 계속 누르고 있을 경우를 대비해 keyDown 이벤트에도 이벤트 리스너를 추가했습니다.

우야꼬

wrote at 2008/12/02 01:01

링크 편집 답글

저도 해결책을 찾아보다가 다른 방법을 찾게되서
맘에 들진 않지만 그래도 어느정도 쓸만한거 같아서 트랙백 걸었습니다^^

eirene

wrote at 2008/12/02 22:52

링크 편집

다시 보니 여러가지 버그가 있네요... 제 소스도 수정해야 하고, 희덕님이나 우야꼬님 소스도 수정해야 될 듯 합니다 ^^;

일단 희덕님 소스의 문제점은, 중간부터 글자를 지울 경우 글자를 지우기 시작한 다음에 있는 글자도 함께 지워진다는 겁니다... 우야꼬님 소스도 마찬가지구요...

이런 이유로 setSeleciton 부분은 조심스럽게 접근해서 조건을 까다롭게 줘야 할 거 같습니다... 지금 이 버그를 수정중인데, 하나를 수정하면 하나가 말썽이네요 ㅎㅎ

대충 눈에 안 띄게 만들어 놓기는 했는데, 정리되면 공개하겠습니다 ㅋㅋ