디자이너를 이용하면 메인윈도우도 간단히 만들수 있습니다.
특히 많은 메뉴들과 툴바아이콘들을 배치해야 할 경우 보면서 할수있기에 편리합니다.
디자이너로 메인윈도우를 만들려면, 디자이너를 실행시키고 메인윈도우를 선택합니다.
메인 윈도우 만들기
메인윈도우를 생성하고 나면 메뉴바 위치에 Type Here 라는 문구가 보입니다. 여기서부터 메뉴와 액션들을 추가해 갈수 있습니다.
참고로 여기서부터는 메뉴와 각종 텍스트는 영어로 작성하도록 하겠습니다.
이유는 기본 언어를 영어로 하고, 번역판으로 한국어를 제공하는 방식으로 하기 위해서 입니다.
물론 기본 언어를 한국어로 해도 되고, 국내이용자만을 대상으로 하는 경우라면 그걸로도 충분 할 것입니다.
이에 따른 차이는 나중에 또 별도로 설명하겠습니다.
한번 파일 메뉴와 새 파일 액션을 추가해보세요. Type Here 라는 곳을 더블 클릭하여 &File 이라고 입력한 후 엔터를 누르면 파일 메뉴가 생성됩니다.
이상태에서 파일 메뉴를 클릭하면 메뉴창이 열리고 그 아래에는 또 Type Here 이라는 문구와, Add Seperator 라는 문구가 보입니다.
Type Here를 더블 클릭하고 메뉴를 생성할 때와 같은 요령으로 &New File 이라고 입력하면 새 파일 액션이 생성됩니다.
그런데 새 파일 액션의 오랜쪽에 + 같은 모양의 아이콘이 보일 것입니다.
이 아이콘은 액션을 메뉴로 확장하는 아이콘으로, 하위 메뉴를 만들 때 이용합니다.
메뉴와 액션의 문자열을 고치고 싶을 때는 메뉴상에서 더블 클릭하여 고치면되며, 그외의 속성들을 수정할 때는, 다른 위젯들과 동일하게 Object Inspector와 Property Editor를 이용하여 수정할 수 있습니다.
또한, 액션의 경우 액션만을 위한 Action Editor 라는 것이 제공됩니다.
Action Editor는 디자이너의 기본 레이아웃이라면 오른쪽 하단의 Signal/Slot Editor와 겹쳐져 있으니, Action Editor 탭을 눌러서 표시할 수 있습니다.
Action Editor
Action Editor를 보면 방금 만든 새 파일 액션이 보입니다.
한번 더블 클릭해보면, Edit Action이라는 다이얼로그가 나타납니다.
이 다이얼로그는 Property Editor에서 특히 액션의 경우 자주 편집되는 부분만 모아 놓은 것이라고 생각하면 됩니다.
ToolTip외에는 별도로 항목에 대한 설명은 필요 없어 보입니다.
우선 아이콘을 지정해봅시다.
이전과 마찬가지로 로컬 파일을이용할 수 도 있고, Qt의 리소스를 이용할 수도 있습니다.
Qt의 리소스를 이용하는 경우, 디자이너를 이용하여 리소스를 쉽게 관리할 수 있습니다.
여기서는 Qt 리소스를 이용하는 법도 배울 겸, 리소스를 이용하여 아이콘을 지정해보겠습니다.
Icon 항목의 오른쪽의 ... 버튼을 클릭해보면 Select Resource 다이얼로그가 나타납니다.
하지만 현재 불러온 리소스 파일이 없기 때문에 아무것도 선택할 수 없습니다.
여기서 상단의 연필 모양 버튼을 클릭하면 Edit Resources 다이얼로그가 나타납니다.
이 창의 하단을 보면 왼쪽에 두개의 버튼이 활성화되있는데요, 왼쪽은 새로운 리소스 파일(.qrc)파일을 만드는 버튼이고, 오른쪽은 기존의 리소스 파일을 여는 버튼입니다.
이전에 만들었던 리소스 파일을 열어 보면 이전에 넣어 둔 아이콘 파일이 하나 표시될 것입니다.
여기서는 연습 삼아 새로운 리소스 파일을 만들어 보겠습니다.
열린 리소스 파일을, 왼쪽의 X 버튼으로 닫고, 새 리소스 파일을 만듭니다.
여기서는 이전에 만든 resources.qrc 파일에 덮어 씌우겠씁니다.
이제 오른쪽 버튼들이 활성화 됩니다.
우선 + 버튼을 눌러서 prefix를 추가합니다.
prefix는 리소스에 접근 할때의 최상위 경로로 보통은 / 로 하면됩니다.
그후 오른쪽에서 두번째 버튼으로 리소스를 엽니다.
이전에 첨부한 소스 파일을 보면, img 디렉토리 안에 두개의 이미지 파일이 있습니다.
두개 모두 선택하여 추가 한후 OK 버튼을 누르면 리소스 파일이 편집되어 저장됩니다.
참고로 리소스를 삭제할 때는 제일 오른쪽의 - 버튼을 이용하면 됩니다.
또, 리소스는 Action Editor의 오른쪽 탭에 있는 Resource Browser를 통해서도 열람/편집이 가능합니다.
다시 Select Resource 창으로 돌아왔습니다,
이제 방금 추가한 두개의 이미지를 선택할 수 있습니다.
적당한 이미지를 선택한 후, OK를 누르면 아이콘이 선택된 것을 확인 할 수 있습니다.
그외에 Object name은 원하는 이름으로(저는 newFileAction)으로 입력하시고, Shortcut으로 단축키를지정합니다(저는 Ctrl+N).
단축키는 오른쪽의 화살표 버튼을 클릭한후 실제로 키보드로 원하는 단축키를 누르면 자동으로 입력됩니다.
이것으로 액션편집이 끝났습니다.
이번에는 툴바를 만들어 보겠습니다.
메인 윈도우의 적당히 가운데에서 오른쪽 클릭을 해보면 Add Tool Bar라는 메뉴가 제일 상단에 나타납니다.
이 메뉴를 선택하면 메뉴바 밑에 가느다란 툴바가 추가 됩니다.
툴바가 가느다란 이유는 아직 아무것도 안들어 있기 때문입니다.
여기에 방금 만든 새파일 메뉴를 추가해보겠습니다.
Action Editor에서 추가할 액션을 드래그 하여 툴바에 드랍하면 됩니다.
마지막으로 메인 윈도우의 central widget을 지정해봅시다.
정확히 말하면, 디자이너에서 만든 메인윈도우의 경우 central widget은 무조건 평범한 QWidget이 들어가게됩니다.
그대신 디자이너에서는 그 위젯 안에 다른 위젯을 넣어서 표시할 수가 있습니다.
우리는 텍스트 에디터를 만들고 있으므로 왼쪽에서 Text Edit 위젯을 가져오서 메인 윈도우의 가운데에 놓고, Object Name을 edit로 지정합니다.
그후 방금 내려놓은 Text Edit 외의 적당히 다른 부분을 클릭하면 상단의 레이아웃 툴바가 활성화됩니다.
이상태에서 적당한 레이아웃(여기서는 다른 위젯을 배치하지는 않으므로 아무거나 상관없습니다).
여기서 레이아웃을 지정해야 하는 이유는 자동으로 크기가 조절되도록 하기 위해서 입니다.
저는 Lay Out Horizontally 를 선택하였습니다.
그런데 이상태로는 Text Edit 상하좌우로 여백이 들어가 버립니다.
이 여백은, 레이아웃을 넣은 위젯의 property에서 없앨 수가 있습니다.
Object Inspector에서 방금 레이아웃을 넣은 위젯(아마도 특별히 수정하지 않았으면 centralwidget이라고 되어있는 위젯)을 선택한 후, Property Editor의 가장 아래쪽을 보면 Layout 이라는 항목이 보일 것입니다.
여기서 LayoutLeftMargin, LayoutRightMargin, LayoutTopMargin, LayoutBottomMargin을 0으로 입력해주면 Text Edit 주변의 여백이 없어질 것입니다.
마지막으로 메인윈도우의 프로퍼티에서 윈도우 아이콘으로 리소스의 document-edit.png 파일을 선택해주고, 윈도우 타이틀도 적당히 적어줍시다(저는 Text Editor라고 해주었습니다).
이상태에서 Ctrl+R을 눌러 미리보기를 해봅시다.
겉모습만 보면 이전에 만든 texteditor 프로그램과 동일 할 것입니다.
이 상태에서 한번 툴바의 버튼에 마우스 커서를 올려놓고 가만히 둬보세요.
New File이라는 작은 텍스트가 표시됩니다.
이것이 아까 설명하지 않고 지나간 액션의 ToolTip입니다.
기본적으로는 액션의 Text가 그대로 표시되지만, ToolTip을 적당히 수정하여 원하는 텍스트가 표시되게 할 수도 있습니다.
여기서 작성한 파일을 mainwindow.ui라는 이름으로 저장한 후, 실제 코드에서 불러와서 적용합니다.
우선 새로운 ui파일을 만들었으므로 프로필 파일(texteditor.pro)에 다음과 같이 FORMS 항목을 추가해줍니다.
FORMS += mainwindow.ui
그리고 mainwindow.cpp를 대대적으로 수정해줍니다.
[code]#include "mainwindow.h"
#include "ui_mainwindow.h"
struct MainWindow::Data {
Ui::MainWindow ui;
};
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent), d(new Data) {
d->ui.setupUi(this);
connect(d->ui.newFileAction, SIGNAL(triggered()), this, SLOT(newFile()));
}
MainWindow::~MainWindow() {
delete d;
}
void MainWindow::newFile() {
d->ui.edit->clear();
}
[/code]
기본적인 요령은 이전에 설명한 폼 디자인 적용하기와 마찬가지로, setupUi() 함수를 호출 하여 줍니다.
이전 소스와 비교해보면 아시겠지만 메인 윈도우에서 메뉴바나 툴바를 생성하는 과정이 디자이너를 이용함으로서 생략되어 훨씬 간략한 소스가 되었습니다.
그리고 액션이나 Text Edit는 이제 Ui::MainWindow의 멤버이기 때문에 d->edit 등은 d->ui.edit 등으로 수정해주었습니다.
마지막으로 소스파일을첨부하고 디자이너를 이용한 메인윈도우 만들기를 마칩니다.
첨부한 소스파일에는, 이외에도 별도의 설명없이 간단히 구현할 수 있는 몇가지 메뉴가 더 추가되어있습니다.
소스코드를 보시고 이해가 안되시면 질문해주세요.
texteditor.tar.gz
