나는 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번의 글을 거쳐, 트리 위젯에 대해 소개 및 추가 기능을 구현해보았다.
더 필요한 기능이 있을려나..?