Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10: Difference between revisions

    From KDE TechBase
    m (Text replace - "</code>" to "</syntaxhighlight>")
    (add translate tags)
    Line 1: Line 1:
    <languages />
    {{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}}
    {{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}}


    {{TutorialBrowser|
    {{<translate>TutorialBrowser</translate>|
     
    series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate>Qt4 Ruby Tutorial</translate>]]|
    series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|
    name=<translate>Smooth as Silk</translate>|
     
    pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_09|<translate>Tutorial 9 - With Cannon You Can</translate>]]|
    name=Smooth as Silk|
    next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_11|<translate>Tutorial 11 - Giving It a Shot</translate>]]
     
    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]]
    }}
    }}
    <translate>
    == Smooth as Silk ==
    == Smooth as Silk ==
    </translate>
    <translate>
    [[Image:Qt4_Ruby_Tutorial_Screenshot_10.png|center]]
    [[Image:Qt4_Ruby_Tutorial_Screenshot_10.png|center]]
    </translate>
    <translate>
    Files:
    Files:
    </translate>
    * [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/lcdrange.rb lcdrange.rb]
    * [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/t10.rb t10.rb]
    * [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]


    <translate>
    === Overview ===
    === Overview ===
    In this example, we add a force control.  
    In this example, we add a force control.  


    === Line by Line Walkthrough ===
    === Line by Line Walkthrough ===
    </translate>
    '''[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]'''


    <translate>
    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.
    </translate>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 31: Line 40:
    </syntaxhighlight>
    </syntaxhighlight>


    <translate>
    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.
    </translate>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 45: Line 56:
    </syntaxhighlight>
    </syntaxhighlight>


    <translate>
    The force '''<tt>@currentForce</tt>''' is initialized to zero.
    The force '''<tt>@currentForce</tt>''' is initialized to zero.
    </translate>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 65: Line 78:
    </syntaxhighlight>
    </syntaxhighlight>


    <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.
    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>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 81: Line 96:
    </syntaxhighlight>
    </syntaxhighlight>


    <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.
    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>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 98: Line 115:
    </syntaxhighlight>
    </syntaxhighlight>


    <translate>
    We paint as in Chapter 9.
    We paint as in Chapter 9.
    </translate>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 108: Line 127:
    </syntaxhighlight>
    </syntaxhighlight>


    <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 '''<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).
    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>


    '''[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]'''


    <translate>
    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.
    </translate>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 121: Line 144:
    </syntaxhighlight>
    </syntaxhighlight>


    <translate>
    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.
    </translate>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 130: Line 155:
    </syntaxhighlight>
    </syntaxhighlight>


    <translate>
    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.
    </translate>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 144: Line 171:
    </syntaxhighlight>
    </syntaxhighlight>


    <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.
    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>


    <syntaxhighlight lang="ruby">
    <syntaxhighlight lang="ruby">
    Line 150: Line 179:
    </syntaxhighlight>
    </syntaxhighlight>


    <translate>
    We initialize the force value to 25.
    We initialize the force value to 25.
    </translate>


    <translate>
    === Running the Application ===
    === Running the Application ===
    We now have a force control.
    We now have a force control.


    Line 163: Line 196:


    [[Category:Ruby]]
    [[Category:Ruby]]
    </translate>

    Revision as of 23:38, 1 July 2011

    Other languages:


    Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10


    Smooth as Silk
    Tutorial Series   Qt4 Ruby Tutorial
    Previous   Tutorial 9 - With Cannon You Can
    What's Next   Tutorial 11 - Giving It a Shot
    Further Reading   n/a

    Smooth as Silk

    Files:

    Overview

    In this example, we add a force control.

    Line by Line Walkthrough

    cannon.rb

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

    signals 'angleChanged(int)', 'forceChanged(int)'
    slots 'setAngle(int)', 'setForce(int)'
    

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

    def initialize(parent = nil)
      super()
    
      @currentAngle = 45
      @currentForce = 0
    
      setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))
      setAutoFillBackground(true)
    end
    

    The force @currentForce is initialized to zero.

    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
    

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

    def setForce(force)
      if force < 0
        force = 0
      end
      if @currentForce == force
        return
      end
    
      @currentForce = force
      emit forceChanged(@currentForce)
    end
    

    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.

    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
    

    We paint as in Chapter 9.

    def cannonRect()
      result = Qt::Rect.new(0, 0, 50, 50)
      result.moveBottomLeft(rect().bottomLeft())
      return result
    end
    

    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).

    t10.rb

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

    force = LCDRange.new()
    force.setRange(10, 50)
    

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

    connect(force, SIGNAL('valueChanged(int)'),
             cannonField, SLOT('setForce(int)'))
    connect(cannonField, SIGNAL('forceChanged(int)'),
             force, SLOT('setValue(int)'))
    

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

    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)
    

    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.

    force.setValue(25)
    

    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().]