JWL 트리 컴포넌트 (한글)

문서 옵션 JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 토론 샘플 코드 영어원문  제안 및 의견 피드백

난이도 : 초급

Breffni Coffey, Software Engineer, IBM　

2007 년 12 월 31 일

JWL (JSF Widget Library)은 많은 복잡한 컴포넌트들로 구성되어 있습니다. 이것을 통해서 풍부하고 믿을 수 있는 웹 애플리케이션을 빠르게 구현할 수 있습니다. Tree Control 은 이와 같은 컴포넌트의 대표적인 예입니다. JWL 컴포넌트들은 현재 IBM Websphere Studio Application Developer 5.1.2 (WSAD), IBM Rational Application Developer 6.0 (IRAD) 이후 버전에 포함되어 있습니다. IRAD에서 제공되는 툴링을 통해 이와 같은 컴포넌트를 사용하여 복잡한 웹 애플리케이션들을 빠르고 간단하게 개발할 수 있습니다. 이 글에서는 데이터를 JWL Tree 컴포넌트로 연결시키고 컴포넌트를 쉽게 설정하여 최소한의 코딩으로 데이터를 구성, 관리, 디스플레이 하는 방법을 설명합니다.

JWL 다운로드 JWL 커뮤니티 소스 사이트에서 JWL을 다운로드 할 수 있습니다. 파일 섹션에는 그날의 빌드와 릴리스 빌드가 포함되어 있습니다. IBM 인트라넷 ID와 패스워드가 필요합니다.

JWL 트리 컴포넌트 소개

JavaServer Faces™ (JSF™) Widget Library (JWL) Tree 컴포넌트는 브라우저에 데이터를 저장할 수 있도록 계층적 구조를 제공한다. 그렇다면 이것은 브라우저 상의 일반 트리 컴포넌트와는 어떻게 다른가? 이 트리는 JWL 라이브러리의 특정 컴포넌트 고유의 기능을 구현한다. 클라이언트 측 데이터 스토리지를 지원한다. 다시 말해서, 데이터 액세스가 더 빨라지고, 페이지 리프레시도 더욱 빠르며, 서버로의 라운드 트립이 적다. 트리 컴포넌트는 사용자 친화적이며, 매우 강력한 웹 컴포넌트로서의 우수성을 드러내는 다른 많은 기능들을 지원한다. 사용자 인터페이스(UI) 설정의 관점에서 볼 때, IRAD 내에서 트리를 설정할 수 있고, 여러분이 JWL 전문가라면, 텍스트 에디터에서도 설정할 수 있다. 모든 아이콘들은 IRAD 내의 프로퍼티 페인을 사용하여 수정될 수 있다. 또한, 트리의 최대 높이와 넓이를 지정할 수 있는 옵션도 있고, 브라우저에서 트리의 모습을 보다 상세하게 설정할 수 있는 tree.css 스타일 시트도 있다. JWL 컴포넌트는 트리 레벨과 노드 레벨로 많은 커스텀 이벤트 핸들러도 갖고 있다. 이것은 사용자 정의 이벤트를 실행하는데 사용될 수 있다. 또한, 페이지 상의 다른 JWL 컴포넌트와 상호 작동하여 컴포넌트들간 순전한 클라이언트 측 관계를 제공하는데 사용될 수 있다. 이 모든 기능들은 다음 섹션에서 자세히 설명하도록 하겠다.

위로

IRAD에서 기본적인 트리 컨트롤 생성하기

IRAD에서, 다음 단계를 따라서 기본 JWL 트리 컨트롤을 포함하고 있는 JavaServer Page™ (JSP™)를 만들고 이를 서버에서 실행한다:

1. IRAD의 Web 퍼스펙티브에서, 새로운 Dynamic Web Project를 만든다.
2. Java Source 폴더를 오른쪽 클릭하고, Import 옵션을 선택하여 페이지 밑에 있는 SampleModel을 프로젝트로 가져온다.
3. 새롭게 반입된 SampleModel에서 루트 객체를 사용하여 Page Data 뷰에 새로운 빈을 만든다.
4. 페이지 데이터에서 클라이언트 데이터에 클라이언트 데이터를 만든다. Design 뷰를 Source 뷰로 바꾸면(그림 1), 다음과 같은 태그가 JSP에 나타난다.
   
   그림 1. Source 뷰로 전환하기
   
   
   

   <odc:clientData modelName="" value="#{pc_TreeSample.myBean}" id="clientData1" > <f:actionListener type="com.ibm.faces.bf.listeners.DiffListener"> </odc:clientData">

   
   
5. 트리 컴포넌트를 스크린 오른쪽에 있는 Faces Client Drawer에서 페이지로 끌고 온다.
6. Client Data 뷰에서 빈을 끌어와서 이를 트리에 놓는다.
7. 이 시점에서 소스 코드를 검토한다. 클라이언트 바인더 태그를 주목하라. 이것은 트리 컨트롤에 연결된 데이터를 구분하고 있다.

   <odc:tree styleClass="tree" rootVisibleFlag="true" enableSelect="false" id="tree1" > <odc:clientBinder alue="#{pc_TreeSample.myBean} > </odc:clientBinder > <odc:treeNodeAttr attributeName="name" className="com.ibm.odcb.tutorial.businessobjects.Root" id="treenodeattr1" > </odc:treeNodeAttr > </odc:tree >

   
   
8. 디자인 뷰에서 트리를 선택한다. 트리의 프로퍼티는 현재 디스플레이 되고, 스크린 아래에 있는 Property 패널에서 설정할 수 있다.
9. 프로젝트를 비우고 재구현 한다.
10. 서버에서 이것을 실행한다.

위로

트리 애트리뷰트와 이벤트

다음은 JWL V2.0의 트리 태그와 연결된 애트리뷰트와 이벤트 리스트이다. 새로운 애트리뷰트는 파란색으로 표시했다.

위로

트리 노드 애트리뷰트와 이벤트

다음은 JWL V2.0의 treeNodeAttr와 관련된 애트리뷰트와 이벤트 리스트이다.

위로

애트리뷰트와 이벤트를 사용하여 JWL 트리 컨트롤 커스터마이징 하기

odc:tree 프로퍼티 패널

이 섹션에서는 이 글을 시작할 때 생성했던 기본 트리로 돌아갈 것이다. 먼저, 프로퍼티 패널의 odc:tree 섹션을 보자. (그림 2)

다음과 같은 텍스트 필드를 사용하여 기본 애트리뷰트와 레이블을 커스터마이징 하는데 이 패널을 사용할 수 있다:

1. Id: 기본 값은 tree1이다. 이것을 알맞게 커스터마이징 할 수 있다.
2. Value: 빈이 IRAD에서 기본 트리 컨트롤 만들기의 6 단계에 있는 트리 컨트롤로 연결될 때 이 필드가 채워진다. 이 값은 현재 바인딩의 결과로 @{pc_DocTree.myBean}을 읽는다.

   주: 값 필드에 있는 @ 표시는 JWL 컴포넌트가 클라이언트 데이터로 연결되었다는 것을 나타낸다. # 표시는 페이지 데이터가 사용되고 있음을 나타낸다. 현재, 트리 컨트롤은 클라이언트 데이터로만 연결되기 때문에, # 표시는 이 필드에서 나타나서는 안된다.

3. Tree style: 기본 css 파일이 개인적인 스타일 프레퍼런스를 사용하여 디스플레이 될 수 있다. (트리용 CSS 스타일 바꾸기 참조)
4. Size (Width & Height): 넓이와 높이는 픽셀 또는 백분율을 사용하여 설정될 수 있다. 이 두 개의 애트리뷰트는 같은 측정 단위를 사용하여 설정되어서는 안된다. 넓이가 픽셀로 설정되면 높이는 백분율로 설정되거나, 또는 그 반대로 설정되어야 한다.
5. Enable Node Selection: 이 박스를 선택하면 체크 박스가 트리 노드 옆에 나타난다. 이 체크 박스는 이벤트를 실행하는데 사용될 수 있다. 기타 트리 및 노드 이벤트에서 자세히 설명해 놓았다.
6. Show Root Node: 이 체크 박스는 기본적으로 선택되며, 루트 노드가 처음에 디스플레이 된다. 이 체크 박스를 비우면(그림 3), 루트가 이 페이지에서는 더 이상 보이지 않는다. 트리의 상위 레벨에서 한 개 이상의 노드가 필요한 상황에 특별히 유용하다. 또한, 탑 레벨 노드에 확장 및 축소 기능을 갖춰야 할 경우에 이 기능을 사용하는 것도 좋은 방법이다. 트리의 루트 노드는 확장 또는 축소될 수 없다.
   
   그림 3. "Show Root Node"를 비우면 루트가 숨겨진다.
   
   
   
   
7. Click to create/edit event handlers for tree control: 이 버튼을 통해 QuickEdit 뷰로 갈 수 있는데, 이 곳에서 커스텀 트리 이벤트용 핸들러를 만들 수 있다. QuickEdit 패널은 기타 트리 및 노드 이벤트 섹션에서 자세히 설명한다.

Tree Node List 프로퍼티 패널

이제 그림 4의 Tree Node List 패널을 선택해 보자. 이 패널에서는 사용자가 개별 트리 노드를 설정할 수 있다. 현재, 루트 노드만 트리에 디스플레이 되고 있다. 더 많은 노드를 디스플레이 하기 위해서는, Select Nodes to Display 패널에서 노드를 선택한다.

Tree Node List 페인에서 노드들 중 하나를 클릭하면, 오른쪽에 있는 텍스트 필드가 값을 수정하여 선택된 노드와 매치시킨다. 각 노드에는 다음 정보가 디스플레이 되고 설정도 가능하다:

1. Id: 기본 값은 treeNodeAttr과 고유 넘버를 사용하여 이미 주어졌다. 이것을 커스터마이징 한다.
2. Label value: 트리 노드용 레이블이다. 트리가 처음 만들어지면 샘플 빈과의 드래그&드롭 바인딩으로 채워진다.
3. Class name: 트리 노드와 관련이 있는 빈 내의 자바 클래스이다. 이 필드는 트리 컨트롤과 빈의 연결에 의해 채워진다. 이 클래스는 IRAD 워크벤치의 오른쪽에 있는 Project Explorer 뷰에서 보인다. Dynamic Web Project의 Java Resources\Java Source 디렉토리에 있는 com.ibm.odcb.tutorial.businessobjects 패키지에 위치해 있다.

이 패널의 다른 필드들은 다음 섹션에서 상세히 다루겠다.

노드 아이콘의 커스터마이징

JWL 트리 노드의 기본 이미지는 그림 5와 같은 표준 트리 그래픽이다.

Tree Node List 패널에서 이 이미지들을 바꿀 수 있다. (그림 4). 트리 계층의 다른 레벨에 있는 노드에 선택된 아이콘들과 상관 없이, 트리에 있는 각 노드 레벨은 다른 열린 폴더 아이콘과 닫힌 폴더 아이콘을 갖도록 설정될 수 있다. 이를 위해서, Select Nodes to Display 패널에서 커스터마이징 된 이미지를 필요로 하는 노드를 선택한다. Open Icon과 Close Icon 필드 옆에 제공된 검색 버튼을 사용하여, 적절한 이미지를 선택한다. 아이콘들이 선택되면, 자동으로 Web Project로 반입되고, 새롭게 생성된 WebContent\ibmjsfres 디렉토리에서 찾을 수 있다.

주: 아이콘 이름에는 공백이 들어가서는 안된다.

트리에 디스플레이 되는 데이터 커스터마이징

트리에 디스플레이 하고자 하는 데이터의 하위 세트 커스터마이징은 두 가지 다른 개발 단계를 거친다:

1. 데이터 서버 측: 이 방식은, 데이터를 클라이언트로 보내기 전에 데이터의 하위 세트를 선택한다. 클라이언트에 저장된 중복되고 사용되지 않는 데이터를 줄이고, 성능을 높이며, 메모리 사용을 줄인다는 점이 장점이다. Client Data 뷰에 있는 빈을 선택함으로써 수행된다. 포트폴리오 빈을 오른쪽 클릭하고, Configure를 선택한다. 여기에서 트리를 확장하고 클라이언트 측으로 갈 노드를 선택할 수 있다. 노드를 비우면, Select Nodes to Display 패널의 선택 가능한 옵션으로서 이것을 볼 수 없다.
2. 데이터 클라이언트 측: 데이터가 클라이언트로 보내진 후에 데이터의 하위 세트를 선택한다. 이 방식은 페이지에 여러 JWL 컴포넌트가 있고, 빈의 전체 데이터 콘텐트를 사용해야 할 경우 유용하다. 이 경우, 모든 데이터는 페이지 상의 다른 JWL 컴포넌트를 위해 클라이언트 측에 저장 및 액세스 되어야 하지만, 특별히 트리에는 필요하지 않다. 데이터 클라이언트 측을 정리하려면, Select Nodes to Display 패널을 사용한다. (그림 4의 왼쪽) 노드가 선택 및 정리되어 알맞게 디스플레이 된다.

스크롤 가능한 트리 만들기

odc:tree 패널에서 사용할 수 있는 필드를 사용하여 특정 사이즈로 넓이와 높이를 설정하면 트리가 특정 사이즈로 설정된다. 트리가 확장된 후에 특정 사이즈를 초과하면 스크롤바가 페이지에 나타난다. 그림 6에 나타난 예제에서, 트리의 높이는 100 픽셀로 설정되고, 넓이는 200 픽셀로 설정된다. 처음에, 트리가 서버에 디스플레이 될 때 어떤 스크롤바도 나타나지 않지만, 두 노드 모두 확장되면, 트리의 높이가 100 픽셀을 초과하고 트리는 스크롤이 가능해 진다. 트리의 넓이는 200 픽셀 범위 안에서 유지되기 때문에, 수평 스크롤바는 보이지 않는다.

JWL 컴포넌트 카탈로그 JWL 컴포넌트에 대해 자세히 알고 싶다면 JWL 컴포넌트 카탈로그를 참조하라. IBM 내부 인트라넷 ID와 패스워드를 사용하여 Boundary Firewall Service에 로그인 해야 한다. 작은 창이 사라질 때까지 기다리면, JWL 컴포넌트 카탈로그로 자동으로 이동한다.

드래그&드롭 이벤트 핸들러 사용하기

Drag & Drop 이벤트 핸들러가 JWL 2.0에 도입되었다. 이것으로, 아이템(예, 데스크탑의 파일)을 트리 노드에 놓을 때 실행될 이벤트 핸들러를 만들 수 있다. 트리용 기타 모든 이벤트 핸들러들이 상응하는 IRAD 툴링을 포함하고 있지만, Drag & Drop 리스너는 현재 코드에 직접 추가되어야 한다. 이 이벤트용 리스너를 설정하기 위해 사용되는 태그는 onnodedrop 이벤트이고, 이것은 <odc:tree> 태그에 추가된다.

다음은 Drag & Drop 이벤트 핸들러를 직접 만드는 단계이다:

1. JavaScript™ 경고를 포함하고 있는 drop 핸들러 메소드를 만들고, 이것을 JSP 위에 있는 스크립트 태그 안에 둔다.

   <LINK rel="stylesheet" type="text/css" href="theme/tree.css" title="Style"> <script type="text/javascript"> function func_1(thisObj,thisEvent) { alert("we are dropping on a tree node!"); } </script> </HEAD>

   
   이 메소드의 매개변수는 eObject이고, 이 노드(thisObj)와 상응하는 이벤트 객체(thisEvent)와 관련이 있다. 네이티브 JavaScript 이벤트는 thisEvent.nativeEvent 변수를 사용하여 메소드 내에서 사용할 수 있다. 데이터를 드래그&드롭 하면서 dataTransfer 객체를 사용할 대 이것은 매우 중요하다.
2. JSP의 <odc:tree> 태그 내에 있는 핸들러 함수를 가리키는 새로운 onnodedrop 태그를 추가한다.

   <odc:tree styleClass="tree" rootVisibleFlag="true" enableSelect="false" id="tree1" onnodedrop="return func_1(this,event);">

   
   
3. 페이지를 저장하고, 프로젝트를 리프레시 및 청소하고, 서버에서 페이지를 실행한다.
4. 파일을 데스크탑에서 트리 노드로 가져간다.
5. 함수 안에 있는 경고는 파일이 노드에 놓일 때 디스플레이 된다. (그림 7)
   
   
   그림 7. drop 이벤트 시 디스플레이 되는 경고
   
   
   

기타 트리 및 노드 이벤트

기타 트리 및 노드 이벤트는 수동 방식으로 구현될 수 있다. onnodedrop 태그를 이벤트용 태그로 대체하면 된다. 하지만, IRAD 툴링을 사용하여 애플리케이션을 개발하는 것이 더 편하다면, QuickEdit 뷰를 사용하여 구현할 수 있다. QuickEdit 뷰는 Web 퍼스펙티브에서 있을 때 볼 수 있다. 이것은 IRAD 워크벤치의 밑에 있는 Property 페인 바로 옆에 있는 탭이다. 이 패널이 열린 상태에서, Design 뷰에서 Tree 컨트롤을 선택한다. Tree용 두 개의 개별 이벤트 세트가 있다. 전체 트리에 속한 것들과(onnode 스트링이 앞에 놓인다. 예, onnodeselect와 onnodehighlight), 개별 Tree 노드에 국한된 것이 있다. (on 접두사가 붙는다. 예, onhighlight와 onselect). 전체 트리용 이벤트를 만들 때, Design 뷰에 있는 전체 트리를 선택하고, QuickEdit 페이지의 왼쪽에 있는 리스트의 엘리먼트에 접두사 onnode가 있는지를 확인하라. 노드 스팩의 이벤트가 나타나게 하려면, 디자인 뷰에서 이벤트를 실행하고 싶은 노드를 선택하면, 노드 이벤트 리스트가 왼쪽에 나타난다.

이벤트 핸들러는 메소드 바디를 타이핑 하거나 QuickEdit 스크린의 오른쪽에 있는 패널에 붙임으로써 생성될 수 있다.

특정 트리 노드의 경우, 사전 작성된 JWL 핸들러 메소드를 사용하여 페이지 상의 다른 JWL 클라이언트 컴포넌트와 인터랙팅 하는 옵션도 있다. 이러한 커스텀 핸들러를 사용하는 방법에 관한 상세한 설명은 개발자 가이드 섹션 3.16: 컨트롤, 이벤트 핸들러 연결하기를 참조하라.

트리용 CSS 스타일 바꾸기

트리 스타일은 프로젝트의 WebContent\themes 폴더에 있는 tree.css 파일에서 설정된다. 이 파일에는 트리 컨트롤에 대한 많은 설정 가능한 스타일이 포함되어 있다. 이것의 예가 labelMouseoverStyle이다. 이것은 마우스를 이동할 때 트리 노드의 텍스트 레이블의 스타일을 관리한다. 이 스타일의 기본 값은 다음과 같다:

/*Use for node text label style when mouse over the label*/

tree.labelMouseoverStyle

{

	FONT-SIZE: 11px;

	COLOR: #000000; FONT-FAMILY: 

	Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; 

	font-style: italic;

}

이것은 그림 8에 보이는 것처럼 디스플레이 된다.

자신만의 커스터마이징 스타일을 사용하여 마우스 오버 동안 트리 노드 레이블의 모양을 바꿀 수 있다. 이를 위해서, 개인화 된 스타일 시트를 만든다. 기존 tree.css의 콘텐트를 복사하고, 이것을 새롭게 생성된 myStyles.css에 붙인다. JSP의 위에 새로운 스타일 시트에 대한 링크를 만든다.

<LINK rel="stylesheet" type="text/css" href="theme/myStyle.css"
	title="Style">

JSP 파일에 있는 styleClass 애트리뷰트를 다음과 같이 바꾼다:

		<odc:tree styleClass="myStyle" 

새롭게 생성된 스타일의 값을 변경하여 tree_ 접두사 대신 myStyle_ 접두사를 갖도록 한다. 이제, 새롭게 생성된 스타일 시트에서 labelMouseoverStyle을 수정할 준비가 되었다. 다음은 백그라운드 애트리뷰트를 설정함으로써 회색으로 된 텍스트를 강조하도록 설정하는 방법이다.

관련 자료 다운로드 Rational Application Developer 다운로드 하기

/*Use for node text label style when mouse over the label*/

breff.labelMouseoverStyle

{

	FONT-SIZE: 11px;

	COLOR: #000000; 

	BACKGROUND: #CCCCCC;  

	FONT-FAMILY:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; 

	font-style: bold;

}

프로젝트를 비우고 재구현 하여, 서버에서 재실행 한다. 마우스 오버 작동이 발생하면, 노드 레이블은 그림 9와 같은 모습이 된다.

위로

다운로드 하십시오

	다운로드 방식에 대한 정보

참고자료

• JWL 개발자 가이드
  
  
• Eclipse.org: 이클립스 개발 관련 정보 사이트.
  
  
• IBM Rational Application Developer 제품 페이지: 기술 문서, 하우투 아티클, 교육, 다운로드, 제품 정보.
  
  

• IBM Rational Application Developer: developerWorks에서 시험판 다운로드.
  
  

• 포럼에 참여하기.
  
  
• Rational Software Architect, Software Modeler, Application Developer, Web Developer 포럼: Rational Application Developer 관련 질문답변.

필자소개

		Breffni Coffey는 2002년부터, 아일랜드의 IBM Dublin Software Lab에서 근무했다. 아일랜드의 Dublin City University에서 Computer Applications 학위를 받았으며, Sun 인증 자바 개발자이다. 2004년 9월에, JWL Tree Control의 리드 개발자로서 JWL 팀에 합류했다.

기사에 대한 평가

보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오. 귀하께서 원하시는 정보를 얻었습니까? 예 아니오 잘 모르겠음   이 페이지 개선을 위한 의견을 주십시오:   이 정보가 얼마나 유용했습니까? (1 = 전혀 도움이 되지 않음, 5 = 매우 유용함) 1 2 3 4 5

이 문서 북마킹 하기 mar.gar.in naver eolin del.icio.us

위로