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

AnneW at 14:39, 14 July 2012

2012-07-14T14:39:39Z

Neverendingo: Text replace - "" to ""

2011-06-29T20:56:47Z

Text replace - "</code>" to "</syntaxhighlight>"

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


2011-06-29T20:46:33Z
Text replace - "<code>" to "<syntaxhighlight lang="text">"

				
				
				
				
			
			← Older revision
			Revision as of 20:46, 29 June 2011
			
Line 21:
Line 21:
  project, simply add a command like the following to your CMakeLists.txt file:   project, simply add a command like the following to your CMakeLists.txt file:
    
− <code> + <syntaxhighlight lang="text">
  kde4_add_ui_files(myapp_SRCS mydialog.ui)   kde4_add_ui_files(myapp_SRCS mydialog.ui)
  </code>   </code>



Neverendingo: Text replace - "" to ""

2011-06-29T20:31:20Z
Text replace - "<code cppqt>" to "<syntaxhighlight lang="cpp-qt">"

				
				
				
				
			
			← Older revision
			Revision as of 20:31, 29 June 2011
			
Line 60:
Line 60:
  "<tt>mydialog.h</tt>" looks like the following:   "<tt>mydialog.h</tt>" looks like the following:
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  #ifndef MYDIALOG_H   #ifndef MYDIALOG_H
  #define MYDIALOG_H   #define MYDIALOG_H
Line 93:
Line 93:
  "<tt>mydialog.cpp</tt>".   "<tt>mydialog.cpp</tt>".
    
− <code cppqt> + <syntaxhighlight lang="cpp-qt">
  #include <KLocale>   #include <KLocale>
  #include <KMessageBox>   #include <KMessageBox>



Dhaumann: fix in translation
2007-11-25T10:56:05Z
fix in translation

				
				
				
				
			
			← Older revision
			Revision as of 10:56, 25 November 2007
			
Line 57:
Line 57:
  here only the ''direct approach'' is discussed. The goal is to create a KDialog   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   which embeds the UI from the ui-file. First, we have to subclass MyDialog from
− KDialog and add a pointer to Ui::MyDialog. The header file of + KDialog and add a member variable of type Ui::MyDialog. The header file of
  "<tt>mydialog.h</tt>" looks like the following:   "<tt>mydialog.h</tt>" looks like the following:
    
Line 80:
Line 80:
    
       private:        private:
−          // pointer to the ui. we can access all gui elements +          // accessor to the ui. we can access all gui elements
           // specified in Designer. If mydialog.ui contains a            // specified in Designer. If mydialog.ui contains a
           // button "myButton", we will be able to access it            // button "myButton", we will be able to access it





Karvjorm: /* Loppuajatukset */
2007-11-24T22:43:19Z
‎Loppuajatukset

				
				
				
				
			
			← Older revision
			Revision as of 22:43, 24 November 2007
			
Line 150:
Line 150:
  feature: the source code files that you will be editing directly (either as   feature: the source code files that you will be editing directly (either as
  text or with Designer) are all named with the same scheme:   text or with Designer) are all named with the same scheme:
− * '''mydialog.ui''': the user interface, created with Designer + * '''mydialog.ui''': Designerilla luotu k&auml;ytt&ouml;liittym&auml;
− * '''ui_mydialog.h''': auto-generated by uic, Qt's user interface compiler + * '''ui_mydialog.h''': Qt:n k&auml;ytt&ouml;liittym&auml;k&auml;&auml;nt&auml;j&auml;n uic:n automaattisesti generoima
− * '''mydialog.h/cpp''': the dialog implementation + * '''mydialog.h/cpp''': Viestiruututoteutus
  Vaiheet ovat lyhyesti seuraavat   Vaiheet ovat lyhyesti seuraavat
  # luo <tt>mydialog.ui</tt>   # luo <tt>mydialog.ui</tt>
  # luo <tt>mydialog.h/cpp</tt>   # luo <tt>mydialog.h/cpp</tt>
  # lis&auml;&auml; muuttuja Ui::MyDialog ui; kohteessa <tt>mydialog.h</tt>   # lis&auml;&auml; muuttuja Ui::MyDialog ui; kohteessa <tt>mydialog.h</tt>
− # kutsu ui.setupUi(widget);</tt> + # kutsu <tt>ui.setupUi(widget);</tt>
  # hae ui-elementtej&auml; <tt>ui.</tt>:llä   # hae ui-elementtej&auml; <tt>ui.</tt>:llä
    



Karvjorm: /* Käyttöliittymän suunnittelu */
2007-11-24T22:37:22Z
‎Käyttöliittymän suunnittelu

				
				
				
				
			
			← Older revision
			Revision as of 22:37, 24 November 2007
			
Line 7:
Line 7:
  == K&auml;ytt&ouml;liittym&auml;n suunnittelu ==   == K&auml;ytt&ouml;liittym&auml;n suunnittelu ==
    
− [http://www.trolltech.com/products/qt/features/designer Qt Designer] is a + [http://www.trolltech.com/products/qt/features/designer Qt Designer] on graafinen ohjelma, joka sallii sinun helposti rakentaa k&auml;ytt&ouml;liittymi&auml; k&auml;ytt&auml;en intuitiivista "raahaa-ja-pudota"-k&auml;ytt&ouml;liittym&auml;&auml;.  Designerilla on erinomainen 
− graphical program which allows you to easily build user interfaces, using an + [http://doc.trolltech.com/4.3/designer-manual.html k&auml;ytt&auml;j&auml;dokumentaatio].   
− intuitive "drag n drop" interface.  Designer has its own excellent + Saattaisi olla j&auml;rkev&auml;&auml; tarjota lyhyt esimerkki Designerin k&auml;yt&ouml;st&auml; t&auml;ss&auml;, mutta toistaiseksi t&auml;m&auml; artikkeli j&auml;tt&auml;&auml; enimm&auml;n sellaisesta itse Designer-k&auml;sikirjalle.
− [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. + 
    
  == K&auml;ytt&ouml;liittym&auml;tiedoston lis&auml;&auml;minen KDE-projektiisi ==   == K&auml;ytt&ouml;liittym&auml;tiedoston lis&auml;&auml;minen KDE-projektiisi ==



Karvjorm: Finnish translation
2007-11-24T21:42:05Z
Finnish translation
New page
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Using Qt Designer}}



== Qt Designer-k&auml;ytt&ouml;liittymi&auml; KDE:ssa ==



T&auml;ss&auml; opastusohjeessa tutkimme kuinka ohjelmallisesti lis&auml;t&auml;&auml;n Qt Designerilla luotuja k&auml;ytt&ouml;liittymi&auml; KDE-projektiisi.  



== K&auml;ytt&ouml;liittym&auml;n suunnittelu ==



[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.



== K&auml;ytt&ouml;liittym&auml;tiedoston lis&auml;&auml;minen KDE-projektiisi ==



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.



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>



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.



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>.



== K&auml;ytt&ouml;liittym&auml;n k&auml;ytt&ouml; koodissasi ==



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.



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.



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.



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 pointer to Ui::MyDialog. The header file of

"<tt>mydialog.h</tt>" looks like the following:



<code cppqt>

#ifndef MYDIALOG_H

#define MYDIALOG_H



#include <KDialog>



// include the automatically generated header file for the ui-file

#include "ui_mydialog.h"



class MyDialog : public KDialog

{

    Q_OBJECT

    public:

        MyDialog( QWidget *parent=0 );

        ~MyDialog();



    private slots:

        void slotButtonClicked();



    private:

        // pointer to the ui. we can access all gui elements

        // specified in Designer. If mydialog.ui contains a

        // button "myButton", we will be able to access it

        // with ui.myButton in the cpp file.

        Ui::MyDialog ui;

};



#endif

</code>



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 the header file of the dialog

#include "mydialog.h"



MyDialog::MyDialog( QWidget *parent )

: KDialog( parent )

{

    QWidget *widget = new QWidget( this );



    // create the user interface, the parent widget is "widget"

    ui.setupUi(widget); // this is the important part



    // set the widget with all its gui elements as the dialog's

    // main widget

    setMainWidget( widget );



    // other KDialog options

    setCaption( i18n("This is my Dialog window!") );

    setButtons( KDialog::Close );



    // Example Signal/Slot connection using widgets in your UI.

    // Note that you have to prepend "ui." when referring

    // to your UI elements.

    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>



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>".



== Loppuajatukset ==



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''': the user interface, created with Designer

* '''ui_mydialog.h''': auto-generated by uic, Qt's user interface compiler

* '''mydialog.h/cpp''': the dialog implementation

Vaiheet ovat lyhyesti seuraavat

# luo <tt>mydialog.ui</tt>

# luo <tt>mydialog.h/cpp</tt>

# lis&auml;&auml; muuttuja Ui::MyDialog ui; kohteessa <tt>mydialog.h</tt>

# kutsu ui.setupUi(widget);</tt>

# hae ui-elementtej&auml; <tt>ui.</tt>:llä



== Qt-dokumentaatio ==



Qt-dokumentaatio sis&auml;lt&auml;&auml; hyv&auml;n artikkelin aiheesta 

[http://doc.trolltech.com/latest/designer-using-a-component.html K&auml;ytet&auml;&auml;n komponenttia sovelluksessasi].

[[Category:C++]]

[[Category:KDE4]]

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

	== Qt Designer-käyttöliittymiä KDE:ssa ==		== Qt Designer-käyttöliittymiä KDE:ssa ==