pvbrowser layout 을 이용한 화면 배치 활용법-01

레이아웃에 대해 알아보자.

우선 빈 프로젝트를 하나 만들어 컴파일 후 pvbrowser에서 확인해 보자.

그림 1.pvbrowser 실행화면

그림 1이 실행된 화면이다. 화면 하부와, 우측 편에 스크롤바가 부착되어 있다.

그림 2. 서버 메시지 창

그림 2는 서버 메시지 창에 pvbrowser 클라이언트가 처음 접속했을 때 나타나는 메시지 이다.

서버는 포드 5050에서 들어오는 요청, 대기 상태에 있다가 클라이언트가 접속하면 새로운 스레드를 만들어 준다. 이 창에 보면
version of pvbrowser client =4.8.3 -qt5 Windows (2560x1440)
이란 메시지가 있다. 버전 넘버 4.8.3인 pvbrowser가 접속했고, OS는 윈도, 모니터 해상도는 2560x1440...

그림 3.pvbrowser 최대 창

pvbrowser를 최대 크기로 했다. 하단 수평 스크롤바는 없어 졌지만, 우측 스크롤 바는 그대로 있다. 그냥 사용해도 되지만 보기가 싫다.

pvbrowser에서 나타나는 스크롤 바를 어떻게 하면 제거 할 수 있을 까? 여러 방법이 있겠지만, 본인은 layout을 사용한다.

한번 해보자.
디자이너 화면에서 오른쪽 마우스 버턴을 눌렀을 때 나타나는 팝업 창에서 edit layout (CTRL+L)을 선택하면 레이아웃 편집 화면이 나타난다.

그림 4. 에디터 레이아웃 창

그림 4와 같이 자세한 설명과 함께 레이아웃 편집 창이 나타난다.

그림 5.레이아웃 예제

레이아웃 창의 오른쪽은 이런 식으로 사용하라는 예제 파일이다. 정확한 메뉴얼은 아직 찾지 못했다. 현재는 그냥 이 예제에서 유추해 사용하고 있다.

그림 6. 레이아웃 생성자 예제

그림 7. 레이아웃 편집 예제

레이아웃 편집 창의 왼쪽은 크게 4개의 부분으로 구분할 수 있다. 첫번째는 레이아웃 생성자 예제, 예제 밑에 보면 생성자를 편집할 수 있는 텍스트 박스가 있다. 이 곳에 필요한 레이아웃을 만들어 주면 된다. 세번째, 네번째 항목은 생성자에서 만든 레이아웃을 이용해 위젯을 배치하기 위해 사용하는 텍스트 박스가 있다. 쭈욱.... 살펴보고 잘 사용하면 된다.


이 곳에 입력하는 코드가 어느 곳에 삽입되는 지 확인하기 위해, GUI 코드가 삽입되는 mask1.cpp의 내용을 확인해 보자
먼저 코드의 맨 윗 부분에 위치한 enum 구문에 다음과 같은 것이 정의 되어 있다.

enum { ID_MAIN_WIDGET = 0; ID_END_OF_WIDGETS }
이 구문은 mask GUI 에서 사용되는 위젯의 id값을 저장하기 위해 사용된다.
기본적으로 ID_MAIN_WIDGET, ID_END_OF_WIDGETS 두개의 위젯이 정의 되어 있다.

"ID_MAIN_WIDGET", mask GUI의 기본 배경이라고 생각하자...

코드의 중간에 있는 generated_defineMask() 함수는 다음과 같다.

static int generated_defineMask(PARAM *p) { int w,h,depth; if(p == NULL) return 1; if(widgetName[0] == NULL) return 1; // suppress unused warning w = h = depth = strcmp(toolTip[0],whatsThis[0]); if(widgetType[0] == -1) return 1; if(w==h) depth=0; // fool the compiler pvStartDefinition(p,ID_END_OF_WIDGETS); pvEndDefinition(p); return 0; }

마스크 디자이너 모드에서 edit layout 창에 있는 생성자 텍스트 박스에 다음과 같은 코드를  입력하자. 다 입력하기 귀찮으면 생성자 예제에서 복사하여 사용하면 된다.

pvQLayoutVbox(p, ID_MAIN_WIDGET, -1);

static int generated_defineMask(PARAM *p) { int w,h,depth; if(p == NULL) return 1; if(widgetName[0] == NULL) return 1; // suppress unused warning w = h = depth = strcmp(toolTip[0],whatsThis[0]); if(widgetType[0] == -1) return 1; if(w==h) depth=0; // fool the compiler pvStartDefinition(p,ID_END_OF_WIDGETS); pvQLayoutVbox(p, ID_MAIN_WIDGET, -1); pvEndDefinition(p); return 0; }

자, 그럼, 궁금하니까...pvQLayoutVbox() 함수에 대해 한번 알아 보고 가자.

int pvQLayoutVbox(PARAM* p, int id, int parent )

이런,... 정의만 되어있고 자세한 내용은 없다.

자, 컴파일 한 후 pvbrowser에서 어떻게 나타나는 지 확인해 보자.

그림 8. 레이아웃 적용 후 실행화면

짜잔, 스크롤 바가 모두 사라 졌다.
레이아웃은 Qt와 개념이 거의 동일하다.

레이아웃 생성자는 pvQLayoutVbox, pvQLayoutHbox, pvQLayoutGrid. 이 세가지를 지원해 준다. 상황에 맞춰 레이아웃을 만들어 준 후 에디트 레이아숫 텍스트 박스에서편집하면 된다. 너무 쉽게 말한다고 탓하지 말기 바란다. 나도 OTL 상태다.

돌아보면 너무 좋은 IDE 환경에 익숙(?) 해진 탓인가. pvdevelop IDE는 GUI 환경에서 위젯 편집을 아직까지는 100% 지원해 주지 않는다. 특히 Layout은 거의 TEXT Editor 상태다. 따라서 전체적인 레이아웃을 종이에 그려 준 후 하나씩 차근 차근 입력하고 테스트 하면서 만드는 것이 신상에 이롭다. 까닥 잘못 하면 이상한 동작을 한다.

지원해 주는 레이아웃은 앞에서 말했듯이

• Hbox
• Vbox
• Grid

레이아웃 편집창에서 사용하여야 하는 함수는

• pvAddWidgetOrLayout(p,parent_id,item_id,row,column);
  생성된 Layout에 위젯을 배치하는 함수
  parent_id : 생성자에서 만들어준 layout 이름
  item_id : 레이아웃에 배치하고자하는 위젯
  row : 기본값 -1 (아마 Grid에서 사용하는 것 같다. 일반적인 경우는 그냥 -1)
  column : 기본값 -1 (아마 Grid에서 사용하는 것 같다. 일반적인 경우는 그냥 -1)
• pvAddStretch(p,parent_id,stretch_faktor);
  스페이서를 넣기 위해 사용하는 함수
  stretch_faktor : 기본값 1 (사용방법은 잘 모르겠다, 여하튼 1이면 충분했다.)

단, 두개의 함수만 이용하면 멋진 화면 배치를 얻을 수 있다. OTL....

레이아웃을 사용하는 주 목적은 단순히 스크롤 바를 없애기 위한 것이 아니다.
이 것을 사용하면 pvbrowser 창의 크기가 변할 때, 작화 화면에 있는 위젯들의 크기와 같은 모양새를 비례적으로 변경할 수 있기 때문에 사용한다. 레이아웃을 사용하지 않으면 GUI 에서 만든 위젯의 크기는 항상 동일한 값을 갖는다. 즉 화면이 작을 경우 위젯이 모두 나타나지 않을 수도 있다.

그럼.... layout 사용 예제를 해보아야 겠죠....하지만 오늘은 여기까지만....