Development/Tutorials/Qt4 Ruby Tutorial/Chapter 04/fi: Difference between revisions

From KDE TechBase
(Created page with "Kehitys/Oppikurssit/Qt4 Ruby-oppikurssi/Kappale 4")
 
(Updating to match new version of source page)
 
(34 intermediate revisions by one other user not shown)
Line 1: Line 1:
<languages />
<languages />


{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 04}}


{{TutorialBrowser|
{{TutorialBrowser|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby -oppikurssi]]|
name=Let There Be Widgets|
name=Olkoon siellä käyttöliittymäkomponentteja|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_3|Tutorial 3 - Family Values]]|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_3|Oppikurssi 3 - Perhearvot]]|
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|Tutorial 5 - Building Blocks]]
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|Oppikurssi 5 - Lohkojen rakentaminen]]
}}
}}


== Let There Be Widgets ==
== Olkoon siellä käyttöliittymäkomponentteja ==
[[Image:Qt4_Ruby_Tutorial_Screenshot_4.png|center]]
[[Image:Qt4_Ruby_Tutorial_Screenshot_4.png|center]]


Files:
Tiedostot:
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t4/t4.rb t4.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t4/t4.rb t4.rb]


=== Overview ===
=== Yleiskuva ===


This example shows how to create your own widget, and describes how to control the minimum and maximum sizes of a widget.
Tämä esimerkki näyttää kuinka luot oman käyttöliittymäkomponentin, ja kuvailee kuinka ohjaat käyttöliittymäkomponentin minimi- ja maksimikokoa.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 28: Line 27:
     setFixedSize(200, 120)
     setFixedSize(200, 120)


     quit = Qt::PushButton.new(tr('Quit'), self)
     quit = Qt::PushButton.new(tr('Poistu'), self)
     quit.setGeometry(62, 40, 75, 30)
     quit.setGeometry(62, 40, 75, 30)
     quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
     quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
Line 44: Line 43:
</syntaxhighlight>
</syntaxhighlight>


=== Line by Line Walkthrough ===
=== Läpikäynti rivi riviltä ===
<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
class MyWidget < Qt::Widget
class MyWidget < Qt::Widget
</syntaxhighlight>
</syntaxhighlight>


Here we create a new class. Because this class inherits from [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget], the new class is a widget and may be a top-level window or a child widget (like the [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] in the previous chapter).  
Tässä luomme uuden luokan. Koska tämä luokka periytyy komponentista [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget], uusi luokka on käyttöliittymäkomponentti ja saattaa olla ylimmän tason ikkuna tai tytärkäyttöliittymäkomponentti (kuten [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] edellisessä kappaleessa).  


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 56: Line 55:
</syntaxhighlight>
</syntaxhighlight>


This class has only one member, a constructor (in addition to the members it inherits from [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget]). The constructor is a standard Qt widget constructor; you should always include a similar constructor when you create widgets.  
Tällä luokalla on vain yksi jäsen, konstruktori (niiden jäsenien lisäksi, jotka se perii komponentilta [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget]). Konstruktori on vakio Qt-käyttöliittymäkomponenttikonstruktori; sinun pitäisi aina käyttöliittymäkomponenttia luodessa lisätä samanlainen konstruktori.  


The argument is its parent widget. To create a top-level window you specify '''<tt>nil</tt>''' as the parent. As you can see, this widget defaults to be a top-level window.  
Argumentti on sen emokäyttöliittymäkomponentti. Ylimmän tason ikkunan luomiseksi määrittele emokomponentiksi '''<tt>nil</tt>'''. Kuten voit nähdä, tämän käyttöliittymäkomponentin oletukset osoittavat sen olevan ylimmän tason ikkuna.  


Like most widgets, it just passes on the '''<tt>parent</tt>''' parameter to the [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] constructor. (If you're new to Ruby, calling '''<tt>super</tt>''' without any parameters will automatically pass on any parameters a method received to the superclass's method of the same name. ''Update'': Apparently, it's also important to leave off the parentheses calling '''<tt>super()</tt>''' will call the superclass's method of the same name with an empty parameter list.)
Kuten useimmat käyttöliittymäkomponentit, se vain välittää '''<tt>parent</tt>'''-parametrin [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget]-konstruktorille. (Jos olet uusi Ruby-kielessä, niin kutsumalla '''<tt>super</tt>''' ilman mitään parametreja välitetään automaattisesti kaikki metodin vastaanottamat parametrit superluokan samannimiselle metodille. ''Update'': Ilmeisesti on myös tärkeää jättää pois sulkeet kutsumalla '''<tt>super()</tt>''' kutsutaan superluokan samanniminen metodi tyhjällä parametriluettelolla.)


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 66: Line 65:
</syntaxhighlight>
</syntaxhighlight>


Because this widget doesn't know how to handle resizing, we fix its size. In the next chapter, we will show how a widget can respond to resize event from the user.  
Koska tämä käyttöliittymäkomponentti ei tiedä, kuinka koon muuttamisia käsitellään, me korjaamme sen koon. Seuraavasssa kappaleessa näytämme, kuinka käyttöliittymäkomponentti voi vastata käyttäjältä saapuviin koon muuttamistapahtumiin.  


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
quit = Qt::PushButton.new(tr('Quit'), self)
quit = Qt::PushButton.new(tr('Poistu'), self)
quit.setGeometry(62, 40, 75, 30)
quit.setGeometry(62, 40, 75, 30)
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
</syntaxhighlight>
</syntaxhighlight>


Here we create and set up a child widget of this widget (the new widget's parent is '''<tt>self</tt>''', i.e. the '''<tt>MyWidget</tt>''' instance).  
Tässä luomme ja asetamme tämän käyttöliittymäkomponentin tytärkomponentin (uuden käyttöliittymäkomponentin emo on '''<tt>self</tt>, ts. '''<tt>MyWidget</tt>''' -ilmentymä).  


The [http://doc.qt.nokia.com/latest/qobject.html#tr QObject::tr()] function call around the string literal 'Quit' marks the string for translation, making it possible to change it at run-time based on the contents of a translation file. It is a good habit to use [http://doc.qt.nokia.com/latest/qobject.html#tr QObject::tr()] around all user-visible strings, in case you decide later to translate your application to other languages.  
[http://doc.qt.nokia.com/latest/qobject.html#tr QObject::tr()] -funktiokutsu merkkijonoliteraalin 'Quit' ympärillä merkitsee kotoistettavan merkkijonon, mikä tekee mahdolliseksi sen muuttamisen ajoaikaisesti kotoistamistiedoston sisältöön perustuen. On hyvä tapa käyttää metodia [http://doc.qt.nokia.com/latest/qobject.html#tr QObject::tr()] käyttäjän näkemien merkkijonojen ympärillä siinä tapauksessa, että päätät myöhemmin kotoistaa sovelluksesi muille kielille.  


The [http://doc.qt.nokia.com/latest/qwidget.html#geometry-prop Qt::Widget::setGeometry()] call sets both the widget's screen position and the size. It is equivalent to calling [http://doc.qt.nokia.com/latest/qwidget.html#pos-prop Qt::Widget::move()] followed by [http://doc.qt.nokia.com/latest/qwidget.html#size-prop Qt::Widget::resize()].  
[http://doc.qt.nokia.com/latest/qwidget.html#geometry-prop Qt::Widget::setGeometry()] -kutsu asettaa sekä käyttöliittymäkomponentin näyttösijainnin että sen koon. Se on sama kuin jos kutsuttaisiin metodia [http://doc.qt.nokia.com/latest/qwidget.html#pos-prop Qt::Widget::move()], jota seuraa [http://doc.qt.nokia.com/latest/qwidget.html#size-prop Qt::Widget::resize()].  


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 84: Line 83:
</syntaxhighlight>
</syntaxhighlight>


The '''<tt>$qApp</tt>''' pointer is a global variable created when you '''<tt>require 'Qt'</tt>'''. It points to the application's unique [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] instance.
Osoitin '''<tt>$qApp</tt>''' on yleismuuttuja, joka luodaan kun '''<tt>pyydät 'Qt'</tt>''':ta. Se osoittaa sovelluksen uniikkiin [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application]-ilmentymään.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 95: Line 94:
</syntaxhighlight>
</syntaxhighlight>


Here we instantiate our new child, set it to be the main widget, and execute the application.
Tässä teemme uudesta tytärkomponentistamme ilmentymän, asetamme sen pääkäyttöliittymäkomponentiksi, ja suoritamme sovelluksen.


=== Running the Application ===
=== Sovelluksen suorittaminen ===
This program is very similar in behavior to the previous one. The difference lies in the way we have implemented it. It does behave slightly differently, however. Just try to resize it to see.  
Tämä ohjelma käyttäytyy hyvin samalla tavoin kuin edellinen ohjelma. Erot ovat siinä tavassa, jolla toteutamme sen. Se käyttäytyy kuitenkin hiukan eri tavalla. Yritä vain muuttaa sen kokoa huomataksesi eron.  


=== Exercises ===
=== Harjoitukset ===
Try to create another '''<tt>MyWidget</tt>''' object. What happens?  
Yritä luoda toinen '''<tt>MyWidget</tt>'''-objekti. Mitä tapahtuu?  


Try to add more buttons or put in widgets other than [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton].
Yritä lisätä lisää painikkeita ja laita muita käyttöliittymäkomponentteja kuin [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton].


[[Category:Ruby]]
[[Category:Ruby]]

Latest revision as of 14:16, 18 July 2012

Other languages:


Olkoon siellä käyttöliittymäkomponentteja
Tutorial Series   Qt4 Ruby -oppikurssi
Previous   Oppikurssi 3 - Perhearvot
What's Next   Oppikurssi 5 - Lohkojen rakentaminen
Further Reading   n/a

Olkoon siellä käyttöliittymäkomponentteja

Tiedostot:

Yleiskuva

Tämä esimerkki näyttää kuinka luot oman käyttöliittymäkomponentin, ja kuvailee kuinka ohjaat käyttöliittymäkomponentin minimi- ja maksimikokoa.

require 'Qt4'

class MyWidget < Qt::Widget
  def initialize(parent = nil)
    super
    setFixedSize(200, 120)

    quit = Qt::PushButton.new(tr('Poistu'), self)
    quit.setGeometry(62, 40, 75, 30)
    quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))

    connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))
  end
end

app = Qt::Application.new(ARGV)

widget = MyWidget.new()
widget.show()

app.exec()

Läpikäynti rivi riviltä

class MyWidget < Qt::Widget

Tässä luomme uuden luokan. Koska tämä luokka periytyy komponentista Qt::Widget, uusi luokka on käyttöliittymäkomponentti ja saattaa olla ylimmän tason ikkuna tai tytärkäyttöliittymäkomponentti (kuten Qt::PushButton edellisessä kappaleessa).

def initialize(parent = nil)
  super

Tällä luokalla on vain yksi jäsen, konstruktori (niiden jäsenien lisäksi, jotka se perii komponentilta Qt::Widget). Konstruktori on vakio Qt-käyttöliittymäkomponenttikonstruktori; sinun pitäisi aina käyttöliittymäkomponenttia luodessa lisätä samanlainen konstruktori.

Argumentti on sen emokäyttöliittymäkomponentti. Ylimmän tason ikkunan luomiseksi määrittele emokomponentiksi nil. Kuten voit nähdä, tämän käyttöliittymäkomponentin oletukset osoittavat sen olevan ylimmän tason ikkuna.

Kuten useimmat käyttöliittymäkomponentit, se vain välittää parent-parametrin Qt::Widget-konstruktorille. (Jos olet uusi Ruby-kielessä, niin kutsumalla super ilman mitään parametreja välitetään automaattisesti kaikki metodin vastaanottamat parametrit superluokan samannimiselle metodille. Update: Ilmeisesti on myös tärkeää jättää pois sulkeet — kutsumalla super() kutsutaan superluokan samanniminen metodi tyhjällä parametriluettelolla.)

    setFixedSize(200, 120)

Koska tämä käyttöliittymäkomponentti ei tiedä, kuinka koon muuttamisia käsitellään, me korjaamme sen koon. Seuraavasssa kappaleessa näytämme, kuinka käyttöliittymäkomponentti voi vastata käyttäjältä saapuviin koon muuttamistapahtumiin.

quit = Qt::PushButton.new(tr('Poistu'), self)
quit.setGeometry(62, 40, 75, 30)
quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))

Tässä luomme ja asetamme tämän käyttöliittymäkomponentin tytärkomponentin (uuden käyttöliittymäkomponentin emo on self, ts. MyWidget -ilmentymä).

QObject::tr() -funktiokutsu merkkijonoliteraalin 'Quit' ympärillä merkitsee kotoistettavan merkkijonon, mikä tekee mahdolliseksi sen muuttamisen ajoaikaisesti kotoistamistiedoston sisältöön perustuen. On hyvä tapa käyttää metodia QObject::tr() käyttäjän näkemien merkkijonojen ympärillä siinä tapauksessa, että päätät myöhemmin kotoistaa sovelluksesi muille kielille.

Qt::Widget::setGeometry() -kutsu asettaa sekä käyttöliittymäkomponentin näyttösijainnin että sen koon. Se on sama kuin jos kutsuttaisiin metodia Qt::Widget::move(), jota seuraa Qt::Widget::resize().

connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))

Osoitin $qApp on yleismuuttuja, joka luodaan kun pyydät 'Qt':ta. Se osoittaa sovelluksen uniikkiin Qt::Application-ilmentymään.

app = Qt::Application.new(ARGV)

widget = MyWidget.new()
widget.show()

app.exec()

Tässä teemme uudesta tytärkomponentistamme ilmentymän, asetamme sen pääkäyttöliittymäkomponentiksi, ja suoritamme sovelluksen.

Sovelluksen suorittaminen

Tämä ohjelma käyttäytyy hyvin samalla tavoin kuin edellinen ohjelma. Erot ovat siinä tavassa, jolla toteutamme sen. Se käyttäytyy kuitenkin hiukan eri tavalla. Yritä vain muuttaa sen kokoa huomataksesi eron.

Harjoitukset

Yritä luoda toinen MyWidget-objekti. Mitä tapahtuu?

Yritä lisätä lisää painikkeita ja laita muita käyttöliittymäkomponentteja kuin Qt::PushButton.