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

AnneW at 14:21, 18 July 2012

2012-07-18T14:21:59Z

AnneW: Marked this version for translation

2011-07-02T14:55:32Z

Marked this version for translation

Aspotashev: add translate tags

2011-07-01T23:38:27Z

add translate tags

Neverendingo: Text replace - "" to ""

2011-06-29T20:55:49Z

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

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


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

				
				
				
				
			
			← Older revision
			Revision as of 20:43, 29 June 2011
			
Line 26:
Line 26:
  The '''<tt>CannonField</tt>''' now has a force value in addition to the angle.   The '''<tt>CannonField</tt>''' now has a force value in addition to the angle.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  signals 'angleChanged(int)', 'forceChanged(int)'   signals 'angleChanged(int)', 'forceChanged(int)'
  slots 'setAngle(int)', 'setForce(int)'   slots 'setAngle(int)', 'setForce(int)'
Line 33:
Line 33:
  The interface to the force follows the same practice as for the angle.   The interface to the force follows the same practice as for the angle.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def initialize(parent = nil)   def initialize(parent = nil)
     super()      super()
Line 47:
Line 47:
  The force '''<tt>@currentForce</tt>''' is initialized to zero.   The force '''<tt>@currentForce</tt>''' is initialized to zero.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def setAngle(angle)   def setAngle(angle)
     if angle < 5      if angle < 5
Line 67:
Line 67:
  We have made a slight change in the '''<tt>setAngle()</tt>''' function. It repaints only the portion of the widget that contains the cannon.   We have made a slight change in the '''<tt>setAngle()</tt>''' function. It repaints only the portion of the widget that contains the cannon.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def setForce(force)   def setForce(force)
     if force < 0      if force < 0
Line 83:
Line 83:
  The implementation of '''<tt>setForce()</tt>''' is quite similar to that of '''<tt>setAngle()</tt>'''. The only difference is that because we don't show the force value, we don't need to repaint the widget.   The implementation of '''<tt>setForce()</tt>''' is quite similar to that of '''<tt>setAngle()</tt>'''. The only difference is that because we don't show the force value, we don't need to repaint the widget.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def paintEvent(event)   def paintEvent(event)
     painter = Qt::Painter.new(self)      painter = Qt::Painter.new(self)
Line 100:
Line 100:
  We paint as in Chapter 9.   We paint as in Chapter 9.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  def cannonRect()   def cannonRect()
     result = Qt::Rect.new(0, 0, 50, 50)      result = Qt::Rect.new(0, 0, 50, 50)
Line 116:
Line 116:
  The constructor is mostly the same, but some new bits have been added.   The constructor is mostly the same, but some new bits have been added.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  force = LCDRange.new()   force = LCDRange.new()
  force.setRange(10, 50)   force.setRange(10, 50)
Line 123:
Line 123:
  We add a second '''<tt>LCDRange</tt>''', which will be used to set the force.   We add a second '''<tt>LCDRange</tt>''', which will be used to set the force.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  connect(force, SIGNAL('valueChanged(int)'),   connect(force, SIGNAL('valueChanged(int)'),
            cannonField, SLOT('setForce(int)'))             cannonField, SLOT('setForce(int)'))
Line 132:
Line 132:
  We connect the '''<tt>force</tt>''' widget and the '''<tt>cannonField</tt>''' widget, just like we did for the '''<tt>angle</tt>''' widget.   We connect the '''<tt>force</tt>''' widget and the '''<tt>cannonField</tt>''' widget, just like we did for the '''<tt>angle</tt>''' widget.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  leftLayout = Qt::VBoxLayout.new()   leftLayout = Qt::VBoxLayout.new()
  leftLayout.addWidget(angle)   leftLayout.addWidget(angle)
Line 146:
Line 146:
  In Chapter 9, we put '''<tt>angle</tt>''' in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of '''<tt>angle</tt>''' and '''<tt>range</tt>''' in the vertical box.   In Chapter 9, we put '''<tt>angle</tt>''' in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of '''<tt>angle</tt>''' and '''<tt>range</tt>''' in the vertical box.
    
− <code ruby> + <syntaxhighlight lang="ruby">
  force.setValue(25)   force.setValue(25)
  </code>   </code>



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


				
				
				
				
			
			← Older revision
			Revision as of 03:03, 13 January 2010
			
Line 147:
Line 147:
    
  <code ruby>   <code ruby>
−     force.setValue(25) + force.setValue(25)
  </code>   </code>
    
Line 153:
Line 153:
    
  === Running the Application ===   === Running the Application ===
−  
  We now have a force control.   We now have a force control.
    
  === Exercises ===   === Exercises ===
−  
  Make the size of the cannon barrel be dependent on the force.   Make the size of the cannon barrel be dependent on the force.
    
Line 163:
Line 161:
    
  Try adding a better keyboard interface. For example, make + and - increase and decrease the force and enter shoot. If you're bothered by the way the '''<tt>Left</tt>''' and '''<tt>Right</tt>''' keys work, change that too. [Hint: Reimplement [http://doc.qt.nokia.com/latest/qwidget.html#keyPressEvent Qt::Widget::keyPressEvent()].]   Try adding a better keyboard interface. For example, make + and - increase and decrease the force and enter shoot. If you're bothered by the way the '''<tt>Left</tt>''' and '''<tt>Right</tt>''' keys work, change that too. [Hint: Reimplement [http://doc.qt.nokia.com/latest/qwidget.html#keyPressEvent Qt::Widget::keyPressEvent()].]
  + 
  + [[Category:Ruby]]



Alisha at 01:18, 31 December 2009
2009-12-31T01:18:33Z


				
				
				
				
			
			← Older revision
			Revision as of 01:18, 31 December 2009
			
Line 24:
Line 24:
  '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]'''   '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]'''
    
− The CannonField now has a force value in addition to the angle. + The '''<tt>CannonField</tt>''' now has a force value in addition to the angle.
    
  <code ruby>   <code ruby>
Line 45:
Line 45:
  </code>   </code>
    
− The force @currentForce is initialized to zero. + The force '''<tt>@currentForce</tt>''' is initialized to zero.
    
  <code ruby>   <code ruby>
−   def setAngle(angle) + def setAngle(angle)
−     if angle < 5 +   if angle < 5
−       angle = 5 +     angle = 5
−     elsif angle > 70 +   elsif angle > 70
−       angle = 70 +     angle = 70
−     end +   end
−   + 
−     if @currentAngle == angle + 
−       return + 
−     end + 
    
−     @currentAngle = angle +   if @currentAngle == angle
−      update(cannonRect()) +      return
−     emit angleChanged(@currentAngle) + 
     end      end
  + 
  +   @currentAngle = angle
  +   update(cannonRect())
  +   emit angleChanged(@currentAngle)
  + end
  </code>   </code>
    
− We have made a slight change in the setAngle() function. It repaints only the portion of the widget that contains the cannon. + We have made a slight change in the '''<tt>setAngle()</tt>''' function. It repaints only the portion of the widget that contains the cannon.
    
  <code ruby>   <code ruby>
−   def setForce(force) + def setForce(force)
−     if force < 0 +   if force < 0
−       force = 0 +     force = 0
−     end + 
−     if @currentForce == force + 
−       return + 
−     end + 
−   + 
−     @currentForce = force + 
−     emit forceChanged(@currentForce) + 
     end      end
  +   if @currentForce == force
  +     return
  +   end
  + 
  +   @currentForce = force
  +   emit forceChanged(@currentForce)
  + end
  </code>   </code>
    
− The implementation of setForce() is quite similar to that of setAngle(). The only difference is that because we don't show the force value, we don't need to repaint the widget. + The implementation of '''<tt>setForce()</tt>''' is quite similar to that of '''<tt>setAngle()</tt>'''. The only difference is that because we don't show the force value, we don't need to repaint the widget.
    
  <code ruby>   <code ruby>
−   def paintEvent(event) + def paintEvent(event)
−     painter = Qt::Painter.new(self) +   painter = Qt::Painter.new(self)
    
−     painter.setPen(Qt::NoPen) +   painter.setPen(Qt::NoPen)
−     painter.setBrush(Qt::Brush.new(Qt::blue)) +   painter.setBrush(Qt::Brush.new(Qt::blue))
    
−     painter.translate(0, height()) +   painter.translate(0, height())
−     painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16) +   painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)
−     painter.rotate(-@currentAngle) +   painter.rotate(-@currentAngle)
−     painter.drawRect(Qt::Rect.new(30, -5, 20, 10)) +   painter.drawRect(Qt::Rect.new(30, -5, 20, 10))
−     painter.end() +   painter.end()
−   end + end
  </code>   </code>
    
Line 101:
Line 101:
    
  <code ruby>   <code ruby>
−   def cannonRect() + def cannonRect()
−     result = Qt::Rect.new(0, 0, 50, 50) +   result = Qt::Rect.new(0, 0, 50, 50)
−     result.moveBottomLeft(rect().bottomLeft()) +   result.moveBottomLeft(rect().bottomLeft())
−     return result +   return result
−   end + end
  </code>   </code>
    
− The cannonRect() function returns the rectangle enclosing the cannon in widget coordinates. First we create a rectangle with the size 50 x 50 and then move it so its bottom-left corner is equal to the widget's own bottom-left corner. + The '''<tt>cannonRect()</tt>''' function returns the rectangle enclosing the cannon in widget coordinates. First we create a rectangle with the size 50 x 50 and then move it so its bottom-left corner is equal to the widget's own bottom-left corner.
    
− The Qt::Widget::rect() function returns the widget's enclosing rectangle in the widget's own coordinates. The top-left corner of the rectangle is always (0, 0). + The [http://doc.qt.nokia.com/latest/qwidget.html#rect-prop Qt::Widget::rect()] function returns the widget's enclosing rectangle in the widget's own coordinates. The top-left corner of the rectangle is always (0, 0).
    
  '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]'''   '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]'''
Line 121:
Line 121:
  </code>   </code>
    
− We add a second LCDRange, which will be used to set the force. + We add a second '''<tt>LCDRange</tt>''', which will be used to set the force.
    
  <code ruby>   <code ruby>
−     connect(force, SIGNAL('valueChanged(int)'), + connect(force, SIGNAL('valueChanged(int)'),
−              cannonField, SLOT('setForce(int)')) +          cannonField, SLOT('setForce(int)'))
−     connect(cannonField, SIGNAL('forceChanged(int)'), + connect(cannonField, SIGNAL('forceChanged(int)'),
−              force, SLOT('setValue(int)')) +          force, SLOT('setValue(int)'))
  </code>   </code>
    
− We connect the force widget and the cannonField widget, just like we did for the angle widget. + We connect the '''<tt>force</tt>''' widget and the '''<tt>cannonField</tt>''' widget, just like we did for the '''<tt>angle</tt>''' widget.
    
  <code ruby>   <code ruby>
Line 144:
Line 144:
  </code>   </code>
    
− In Chapter 9, we put angle in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of angle and range in the vertical box. + In Chapter 9, we put '''<tt>angle</tt>''' in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of '''<tt>angle</tt>''' and '''<tt>range</tt>''' in the vertical box.
    
  <code ruby>   <code ruby>
Line 162:
Line 162:
  Put the cannon in the bottom-right corner.   Put the cannon in the bottom-right corner.
    
− Try adding a better keyboard interface. For example, make + and - increase and decrease the force and enter shoot. If you're bothered by the way the Left and Right keys work, change that too. [Hint: Reimplement Qt::Widget::keyPressEvent().] + Try adding a better keyboard interface. For example, make + and - increase and decrease the force and enter shoot. If you're bothered by the way the '''<tt>Left</tt>''' and '''<tt>Right</tt>''' keys work, change that too. [Hint: Reimplement [http://doc.qt.nokia.com/latest/qwidget.html#keyPressEvent Qt::Widget::keyPressEvent()].]



Alisha: Created page with '{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}}  {{TutorialBrowser|  series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutori...'
2009-12-31T01:04:43Z
Created page with '{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}}  {{TutorialBrowser|  series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutori...'
New page
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}}



{{TutorialBrowser|



series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|



name=Smooth as Silk|



pre=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_09|Tutorial 9 - With Cannon You Can]]|



next=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_11|Tutorial 11 - Giving It a Shot]]

}}

== Smooth as Silk ==

[[Image:Qt4_Ruby_Tutorial_Screenshot_10.png|center]]

Files:

* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/lcdrange.rb lcdrange.rb]

* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]

* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]



=== Overview ===

In this example, we add a force control. 



=== Line by Line Walkthrough ===

'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]'''



The CannonField now has a force value in addition to the angle.



<code ruby>

signals 'angleChanged(int)', 'forceChanged(int)'

slots 'setAngle(int)', 'setForce(int)'

</code>



The interface to the force follows the same practice as for the angle.



<code ruby>

def initialize(parent = nil)

  super()



  @currentAngle = 45

  @currentForce = 0



  setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))

  setAutoFillBackground(true)

end

</code>



The force @currentForce is initialized to zero.



<code ruby>

  def setAngle(angle)

    if angle < 5

      angle = 5

    elsif angle > 70

      angle = 70

    end



    if @currentAngle == angle

      return

    end



    @currentAngle = angle

    update(cannonRect())

    emit angleChanged(@currentAngle)

  end

</code>



We have made a slight change in the setAngle() function. It repaints only the portion of the widget that contains the cannon.



<code ruby>

  def setForce(force)

    if force < 0

      force = 0

    end

    if @currentForce == force

      return

    end



    @currentForce = force

    emit forceChanged(@currentForce)

  end

</code>



The implementation of setForce() is quite similar to that of setAngle(). The only difference is that because we don't show the force value, we don't need to repaint the widget.



<code ruby>

  def paintEvent(event)

    painter = Qt::Painter.new(self)



    painter.setPen(Qt::NoPen)

    painter.setBrush(Qt::Brush.new(Qt::blue))



    painter.translate(0, height())

    painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)

    painter.rotate(-@currentAngle)

    painter.drawRect(Qt::Rect.new(30, -5, 20, 10))

    painter.end()

  end

</code>



We paint as in Chapter 9.



<code ruby>

  def cannonRect()

    result = Qt::Rect.new(0, 0, 50, 50)

    result.moveBottomLeft(rect().bottomLeft())

    return result

  end

</code>



The cannonRect() function returns the rectangle enclosing the cannon in widget coordinates. First we create a rectangle with the size 50 x 50 and then move it so its bottom-left corner is equal to the widget's own bottom-left corner.



The Qt::Widget::rect() function returns the widget's enclosing rectangle in the widget's own coordinates. The top-left corner of the rectangle is always (0, 0).



'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]'''



The constructor is mostly the same, but some new bits have been added.



<code ruby>

force = LCDRange.new()

force.setRange(10, 50)

</code>



We add a second LCDRange, which will be used to set the force.



<code ruby>

    connect(force, SIGNAL('valueChanged(int)'),

             cannonField, SLOT('setForce(int)'))

    connect(cannonField, SIGNAL('forceChanged(int)'),

             force, SLOT('setValue(int)'))

</code>



We connect the force widget and the cannonField widget, just like we did for the angle widget.



<code ruby>

leftLayout = Qt::VBoxLayout.new()

leftLayout.addWidget(angle)

leftLayout.addWidget(force)



gridLayout = Qt::GridLayout.new()

gridLayout.addWidget(quit, 0, 0)

gridLayout.addLayout(leftLayout, 1, 0)

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

gridLayout.setColumnStretch(1, 10)

</code>



In Chapter 9, we put angle in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of angle and range in the vertical box.



<code ruby>

    force.setValue(25)

</code>



We initialize the force value to 25.



=== Running the Application ===



We now have a force control.



=== Exercises ===



Make the size of the cannon barrel be dependent on the force.



Put the cannon in the bottom-right corner.



Try adding a better keyboard interface. For example, make + and - increase and decrease the force and enter shoot. If you're bothered by the way the Left and Right keys work, change that too. [Hint: Reimplement Qt::Widget::keyPressEvent().]

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

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

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

@@ Line 3: / Line 3: @@
 {{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}}
-{{<translate>TutorialBrowser</translate>|
+{{<translate><!--T:1-->
-series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate>Qt4 Ruby Tutorial</translate>]]|
+TutorialBrowser</translate>|
-name=<translate>Smooth as Silk</translate>|
+series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate><!--T:2-->
-pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_09|<translate>Tutorial 9 - With Cannon You Can</translate>]]|
+Qt4 Ruby Tutorial</translate>]]|
-next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_11|<translate>Tutorial 11 - Giving It a Shot</translate>]]
+name=<translate><!--T:3-->
 }}
 <translate>
-== Smooth as Silk ==
+== Smooth as Silk == <!--T:6-->
 </translate>
 <translate>
 [[Image:Qt4_Ruby_Tutorial_Screenshot_10.png|center]]
 </translate>
 <translate>
 Files:
 </translate>
@@ Line 23: / Line 30: @@
 <translate>
-=== Overview ===
+=== Overview === <!--T:9-->
 In this example, we add a force control.
-=== Line by Line Walkthrough ===
+=== Line by Line Walkthrough === <!--T:11-->
 </translate>
 '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]'''
 <translate>
 The '''<tt>CannonField</tt>''' now has a force value in addition to the angle.
 </translate>
@@ Line 41: / Line 50: @@
 <translate>
 The interface to the force follows the same practice as for the angle.
 </translate>
@@ Line 57: / Line 67: @@
 <translate>
 The force '''<tt>@currentForce</tt>''' is initialized to zero.
 </translate>
@@ Line 79: / Line 90: @@
 <translate>
 We have made a slight change in the '''<tt>setAngle()</tt>''' function. It repaints only the portion of the widget that contains the cannon.
 </translate>
@@ Line 97: / Line 109: @@
 <translate>
 The implementation of '''<tt>setForce()</tt>''' is quite similar to that of '''<tt>setAngle()</tt>'''. The only difference is that because we don't show the force value, we don't need to repaint the widget.
 </translate>
@@ Line 116: / Line 129: @@
 <translate>
 We paint as in Chapter 9.
 </translate>
@@ Line 128: / Line 142: @@
 <translate>
 The '''<tt>cannonRect()</tt>''' function returns the rectangle enclosing the cannon in widget coordinates. First we create a rectangle with the size 50 x 50 and then move it so its bottom-left corner is equal to the widget's own bottom-left corner.
 The [http://doc.qt.nokia.com/latest/qwidget.html#rect-prop Qt::Widget::rect()] function returns the widget's enclosing rectangle in the widget's own coordinates. The top-left corner of the rectangle is always (0, 0).
 </translate>
@@ Line 136: / Line 152: @@
 <translate>
 The constructor is mostly the same, but some new bits have been added.
 </translate>
@@ Line 145: / Line 162: @@
 <translate>
 We add a second '''<tt>LCDRange</tt>''', which will be used to set the force.
 </translate>
@@ Line 156: / Line 174: @@
 <translate>
 We connect the '''<tt>force</tt>''' widget and the '''<tt>cannonField</tt>''' widget, just like we did for the '''<tt>angle</tt>''' widget.
 </translate>
@@ Line 172: / Line 191: @@
 <translate>
 In Chapter 9, we put '''<tt>angle</tt>''' in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of '''<tt>angle</tt>''' and '''<tt>range</tt>''' in the vertical box.
 </translate>
@@ Line 180: / Line 200: @@
 <translate>
 We initialize the force value to 25.
 </translate>
 <translate>
-=== Running the Application ===
+=== Running the Application === <!--T:25-->
 We now have a force control.
-=== Exercises ===
+=== Exercises === <!--T:27-->
 Make the size of the cannon barrel be dependent on the force.
 Put the cannon in the bottom-right corner.
 Try adding a better keyboard interface. For example, make + and - increase and decrease the force and enter shoot. If you're bothered by the way the '''<tt>Left</tt>''' and '''<tt>Right</tt>''' keys work, change that too. [Hint: Reimplement [http://doc.qt.nokia.com/latest/qwidget.html#keyPressEvent Qt::Widget::keyPressEvent()].]
 [[Category:Ruby]]
 </translate>