김용유닷컴

Virtual Tree View 테스트 프로그램..

참고 문서를 보고 작성해 봄..

Ini 파일을 섹터별로 읽을수 있도록 함.
(우선은 Setup.ini 파일만 읽을수 있음.. 추후.. 파일을 불러서 읽을수 있도록 변경 예정)

Add-on으로 제공되는 VirtualIniTree를 사용하지 않음.. (몇가지 조건이 달라서... 추후 이 컴포넌트도 테스트 예정)

밑의 INI Generator 파일의 생성시 검사 해보기 위해 작성함...

[원문] http://cbuilder.borlandforum.com/impboard/impboard.dll?action=read&db=bcb_tutorial&no=63

 안녕하세요.

VirtualTreeView 의 좋은 기능 중에 하나가  부모와 자식 관계를 관리할 수 있도록 기능을 제공한다는 것입니다.

첨부한 첫번째 그럼처럼  버튼을 누를때 마다   루트노드나  자식노드를 추가하는 예제를 만들어 보겠습니다.


1. 폼에 필요 컴포넌트 가져다 놓기

이번 예제는 첨부한 첫번째 그림과 같은 프로그램을 만들것인데요.


여기에서 필요한 콤포넌트는 TVirturalStringTree 1개 TImageList 1개 TButton 2개 정도를 폼에 올려 놓습니다. 그외에 위치 정렬을 위해서 Panel 같은 콤포넌트를 추가로 올릴 수도 있겠지요. 2. ImageList 에 이미지 로드 ImageList에 적당한 이미지 아무것이 2개를 추가 합니다. 1개는 루트노드를 위한 이미지이고, 다른 것은 자식노드를 위한 이미지 입니다. 3. TVirturalStringTree 의 속성 수정 TVirturalStringTree 의 속성에서 Images 에 ImageList1 를 지정합니다. Header -> Columns 에 새로운 컬럼 1개를 추가합니다. 이것을 화면에는 보이지 않지만, Column 1개를 사용한다는 의미에서 추가합니다. 그런데, 기본으로 추가되는 Columns의 Width 가 TVirturalStringTree 의 Width와 다르기 때문에 그냥 실행하면 너무 작게 나옵니다. 이런 경우 Columns의 Width 값이 TVirturalStringTree 의 Width에 맞추어서 자동으로 조절되도록 하는 속성이 있는데요. Header -> AutoSizeIndex : 0 <-- Column 0를 기준으로 삼음 을 넣어 줍니다. 그러면 Column 0의 Width를 VTV의 전체 크기에 맞추어서 조절합니다. 4. 데이타 구조 선언 이번 예제는 Column 이 1개만 있는 VTV른 만들 것이므로, 노드 데이타 구조체는 아래와 같이 만들었습니다. typedef struct tagNodeData { AnsiString Value; // 노드의 값 int ImageIndex; // 출력할 이미지의 인덱스 } structNodeData; 5. 기본 메소드 구현 OnGetNodeDataSize 이벤트를 아래와 같이 구현해 줍니다. void __fastcall TForm1::VirtualStringTree1GetNodeDataSize( TBaseVirtualTree *Sender, int &NodeDataSize) { NodeDataSize = sizeof(structNodeData); } OnGetText 이벤트를 구현해 줍니다. void __fastcall TForm1::VirtualStringTree1GetText(TBaseVirtualTree *Sender, PVirtualNode Node, TColumnIndex Column, TVSTTextType TextType, WideString &CellText) { if (!Node) return; structNodeData *pNodeData = (structNodeData *)Sender->GetNodeData(Node); CellText = pNodeData->Value; } OnGetImageIndex 이벤트를 구현해 줍니다. void __fastcall TForm1::VirtualStringTree1GetImageIndex( TBaseVirtualTree *Sender, PVirtualNode Node, TVTImageKind Kind, TColumnIndex Column, bool &Ghosted, int &ImageIndex) { if (!Node) return; if (Column == 0) { structNodeData *pNodeData = (structNodeData *)Sender->GetNodeData(Node); ImageIndex = pNodeData->ImageIndex; } } 6. 노드 추가 이제 노드를 추가하는 버튼을 추가해서 버튼의 이벤트에 구현해 줍니다. 6.1. 루트노드 추가 우선 루트노드를 추가하는 버튼을 하나 만들고, 이 버튼의 이벤트에 아래와 같이 구현해 줍니다. void __fastcall TForm1::BtnAddRootNodeClick(TObject *Sender) { PVirtualNode Node; structNodeData *pNodeData; Node = VirtualStringTree1->AddChild(NULL); if (Node) { pNodeData = (structNodeData *)VirtualStringTree1->GetNodeData(Node); pNodeData->Value = "루트노드"; pNodeData->ImageIndex = 0; } } 여기서 주의 깊게 보실 곳은 Node = VirtualStringTree1->AddChild(NULL); 이 부분입니다. AddChild 에서 파라미터가 NULL로 전달되는 경우, 부모가 없는 루트노드로 노드를 생성합니다. 그 아래의 노드 데이타를 넣어주는 것은 이전과 동일하죠 ^^ ImageIndex를 루트노드는 0 번을 사용하였습니다. 6.2. 자식노드 추가 자식노드를 추가하는 것은 AddChild 에서 파라미터로 부모노드의 포인터를 넣어 주면 됩니다. 그래서 예제에서는 현재 포커스가 가 있는 노드를 부모로 해서 생성하는 예제를 만들었습니다. void __fastcall TForm1::BtnAddChildNodeClick(TObject *Sender) { PVirtualNode Node; structNodeData *pNodeData; if (!VirtualStringTree1->FocusedNode) return; Node = VirtualStringTree1->AddChild(VirtualStringTree1->FocusedNode); if (Node) { pNodeData = (structNodeData *)VirtualStringTree1->GetNodeData(Node); pNodeData->Value = "자식노드"; pNodeData->ImageIndex = 1; } } 소스가 루트노드 생성과 거의 똑같지요. AddChild의 파라미터가 있는 것과 노드의 데이타를 다른값을 넣어 주는 것만 다르구요. 첨부한 파일에 전체 프로젝트를 넣어 두었습니다. 한번 실행해 보시면 어렵지 않을 것입니다. PS. VirtualTreeView를 설치 하고 처음 예제를 만들다 보면, 컴파일 에러가 나오거나 헤더파일을 못 찾는 경우가 있는데요. 이것은 project 설정에서 include와 lib 패스가 잘못 설정되어 있어서 그렇습니다. BCB 메뉴중에 Project -> Options 에 들어 가시면 Directories/Conditionals 란 탭이 있는데요. 이곳에서 Include Path 와 Library Path 에 VritrualTreeView와 테마메니져의 Path를 추가해 주시면됩니다. C:\Program Files\Soft Gems\Virtual Treeview\Source C:\Program Files\Soft Gems\Theme Manager\Source 기본으로 설치하셨다면 위 두 패스를 추가하면 됩니다.

[출처] http://cbuilder.borlandforum.com/impboard/impboard.dll?action=read&db=bcb_tutorial&no=62

 1. 속성 수정


위 그림 처럼, VirtualTreeView는 처음 가져다 놓으면, 
Column 0 -> TreeView 같은 형태이고,
Column 1 이후 -> ListView 같은 형태입니다.

그러므로,

첨부한 그림 같은 것이 아니라  List같은 형태를 원하시면,
Object Inspector 에서 원하는 속성을 수정하여야 합니다.


[List 같은 형태로 바꿀때]

* 한라인 전체 선택 :  TreeOptions -> SelectionOptions -> toFullRowSelect  : true
* Column 0 의  Child와 Parent 사이의 연결관계 표시하는 점선 없애기 :
              TreeOptions -> PaintOptions -> toShowTreeLines  : false
* Column 0 의 앞쪽 여백을 없애기 :   Indent : 0
              Indent는  Child와 부모사이의 들여쓰기 할때의 간격입니다.

이렇게 3가지 속성을 변경하면,
VTV가  List 형태처럼 보이게 됩니다.

이전강좌에서 위 3가지 속성을 수정한 실행 파일을 첨부하였습니다.

2. 이미지 출력하기

BCB에서 메뉴등에 이미지 출력하기 위해서는  ImageList를 사용하잔아요.
VTV도 마찬가지로 이미지 출력을 위해서는 ImageList를 사용하게 됩니다.

[Win32] 팔렛트에서 TImageList 콤포넌트를 폼에 올려 놓습니다.
폼에 올려 놓은 것은 TImageList를 더블클릭해서  첨부화일에 있는 bmp 파일을 등록해 줍니다.
각 이미지의 크기는 24x24 입니다.  TImageList의 Widht 와 Height를 24로 변경해 주신후에
불러와야 합니다.

TVirtualStringTree의 속성에서 Images 속성에 방금전에 올리 ImageList의 이름을 설정합니다.

그럼 이제 이미지를 출력할 준비가 된것이구요.

VTV에 어떤 이미지를  출력할 것인지 알려 주는 메소드를 만들어 주서야 합니다.

Events 중에  OnGetImageIndex 란 메소드가 있는데요.
이것을 구현해 주면 됩니다.

void __fastcall TForm1::VirtualStringTree1GetImageIndex( TBaseVirtualTree *Sender, PVirtualNode Node, TVTImageKind Kind, TColumnIndex Column, bool &Ghosted, int &ImageIndex) { if (!Node) return; ImageIndex = 1; } 위 예제는 무조건 ImageList의 index가 1번이 이미지를 출력하라는 것입니다. ImageList는 0부터 시작하므로 1은 두번째 이미지가 나오게 됩니다. 그런데 위 코드를 넣고 실행해 보시면 모든 Column에 동일한 이미지가 나오는 것을 보실 수 있습니다. 두번째 첨부한 그림이 그것입니다. 그럼 Column 0 에만 이미지가 나오고, 다른 컬럼에는 안 나오게 하려면 어떻게 할까요? 그것은 Column 파라미터를 이용하면 됩니다. void __fastcall TForm1::VirtualStringTree1GetImageIndex( TBaseVirtualTree *Sender, PVirtualNode Node, TVTImageKind Kind, TColumnIndex Column, bool &Ghosted, int &ImageIndex) { if (!Node) return; if (Column == 0) ImageIndex = 1; } 이렇게 바꾸었습니다. 그러면 Column 0 에만 이미지가 출력 됩니다. 실제 상황에서는 보통 이미지가 모두 동일하게 출력하지는 않지요. 각 라인의 정보에 따라서 이미지를 다르게 출력하는 것이 보통이지요. 그래서, 처음에 만들었던 구조체에 어떤 이미지를 출력할지를 결정하는 변수를 하나 추가 합니다. typedef struct tagPhonebook { AnsiString Name; AnsiString Tel; AnsiString Sex; int ImageIndex; // 출력할 이미지의 index } structPhonebook; 그리고, 위의 OnGetImageIndex는 <textarea name="code" class="cpp" cols="80" rows="10"> void __fastcall TForm1::VirtualStringTree1GetImageIndex( TBaseVirtualTree *Sender, PVirtualNode Node, TVTImageKind Kind, TColumnIndex Column, bool &Ghosted, int &ImageIndex) { if (!Node) return; if (Column == 0) { structPhonebook *pPhonebook = (structPhonebook *)Sender->GetNodeData(Node); ImageIndex = pPhonebook->ImageIndex; } } 이렇게 변경합니다. 즉, 입력한 노드의 데이타에서 ImageIndex를 가져와서 설정하는 방식입니다. 그럼 입력하는 곳에서는 ImageIndex를 지정해 주어야 겠지요. void __fastcall TForm1::Button1Click(TObject *Sender) { PVirtualNode Node; structPhonebook *pPhonebook; Node = VirtualStringTree1->AddChild(NULL); if (Node) { pPhonebook = (structPhonebook *)VirtualStringTree1->GetNodeData(Node); pPhonebook->Name = "볼레롱"; pPhonebook->Tel = "02-1234-5678"; pPhonebook->Sex = "남자"; pPhonebook->ImageIndex = random(27); // ImageList에 추가한 이미지가 27개라서 이사이의 값을 지정하도록 } } Button1Click을 위와 같이 수정하였습니다.

오늘은 여기 까지 입니다.

그럼 수고하세요!

[원문] http://cbuilder.borlandforum.com/impboard/impboard.dll?action=read&db=bcb_tutorial&no=61
 안녕하세요.

3번째 시간입니다.
지난번 글보시고,  VirtualTreeView 의 도움말중  Step by Step 이란 장을 미리 보시분들은
글의 순서가 똑갔네 ^^ 하고 생각하시는 분들오 있을듯하네요.

제가 참조한 것도 그것이라  비슷할 것입니다.

이번시간에는

폼에  VirtualTreeView 를 올려 놓고,  컬럼 3개를 추가해서
각 컬럼에  데이타를 넣어주는 것을 해 보겠습니다.

VirtualTreeView 를 사용할 때에는 먼저  내가 무슨 데이타를 가지고 화면에 어떻게 보여줄 것인지 먼저
고민 하셔야 합니다.

제가 3개의 컬럼을 가진 VirtualTreeView 를  리스트 형태로 보이는 것으로 하겠습니다.

1. 데이타할 구조체를 만들자

VirtualTreeView 는 지난번에도 말씀 드렸지만,   데이타 저장 공간을   VTV (VirtualTreeView )가 할당해주고,
우리는 이것을 사용하고,
사용이 끝나면  VTV 가 해제를 해 주는 구조라고 하였습니다.

그러므로, 제일 먼저할 일은 내가 필요한 데이타의 구조체를 만들 어 주는 것입니다.

Class로 하면 안되냐구요?
위에서도 이야기 했지만  우리가 new를 하지 않습니다. Class 로 만들고 new없이 사용할 때 어떤 문제가 생길까요?

저도 모르지요 ^^  원하시는 분은 해 보세요.  단 모든 책임은 본인이.... ^^

typedef struct tagPhonebook { AnsiString Name; AnsiString Tel; AnsiString Sex;} structPhonebook, *ptrstructPhonebook;
위처럼 구조체를 선언했습니다.

Column0  ->  이름
Column1  ->  전화번호
Column2  ->  성별

이렇게 출력하려고 합니다. 

지난번 강좌에서 말씀 드렸지만,  Node 데이타는  할 줄(Row)에  대한 데이타 모두를 담을 수 있도록 만들어야 합니다.
각 셀별로 따로 관리 하는 것이 아닙니다.


2.  컬럼을 추가 하자

보통 컬럼이 하나라면 이 작업을 꼭 해주어야 할 필요는 없지만,   컬럼을 추가해 주어야 할 수 있는 기능들이 있기 때문에  컬럼을 추가하는 것을 권장합니다.

폼위에  TVirtualStringTree 콤포넌트를 하나 올려 놓으시구요.

Obejct Inspector 에서  Properties 를 보시면,

Header -> Columns

항목이있습니다.  여기에서  오른쪽의  [...] 이라는 버튼을 누르면  컬럼을 추가 하는 윈도우가 나옵니다.

윈도우가 나오면, 왼쪽 상단의  추가하는 버튼을 누러서    Column을 추가하여
순서대로 Text 속성에 
       이름 , 전화번호,  성별
을 넣어 줍니다.

첨부한 그림의 첫번째 것입니다.

그런다음에 윈도우을 닫습니다.

어!    VirtualTreeView 는 똑같네요.  컬럼 추가한거 어디 갔지?
VirtualTreeView 는 header보이는 것도 속성에서 조절하기 때문에  속성을 바꾸어 줄때까지는 안 보입니다.

Header -> Options -> hoVisible

값을 true로 바꾸시면,  헤더가 보이게 됩니다.

3.  내가 사용할 데이타의 크기를 VirtualTreeView  에 알려 주자.

다시한번 말씀 드리지만,   데이타의 할당/해제 VTV가 한다고 하였잖아요.
그럼,  VTV가 할당하여야할 데이타의 크기를 알아야 하잖아요.

그래서 꼭 해주서야 하는 것이   이 작업입니다.

데이타의 크기를 할려주는 방법은  2가지가 있는데요.
노드의 크기가  고정인 경우와    가변인 경우가 다릅니다.

고정인 경우는  Properties 에 보시면,   NodeDataSize 란 것이 있습니다.
여기에 크기를 넣어 주시면 됩니다.

그런데 사실 데이타 크기를 손으로 계산에서 여기 써 넣을 일은 없겠지요 ^^

     VirtualStringTree1.NodeDataSize = sizeof(structPhonebook);


이런식으로 넣어 주시면 됩니다.   트리가 사용되기 전에... 

또다른 방법은   Events 중에   OnGetNodeDataSize 를 구현해 주는 것입니다.
이것에 가변크기일때 사용하는 방법이지만,  고정 일때 사용해도 상관없겠지요.

void __fastcall TForm1::VirtualStringTree1GetNodeDataSize( TBaseVirtualTree *Sender, int &NodeDataSize) { NodeDataSize = sizeof(structPhonebook); }
위 두 코드는 동일한 동작을 합니다만  전 주로 두번째 코드로 만듭니다 ^^

4.  데이타를 VTV 의 셀에 출력하자

다음으로 하셔야 할 것이  자신이 추가한 데이타가  VTV의 각 셀(혹은 Column) 에 출력되도록 하여야 합니다.
이것은  OnGetText  란 이벤트를 구현해 주면 됩니다.

void __fastcall TForm1::VirtualStringTree1GetText(TBaseVirtualTree *Sender, PVirtualNode Node, TColumnIndex Column, TVSTTextType TextType, WideString &CellText) { if (!Node) return; structPhonebook *pPhonebook = (structPhonebook *)Sender->GetNodeData(Node); switch (Column) { case 0: CellText = pPhonebook->Name; break; case 1: CellText = pPhonebook->Tel; break; case 2: CellText = pPhonebook->Sex; break; } }
위와 같이  메소스들 구현하면 되는데요.

Node 란 파라미터는  출력할 Node의 포인터가 옵니다.
이것은 NULL 아닌지 확인 먼저 하시구요.

NULL 이 아니면,   GetNodeData(Node);  메소드를 사용하면, 해당 노드에 할당되어 있는 데이타의 포인터를
돌려 줍니다.   이것을 우리가 사용할 구조체 포인터로 넣어 주시면 됩니다.

Column  파라미터는 출력할 컬럼의 번호을 알려 줍니다.
즉 Column 번호가 0 이면 이름을 , 1이면 전화번호, 2이면 성별을 출력하도록 하였습니다.

여기 까지가 최소한 구현해 주어야 할 메쏘드 들이구요. 
이제야 사용할 준비가 된 것입니다.

이제는 실제 데이타를 넣어주면 됩니다.

5.  데이타를 넣자 ^^

데이타를 넣는 방법은  다시 한번 이야기 하지만  VirtualTreeView   한테 데이타 넣을 공간을 할당해줘
하고 요청한 후에  공간이 할당되면 그곳에 데이타를 넣어 주면 됩니다.

해제는 언제 하나구요.  VirtualTreeView   가 알아서 해 주므로 신경 안 쓰셔도 됩니다.

데이타를 넣는 방법은

PVirtualNode AddChild(PVirtualNode Parent, void *UserData = NULL);

이 함수를 이용해서 넣어 줍니다.

즉, AddChild 를 호출하면 ,   노드하나 만들어줘 하고 VTV에 요청하는 것입니다.
이것이 돌려 주는 것이  PVirtualNode 란  Node의 포인터 이구요.

이 Node 포인터를 GetNodeData 에 넘겨주면 실제 저장할 곳의 포인터를 돌려 줍니다.

예제에서는  버튼을 하나 만들구요.  버튼을 누를 때마다  노드를 추가하는 것으로 하였습니다.

void __fastcall TForm1::Button1Click(TObject *Sender) { PVirtualNode Node; structPhonebook *pPhonebook; Node = VirtualStringTree1->AddChild(NULL); if (Node) { pPhonebook = (structPhonebook *)VirtualStringTree1->GetNodeData(Node); pPhonebook->Name = "볼레롱"; pPhonebook->Tel = "02-1234-5678"; pPhonebook->Sex = "남자"; } }
위 소스 보시면, 아시겠지요 ^^

AddChild 로  노드 추가 하고,
그 노드에서 데이타 저장위치 가져오고,
그 저장위치에 실제 데이타 넣어 주구요.

* 오늘 강좌는 여기 까지 입니다.

첨부한 파일에  소스와 실행파일 모두가 있구요.

이거 실행 하신 후에  헤더를 Drag&Drop 해서  컬럼의 순서를 바꾸어 보세요 ^^
기본기능으로 제공합니다.