나는 Geek이다

트리 위젯에서 노드를 선택할 경우에 기본적으로 나타나는 스타일은 span 의 dotted 속성 뿐이다.
따라서 각 노드에 클래스 지정을 한 경우 알아보기가 쉽지 않다. 더불어 이전 글에서 구현한 트리 탐색 기능의 경우 검색은 되었는데 도대체 뭔지 알아보는 것은 더 어렵다-_-;;

고로 이번엔 포커스가 잡힐 경우, 스타일을 변경하는 방법을 설명하고자 한다.

엄밀히 말하면 스타일을 변경하는 것이 아니라, 포커싱이 될 경우 스타일 클래스를 추가하고, 포커스 아웃(블러)가 될 경우, 추가한 클래스를 해제 시키는 것이다.

변경할 소스의 위치는 아래와 같다.

dojo/dijit/Tree.js

변경할 메써드는 dijit.Tree 클래스의 blurNode, _onTreeFocus 다.

_onTreeFocus: function(evt){
        var node = dijit.getEnclosingWidget(evt.target);
        if(node != this.lastFocused){
            this.blurNode();
        }
        var labelNode = node.labelNode;
        // set tabIndex so that the tab key can find this node
        labelNode.setAttribute("tabIndex", "0");
        dojo.addClass(labelNode, "dijitTreeLabelFocused"); // 이 스타일은 tundra.css 에 정의되어있다. tundra를 사용한다면..
        dojo.addClass(labelNode, "treeEntryFocus"); // 이곳에 원하는 클래스를 지정한다.
        this.lastFocused = node;
    },

blurNode: function(){
        // summary
        //    Removes focus from the currently focused node (which must be visible).
        //    Usually not called directly (just call focusNode() on another node instead)
        var node = this.lastFocused;
        if(!node){ return; }
        var labelNode = node.labelNode;
        dojo.removeClass(labelNode, "dijitTreeLabelFocused");
        dojo.removeClass(labelNode, "treeEntryFocus"); // 이곳에 제거할 클래스를 지정한다.
        labelNode.setAttribute("tabIndex", "-1");
        this.lastFocused = null;
    },
...

그러나. 이것보다 더 쉬운 방법은..
.tundra .dijitTreeLabelFocused 스타일 클래스를 오버라이딩 하는것이다!

왜 진작에 스타일이 있을거라고 생각하지않고 소스를 탐색했는지.-_ㅜ;


3번의 글을 거쳐, 트리 위젯에 대해 소개 및 추가 기능을 구현해보았다.
더 필요한 기능이 있을려나..?

dojotoolkit 에서 지원하는 tree dijit 의 기본 구현으로는 특정 노드를 검색하지 못한다.
이것의 구현은 트리를 상속받아 각각의 엔트리에 패스를 입력하며, 상위로부터 패스를 따라 expand 하는 방식으로 구현할 수 있다.

1. 트리 생성시 패스 정보를 기억하는 트리 구현
dojo/dijit/Tree.js

dojo.declare(
 "AdvancedTree",
 dijit.Tree,
{
 path: '',
 getPath: function (node, separator) {
  var path = separator;
  do {
   path = separator + this.tree.store.getIdentity(node.item) + path;
   node = node.getParent();
  } while ('dijit._TreeNode' == node.declaredClass);
  return path;
 },
 expander: function (node)
 {
  if (node.declaredClass == 'dijit._TreeNode') {
   dojo.connect(node, 'addChild', this, 'expander');
  }
  var nodePath = this.getPath(node, '/');
  if ((this.path.substr(0, nodePath.length) == nodePath) && node.isFolder) {
   this._controller._expand(node);
  }
 },
 addChild: function ()
 {
  dijit.Tree.prototype.addChild.apply(this, arguments);
  this.expander(arguments[0], 1);
 }
});

2. 검색

function focusTo(parent, findPath) {
 if(findPath != undefined && findPath != null) {
  var paths = findPath.split("/");
  var findId = paths[1];
  var startOffset = findPath.indexOf("/", 1);
  var findChildPath = null;
  if(startOffset > 0) {
   findChildPath = findPath.substr(startOffset);
  }
 
  contentsTree._expandNode(parent);
  var children = parent.getChildren();
  for (var j = 0; j < children.length; j++) {
   var child = children[j];
   if(findId == child.item.id) {
    contentsTree.focusNode(child);
   
    if(findChildPath != null) {
     focusTo(child, findChildPath);
    }
   }
  }
 }
}

3. 호출

focusTo(contentsTree, toPath);
// focustTo(contentsTree, '/1/234/523');

트리 화면 표현은 이전 글(slothink.tistory.com/24)과 동일하다. 다만 dojoType 속성을 dijit.Tree 가 아니라, AdvancedTree 를 구현하면 된다.


..그나저나 도조 한글 포럼은 없는것인가? 힘들군하;