HCI HW2-1 2016320175 이두섭


    콘솔 창에서의 명령문을 바탕으로 GUI components를 테스트합니다.

    clear(): 콘솔 창을 클리어합니다. 
    

[hw]

        hw.nodeStack: 현재까지 생성된 노드들을 포함하는 리스트 Node.stack을 반환합니다.
        hw.create_tree(): 빈 Tree를 생성합니다. hw.tree로 접근할 수 있습니다.
        hw.clear_tree(): 현재 tree와 Node.stack을 모두 삭제합니다.
        hw.print_tree(): 현재 트리를 print합니다.

        hw.create_node(): 노드를 알림창의 도움을 받아서 생성합니다. 생성된 노드는 Node.stack에 저장됩니다.
        hw.n(ID): 해당 ID를 가진 노드 객체를 Node.stack에서 찾아 반환합니다.
        hw.add_node(NODE, PARENT): 현재 tree에 NODE를 PARENT의 child로 추가합니다. PARENT가 null이라면 root로 추가됩니다. 
        hw.delete_node(NODE): 현재 tree에서 해당 노드 객체를 삭제합니다. Node.stack에는 남아있습니다.
        hw.search_node(NODE_FUNC): 현재 tree에서 NODE_FUNC에 맞는 노드를 하나 찾아 반환합니다.
               (e.g. hw.tree.search_node(node => node.is_leaf()); 명령문은 말단 노드를 찾아 반환합니다)
        hw.search_node_all(NODE_FUNC): 현재 tree에서 NODE_FUNC에 맞는 노드를 모두 찾아 반환합니다.

        hw.make_simple_example(): 예시 GUI tree를 생성합니다. 하단에 간단한 창 예제 단락이 작성되어 있습니다. 
        hw.make_complex_example(): 예시 GUI tree를 생성합니다. 페이지 가장 밑에 있는 이미지를 바탕으로 합니다. 
    

[NodeTypes]

        Graphic Node:  PointNode, LineNode, AreaNode,
        GUI Node    :  WrapperBox, TextBox, Label, 
                       Button, RadioButton, CheckBox, ButtonGroup, 
                       Window,
    

[Node Basic]

        node.id         : 고유한 자연수 id 값
        node.type       : node의 클래스 타입, 읽기전용.
        node.parent     : 부모 노드
        node.childSet   : 자식 노드 집합
        node.pos        : 부모 노드에 대한 상대 좌표 (좌측 상단 값)
        node.x, node.y  : node.pos의 x, y좌표

        node.is_root()
        node.is_leaf()
        node.move(x, y) : node.pos를 (x, y)만큼 이동
        node.addChild(A)    : 전달받은 노드 A를 node의 자식으로 등록
        node.deleteChild(A) : 전달받은 노드 A를 node의 childSet에서 삭제
    

[AreaNode Basic]

        anode.shape     : anode의 외형을 Shape Enum으로 저장. NONE / RECTANGLE / CIRCLE 셋 중 하나
        anode.width 
        anode.height 
        anode.borderColor : color는 Color 자료형으로 정의, ColorEnum을 이용해서 값을 정의해도 된다. (color.js 참조)
        anode.borderWidth
        anode.bgColor
        anode.rightPos  : anode의 오른쪽 좌표를 반환. anode.pos.move(anode.width, 0)과 같다. 읽기전용. 
        anode.downPos   : anode의 아래쪽 좌표를 반환. anode.pos.move(0, anode.height)와 같다. 읽기전용. 
    

[간단한 창 모양 GUI 트리 생성 예제 - hw.make_simple_example() ]

    0. hw.clear_tree()  - 트리 초기화
    1. hw.create_node() - 2,2 - id가 1인 TextBox 노드(타이틀 부분)를 생성합니다.
        1-1. hw.n(1).width = 1000; 
             hw.n(1).height = 50;
        1-2. hw.n(1).text = "TestTitle";
    2. hw.create_node() - 2,1 - id가 2인 WrapperBox 노드(몸통 부분)를 생성합니다. 
        2-1. hw.n(2).width = 1000; 
             hw.n(2).height = 450;
    3. hw.create_node() - 2,4 - id가 3인 Button 노드(닫기 버튼)를 생성합니다. 
        3-1. hw.n(3).width = 50; 
             hw.n(3).height = 50;
        3-2. hw.n(3).text = "X"; 
             hw.n(3).textColor = ColorEnum.RED; 
             hw.n(3).shape = Shape.CIRCLE;
    4. hw.create_node() - 2,1 - id가 4인 WrapperBox 노드(전체 창 감쌀 Wrapper)를 생성합니다.
        4-1. hw.n(4).width = 1000; 
             hw.n(4).height = 500; 
    5. hw.create_tree() - 빈 트리를 생성합니다.
    6. hw.add_node(hw.n(4), null)       - 전체 wrapper를 tree의 root 노드로 등록합니다. 
    7. hw.add_node(hw.n(1), hw.n(4))    - title 노드를 전체 wrapper의 child로 등록합니다. 
    8. hw.n(4).addChild(hw.n(2))        - 몸통 부분 노드를 전체 wrapper의 child로 등록합니다.
    9. hw.add_node(hw.n(3), hw.n(1))    - 닫기 버튼을 title 노드의 child로 등록합니다. 
    A. hw.n(2).pos = hw.n(1).downPos    - 몸통 부분 노드의 상대위치를 title 노드 아래로 지정합니다. 
    B. hw.n(3).pos = hw.n(1).rightPos.move(-hw.n(3).width, 0)
                                        - 닫기 버튼을 title 노드의 가장 오른쪽에 위치시킵니다. 
    C. hw.print_tree() - 결과물을 콘솔 창에 출력합니다.
    

[이어지는 순회 및 조회 예제]

    D. hw.search_node(node => node.type == "Button").print()
                                        - 버튼 클래스의 노드를 찾습니다. id 3인 노드가 반환됩니다. 
    E. hw.delete_node(hw.n(3))          - 닫기 버튼 노드를 트리에서 삭제합니다. 
    F. hw.search_node(node => node.type == "Button")
                                        - 아까와 같이 버튼 클래스의 노드를 찾습니다. null이 반환됩니다.
    

[Class Hierarchy]

[Complex Example View]