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

From KDE TechBase
(Created page with "== Rakennetaan Blocks Galore! ==")
(Updating to match new version of source page)
 
(14 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 06}}
 


{{TutorialBrowser|
{{TutorialBrowser|
Line 12: Line 12:
[[Image:Qt4_Ruby_Tutorial_Screenshot_6.png|center]]
[[Image:Qt4_Ruby_Tutorial_Screenshot_6.png|center]]


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


=== Overview ===
=== Yleistä ===


This example shows how to encapsulate two widgets into a new component and how easy it is to use many widgets. For the first time, we use a custom widget as a child widget.
Tämä esimerkki näyttää, kuinka kaksi käyttöliittymäkomponenttia kapseloidaan uuteen komponenttiin ja kuinka helppoa on käyttää monia käyttöliittymäkomponentteja. Ensimmäisen kerran käytämme räätälöityä käyttöliittymäkomponenttia lapsikäyttöliittymäkomponenttina.


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


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


The '''<tt>LCDRange</tt>''' widget is a widget without any API. It just has a constructor. This sort of widget is not very useful, so we'll add some API later.  
'''<tt>LCDRange</tt>'''-käyttöliittymäkomponentti on ilman mitään API-sovellusrajapintaa. Sillä on vain konstruktorir. Tämä tyyppiset käyttöliittymäkomponentit eivät ole kovin hyödyllisiä, joten lisäämme jonkun API-sovellusrajapinnan myöhemmin.  


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


This is lifted straight from the '''<tt>MyWidget</tt>''' constructor in [[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|Chapter 5]]. The only differences are that the <strong>Quit</strong> button is left out and the class is renamed.  
Tämä on nostettu suoraan '''<tt>MyWidget</tt>'''-konstruktorista [[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_05|Kappaleessa 5]]. Ainoa ero on <strong>Quit</strong>-painike ja luokan uudelleennimeäminen.  


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


'''<tt>MyWidget</tt>''', too, contains no API except a constructor.  
'''<tt>MyWidget</tt>''' ei myöskään sisällä API-sovellusrajapintaa, paitsi konstruktorin.  


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


The push button that used to be in what is now '''<tt>LCDRange</tt>''' has been separated so that we can have one <strong>Quit</strong> button and many '''<tt>LCDRange</tt>''' objects.  
Painonappi, näyttää olevan, mitä '''<tt>LCDRange</tt>''' on nyt, on eroteltu niin että meillä voi olla yksi <strong>Quit</strong>-painike ja monia '''<tt>LCDRange</tt>'''-objekteja.  


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


We create a [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] with a [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] that will contain three columns. The [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] automatically arranges its widgets in rows and columns; you can specify the row and column numbers when adding widgets to the layout, and [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] will fit them into the grid.  
Loimme [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget]-käyttöliittymäkomponentin [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout]-sijoittelulla, joka sisältää kolma saraketta. [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout]-sijoittelu järjestää käyttöliittymäkomponentit automaattisesti riveihin ja sarakkeisiin; voit määritellä rivien ja sarakkeiden lukumäärn, kun lisäät käyttöliittymäkomponentteja sijoitteluun, ja [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout]-sovittaa ne rasteriin.  


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


We create nine '''<tt>LCDRange</tt>''' widgets, all of which are children of the grid object, and we arrange them in three rows and three columns.  
Loimme yhdeksän '''<tt>LCDRange</tt>'''-käyttöliittymäkomponenttia, jotka kaikki ovat rasteriobjektin lapsia, ja järjesteämme ne kolmeen riviin ja kolmeen sarakkeeseen.  


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


This program shows how easy it is to use many widgets at a time. Each one behaves like the slider and LCD number in the previous chapter. Again, the difference lies in the implementation.  
Tämä ohjelma näyttää, kuinka helppoa on käyttää monia käyttöliittymäkomponentteja samalla kertaa. Jokainen käyttäytyy kuin liukukytkin ja nestekidenumerot edellisessä kappaleessa. Taas erot ovat toteuttamisessa.  


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


Initialize each slider with a different/random value on startup.
Alusta jokainen liukukytkin eri/satunnaisarvolla käynnistymisen yhteydessä.


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

Latest revision as of 14:19, 18 July 2012

Other languages:


Rakennetaan Blocks Galore!
Tutorial Series   Qt4 Ruby -oppikurssi
Previous   Oppikurssi 5 - Rakennetaan lohkoja
What's Next   Oppikurssi 7 - Yksi asia johtaa toiseen
Further Reading   n/a

Rakennetaan Blocks Galore!

Tiedostot:

Yleistä

Tämä esimerkki näyttää, kuinka kaksi käyttöliittymäkomponenttia kapseloidaan uuteen komponenttiin ja kuinka helppoa on käyttää monia käyttöliittymäkomponentteja. Ensimmäisen kerran käytämme räätälöityä käyttöliittymäkomponenttia lapsikäyttöliittymäkomponenttina.

require 'Qt4'

class LCDRange < Qt::Widget
  def initialize(parent = nil)
    super()
    lcd = Qt::LCDNumber.new(2)

    slider = Qt::Slider.new(Qt::Horizontal)
    slider.setRange(0, 99)
    slider.setValue(0)

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

    layout = Qt::VBoxLayout.new()
    layout.addWidget(lcd)
    layout.addWidget(slider)
    setLayout(layout)
  end
end

class MyWidget < Qt::Widget
  def initialize(parent = nil)
    super()
    quit = Qt::PushButton.new(tr('Quit'))
    quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
    connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))

    grid = Qt::GridLayout.new()
    
    for row in 0..2
      for column in 0..2
        grid.addWidget(LCDRange.new(), row, column)
      end
    end

    layout = Qt::VBoxLayout.new()
    layout.addWidget(quit)
    layout.addLayout(grid)
    setLayout(layout)
  end
end    

app = Qt::Application.new(ARGV)

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

app.exec()

Läpikäynti rivi rivilltä

class LCDRange < Qt::Widget

LCDRange-käyttöliittymäkomponentti on ilman mitään API-sovellusrajapintaa. Sillä on vain konstruktorir. Tämä tyyppiset käyttöliittymäkomponentit eivät ole kovin hyödyllisiä, joten lisäämme jonkun API-sovellusrajapinnan myöhemmin.

def initialize(parent = nil)
  super()
  lcd = Qt::LCDNumber.new(2)
  slider = Qt::Slider.new(Qt::Horizontal)
  slider.setRange(0, 99)
  slider.setValue(0)

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

  layout = Qt::VBoxLayout.new()
  layout.addWidget(lcd)
  layout.addWidget(slider)
  setLayout(layout)
end

Tämä on nostettu suoraan MyWidget-konstruktorista Kappaleessa 5. Ainoa ero on Quit-painike ja luokan uudelleennimeäminen.

class MyWidget < Qt::Widget

MyWidget ei myöskään sisällä API-sovellusrajapintaa, paitsi konstruktorin.

def initialize(parent = nil)
  super()
  quit = Qt::PushButton.new(tr('Quit'))
  quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
  connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))

Painonappi, näyttää olevan, mitä LCDRange on nyt, on eroteltu niin että meillä voi olla yksi Quit-painike ja monia LCDRange-objekteja.

    grid = Qt::GridLayout.new()

Loimme Qt::Widget-käyttöliittymäkomponentin Qt::GridLayout-sijoittelulla, joka sisältää kolma saraketta. Qt::GridLayout-sijoittelu järjestää käyttöliittymäkomponentit automaattisesti riveihin ja sarakkeisiin; voit määritellä rivien ja sarakkeiden lukumäärn, kun lisäät käyttöliittymäkomponentteja sijoitteluun, ja Qt::GridLayout-sovittaa ne rasteriin.

for row in 0..2
  for column in 0..2
    grid.addWidget(LCDRange.new(), row, column)
  end
end

Loimme yhdeksän LCDRange-käyttöliittymäkomponenttia, jotka kaikki ovat rasteriobjektin lapsia, ja järjesteämme ne kolmeen riviin ja kolmeen sarakkeeseen.

Sovelluksen suorittaminen

Tämä ohjelma näyttää, kuinka helppoa on käyttää monia käyttöliittymäkomponentteja samalla kertaa. Jokainen käyttäytyy kuin liukukytkin ja nestekidenumerot edellisessä kappaleessa. Taas erot ovat toteuttamisessa.

Harjoitukset

Alusta jokainen liukukytkin eri/satunnaisarvolla käynnistymisen yhteydessä.