Fracktal at 21:28, 8 January 2008

2008-01-08T21:28:42Z

Fracktal: New page: {{Template:I18n/Language Navigation Bar|Development/Tutorials/Using Qt Designer}} == KDE에서의 Qt Designer 유저 인터페이스 == 이 튜트리얼에서는 당신의 KDE 프로젝...

2008-01-08T21:25:17Z

New page: {{Template:I18n/Language Navigation Bar|Development/Tutorials/Using Qt Designer}} == KDE에서의 Qt Designer 유저 인터페이스 == 이 튜트리얼에서는 당신의 KDE 프로젝...

New page

{{Template:I18n/Language Navigation Bar|Development/Tutorials/Using Qt Designer}}

== KDE에서의 Qt Designer 유저 인터페이스 ==

이 튜트리얼에서는 당신의 KDE 프로젝트 안에 Qt Designer로 생성된 유저 인터페이스를 프로그램적으로 어떻게 추가하는 지에 대해 설명한다.
:''In this tutorial, we will explore how to programatically insert user interfaces
(UIs) created with Qt Designer, into your KDE project.''

== UI 디자인하기 ==
[http://www.trolltech.com/products/qt/features/designer Qt Designer]는 직관적인 "드래그 & 드롭" 인터페이스를 사용하여, 유저 인터페이스를 쉽게 만드는 GUI 프로그램이다. 디자이너는 훌륭한 [http://doc.trolltech.com/4.3/designer-manual.html 유저 메뉴얼]을 가지고 있다. 이것은 Designer를 간단한 예제를 제공하는 섬세함을 가졌지만, 이 문서는 Designer 메뉴얼에서의 대부분 내용에서 벗어날 것이다.

:''[http://www.trolltech.com/products/qt/features/designer Qt Designer] is a
graphical program which allows you to easily build user interfaces, using an
intuitive "drag n drop" interface. Designer has its own excellent
[http://doc.trolltech.com/4.3/designer-manual.html user documentation].
It might make sense to provide a brief example of using Designer here, but
for now this article will leave most of that to the Designer manual itself.''

== 당신의 KDE 프로젝트에 UI 파일 추가하기 ==

우리의 목적을 위해, Desinger 사용에서 가장 중요한 것은 생성된 <tt>*.ui</tt>이다.
이것은 machine-readable(그리고 human-readable!)한 방법으로 유저 인터페이스가 인코딩된 간단한 XML 파일이다.
:''For our purposes, the most important part of using Designer is the
<tt>*.ui</tt> file that it creates. This is simply an XML file that
encodes the user interface in a machine-readable (and human-readable!) way.''

Designer로 "MyDialog"라고 이름 붙여진 UI를 만들어서, <tt>mydialog.ui</tt>라는 파일로 저장하였다고 상상해보자. 이것을 KDE 프로젝트에 추가하기 위해서는, 간단하게 CMakeList.txt파일에 다음과 같이 명령어를 추가하라.:
:''Let's imagine that you've created a UI named "MyDialog" with Designer, and
saved it as the file <tt>mydialog.ui</tt>. To add this UI to your KDE
project, simply add a command like the following to your CMakeLists.txt file:''

<code>
kde4_add_ui_files(myapp_SRCS mydialog.ui)
</code>

모든 소소 코드 파일이 정의된 CMakeList.txt 파일에서 주요 블록의 이름을 "<tt>myapp_SRCS</tt>"로 바꿔라.
이것은 일반적으로 어플리케이션의 이름에 "<tt>_SRCS</tt>"가 붙여진다.
:''Replace "<tt>myapp_SRCS</tt>" with the name of the main block in
your CMakeLists.txt file, defining all of the source code files. It is usually the
name of your application, with "<tt>_SRCS</tt>" appended.''

이것을 수행할 때, 빌드시스템은 <tt>mydialog.ui</tt>로 UI를 정의한 C++ 헤더파일을 자동 생성하기 위해, Qt 프로그램 <tt>uic</tt>를 수행할 것이다. 생성된 파일은 <tt>ui_mydialog.h</tt>로 이름붙여질 것이다.
:''When you do this, the build system will run the Qt program <tt>uic</tt>
on <tt>mydialog.ui</tt>, to auto-generate a C++ header file that
defines the UI. The generated file will be named <tt>ui_mydialog.h</tt>.''

== 당신의 코드에서 UI 사용하기 ==

<tt>ui_mydialog.h</tt> 파일은 "<tt>Ui_MyDialog</tt>"라는 클래스를 정의하며,
Designer에서 클래스의 public 멤버로 생성된 모든 위젯을 포함한다.
<tt>ui_mydialog.h</tt> 파일은 "<tt>setupUi(QWidget *parent)</tt>"라는 public 함수를 포함한다.
"<tt>setupUi(QWidget *parent)</tt>"함수는 Designer에서 설정한 것에 따라서 모든 위젯을 생성하고,
속성을 설정하고, layout 매니저에 이것들을 추가한다.

:''The <tt>ui_mydialog.h</tt> file defines a class named
"<tt>Ui_MyDialog</tt>", that contains all of the widgets you created in
Designer as public members of the class. It also contains the public function
"<tt>setupUi(QWidget *parent)</tt>", which instantiates all of the widgets,
sets up their properties, and inserts them into layout managers, all according
to what you specified in Designer.''

<tt>setupUi()</tt>는 <tt>QWidget*</tt> 인자를 받는다는 것을 상기하라. 이 인지는
당신의 UI 안에 모든 위젯이 ㅊ가될 부모 컨테이너 위젯을 표현한다. 다른 말로 말하자면,
'''<tt>Ui_MyDialog</tt>는 자체적으로 QWidget에서 상속되지 않는다''', 그리고
'''이것은 자체적으로 toplevel 위젯을 가지고 있지 않다.'''. <tt>setupUi()</tt>를 호출할 때,
toplevel 위젯을 설정해주어야만 한다. 이것이 가장 중요한 점이다.
Note that <tt>setupUi()</tt> takes a <tt>QWidget*</tt>
argument. This argument represents the parent container widget, into which
all of the widgets in your UI will be inserted. In other words,
'''<tt>Ui_MyDialog</tt> is not itself derived from QWidget''', and
'''it does not contain a toplevel widget itself'''. You have to supply the toplevel widget
when you call <tt>setupUi()</tt>. This is an important point.

더 중요한 의미의 세부사항 한 가지: <tt>Ui_MyDialog</tt> 클래스는
클래스를 위해 간단한 별명을 만드는 <tt>Ui</tt> namespace를 생성한다.
그러므로 같은 클래스에서 참조하기 위해 <tt>Ui::MyDialog</tt>를 사용할 수 있다.
:''One more important semantic detail: the <tt>Ui_MyDialog</tt> class
also creates a <tt>Ui</tt> namespace, which simply creates an alias
for the class. So you can use <tt>Ui::MyDialog</tt> to refer to the
same class.''

이제 실질적으로 생성된 UI를 코드에서 사용한다. Qt 메뉴얼은 [http://doc.trolltech.com/latest/designer-using-a-component.html ui-files를 사용하는 방법]의 3가지를 보여준다. 여기에서는 ''직접 접근(direct approach)''에 대해서만 다룬다. 목표는 ui-file의 UI를 포함한 KDialog를 생성하는 것이다. 먼저 KDialog에서 MyDialog를 파생시켜야한다. 그리고 Ui::MyDialog 타입의 멤버 변수를 추가한다. 헤더파일인 "<tt>mydialog.h</tt>"파일의 모습은 다음과 같다.

:''Now, on to actually using the generated UI in your code. The Qt documentation
shows three ways of [http://doc.trolltech.com/latest/designer-using-a-component.html how to use ui-files];
here only the ''direct approach'' is discussed. The goal is to create a KDialog
which embeds the UI from the ui-file. First, we have to subclass MyDialog from
KDialog and add a member variable of type Ui::MyDialog. The header file of
"<tt>mydialog.h</tt>" looks like the following:''

<code cppqt>
#ifndef MYDIALOG_H
#define MYDIALOG_H

#include <KDialog>

// ui-file에서 자동적으로 생성된 헤더파일을 include한다.
#include "ui_mydialog.h"

class MyDialog : public KDialog
{
Q_OBJECT
public:
MyDialog( QWidget *parent=0 );
~MyDialog();

private slots:
void slotButtonClicked();

private:
// ui으로의 접근자. Desinger 안에서 모든 설정된
// gui 요소들을 접근할 수 있다.
// mydialog.ui가 "myButton" 버튼을 포함한다면,
// cpp 파일에서 ui.myButon으로 접근할 수 있다.
Ui::MyDialog ui;
};

#endif
</code>

이제 "<tt>mydialog.cpp</tt>" 안에 있는 MyDialog의 구현을 살펴볼 것이다.
:''Now we are going to look at the implementation of MyDialog, which is in the file
"<tt>mydialog.cpp</tt>".''

<code cppqt>
#include <KLocale>
#include <KMessageBox>

// 다이얼로그의 헤더파일 include
#include "mydialog.h"

MyDialog::MyDialog( QWidget *parent )
: KDialog( parent )
{
QWidget *widget = new QWidget( this );

// 유저 인터페이스를 생성한다. 부모 위젯은 "widget"이다.
ui.setupUi(widget); // this is the important part

// 모든 gui요소를 가진 widget을 다이얼로그의 메인 위젯으로
// 설정한다.
setMainWidget( widget );

// 다른 KDialog 옵션들
setCaption( i18n("This is my Dialog window!") );
setButtons( KDialog::Close );

// UI에서 위젯들을 사용하여 시그널/슬롯 연결을 시험해본다.
// UI 요소들을 참조할 때에는, "ui."으로 prefix해야
// 한다는 것을 상기하라.
connect( ui.myButton, SIGNAL( clicked() ),
this, SLOT( slotButtonClicked() ) );
}

MyDialog::~MyDialog()
{
}

void MyDialog::slotButtonClicked()
{
KMessageBox::information( this,
i18n("You pressed the button!" ),
i18n( "Hooray!" ) );
}

#include "mydialog.moc"
</code>

기본적으로, 새로운 Ui::MyDialog를 생성하고, <tt>MyDialog</tt>의 생성자 안에서
<tt>ui.setupUi(widget)</tt>를 호출한다. 이것은 주어진 위젯 안의 Ui 요소를 배치한다.
그리고 부모 위젯을 KDialog의 메인 위젯으로 설정한다. 종종 "<tt>m_</tt>"로 prefix하는 것과 같이,
"<tt>ui.</tt>"를 그것들의 이름에 prefix함으로써 UI 요소의 모두와 상호작용할 수 있다.

:''So, basically, we create a new Ui::MyDialog and then call
<tt>ui.setupUi(widget)</tt> in the constructor of <tt>MyDialog</tt>. This
places the UI elements into the given widget. Then we set the parent-widget
as the KDialog's main widget. We can then interact with all of the UI elements
by prepending "<tt>ui.</tt>" to their names, just like it is often done
with the prefix "<tt>m_</tt>".''

== Final Thoughts ==
이 튜트리얼에서 처음에는 파일과 클래스들의 단계들은 위압하는 것처럼 보일지도 모른다.
그러나 여기에 준비된 naming 스키마는 좋은 직관적인 특징을 가진다.: 직접 수정되어질(텍스트 또는 Designer로)
소스코드 파일들은 같은 스키마로 모두 이름 붙여진다.:
:''The cascade of files and classes in this tutorial may seem daunting at
first, but the naming scheme layed out here has one nice intuitive
feature: the source code files that you will be editing directly (either as
text or with Designer) are all named with the same scheme:''

* '''mydialog.ui''': Designer로 만들어진 유저 인터페이스.
* '''ui_mydialog.h''': Qt 유저 인터페이스 컴파일러인 uic로 자동 생성된다.
* '''mydialog.h/cpp''': 다이얼로구 구현 파일

* '''mydialog.ui''': the user interface, created with Designer
* '''ui_mydialog.h''': auto-generated by uic, Qt's user interface compiler
* '''mydialog.h/cpp''': the dialog implementation

단계를 짧게 요약자면,
# <tt>mydialog.ui</tt>을 생성하고,
# <tt>mydialog.h/cpp</tt>을 생성한다.
# <tt>mydialog.h</tt>안에 Ui::MyDialog ui 변수를 추가한다.
# <tt>ui.setupUi(widget);</tt>를 호출한다.
# <tt>ui.</tt>로 ui 요소들을 접근한다.

The steps in short are
# create <tt>mydialog.ui</tt>
# create <tt>mydialog.h/cpp</tt>
# add variable Ui::MyDialog ui; in <tt>mydialog.h</tt>
# call <tt>ui.setupUi(widget);</tt>
# access the ui elements with <tt>ui.</tt>

== Qt 메뉴얼 ==
Qt 메뉴얼은 [http://doc.trolltech.com/latest/designer-using-a-component.html 어플리케이션에서 컴포넌트 사용하기]에 대한 좋은 내용을 가지고 있다.

:''The Qt documentation contains a good article about
[http://doc.trolltech.com/latest/designer-using-a-component.html Using a Component in Your Application].''
[[Category:C++]]
[[Category:KDE4]]

← Older revision		Revision as of 15:59, 14 July 2012
Line 1:		Line 1:
−	~~{{Template:I18n/Language Navigation Bar\|Development/Tutorials/Using Qt Designer}}~~	+

	== KDE에서의 Qt Designer 유저 인터페이스 ==		== KDE에서의 Qt Designer 유저 인터페이스 ==

@@ Line 39: / Line 39: @@
 <syntaxhighlight lang="text">
 kde4_add_ui_files(myapp_SRCS mydialog.ui)
-</code>
+</syntaxhighlight>
 모든 소소 코드 파일이 정의된 CMakeList.txt 파일에서 주요 블록의 이름을 "<tt>myapp_SRCS</tt>"로 바꿔라.
@@ Line 136: / Line 136: @@
 #endif
-</code>
+</syntaxhighlight>
 이제 "<tt>mydialog.cpp</tt>" 안에 있는 MyDialog의 구현을 살펴볼 것이다.
@@ Line 184: / Line 184: @@
 #include "mydialog.moc"
-</code>
+</syntaxhighlight>
 기본적으로, 새로운 Ui::MyDialog를 생성하고, <tt>MyDialog</tt>의 생성자 안에서

Development/Tutorials/Using Qt Designer (ko) - Revision history

AnneW at 15:59, 14 July 2012

Neverendingo: Text replace - "" to ""

Neverendingo: Text replace - "`" to ""`

Neverendingo: Text replace - "`" to ""`

Fracktal at 21:28, 8 January 2008

Fracktal: New page: {{Template:I18n/Language Navigation Bar|Development/Tutorials/Using Qt Designer}} == KDE에서의 Qt Designer 유저 인터페이스 == 이 튜트리얼에서는 당신의 KDE 프로젝...

@@ Line 108: / Line 108: @@
 "<tt>mydialog.h</tt>" looks like the following:
-<code cppqt>
+<syntaxhighlight lang="cpp-qt">
 #ifndef MYDIALOG_H
 #define MYDIALOG_H
@@ Line 142: / Line 142: @@
 "<tt>mydialog.cpp</tt>".''
-<code cppqt>
+<syntaxhighlight lang="cpp-qt">
 #include <KLocale>
 #include <KMessageBox>