[Library] zeroclipboard

zeroclipboard 라이브러리 소개에 앞서... 

 요즘은 크로스 브라우징이 대세다 뭐다 해서 기존 익스플로러(이하 IE) 사용자들이 현재는 크롬, 사파리, 오페라 등의 여러가지 브라우저를 사용하기 시작했다. 그러다보니 우리나라의 80퍼센트를 넘게 지배했던 IE 전용 웹페이지들은 울상에 빠지게 되었다. 이유는 간단하다. IE에서만 돌아가는 소스코드로 작성한 웹페이지 덕택에 크롬 등의 타 브라우저에서는 제대로 동작하지 않는 경우가 부지기수이기 때문이다. 아마 대부분은 자바스크립트(이하 JS)일 것이라 예상해본다.

 

 JS는 사용자들의 액션을 받아 그에 대응되는 작업을 처리하고 브라우저에 돌려주는 스크립트언어 중 하나다. 따라서 서버로 데이터를 전송하기 전에 스크립트 언어를 통해 각종 사전작업을 하게 되는데, 그 중에서도 클립보드에 저장하는 JS소스코드가 있다. 보통 검색하면 다음과 같은 코드가 나온다.

 

(이 코드는 핵심 부분만 가져온 것이다.)

1)

window.clipboardData.getData("text"); 

 

2)

execCommand('copy')

[출처] execCommand() 의 명령어|작성자 생명의힘

보통은 위 둘중 한가지다. 특히 위에 있는 소스는 윈도우를 이용하기 때문에 타 브라우저에서는 지원이 되지 않고 execCommand()는 브라우저에 따라 지원되는 경우도 있고 안되는 경우도 있다. (현재는 IE 외에 안되는 것으로 알고 있는데, 혹시 다른 방법이 있으면 알려주시길 부탁드립니다.)

 

따라서 IE가 아닌 타 브라우저에서도 클립보드에 저장하고 싶은 데이터가 있을때 사용할만한 라이브러리를 소개하고자 한다. 그것이 바로 지금부터 소개할 'zeroclipboard' 라이브러리다. (물론 IE도 이 라이브러리로 대체가 가능하다.)

 

 

 zeroclipboard 라이브러리 다운로드 및 메뉴얼 링크

Download : http://code.google.com/p/zeroclipboard/

Instructions : http://code.google.com/p/zeroclipboard/wiki/Instructions

 

밑의 'zeroclipboard 사용법'에서 설명할 코드는 내려받은 .zip 파일 압축을 해제해서 test.html 을 보면 된다.

 

 

zeroclipboard의 사용법 

 오래 기다렸다. 사실 이게 제일 보고 싶었을텐데 잡담이 길어져서 여기까지 오게 되었다. 이 글보다는 ZCB라이브러리 홈페이지에 들어가보는것이 더 정확할 것이다. 하지만 영어 울렁증이 있는 사용자들을 위해(본인 포함) 어줍게나마 쉽게 이해할 수 있도록 편집해 보겠다.

아까 다운로드 받은 ZCB 라이브러리 .zip 파일에서 필수 파일 목록은 아래와 같다.

 

ZeroClipboard.js

ZeroClipboard.swf

ZeroClipboard.as

 

위의 파일 목록을 자신이 쓰고자하는 웹서버에 올려놓고 다음을 진행한다.

그리고 테스트를 하려면 반드시 "웹서버 상에서" 돌려보도록 한다. 로컬에서 실행 되지 않는다.

 

 

1. Setup

 <script type="text/javascript" src="ZeroClipboard.js"></script>

처음 ZCB 라이브러리를 로드하는 부분이다. 이부분 없으면 말짱 황이다.

 

2. Clients

 var clip = new ZeroClipboard.Client(); 

ZCB 라이브러리 객체를 초기화 하는 부분이다. clip으로 하든 zcb로 하든 마음대로 생성하자.

 

 

3. Copy

clip.setText( "Copy me!" ); 

 ZCB 객체에 setText 메소드를 사용하면 해당 문자열을 복사할 수 있다.

 

 

4. Hand Cursor

clip.setHandCursor( true ); 

ZCB 객체가 연결된 어떠한 오브젝트(Button, Link...)의 위로 마우스 포인터가 올라왔을 때 마우스 커서의 모양을 결정한다.

기본은 true로 설정되어 있으며 false 값을 줘서 모양을 바꿀 수 있다.

true : 손모양(Hand)

false : 화살표(Arrow)

 

 

5. Gluing

clip.glue( 'd_clip_button' ); 

 d_clip_button 은 HTML 페이지 내에서 오브젝트 ID를 말한다. 해당 ID의 객체를 버튼으로 만든 뒤에 ZCB객체와 연결시키는 메소드가 glue() 이다. 하지만 ZCB 라이브러리 홈페이지에서는 이 방법보다는 아래의 방법을 더 추천한다.

 

 

6. Recommand Implementation

[HTML]

<div id="d_clip_container" style="position:relative">

<div id="d_clip_button">Copy to Clipboard</div>

</div>

 

[JS]

clip.glue( 'd_clip_button', 'd_clip_container' );

 별거 없다. 단지 디비전을 따로 만들어 두개의 디비전에 ZCB 라이브러리를 같이 붙여놓는 것이다. 가능하면 이 방법대로 하자.

 

 

7. Event Handlers

clip.addEventListener( 'onLoad', my_load_handler ); 

clip.addEventListener( 'onMouseOut', my_mouse_out_handler );

clip.addEventListener( 'onMouseDown', my_mouse_down_handler );

clip.addEventListener( 'onMouseUp', my_mouse_up_handler );

clip.addEventListener( 'onComplete', my_complete );

 

function my_load_handler( client ) {

alert( "movie has loaded" );

}

...

위처럼 해당 ZCB객체에 이벤트 핸들링을 할 수도 있다. 첫번째 변수에는 이벤트 핸들링 액션을 넣어주고 두번째는 자신이 실행시키고싶은 함수를 넣으면 된다.

 

 

8. Destroying

clip.destroy();  

ZCB 라이브러리가 더 이상 필요 없게 됐을 때 소멸자 메소드다. 사실상 쓸일 있을까 싶기도 하지만... 다시 이전 객체를 불러오고 싶으면 간단하게 .glue() 메소드를 다시 한번 써주면 된다.

 

 9. 소스코드 예제

http://code.google.com/p/zeroclipboard/wiki/Instructions#Complete_Example 

 

 

마무리 

 이것으로 ZCB라이브러리 소개를 끝내고자 한다. 사실 소스코드를 이 블로그에 게재하기에는 이쁘지가 않다. -_-;

따라서 아까 말씀드렸듯이 ZCB를 직접 다운로드 받아 해당 test.html 코드를 훑어보면 감이 올 것이다.

추가적으로 덧붙이고 싶은 내용이나 수정되어야 할 정보가 있는 경우 덧글을 달아주시면 좋겠다.

출처 : http://blog.naver.com/ekdns7184?Redirect=Log&logNo=120172217580