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

    From KDE TechBase
    (Created page with "Yllä oleva kuva näytää asettelun, jonka yritämme saavuttaa. Vasen puoli näyttää asettelun kytkentäkaaviopuolen; oikea puoli on ohjelman todellinen näytönkaappaus. ''(N...")
    (Created page with "Lisäämme <strong>Quit</strong>-painikkeen rasterin vasempaan yläkulmaan, ts. solun koordinaatit ovat (0, 0).")
    Line 145: Line 145:
    </syntaxhighlight>
    </syntaxhighlight>


    We add the <strong>Quit</strong> button in the top-left cell of the grid, i.e., the cell with coordinates (0, 0).
    Lisäämme <strong>Quit</strong>-painikkeen rasterin vasempaan yläkulmaan, ts. solun koordinaatit ovat (0, 0).


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">

    Revision as of 16:42, 5 October 2011

    Other languages:


    Development/Tutorials/Qt4 Ruby Tutorial/Chapter 08


    Valmistaudutaan taisteluun
    Tutorial Series   Qt4 Ruby -oppikurssi
    Previous   Oppikurssi 7 - Yksi asia johtaa toiseen
    What's Next   Oppikurssi 9 - Kanuunalla kykenet
    Further Reading   n/a

    Valmistaudutaan taisteluun

    Tiedostot:

    Yleistä

    Tässä esimerkissä esittelemme ensimmäisen räätälöidyn käyttöliittymäkomponentin, joka voi piirtää itsensä. Me lisäämme myös hyödyllisen näppäimistörajapinnan (kahdella koodirivillä).

    Läpikäynti rivi riviltä

    lcdrange.rb

    Tämä tiedosto on hyvin samanlainen kuin lcdrange.rb Kappaleessa 7. Olemme lisänneet yhden välin: setRange().

    Lisäämme nyt mahdollisuuden asettaa LCDRange-lukualueen. Tähän asti se on ollut kiinteä välillä 0 ... 99.

    def setRange(minVal, maxVal)
      if minVal < 0 || maxVal > 99 || minVal > maxVal
        qWarning("LCDRange::setRange(#{minVal}, #{maxVal})\n" +
                   "\tRange must be 0..99\n" +
                   "\tand minVal must not be greater than maxVal")
        return
      end
    
      @slider.setRange(minVal, maxVal)
    end
    

    setRange()-väli asetaa liukukytkimen lukualueen LCDRange. Koska olemme asettaneet QLCDNumber näyttämään aina kaksi numeroa, haluamme rajoittaa mahdollisen lukualueen minVal ja maxVal ylivuoden välttämiseksi käyttöliittymäkomponentissa QLCDNumber. (Meillä olisi lupa laskea arvot aina arvoon -9, mutta valitsemme olemaan tekemättä sitä.) Jos argumentit ovat virheellisiä, käytämme Qt:n QtGlobal::qWarning()-funktiota julkaisemaan varoituksen käytäjälle ja palaamme välittömästi. QtGlobal::qWarning() on printf-tyyppinen funktio, joka oletuksena lähettää tulosteensa kohteeseen $stderr. Jos haluat, voit asentaa oman käsittelijäfunktion käyttäen QtGlobal::qInstallMsgHandler()-objektia.

    lcd.setSegmentStyle(Qt::LCDNumber::Filled)
    

    Tämä saa nestekidenumeromme näyttämään paremmilta. En ole varma, mutta uskon, mikä tekee mahdolliseksi on paletin asettaminne (katso seuraava lohko). Mitä tiedän nyt, on että tällä rivillä ei ollut vaikutusta kun sitä yritettiin edellisessä kappaleessa, mutta se toimii tässä.

    cannon.rb

    @currentAngle = 45
    setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))
    setAutoFillBackground(true)
    

    Konstruktori alustaa kulma-arvon 45 asteeseen ja asettaa räätälöidyn paletin tälle käyttöliittymäkomponentille.

    Tämä paletti käyttää indikoitua väriä taustana ja poimii muita värejä siihen sopivasti. (Tälle käyttöliittymäkomponentille käytetään todellisuudessa vain tausta- ja tekstivärit). Kutsumme sitten setAutoFillBackground(true) kertomaan Qt:lle, etä taustan voi täyttää automaattisesti.

    Qt::Color määriteltiin RGB (punainen-vihreä-sininen) -triplettinä, missä jokainen arvo on välillä 0 (tumma) ja 255 (kirkas). Voisimme myös käyttää ennakolta määriteltyjä värejä kuten Qt::yellow eikä RGB-arvojen määrittelyjä.

    def setAngle(angle)
      if angle < 5
        angle = 5
      elsif angle > 70
        angle = 70
      end
    
      if @currentAngle == angle
        return
      end
    
      @currentAngle = angle
      update()
      emit angleChanged(@currentAngle)
    end  def setAngle(degrees)
    

    Tämä funktio asettaa kulma-arvon. Olemme valinneet lailliseksi arvoalueeksi 5 ... 70 ja säätäneet annetun asetenumeron sen mukaan. Olemme valinneet, että emme julkaise varoitusta, jos uusi kulma on lukualueen ulkopuolella.

    Jos uusi kulma on sama kuin vanha, palaamme välittömästi. On tärkeää lähettää vain angleChanged()-signaali kun kulma on todella muuttunut.

    Sitten asetamme uuden kulman ja piirrämme käyttöliittymäkomponenttimme. Qt::Widget::update()-funktio tyhjentää käyttöliittymäkomponentin (tavallisesti täyttämällä sen taustavärin) ja asettaa piirtämistapahtuman käyttöliittymäkomponentille. Tästä seuraa kutsu käyttöliittymäkomponentin piirtämistapahtumafunktiolle.

    Lopuksi lähetämme angleChanged()-signaalin kertomaan ulkopuoliselle maailmalle, että kulma on muuttunut. Avainsana emit on ainutlaatuinen Qt:lle ja ei ole säännöllistä Ruby-syntaksia.

    def paintEvent(event)
      painter = Qt::Painter.new(self)
      painter.drawText(200, 200, tr("Angle = #{@currentAngle}"))
      painter.end()
    end
    

    Tämä oli ensimmäinen yrityksemme kirjoittaa piirtämistapahtumakäsittelijä. Tapahtuma.argumentti sisältää piirtämistapahtuman kuvauksen. Qt::PaintEvent sisältää käyttöliittymäkomponentin alueen, joka on päivitettävä. Toistaiseksi olemma laiskoja ja piirrämme kaikki.

    Koodimme näyttää kulma-arvon käyttöliittymäkomponentissa kiinteässä paikassa. Luomme Qt::Painter-toiminnon tälle käyttöliittymäkomponentille ja käytämme sitä merkkijonon piirtämiseen. Palaamme Qt::Painter-toimintoon myöhemmin; se voi tehdä todella monia asioita.

    t8.rb

    angle = LCDRange.new()
    angle.setRange(5, 70)
    

    Konstruktorissa lumme ja asetamme LCDRange-käyttöliittymäkomponentin. Asetamme LCDRange-komponentin hyväksymään kulmat välillä 5 ... 70 astetta.

     cannonField = CannonField.new()
    

    Luomme CannonField-käyttöliittymäkomponentin.

    connect(angle, SIGNAL('valueChanged(int)'),
            cannonField, SLOT('setAngle(int)'))
    connect(cannonField, SIGNAL('angleChanged(int)'),
            angle, SLOT('setValue(int)'))
    

    Tässä yhdistämme LCDRange-komponentin valueChanged()-signaalin CannonField-kentän setValue()-väliin . Tämä päivittää CannonField-kentän kulma-arvon joka kerran, kun käyttäjä käyttää LCDRange-komponenttia. Teemme myös päinvastaisen yhteyden niin että kulman muuttuminen CannonField-kentässä päivittää LCDRange-arvon. Esimerkissämme emme koskaan muuta CannonField-kulmaa suoraan; mutta tekemällä viimeisen connect() varmistamme, että mikään tulevaisuuden muutos ei häiritse noiden kahden arvon välistä synkronointia.

    Tämä kuvaa komponenttiohjelmoinnin voimaa ja oikeaa kapselointia.

    Huomaa kuinka on tärkeää lähettää angleChanged()-signaali vain silloin kun kulma todella muuttuu. Jos sekä LCDRange että CannonField ohittivat tämän tarkistuksen, ohjelma siirtyisi päättymättömään silmukkaan toisen arvon ensimmäisellä muutoksella.

    gridLayout = Qt::GridLayout.new()
    

    Toistaiseksi olemme käyttäneet Qt::VBoxLayout-luokkaa ulkoasuhallintaan. Nyt haluamme kuintenkin hallita ulkoasua paremmin, ja vaihdamme tehokkaampaan Qt::GridLayout-luokkaan. Qt::GridLayout ei ole käyttöliittymäkomponenttit; se on erilainen luokka, joka hallitsee minkä tahansa käyttöliittymäkomponentin lapsia.

    Meidän ei tarvitse määritellä mitään mittoja Qt::GridLayout-konstruktorille. Luokka Qt::GridLayout määrittelee rivien ja sarakkeiden lukumäärän niiden rasterisolujen perusteella, jotka otamme käyttöön.

    Yllä oleva kuva näytää asettelun, jonka yritämme saavuttaa. Vasen puoli näyttää asettelun kytkentäkaaviopuolen; oikea puoli on ohjelman todellinen näytönkaappaus. (Nokia omistaa näiden kahden kuvan copyright-oikeudet.)

        gridLayout.addWidget(quit, 0, 0)
    

    Lisäämme Quit-painikkeen rasterin vasempaan yläkulmaan, ts. solun koordinaatit ovat (0, 0).

        gridLayout.addWidget(angle, 1, 0)
    

    We put the angle LCDRange cell (1, 0).

    gridLayout.addWidget(cannonField, 1, 1, 2, 1)
    

    We let the CannonField object occupy cells (1, 1) and (2, 1).

        gridLayout.setColumnStretch(1, 10)
    

    We tell Qt::GridLayout that the right column (column 1) is stretchable, with a stretch factor of 10. Because the left column isn't (its stretch factor is 0, the default value), Qt::GridLayout will try to let the left-hand widgets' sizes be unchanged and will resize just the CannonField when the MyWidget is resized.

    In this particular example, any stretch factor greater than 0 for column 1 would have the same effect. In more complex layouts, you can use the stretch factors to tell that a particular column or row should stretch twice as fast as another by assigning appropriate stretch factors.

        angle.setValue(60)
    

    We set an initial angle value. Note that this will trigger the connection from LCDRange to CannonField.

        angle.setFocus()
    

    Our last action is to set angle to have keyboard focus so that keyboard input will go to the LCDRange widget by default.

    Sovelluksen suorittaminen

    When the slider is operated, the CannonField displays the new angle value. Upon resizing, CannonField is given as much space as possible.

    Harjoitukset

    Try to resize the window. What happens if you make it really narrow or really squat?

    If you give the left-hand column a non-zero stretch factor, what happens when you resize the window?

    Try to change "Quit" to "&Quit". How does the button's look change? ( Whether it does change or not depends on the platform.) What happens if you press Alt+Q while the program is running?

    Center the text in the CannonField.