Development/Tutorials/Qt4 Ruby Tutorial/Chapter 08 - Revision history

AnneW at 14:20, 18 July 2012

2012-07-18T14:20:19Z

Aspotashev: add link to chapter 7

2011-07-02T17:52:50Z

add link to chapter 7

AnneW: Marked this version for translation

2011-07-02T14:54:35Z

Marked this version for translation

Show changes

Aspotashev: remove links to files from translation

2011-07-01T23:33:35Z

remove links to files from translation

Aspotashev: add translate tags

2011-07-01T23:30:17Z

add translate tags

Show changes

Neverendingo: Text replace - "" to ""

2011-06-29T20:55:36Z

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

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


2011-06-29T20:43:11Z
Text replace - "<code ruby>" to "<syntaxhighlight lang="ruby">"

				
				
				
				
			
			← Older revision
			Revision as of 20:43, 29 June 2011
			
Line 28:
Line 28:
  We now add the possibility of setting the range of the '''<tt>LCDRange</tt>'''. Until now, it has been fixed at 0 to 99.   We now add the possibility of setting the range of the '''<tt>LCDRange</tt>'''. Until now, it has been fixed at 0 to 99.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def setRange(minVal, maxVal)   def setRange(minVal, maxVal)
     if minVal < 0 || maxVal > 99 || minVal > maxVal      if minVal < 0 || maxVal > 99 || minVal > maxVal
Line 43:
Line 43:
  The '''<tt>setRange()</tt>''' slot sets the range of the slider in the '''<tt>LCDRange</tt>'''. Because we have set up the [http://doc.qt.nokia.com/latest/qlcdnumber.html QLCDNumber] to always display two digits, we want to limit the possible range of '''<tt>minVal</tt>''' and '''<tt>maxVal</tt>''' to avoid overflow of the [http://doc.qt.nokia.com/latest/qlcdnumber.html QLCDNumber]. (We could have allowed values down to -9 but chose not to.) If the arguments are illegal, we use Qt's [http://doc.qt.nokia.com/latest/qtglobal.html#qWarning QtGlobal::qWarning()] function to issue a warning to the user and return immediately. [http://doc.qt.nokia.com/latest/qtglobal.html#qWarning QtGlobal::qWarning()] is a '''<tt>printf</tt>'''-like function that by default sends its output to '''<tt>$stderr</tt>'''. If you want, you can install your own handler function using [http://doc.qt.nokia.com/latest/qtglobal.html#qInstallMsgHandler QtGlobal::qInstallMsgHandler()].   The '''<tt>setRange()</tt>''' slot sets the range of the slider in the '''<tt>LCDRange</tt>'''. Because we have set up the [http://doc.qt.nokia.com/latest/qlcdnumber.html QLCDNumber] to always display two digits, we want to limit the possible range of '''<tt>minVal</tt>''' and '''<tt>maxVal</tt>''' to avoid overflow of the [http://doc.qt.nokia.com/latest/qlcdnumber.html QLCDNumber]. (We could have allowed values down to -9 but chose not to.) If the arguments are illegal, we use Qt's [http://doc.qt.nokia.com/latest/qtglobal.html#qWarning QtGlobal::qWarning()] function to issue a warning to the user and return immediately. [http://doc.qt.nokia.com/latest/qtglobal.html#qWarning QtGlobal::qWarning()] is a '''<tt>printf</tt>'''-like function that by default sends its output to '''<tt>$stderr</tt>'''. If you want, you can install your own handler function using [http://doc.qt.nokia.com/latest/qtglobal.html#qInstallMsgHandler QtGlobal::qInstallMsgHandler()].
    
− <code ruby> + <syntaxhighlight lang="ruby">
  lcd.setSegmentStyle(Qt::LCDNumber::Filled)   lcd.setSegmentStyle(Qt::LCDNumber::Filled)
  </code>   </code>
Line 51:
Line 51:
  '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t8/cannon.rb cannon.rb]'''   '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t8/cannon.rb cannon.rb]'''
    
− <code ruby> + <syntaxhighlight lang="ruby">
  @currentAngle = 45   @currentAngle = 45
  setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))   setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))
Line 63:
Line 63:
  The [http://doc.qt.nokia.com/latest/qcolor.html Qt::Color] is specified as a RGB (red-green-blue) triplet, where each value is between 0 (dark) and 255 (bright). We could also have used a predefined color such as [http://doc.qt.nokia.com/latest/qt.html#GlobalColor-enum Qt::yellow] instead of specifying an RGB value.   The [http://doc.qt.nokia.com/latest/qcolor.html Qt::Color] is specified as a RGB (red-green-blue) triplet, where each value is between 0 (dark) and 255 (bright). We could also have used a predefined color such as [http://doc.qt.nokia.com/latest/qt.html#GlobalColor-enum Qt::yellow] instead of specifying an RGB value.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def setAngle(angle)   def setAngle(angle)
     if angle < 5      if angle < 5
Line 89:
Line 89:
  Finally, we emit the '''<tt>angleChanged()</tt>''' signal to tell the outside world that the angle has changed. The '''<tt>emit</tt>''' keyword is unique to Qt and not regular Ruby syntax.   Finally, we emit the '''<tt>angleChanged()</tt>''' signal to tell the outside world that the angle has changed. The '''<tt>emit</tt>''' keyword is unique to Qt and not regular Ruby syntax.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def paintEvent(event)   def paintEvent(event)
     painter = Qt::Painter.new(self)      painter = Qt::Painter.new(self)
Line 103:
Line 103:
  '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t8/t8.rb t8.rb]'''   '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t8/t8.rb t8.rb]'''
    
− <code ruby> + <syntaxhighlight lang="ruby">
  angle = LCDRange.new()   angle = LCDRange.new()
  angle.setRange(5, 70)   angle.setRange(5, 70)
Line 110:
Line 110:
  In the constructor, we create and set up the LCDRange widget. We set the LCDRange to accept angles from 5 to 70 degrees.   In the constructor, we create and set up the LCDRange widget. We set the LCDRange to accept angles from 5 to 70 degrees.
    
− <code ruby> + <syntaxhighlight lang="ruby">
    cannonField = CannonField.new()     cannonField = CannonField.new()
  </code>   </code>
Line 116:
Line 116:
  We create our CannonField widget.   We create our CannonField widget.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  connect(angle, SIGNAL('valueChanged(int)'),   connect(angle, SIGNAL('valueChanged(int)'),
           cannonField, SLOT('setAngle(int)'))            cannonField, SLOT('setAngle(int)'))
Line 129:
Line 129:
  Notice how important it is to emit the '''<tt>angleChanged()</tt>''' signal only when the angle actually changes. If both the '''<tt>LCDRange</tt>''' and the '''<tt>CannonField</tt>''' had omitted this check, the program would have entered an infinite loop upon the first change of one of the values.   Notice how important it is to emit the '''<tt>angleChanged()</tt>''' signal only when the angle actually changes. If both the '''<tt>LCDRange</tt>''' and the '''<tt>CannonField</tt>''' had omitted this check, the program would have entered an infinite loop upon the first change of one of the values.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  gridLayout = Qt::GridLayout.new()   gridLayout = Qt::GridLayout.new()
  </code>   </code>
Line 141:
Line 141:
  The diagram above shows the layout we're trying to achieve. The left side shows a schematic view of the layout; the right side is an actual screenshot of the program. ''(These two images are copyrighted/owned by Nokia.)''   The diagram above shows the layout we're trying to achieve. The left side shows a schematic view of the layout; the right side is an actual screenshot of the program. ''(These two images are copyrighted/owned by Nokia.)''
    
− <code ruby> + <syntaxhighlight lang="ruby">
       gridLayout.addWidget(quit, 0, 0)        gridLayout.addWidget(quit, 0, 0)
  </code>   </code>
Line 147:
Line 147:
  We add the <strong>Quit</strong> button in the top-left cell of the grid, i.e., the cell with coordinates (0, 0).   We add the <strong>Quit</strong> button in the top-left cell of the grid, i.e., the cell with coordinates (0, 0).
    
− <code ruby> + <syntaxhighlight lang="ruby">
       gridLayout.addWidget(angle, 1, 0)        gridLayout.addWidget(angle, 1, 0)
  </code>   </code>
Line 153:
Line 153:
  We put the angle '''<tt>LCDRange</tt>''' cell (1, 0).   We put the angle '''<tt>LCDRange</tt>''' cell (1, 0).
    
− <code ruby> + <syntaxhighlight lang="ruby">
  gridLayout.addWidget(cannonField, 1, 1, 2, 1)   gridLayout.addWidget(cannonField, 1, 1, 2, 1)
  </code>   </code>
Line 159:
Line 159:
  We let the '''<tt>CannonField</tt>''' object occupy cells (1, 1) and (2, 1).   We let the '''<tt>CannonField</tt>''' object occupy cells (1, 1) and (2, 1).
    
− <code ruby> + <syntaxhighlight lang="ruby">
       gridLayout.setColumnStretch(1, 10)        gridLayout.setColumnStretch(1, 10)
  </code>   </code>
Line 167:
Line 167:
  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.   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.
    
− <code ruby> + <syntaxhighlight lang="ruby">
       angle.setValue(60)        angle.setValue(60)
  </code>   </code>
Line 173:
Line 173:
  We set an initial angle value. Note that this will trigger the connection from '''<tt>LCDRange</tt>''' to '''<tt>CannonField</tt>'''.   We set an initial angle value. Note that this will trigger the connection from '''<tt>LCDRange</tt>''' to '''<tt>CannonField</tt>'''.
    
− <code ruby> + <syntaxhighlight lang="ruby">
       angle.setFocus()        angle.setFocus()
  </code>   </code>



Alisha at 03:02, 13 January 2010
2010-01-13T03:02:09Z


				
				
				
				
			
			← Older revision
			Revision as of 03:02, 13 January 2010
			
Line 190:
Line 190:
    
  Center the text in the '''<tt>CannonField</tt>'''.   Center the text in the '''<tt>CannonField</tt>'''.
  + 
  + [[Category:Ruby]]



Alisha at 14:04, 8 January 2010
2010-01-08T14:04:58Z


				
				
				
				
			
			← Older revision
			Revision as of 14:04, 8 January 2010
			
Line 137:
Line 137:
  We don't need to specify any dimensions to the [http://doc.qt.nokia.com/latest/qvboxlayout.html Qt::GridLayout] constructor. The [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] will determine the number of rows and columns based on the grid cells we populate.   We don't need to specify any dimensions to the [http://doc.qt.nokia.com/latest/qvboxlayout.html Qt::GridLayout] constructor. The [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] will determine the number of rows and columns based on the grid cells we populate.
    
− [[Image:Qt4_Ruby_Tutorial_Screenshot_8-layout.png|center]][[Image:Qt4_Ruby_Tutorial_Screenshot_8-reallayout.png|center]] + [[Image:Qt4_Ruby_Tutorial_Screenshot_8-layout.png]][[Image:Qt4_Ruby_Tutorial_Screenshot_8-reallayout.png]]
    
− The diagram above shows the layout we're trying to achieve. The left side shows a schematic view of the layout; the right side is an actual screenshot of the program. ''(These two images are copyrighted/owned by Trolltech.)'' + The diagram above shows the layout we're trying to achieve. The left side shows a schematic view of the layout; the right side is an actual screenshot of the program. ''(These two images are copyrighted/owned by Nokia.)''
    
  <code ruby>   <code ruby>



Alisha at 00:41, 31 December 2009
2009-12-31T00:41:39Z


				
				
				
				
			
			← Older revision
			Revision as of 00:41, 31 December 2009
			
Line 139:
Line 139:
  [[Image:Qt4_Ruby_Tutorial_Screenshot_8-layout.png|center]][[Image:Qt4_Ruby_Tutorial_Screenshot_8-reallayout.png|center]]   [[Image:Qt4_Ruby_Tutorial_Screenshot_8-layout.png|center]][[Image:Qt4_Ruby_Tutorial_Screenshot_8-reallayout.png|center]]
    
− The diagram above shows the layout we're trying to achieve. The left side shows a schematic view of the layout; the right side is an actual screenshot of the program. (These two images are copyrighted/owned by Trolltech.) + The diagram above shows the layout we're trying to achieve. The left side shows a schematic view of the layout; the right side is an actual screenshot of the program. ''(These two images are copyrighted/owned by Trolltech.)''
    
  <code ruby>   <code ruby>

← Older revision		Revision as of 14:20, 18 July 2012
Line 1:		Line 1:
	<languages />		<languages />

−	~~{{Template:I18n/Language Navigation Bar\|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 08}}~~

	{{<translate><!--T:1-->		{{<translate><!--T:1-->

@@ Line 44: / Line 44: @@
 <translate>
 <!--T:12-->
-This file is very similar to the lcdrange.rb in Chapter 7. We have added one slot: '''<tt>setRange()</tt>'''.
+This file is very similar to the lcdrange.rb in [[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_07|Chapter 7]]. We have added one slot: '''<tt>setRange()</tt>'''.
 <!--T:13-->

@@ Line 18: / Line 18: @@
 <translate>
 Files:
 * [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t8/lcdrange.rb lcdrange.rb]
 * [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t8/t8.rb t8.rb]
 * [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t8/cannon.rb cannon.rb]
 <translate>

@@ Line 39: / Line 39: @@
    @slider.setRange(minVal, maxVal)
 end
-</code>
+</syntaxhighlight>
 The '''<tt>setRange()</tt>''' slot sets the range of the slider in the '''<tt>LCDRange</tt>'''. Because we have set up the [http://doc.qt.nokia.com/latest/qlcdnumber.html QLCDNumber] to always display two digits, we want to limit the possible range of '''<tt>minVal</tt>''' and '''<tt>maxVal</tt>''' to avoid overflow of the [http://doc.qt.nokia.com/latest/qlcdnumber.html QLCDNumber]. (We could have allowed values down to -9 but chose not to.) If the arguments are illegal, we use Qt's [http://doc.qt.nokia.com/latest/qtglobal.html#qWarning QtGlobal::qWarning()] function to issue a warning to the user and return immediately. [http://doc.qt.nokia.com/latest/qtglobal.html#qWarning QtGlobal::qWarning()] is a '''<tt>printf</tt>'''-like function that by default sends its output to '''<tt>$stderr</tt>'''. If you want, you can install your own handler function using [http://doc.qt.nokia.com/latest/qtglobal.html#qInstallMsgHandler QtGlobal::qInstallMsgHandler()].
@@ Line 45: / Line 45: @@
 <syntaxhighlight lang="ruby">
 lcd.setSegmentStyle(Qt::LCDNumber::Filled)
-</code>
+</syntaxhighlight>
 This makes our lcd numbers look way better. I'm not certain, but I believe what makes it possible to do this is setting a palette (see next section). What I do know is that this line has no effect when I tried it in previous chapters, but works here.
@@ Line 55: / Line 55: @@
 setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))
 setAutoFillBackground(true)
-</code>
+</syntaxhighlight>
 The constructor initializes the angle value to 45 degrees and sets a custom palette for this widget.
@@ Line 79: / Line 79: @@
    emit angleChanged(@currentAngle)
 end  def setAngle(degrees)
-</code>
+</syntaxhighlight>
 This function sets the angle value. We have chosen a legal range of 5 to 70 and adjust the given number of degrees accordingly. We have chosen not to issue a warning if the new angle is out of range.
@@ Line 95: / Line 95: @@
    painter.end()
 end
-</code>
+</syntaxhighlight>
 This is our first attempt to write a paint event handler. The event argument contains a description of the paint event. [http://doc.qt.nokia.com/latest/qpaintevent.html Qt::PaintEvent] contains the region in the widget that must be updated. For the time being, we will be lazy and just paint everything.
@@ Line 106: / Line 106: @@
 angle = LCDRange.new()
 angle.setRange(5, 70)
-</code>
+</syntaxhighlight>
 In the constructor, we create and set up the LCDRange widget. We set the LCDRange to accept angles from 5 to 70 degrees.
@@ Line 112: / Line 112: @@
 <syntaxhighlight lang="ruby">
   cannonField = CannonField.new()
-</code>
+</syntaxhighlight>
 We create our CannonField widget.
@@ Line 121: / Line 121: @@
 connect(cannonField, SIGNAL('angleChanged(int)'),
          angle, SLOT('setValue(int)'))
-</code>
+</syntaxhighlight>
 Here we connect the '''<tt>valueChanged()</tt>''' signal of the '''<tt>LCDRange</tt>''' to the '''<tt>setValue()</tt>''' slot of the '''<tt>CannonField</tt>'''. This will update '''<tt>CannonField</tt>''''s angle value whenever the user operates the '''<tt>LCDRange</tt>'''. We also make the reverse connection so that changing the angle in the '''<tt>CannonField</tt>''' will update the '''<tt>LCDRange</tt>''' value. In our example we never change the angle of the '''<tt>CannonField</tt>''' directly; but by doing the last connect() we ensure that no future changes will disrupt the synchronization between those two values.
@@ Line 131: / Line 131: @@
 <syntaxhighlight lang="ruby">
 gridLayout = Qt::GridLayout.new()
-</code>
+</syntaxhighlight>
 So far, we have used [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::VBoxLayout] for geometry management. Now, however, we want to have a little more control over the layout, and we switch to the more powerful [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] class. [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] isn't a widget; it is a different class that can manage the children of any widget.
@@ Line 143: / Line 143: @@
 <syntaxhighlight lang="ruby">
      gridLayout.addWidget(quit, 0, 0)
-</code>
+</syntaxhighlight>
 We add the <strong>Quit</strong> button in the top-left cell of the grid, i.e., the cell with coordinates (0, 0).
@@ Line 149: / Line 149: @@
 <syntaxhighlight lang="ruby">
      gridLayout.addWidget(angle, 1, 0)
-</code>
+</syntaxhighlight>
 We put the angle '''<tt>LCDRange</tt>''' cell (1, 0).
@@ Line 155: / Line 155: @@
 <syntaxhighlight lang="ruby">
 gridLayout.addWidget(cannonField, 1, 1, 2, 1)
-</code>
+</syntaxhighlight>
 We let the '''<tt>CannonField</tt>''' object occupy cells (1, 1) and (2, 1).
@@ Line 161: / Line 161: @@
 <syntaxhighlight lang="ruby">
      gridLayout.setColumnStretch(1, 10)
-</code>
+</syntaxhighlight>
 We tell [http://doc.qt.nokia.com/latest/qgridlayout.html 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), [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] will try to let the left-hand widgets' sizes be unchanged and will resize just the '''<tt>CannonField</tt>''' when the '''<tt>MyWidget</tt>''' is resized.
@@ Line 169: / Line 169: @@
 <syntaxhighlight lang="ruby">
      angle.setValue(60)
-</code>
+</syntaxhighlight>
 We set an initial angle value. Note that this will trigger the connection from '''<tt>LCDRange</tt>''' to '''<tt>CannonField</tt>'''.
@@ Line 175: / Line 175: @@
 <syntaxhighlight lang="ruby">
      angle.setFocus()
-</code>
+</syntaxhighlight>
 Our last action is to set '''<tt>angle</tt>''' to have keyboard focus so that keyboard input will go to the '''<tt>LCDRange</tt>''' widget by default.

← Older revision		Revision as of 03:02, 13 January 2010
Line 190:		Line 190:

	Center the text in the '''<tt>CannonField</tt>'''.		Center the text in the '''<tt>CannonField</tt>'''.
		+
		+	[[Category:Ruby]]