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

    From KDE TechBase
    (Created page with "=== Yleistä ===")
    (Updating to match new version of source page)
     
    (19 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 07}}
     


    {{TutorialBrowser|
    {{TutorialBrowser|
    Line 18: Line 18:
    === Yleistä ===
    === Yleistä ===


    This example shows how to create custom widgets with signals and slots, and how to connect them together in more complex ways. For the first time, the source is split among several files.  
    Tässä esimerkissä näytämme, kuinka räätälöityjä käyttöliittymäkomponentteja luodaan signaaleilla ja väleillä, ja kuinka yhdistää ne toisiinsa mutkikkaamilla tavoilla. Ensimmäisen kerran lähdekoodi on jaettu useisiin tiedostoihin.  


    === Line by Line Walkthrough ===
    === Läpikäynti rivi riviltä ===
    '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t7/lcdrange.rb lcdrange.rb]'''
    '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t7/lcdrange.rb lcdrange.rb]'''


    This file is mainly lifted from [[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_06|Chapter 6]]; only the non-trivial changes are noted here.
    Tämä tiedosto on pääasiassa nostettu [[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_06|Kappaleesta 6]]; vain tärkeimmät muutokset on mainittu täällä.


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 39: Line 39:
    </syntaxhighlight>
    </syntaxhighlight>


    These make up an interface between this widget and other components in a program. Until now, '''<tt>LCDRange</tt>''' didn't really have an API at all.
    Nämä tekevät rajapinnan tämän käyttöliittymäkomponentin ja ohjelman muiden komponenttien välillä. Tähän asti '''<tt>LCDRange</tt>'''-komponentilla ei ollut todella API-sovellusrajapintaa ollenkaan.


    '''<tt>value()</tt>''' is a public function for accessing the value of the '''<tt>LCDRange</tt>''', '''<tt>setValue()</tt>''' is our first custom slot, and '''<tt>valueChanged()</tt>''' is our first custom signal.
    '''<tt>value()</tt>''' on julkinen funktio jolla pääsee käsiksi '''<tt>LCDRange</tt>'''-arvoon, '''<tt>setValue()</tt>''' on ensimmäinen räätälöity välimme, ja '''<tt>valueChanged()</tt>''' on ensimmäinen räätälöity signaalimme.


    Slots must be implemented in the normal way (a slot is also a Ruby member function). Signals are automatically implemented. Signals follow the access rules of protected Ruby functions (i.e., they can be emitted only by the class they are defined in or by classes inheriting from it).
    Välit toteutetaan normaalilla tavalla (väli on aina Ruby-jäsenfunktio). Signaalit toteutetaan automaattisesti. Signaalit noudattavat suojattujen Ruby-funktioiden kutsumissääntöjä (ts. vain ne luokat voivat lähettää, jotka on määritelty niissä luokissa, mistä se periytyy).


    The '''<tt>valueChanged()</tt>''' signal is used when the '''<tt>LCDRange's</tt>''' value has changed.
    '''<tt>valueChanged()</tt>'''-signaalia käytetään kun '''<tt>LCDRange's</tt>'''-arvo on muuttunut.


    The implementation of '''<tt>value()</tt>''' is straightforward. It simply returns the slider's value.
    Funktion '''<tt>value()</tt>''' toteuttaminen on suoraviivaista. Se yksinkertaisesti palauttaa liukukytkimen arvon.


    The implementation of '''<tt>setValue()</tt>''' is equally straightforward. Note that because the slider and LCD number are connected, setting the slider's value automatically updates the LCD number as well. In addition, the slider will automatically adjust the value if it is outside its legal range.
    Funktion '''<tt>setValue()</tt>''' toteuttaminen on yhtä suoraviivaista. Huomaa, että koska liukukytkin ja nestekidenäyyttö on yhdistetty toisiinsa, liukukytkimen arvon asettaminen päivittää myös nestekidenäytön numeron. Sen lisäksi liukukytkin säätää arvoa automaattisesti, jos laillisen arvoalueen ulkopuolella.


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 58: Line 58:
    </syntaxhighlight>
    </syntaxhighlight>


    The first [http://doc.qt.nokia.com/latest/qobject.html#connect QObject::connect()] call is the same that you have seen in the previous chapter. The second is new; it connects slider's [http://doc.qt.nokia.com/latest/qabstractslider.html#valueChanged QAbstractSlider::valueChanged()] signal to this object's '''<tt>valueChanged()</tt>''' signal. Yes, that's right. Signals can be connected to other signals. When the first is emitted, the second signal is also emitted.
    Ensimmäinen [http://doc.qt.nokia.com/latest/qobject.html#connect QObject::connect()]-kutsu on sama kuin minkä näit edellisessä kappaleessa. Toinen on uusi; se yhdistää liukukytkimen [http://doc.qt.nokia.com/latest/qabstractslider.html#valueChanged QAbstractSlider::valueChanged()]-signaalin tämän objektin '''<tt>valueChanged()</tt>'''-signaaliin. Kyllä, se on oikein. Signaalit voidaan yhdistää muihin signaaleihin. Kun ensimmäinen signaali lähetetänä, myös toinen signaali lähetetään.


    Let's look at what happens when the user operates the slider. The slider sees that its value has changed and emits the [http://doc.qt.nokia.com/latest/qabstractslider.html#valueChanged QAbstractSlider::valueChanged()] signal. That signal is connected both to the [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()] slot of the [http://doc.qt.nokia.com/latest/qlcdnumber.html Qt::LCDNumber] and to the '''<tt>valueChanged()</tt>''' signal of the '''<tt>LCDRange</tt>'''.
    Katsokaamme, mitä tapahtuu, kun käyttäjä käyttää liukukytkintä. Liukukytkin näkee, että sen arvo on muuttunut ja lähettää [http://doc.qt.nokia.com/latest/qabstractslider.html#valueChanged QAbstractSlider::valueChanged()]-signaalin. Tuo signaali yhdistetään sekä [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()]-väliin [http://doc.qt.nokia.com/latest/qlcdnumber.html Qt::LCDNumber]-numerossa että '''<tt>valueChanged()</tt>'''-signaaliin '''<tt>LCDRange</tt>'''-komponentissa.


    Thus, when the signal is emitted, '''<tt>LCDRange</tt>''' emits its own '''<tt>valueChanged()</tt>''' signal. In addition, [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()] is called and shows the new number.
    Siten, kun singaali lähetetään, '''<tt>LCDRange</tt>''' lähettää oman '''<tt>valueChanged()</tt>'''-signaalinsa. Sen lisäksi kutsutaan [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()]-funktiota ja näytetään uusi numero.


    Note that you're not guaranteed any particular order of execution; '''<tt>LCDRange::valueChanged()</tt>''' may be emitted before or after [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()] is called.
    Huomaa, että mitään suorituksen tiettyä järjestystä ei taata; '''<tt>LCDRange::valueChanged()</tt>''' saatetaan ehkä lähettää ennen tai jälkeen [http://doc.qt.nokia.com/latest/qlcdnumber.html#intValue-prop QLCDNumber::display()]-kutsua.


    '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t7/t7.rb t7.rb]'''
    '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t7/t7.rb t7.rb]'''
    Line 83: Line 83:
    </syntaxhighlight>
    </syntaxhighlight>


    When we create the nine '''<tt>LCDRange</tt>''' objects, we connect them using the [http://doc.qt.nokia.com/latest/signalsandslots.html signals and slots] mechanism. Each has its '''<tt>valueChanged()</tt>''' signal connected to the previous one's '''<tt>setValue()</tt>''' slot. Because '''<tt>LCDRange</tt>''' emits the '''<tt>valueChanged()</tt>''' signal when its value changes, we are here creating a chain of signals and slots.
    Kun luomme yhdeksän '''<tt>LCDRange</tt>'''-objektia, yhdistämme ne käyttäen [http://doc.qt.nokia.com/latest/signalsandslots.html signaalit ja välit]-mekanismia. Jokaisella on '''<tt>valueChanged()</tt>'''-signaali, joka on yhdistetty edellisen '''<tt>setValue()</tt>'''-väliin. Koska '''<tt>LCDRange</tt>''' lähettää '''<tt>valueChanged()</tt>'''-signaalin, kun sen arvo muutuu, luomme tässä signaalien ja välien ketjun.


    === Running the Application ===
    === Sovelluksen suorittaminen ===


    On startup, the program's appearance is identical to the previous one. Try operating the slider to the bottom-right.
    Käynnistettäessä ohjelman ulkonäkö on identtinen edellisen ohjelman kanssa. Yritä käyttää liukukytkintä alaoikealla.


    === Exercises ===
    === Harjoitukset ===


    Use the bottom-right slider to set all LCDs to 50. Then set all but the last LCD to 40 by clicking once to the left of the bottom-middle slider handle. Now, use the bottom-left slider to set the first seven LCDs back to 50.
    Käytä alaoikealla olevaa liukukytkintä asettamaan kaikki nestekidenäytöt arvoon 50. Aseta sitten kaikki paitsi viimeisen nestekidenäytön arvoon 40 napsauttamalla kerrna keskellä alhaalla olevan liukukytkimen kahvaa. Käytä nyt alhaalla vasemmalla olevaa liukukytkintä asettamaan ensimmäiset seitsemän nestekidenäyttöä takaisin arvoon 50.


    Click to the left of the handle on the bottom-right slider. What happens? Why is this the correct behavior?
    Napsauta alaoikealla olevan liukukytkimen vasemmanpuoleista kahvaa. Mitä tapahtuu? Miksi tämä on oikea käyttäytyminen?


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

    Latest revision as of 14:24, 18 July 2012

    Other languages:


    Yksi asia johtaa toiseen
    Tutorial Series   Qt4 Ruby -oppikurssi
    Previous   Oppikurssi 6 - Rakennetaan Blocks Galore!
    What's Next   Oppikurssi 8 - Valmistaudutaan taisteluun
    Further Reading   n/a

    Yksi asia johtaa toiseen

    Tiedostot:

    Yleistä

    Tässä esimerkissä näytämme, kuinka räätälöityjä käyttöliittymäkomponentteja luodaan signaaleilla ja väleillä, ja kuinka yhdistää ne toisiinsa mutkikkaamilla tavoilla. Ensimmäisen kerran lähdekoodi on jaettu useisiin tiedostoihin.

    Läpikäynti rivi riviltä

    lcdrange.rb

    Tämä tiedosto on pääasiassa nostettu Kappaleesta 6; vain tärkeimmät muutokset on mainittu täällä.

    signals 'valueChanged(int)'
    slots 'setValue(int)'
    
    def value()
      @slider.value()
    end
    
    def setValue(value)
      @slider.setValue(value)
    end
    

    Nämä tekevät rajapinnan tämän käyttöliittymäkomponentin ja ohjelman muiden komponenttien välillä. Tähän asti LCDRange-komponentilla ei ollut todella API-sovellusrajapintaa ollenkaan.

    value() on julkinen funktio jolla pääsee käsiksi LCDRange-arvoon, setValue() on ensimmäinen räätälöity välimme, ja valueChanged() on ensimmäinen räätälöity signaalimme.

    Välit toteutetaan normaalilla tavalla (väli on aina Ruby-jäsenfunktio). Signaalit toteutetaan automaattisesti. Signaalit noudattavat suojattujen Ruby-funktioiden kutsumissääntöjä (ts. vain ne luokat voivat lähettää, jotka on määritelty niissä luokissa, mistä se periytyy).

    valueChanged()-signaalia käytetään kun LCDRange's-arvo on muuttunut.

    Funktion value() toteuttaminen on suoraviivaista. Se yksinkertaisesti palauttaa liukukytkimen arvon.

    Funktion setValue() toteuttaminen on yhtä suoraviivaista. Huomaa, että koska liukukytkin ja nestekidenäyyttö on yhdistetty toisiinsa, liukukytkimen arvon asettaminen päivittää myös nestekidenäytön numeron. Sen lisäksi liukukytkin säätää arvoa automaattisesti, jos laillisen arvoalueen ulkopuolella.

    connect(@slider, SIGNAL('valueChanged(int)'),
            lcd, SLOT('display(int)'))
    connect(@slider, SIGNAL('valueChanged(int)'),
            self, SIGNAL('valueChanged(int)'))
    

    Ensimmäinen QObject::connect()-kutsu on sama kuin minkä näit edellisessä kappaleessa. Toinen on uusi; se yhdistää liukukytkimen QAbstractSlider::valueChanged()-signaalin tämän objektin valueChanged()-signaaliin. Kyllä, se on oikein. Signaalit voidaan yhdistää muihin signaaleihin. Kun ensimmäinen signaali lähetetänä, myös toinen signaali lähetetään.

    Katsokaamme, mitä tapahtuu, kun käyttäjä käyttää liukukytkintä. Liukukytkin näkee, että sen arvo on muuttunut ja lähettää QAbstractSlider::valueChanged()-signaalin. Tuo signaali yhdistetään sekä QLCDNumber::display()-väliin Qt::LCDNumber-numerossa että valueChanged()-signaaliin LCDRange-komponentissa.

    Siten, kun singaali lähetetään, LCDRange lähettää oman valueChanged()-signaalinsa. Sen lisäksi kutsutaan QLCDNumber::display()-funktiota ja näytetään uusi numero.

    Huomaa, että mitään suorituksen tiettyä järjestystä ei taata; LCDRange::valueChanged() saatetaan ehkä lähettää ennen tai jälkeen QLCDNumber::display()-kutsua.

    t7.rb

    previousRange = nil
    
    for row in 0..2
      for column in 0..2
        lcdRange = LCDRange.new()
        grid.addWidget(lcdRange, row, column)
        unless previousRange.nil?
          connect(lcdRange, SIGNAL('valueChanged(int)'),
                  previousRange, SLOT('setValue(int)'))
        end
        previousRange = lcdRange
      end
    end
    

    Kun luomme yhdeksän LCDRange-objektia, yhdistämme ne käyttäen signaalit ja välit-mekanismia. Jokaisella on valueChanged()-signaali, joka on yhdistetty edellisen setValue()-väliin. Koska LCDRange lähettää valueChanged()-signaalin, kun sen arvo muutuu, luomme tässä signaalien ja välien ketjun.

    Sovelluksen suorittaminen

    Käynnistettäessä ohjelman ulkonäkö on identtinen edellisen ohjelman kanssa. Yritä käyttää liukukytkintä alaoikealla.

    Harjoitukset

    Käytä alaoikealla olevaa liukukytkintä asettamaan kaikki nestekidenäytöt arvoon 50. Aseta sitten kaikki paitsi viimeisen nestekidenäytön arvoon 40 napsauttamalla kerrna keskellä alhaalla olevan liukukytkimen kahvaa. Käytä nyt alhaalla vasemmalla olevaa liukukytkintä asettamaan ensimmäiset seitsemän nestekidenäyttöä takaisin arvoon 50.

    Napsauta alaoikealla olevan liukukytkimen vasemmanpuoleista kahvaa. Mitä tapahtuu? Miksi tämä on oikea käyttäytyminen?