2012/07/20
HTML5 Drag and Drop
HTML5를 하나둘씩 공부해 가면서 Drag & Drop(이하 D&D)을 만났다. HTML5 이전에도
D&D를 구현해서 사용은 하였지만 너무 복잡해서 문제를 야기 시키기도 했다. HTML5 에서는 API 차원에서
D&D를 지원하여 보다 쉽게 구현할 수 있다.
HTML5에서 D&D 위해 추가된 속성은 Draggable 이고 관련하여 추가된 이벤트는 아래와 같다.
onDrag - Script to be run when an element is dragged
onDragEnd - Script to be run at the end of a drag operation
onDragEnter - Script to be run when an element has been dragged to a valid drop target
onDragLeave - Script to be run when an element leaves a valid drop target
onDragOver - Script to be run when an element is being dragged over a valid drop target
onDragStart - Script to be run at the start of a drag operation
onDrop - Script to be run when dragged element is being dropped
하지만 가장 간단하게 구현하는 방법은 드래그 하고자하는 엘리먼트에 대해서 Draggable 속성을 true로 설정하고 드래그 되는 대상에 드래그가 시작되었을 때의 처리와 놓여지는 대상에 드래그 되어 올라올 경우와 놓여지는 경우에 대한 처리를 해 주면 된다.(
onDragStart ,
onDragOver,
onDrop)
우선 드래그 하고자 하는 대상에 대하여 Draggable 속성을 true로 부여하면 드래그 되어 진다.
위의 코드 만드로 이미지를 드래그 할 수 있는 준비를 한 것이다. 위에서 부여된 속성에 의해 아래처럼 드래그가 된다.
이제 D&D 관련되는 이벤트를 설정해 주었다.
드래그 시작되는 엘리먼트에 시작되었을때 발생하는 onDragStart 에 핸들러를 부여하고 받고자 하는 엘리먼트에 드래그 되어 올라오는 경우의 이벤트 onDragOver에 핸들러는 부여했다.
그렇게 하면 드래그 하고자하는 것을 놓고자 하는 곳으로 드래그 하면 커서 아이콘도 바뀐다.
마지막으로 드래그 되어져서 놓였을때 받을 대상에 대한 onDrop 이벤트에 핸들러를 부여하여 처리 한다.
그러면 대상에 Drop을 하면 Drop 대상체가 핸들러에 의해 이를 수용 한다.
마지막으로 두 개의 Div에 대해서 Drop을 받을 수 있도로 하였다.
이제 두 Div 사이에 이미지를 옮길 수 있다.
드래그 시작할 때 부여되는 핸들러인 dragStart는 드래그 되어지는 대상에 대한 정보를 저장한다.
event.dataTransfer.setData("text/plain", ev.target.id);
이 명령으로 드래그 되어지는 대상의 ID를 저장한다. 드래그 되어 올려지는 대상체에 부여된 핸들러 함수는 간단하게 한 줄로 되었다.
ev.preventDefault();
이 코드는 기존의 UR을 드래그 하는 기본적인 핸들링을 방지하고 새로 정의된 D&D를 사용하기 위한 것이다.
마지막으로 Drop 되어 놓여지는 대상체에 대한 처리를 위한 dragDrop 함수 이다. 그래그 되어진 엘리먼트를 놓여지는 곳으로 이동한다.
보다 많은 이벤트 핸들러가 있고 더 많은 기능을 구현할 수 있지만 기본 기능은 아주 간단한 코드로 구현할
Original Post : http://neodreamer-dev.tistory.com/673
D&D를 구현해서 사용은 하였지만 너무 복잡해서 문제를 야기 시키기도 했다. HTML5 에서는 API 차원에서
D&D를 지원하여 보다 쉽게 구현할 수 있다.
HTML5에서 D&D 위해 추가된 속성은 Draggable 이고 관련하여 추가된 이벤트는 아래와 같다.
onDrag - Script to be run when an element is dragged
onDragEnd - Script to be run at the end of a drag operation
onDragEnter - Script to be run when an element has been dragged to a valid drop target
onDragLeave - Script to be run when an element leaves a valid drop target
onDragOver - Script to be run when an element is being dragged over a valid drop target
onDragStart - Script to be run at the start of a drag operation
onDrop - Script to be run when dragged element is being dropped
하지만 가장 간단하게 구현하는 방법은 드래그 하고자하는 엘리먼트에 대해서 Draggable 속성을 true로 설정하고 드래그 되는 대상에 드래그가 시작되었을 때의 처리와 놓여지는 대상에 드래그 되어 올라올 경우와 놓여지는 경우에 대한 처리를 해 주면 된다.(
onDragStart ,
onDragOver,
onDrop)
우선 드래그 하고자 하는 대상에 대하여 Draggable 속성을 true로 부여하면 드래그 되어 진다.
<div id="zone1" class="zone">
<img id="DragItem" draggable="true" src="html5_logo.jpg"/>
</div>
<br/>
<div id="zone2" class="zone">
</div>
위의 코드 만드로 이미지를 드래그 할 수 있는 준비를 한 것이다. 위에서 부여된 속성에 의해 아래처럼 드래그가 된다.
이제 D&D 관련되는 이벤트를 설정해 주었다.
드래그 시작되는 엘리먼트에 시작되었을때 발생하는 onDragStart 에 핸들러를 부여하고 받고자 하는 엘리먼트에 드래그 되어 올라오는 경우의 이벤트 onDragOver에 핸들러는 부여했다.
<script>
function dragStart(ev)
{
ev.dataTransfer.setData("text/plain", ev.target.id);
}
function dragOver(ev)
{
ev.preventDefault();
}
<script>
<div id="zone1" class="zone">
<img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/>
</div>
<br/>
<div id="zone2" class="zone" onDragOver="dragOver(event)">
</div>
그렇게 하면 드래그 하고자하는 것을 놓고자 하는 곳으로 드래그 하면 커서 아이콘도 바뀐다.
마지막으로 드래그 되어져서 놓였을때 받을 대상에 대한 onDrop 이벤트에 핸들러를 부여하여 처리 한다.
<script>
function dragStart(ev)
{
ev.dataTransfer.setData("text/plain", ev.target.id);
}
function dragOver(ev)
{
ev.preventDefault();
}
function dragDrop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text/plain");
ev.target.appendChild( document.getElementById( data ) );
}
<script>
<div id="zone1" class="zone">
<img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/>
</div>
<br/>
<div id="zone2" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)">
</div>
그러면 대상에 Drop을 하면 Drop 대상체가 핸들러에 의해 이를 수용 한다.
마지막으로 두 개의 Div에 대해서 Drop을 받을 수 있도로 하였다.
<script>
function dragStart(ev)
{
ev.dataTransfer.setData("text/plain", ev.target.id);
}
function dragOver(ev)
{
ev.preventDefault();
}
function dragDrop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text/plain");
ev.target.appendChild( document.getElementById( data ) );
}
<script>
<div id="zone1" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)">
<img id="DragItem" draggable="true" src="html5_logo.jpg" onDragStart="dragStart(event)"/>
</div>
<br/>
<div id="zone2" class="zone" onDrop="dragDrop(event)" onDragOver="dragOver(event)">
</div>
이제 두 Div 사이에 이미지를 옮길 수 있다.
드래그 시작할 때 부여되는 핸들러인 dragStart는 드래그 되어지는 대상에 대한 정보를 저장한다.
event.dataTransfer.setData("text/plain", ev.target.id);
이 명령으로 드래그 되어지는 대상의 ID를 저장한다. 드래그 되어 올려지는 대상체에 부여된 핸들러 함수는 간단하게 한 줄로 되었다.
ev.preventDefault();
이 코드는 기존의 UR을 드래그 하는 기본적인 핸들링을 방지하고 새로 정의된 D&D를 사용하기 위한 것이다.
마지막으로 Drop 되어 놓여지는 대상체에 대한 처리를 위한 dragDrop 함수 이다. 그래그 되어진 엘리먼트를 놓여지는 곳으로 이동한다.
보다 많은 이벤트 핸들러가 있고 더 많은 기능을 구현할 수 있지만 기본 기능은 아주 간단한 코드로 구현할
Original Post : http://neodreamer-dev.tistory.com/673
2012/07/18
PC의 숫자를 4자리 단위로 컴마(,) 넣도록 설정하기
숫자를 기록할 때 천단위 구분이 아닌 만단위 구분이 되도록 컴마(,)를 넣어야 읽기가 쉽다.
우리의 수 체계가 만단위로 구성이 되기 때문이다.
쉼표, 네 자리마다 찍어야 한다.
일. 만. 억. 조. 경. .... 수의 체계-일,만,억,조,경
하지만 우리가 일상에서 사용하는 수는 천 단위 구분으로 되어있다. 이는 미국식을 따르기 때문이다. 이러한 천단위 구분으로 쓰여진 수를 한 번에 읽기는 쉽지 않다. 뒤에서부터 일,십,백,만,십만,백만... 세고난 후에야 읽을 수 있다.
584,123,456,789,123,456
58,4123,4567,8912,3456
도아님께서 시스템에서 네자리 단위로 컴마를 찍는 방법을 소개한 글을 보고 설정을 해 보았다.
설정은 하는 방법은 레지스트리를 수정하여 하는 것이다.
HKEY_CURRENT_USER\Control Panel\International 이 위치의 sGrouping, sMonGrouping 값을 4:0으로 설정해 주면 된다.
그러면 아래와 같은 결과를 볼 수 있다.
아래 레지스트리 파일은 이 두 값을 4:0으로 설정하는 것이다.
이 설정은 다른 문제가 되는 사항이 있는지 사용해 봐
Original Post : http://neodreamer-dev.tistory.com/672
우리의 수 체계가 만단위로 구성이 되기 때문이다.
쉼표, 네 자리마다 찍어야 한다.
일. 만. 억. 조. 경. .... 수의 체계-일,만,억,조,경
하지만 우리가 일상에서 사용하는 수는 천 단위 구분으로 되어있다. 이는 미국식을 따르기 때문이다. 이러한 천단위 구분으로 쓰여진 수를 한 번에 읽기는 쉽지 않다. 뒤에서부터 일,십,백,만,십만,백만... 세고난 후에야 읽을 수 있다.
584,123,456,789,123,456
58,4123,4567,8912,3456
도아님께서 시스템에서 네자리 단위로 컴마를 찍는 방법을 소개한 글을 보고 설정을 해 보았다.
설정은 하는 방법은 레지스트리를 수정하여 하는 것이다.
HKEY_CURRENT_USER\Control Panel\International 이 위치의 sGrouping, sMonGrouping 값을 4:0으로 설정해 주면 된다.
그러면 아래와 같은 결과를 볼 수 있다.
 |  |
아래 레지스트리 파일은 이 두 값을 4:0으로 설정하는 것이다.
4DigitComma.reg이 설정은 다른 문제가 되는 사항이 있는지 사용해 봐
Original Post : http://neodreamer-dev.tistory.com/672
2012/07/16
200개의 단계별 예제로 배우는 안드로이드 4.0
| |||||||||||
새로운 맘으로 다시 공부를 시작해 보려 책을 샀다. 두툼한 책으로 예제 중심으로 되어 있고 최식 버전에 대한 설명도 있다.
안드로이드의 기본 개념부터 구성및 기초 그리고 활용까지 다루고 있다. 작가도 Android Side 운영자이면서 Java관련 서적을 다수 집필한 한 동호 님이다.
목차 보기
아직 읽기전이라 서평을 하기는 이른 단계이지만 목차의 구성으로 봐서는 꽤 유용한 책으로 생각된다.
틈틈이 조금 공부하다 한동안 잊고 있었더니 그동한 공부해왔던 내용도 잊었다.
취미 생활격으로 하다보니 시간도 그리 많지 않고 자주 잊어버리곤 하는데 처음부터 다시 시작 하는 맘으로 공부를 해봐야 겠다.
아이들이 표지를 보더니
맛있는 초코렛이라고 달려들었는데 나에게도 이 책이 그렇게 맛있는 모습로 다가와 주었으
Original Post : http://neodreamer-dev.tistory.com/671
2012/07/10
Eclipse 시작시 Workspace 지정하기
Eclipse 는 재주가 많은 IDE로 여러가지 목적으로 사용될 수 있다.
여러 플러그인을 설치하고 필요에 따른 작업이 가능한다. 작업 환경도 Workspace 단위로 관리가 되어 목적이 다른 Workspace를 구성해 두면 여러가지 용도로 사용하기 쉽니다.
이렇게 구성된 Workspace는 Eclipse가 시작 될 때 사용자에게 묻는 과정이 있다.
Preferences 대화상자의 "Startup and Shutdown" 메뉴에서 "Workspace" 메뉴를 보면 저장되어 있는 Workspace와 시작시 Workspace를 묻기를 할 지 여부를 설정할 수 있는 옵션이 있다.
이렇게 설정을 하면 Eclipse를 실행할 때마다 Workspace를 물어봐서 귀찮을 수 있다. 그래서 난 단축아이콘을 만들어 특정 Workspace가 자동으로 선택되도록 하고 있다. 방법은 단축아이콘의 Target에서 Eclipse의 명령줄 옵션을 추가하는 것이다.
사용한 명령줄 옵션은 -data 이다. 이 옵션 뒤에 Workspace 경로를 설정해 주면 해당 Workspace가 자동으로 선택 된다. 목적에 맞게 여려개의 단축 아이콘을 만들어 놓으면 쉽게 이용할 수 있다.
그 외의 다른 명령줄 옵션은 Eclipse 도움말을 참고 하
Original Post : http://neodreamer-dev.tistory.com/670
여러 플러그인을 설치하고 필요에 따른 작업이 가능한다. 작업 환경도 Workspace 단위로 관리가 되어 목적이 다른 Workspace를 구성해 두면 여러가지 용도로 사용하기 쉽니다.
이렇게 구성된 Workspace는 Eclipse가 시작 될 때 사용자에게 묻는 과정이 있다.
Preferences 대화상자의 "Startup and Shutdown" 메뉴에서 "Workspace" 메뉴를 보면 저장되어 있는 Workspace와 시작시 Workspace를 묻기를 할 지 여부를 설정할 수 있는 옵션이 있다.
이렇게 설정을 하면 Eclipse를 실행할 때마다 Workspace를 물어봐서 귀찮을 수 있다. 그래서 난 단축아이콘을 만들어 특정 Workspace가 자동으로 선택되도록 하고 있다. 방법은 단축아이콘의 Target에서 Eclipse의 명령줄 옵션을 추가하는 것이다.
사용한 명령줄 옵션은 -data 이다. 이 옵션 뒤에 Workspace 경로를 설정해 주면 해당 Workspace가 자동으로 선택 된다. 목적에 맞게 여려개의 단축 아이콘을 만들어 놓으면 쉽게 이용할 수 있다.
그 외의 다른 명령줄 옵션은 Eclipse 도움말을 참고 하
Original Post : http://neodreamer-dev.tistory.com/670
2012/07/05
OpenCV 2.4.2 Released
OpenCV 2.4.2 버전이 공개 되었다. 2.4.1버전이 공개된 지 불과 한 달밖에 지나지 않았다.
50여개의 버그 수정과 각각의 플랫폼을 위한 패키지도 공개 되었다. 이번 공개부터는 ios도 포함이 되었다.
2.4.2 버전에서 수정된 사항 (http://code.opencv.org/projects/opencv/wiki/ChangeLog)
- Android package introduces a new service-based distribution model
OpenCV Android Release notes
- '.tar.bz2' format is changed to '.zip' because most of our users are Windows guys
- all the samples changed to use the OpenCV Manager API, they don't keep OpenCV binaries inside
- all the samples eclipse projects having JNI parts (face-detector, tutorial 3 and tutorial 4) contain CDT Builder configured for building the native libraries (look at the tutorials for details)
- the OpenCV Manager and binary packages for armeabi, armeabi-v7a and x86 arch-s are available on Google Play Market and will be installed on the first use, but for devices without internet access or without Google Play Market (dev kits) we provided the necessary APKs in the OpenCV-2.4.2-android-sdk/apk folder
- the tutorials are updated
- '.tar.bz2' format is changed to '.zip' because most of our users are Windows guys
- New keypoint descriptor FREAK has been contributed by EPFL group: Kirell Benzi, Raphael Ortiz, Alexandre Alahi and Pierre Vandergheynst. It's claimed to be superior to ORB and SURF descriptors, yet it's very fast (comparable to ORB). Please, see
- Improved face recognizer and excellent tutorial on using it has been added by Philipp Wagner. Check the face recognition tutorial.
- opencv2.framework for iOS has been created. You can either download the binary from SourceForge or build it yourself using the simple guide. Also, you may be interested to look at some OpenCV on iOS samples, created by our GSoC 2012 students Eduard and Charu: gsoc2012:source:/ios/trunk and read the slides of the tutorial: http://code.opencv.org/projects/gsoc2012/repository/entry/ios/trunk/doc/CVPR2012_OpenCV4IOS_Tutorial.pdf
Another 50 bugs have been fixed since 2.4.1 release.
소스뿐만아니라 웹사이트(http://opencv.org, http://answers.opencv.org)도 새롭게 단장하였다.
OpenCV의 행보가 점점 빨라지고 있다.
OpenCV website
Original Post : http://neodreamer-dev.tistory.com/669
2012/07/03
Hello Jelly Bean on Juno (Eclipse 4.2)
Android Jelly Bean 이 발표 되고 얼마 지나서 Eclipse 의 새로운 버전이 나왔다. Eclipse 4.2 버전은 Juno라는 이름을 달고 나왔다.
새로운 개발 환경도 구축할 겸 해서 Juno로 안드로이드 개발 환경을 구축하였고 언제나 하는 Hello Project를 만들었다.
새로운 프로젝트를 만든는 절차는 크게 바뀌지 않았다.
중간에 UI 관련하여 추가로 설정하는 단계가 추가 되었다.
그리고 Activity 관련 설정도 추가되었다.
마지막 단계에서 "Android Support Library" 문제에 봉착을 하였다.
현재 설치된 버전이 9임에도 검출되지 않았고 UI에서의 지시에 따라 몇번의 Install 시도를 해 보았지만 마지막 단계로 가는 Finish 버튼이 활성화 되지 않았다.
결국 Juno를 종료하고 SDK Manager 에서 이미 설치되어 있던 Version 9를 삭제하고 다시 설치하였다.
다시 실행시킨 Juno에서 프로젝트 생성 단계에 문제가 생기기 않았다.
Hello 프로젝트를 진저브레드와 젤리빈 에뮬레이터에서 실생시켜 보았다.
조정이 가능한지 모르겠지만 젤리빈에서의 작업 영역이 줄어들었다.&
Original Post : http://neodreamer-dev.tistory.com/668
새로운 개발 환경도 구축할 겸 해서 Juno로 안드로이드 개발 환경을 구축하였고 언제나 하는 Hello Project를 만들었다.
새로운 프로젝트를 만든는 절차는 크게 바뀌지 않았다.
중간에 UI 관련하여 추가로 설정하는 단계가 추가 되었다.
그리고 Activity 관련 설정도 추가되었다.
마지막 단계에서 "Android Support Library" 문제에 봉착을 하였다.
현재 설치된 버전이 9임에도 검출되지 않았고 UI에서의 지시에 따라 몇번의 Install 시도를 해 보았지만 마지막 단계로 가는 Finish 버튼이 활성화 되지 않았다.
결국 Juno를 종료하고 SDK Manager 에서 이미 설치되어 있던 Version 9를 삭제하고 다시 설치하였다.
 |  |
다시 실행시킨 Juno에서 프로젝트 생성 단계에 문제가 생기기 않았다.
Hello 프로젝트를 진저브레드와 젤리빈 에뮬레이터에서 실생시켜 보았다.
 |  |
조정이 가능한지 모르겠지만 젤리빈에서의 작업 영역이 줄어들었다.&
Original Post : http://neodreamer-dev.tistory.com/668
2012/07/02
Eclipse 4.2 Juno Released
Eclipse 가 새로운 버전 4.2 Juno 버전을 공개하였다.
UI가 전체적으로 깔끔해 졌다. 개발의 편의성도 많이 좋아진 것 같고...
Android Jelly Bean을 공개하는 시점에 나와으니 새로운 개발 환경에서 잊고 있었던 안드로이드 개발을 다시 공부해 봐야 겠다.
Eclipse Homepage
Eclipse Download Page
Eclipse Juno - New and Noteworth
Original Post : http://neodreamer-dev.tistory.com/667
Subscribe to:
Posts
(
Atom
)