세션과 쿠키
statelses 의 단점을 보완하기 위해서
최소한의 상태를 저장하기 위해 존재

1.3 배에서 1.5 배 커진다
사이즈 제한 2진 -> 데이터 변환한 이후의 크기 고려
마샬링 고려(JSON 문자열로 만들어진 코드이기 때문에

여기서 부터 따라간다.

all-deps 디펜던시 약자

source 역할을 ul태그로 직접 만들었었다
밑에 하나가 li태그 key는 유효성을 갖는다(id속성)

비동기를 요청에서 이렇게 받아올 수 도 있다.

$("#tree").fancytree({
  source: {
    url: "/getTreeData",
    cache: false
  },
  ...

The Ajax service is expected to return valid JSON data:
(cache: false)브라우저 캐싱을 하지 않겠다.

마샬링을 하는데 트리하나에서 노드를 어떤 방식으로 표현하는지를 알고 마샬링해야한다.
어떻게 만들어지는지 스펙을 봐야한다.

노드하나하나의 특성을 나타내는 객체, 파일 객체

fancytree 클라이언트
fancytreenode 파일 객체
클라이언트는 바로 파일 객체를 사용할 수 없다.
클라이언트가 사용하기 위해서 어댑터가 필요하다.
중간에 어댑터를 하나 만들고 파일 객체를 넣어준다.

data (파라미터) 데이터 프로퍼티

SortedSet - TreeSet - TreeMap

cf. 이클립스는 folder안에 file이 없으면 배포를 하지 않는 경우가 발생한다.

filter 기능 집어 넣기
참고 : https://wwwendt.de/tech/fancytree/demo/#sample-ext-filter.html

함수를 써서 필터한다.

사용방법

$("#tree").fancytree({
  extensions: ["filter"],
  filter: {  // override default settings
    counter: false, // No counter badges
    mode: "hide"  // "dimm": Grayout unmatched nodes, "hide": remove unmatched nodes
  },
  ...
});
// Case insensitive search for titles containing 'foo':
$.ui.fancytree.getTree("#tree").filterNodes("foo");

// Pass additional options in order to override the default behavior:
$.ui.fancytree.getTree("#tree").filterNodes("foo", {autoExpand: true, leavesOnly: true});

Dnd 드래그앤 드랍

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

가 필요하다

위에꺼를 사용하게 되어서 all-deps.min.js 사용안하고
all.min.js 사용

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/fancytree/skin-win8/ui.fancytree.min.css">
<script src="<%=request.getContextPath() %>/js/fancytree/jquery.fancytree-all.min.js"></script>

사용 가능한 목록

$("#tree").fancytree({
  extensions: ["dnd"],
  dnd: {
    // Available options with their default:
    autoExpandMS: 1000,   // Expand nodes after n milliseconds of hovering
    draggable: null,      // Additional options passed to jQuery UI draggable
    droppable: null,      // Additional options passed to jQuery UI droppable
    dropMarkerOffsetX: -24,  // absolute position offset for .fancytree-drop-marker
                             // relatively to ..fancytree-title (icon/img near a node accepting drop)
    dropMarkerInsertOffsetX: -16, // additional offset for drop-marker with hitMode = "before"/"after"
    focusOnClick: false,  // Focus, although draggable cancels mousedown event (#270)
    preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
    preventVoidMoves: true,      // Prevent dropping nodes 'before self', etc.
    smartRevert: true,    // set draggable.revert = true if drop was rejected
    
	// 드래그를 시작했을때
    // Events that make tree nodes draggable
    dragStart: null,      // Callback(sourceNode, data), return true to enable dnd
    dragStop: null,       // Callback(sourceNode, data)
    initHelper: null,     // Callback(sourceNode, data)
    updateHelper: null,   // Callback(sourceNode, data)
    
	// 받아야되는 노드가 중심이된다.
    // Events that make tree nodes accept draggables
    dragEnter: null,      // Callback(targetNode, data)
    dragExpand: null,     // Callback(targetNode, data), return false to prevent autoExpand
    dragOver: null,       // Callback(targetNode, data)
    dragDrop: null,       // Callback(targetNode, data)
    dragLeave: null       // Callback(targetNode, data)
  },
  [...]
});

복사인지 이동인지는 ctrlkey 의 여부에 따라 달라진다

moveTo, copyTo를 ctrlkey 값에 따라서 결정한다.

moveTo의 2번째 파라미터의
over는 children과 같다.

파일이 파일안에 복사를 할수 없다.
그래서 이걸 막아야한다. 이것은 dragEnter에서 처리
false 이벤트 취소라고 예제가 나와있다. 받는 녀석인 node가 folder인지 file인지 파악해야한다.

폴더 드래깅 막고 dragStart에서 막는다. node가 폴더가 아닌때만

자기 안에서의 복사나 이동 막고 내 부모와 상대의 부모가 같은 경우 막아한다 상대가 결정되는 부분 dragEnter에서 막는다. 내 부모와 상대의 부모가 같으면 false

getKeyPath() 이용해보자

키가 사라지니 위치를 바꿔도 키를 변경할 필요가 없어졌다. 이동/복사시 서버쪽으로 요청이 넘어가야한다.
누가, 어디로, 이동/복사 여부 3개 파라미터가 넘어가야한다.

delete는 window 자체에 키 이벤트를 걸어줘야한다.

$(window).on("keyup", function(){
			console.log(event);
});

프레임워크나, 프로그램의 DOC문서를 봐라

에러처리 메이븐 로컬 저장소 위치 잡아주기

openfile 열어서

settings.xml 설정해주기

수업의 목적

서버사이드에서 응답데이터가 JSON, HTML이진 않다
클라이언트 사이드에서도 요청이 HTML이런거라고 장담할 수 없다.
클라이언트가 어떤 요청을 하는지를 캐치해야한다.
contentType, AcceptHeader, encType 등등

사용방법이 아니라 사용 방법을 연습하기 위해서 수업을 했다.

한번쯤을 복습해야하니까

DB 본인계정에서 emplyees 테이블
본인 ID, 매니저ID
매니저 ID를 잘하면 임플로이 에서도 계층 구도가 나타난다.
사장 null인 사람(매니저ID=null)
스티븐킹을 기준으로 부하직원이 나오게끔 해보기
더이상의 부하 직원이 없다면 노드가 파일로 표시

데이터 베이스 리소스로 바꿈
persistance layer, domain layer 존재
중간에 어댑터가 필요 vo, wrapper 두개 필요