Languages/Ruby/Ruby-Qt/KDE Book/First Steps/Hello World: Difference between revisions

From KDE TechBase
(improved writing style and removed spelling mistakes)
 
(4 intermediate revisions by 2 users not shown)
Line 22: Line 22:
Now copy this short code example into the irb session.
Now copy this short code example into the irb session.


<code ruby>
<syntaxhighlight lang="ruby">
require 'Qt4'
require 'Qt4'
a = Qt::Application.new ARGV
a = Qt::Application.new ARGV
Line 29: Line 29:
w.show
w.show
a.exec
a.exec
</code>
</syntaxhighlight>


Before you start programming your Graphical User Interface (GUI) you have to <tt>require</tt> the libraries, in this case <tt>Qt4</tt>, but <tt>korundum4</tt> would also do the job because the KDE libs automatically requires the Qt libs for you.
Before you start programming your Graphical User Interface (GUI) you have to <tt>require</tt> the libraries, in this case <tt>Qt4</tt>, but <tt>korundum4</tt> would also do the job because the KDE libs automatically requires the Qt libs for you.
Line 37: Line 37:
Another object <tt>w</tt> of <tt>Qt::PushButton</tt> is created in the third line. <tt>"Hello Ruby"</tt> is the first (and only) argument of the Constructor. If you check the Qt documentation, you would find out, that this is the caption of the button. Ruby would also allow you to write it with brackets.
Another object <tt>w</tt> of <tt>Qt::PushButton</tt> is created in the third line. <tt>"Hello Ruby"</tt> is the first (and only) argument of the Constructor. If you check the Qt documentation, you would find out, that this is the caption of the button. Ruby would also allow you to write it with brackets.


<code ruby>
<syntaxhighlight lang="ruby">
w = Qt::PushButton.new( "Hello Ruby" )
w = Qt::PushButton.new( "Hello Ruby" )
</code>
</syntaxhighlight>


The small <tt>w</tt> means widget. All graphical elements in Qt are called widgets.
The small <tt>w</tt> means widget. All graphical elements in Qt are called widgets.
Line 57: Line 57:
Clicking the file opens it in your text editor, but on Linux we can also make it start the application. Look at the top of the improved Ruby application below. That is called a [http://en.wikipedia.org/wiki/Shebang_%28Unix%29 Shebang] line. After saving the file we need to tell Linux that the file is allowed to be executed by default with the shell command:
Clicking the file opens it in your text editor, but on Linux we can also make it start the application. Look at the top of the improved Ruby application below. That is called a [http://en.wikipedia.org/wiki/Shebang_%28Unix%29 Shebang] line. After saving the file we need to tell Linux that the file is allowed to be executed by default with the shell command:


<code bash>
<syntaxhighlight lang="bash">
chmod +x sayHello.rb
chmod +x sayHello.rb
</code>
</syntaxhighlight>


After giving the file execution rights you can execute your program on the command line with <tt>./sayHello.rb</tt> or with a click on the icon in the file browser (Dolphin, Konqueror).
After giving the file execution rights you can execute your program on the command line with <tt>./sayHello.rb</tt> or with a click on the icon in the file browser (Dolphin, Konqueror).




<code ruby>
<syntaxhighlight lang="ruby">
#!/usr/bin/ruby
#!/usr/bin/ruby
#file: sayHello.rb
#file: sayHello.rb
Line 90: Line 90:
w.show
w.show
a.exec
a.exec
</code>
</syntaxhighlight>


In the previous example we connected the button with the existing slot <tt>:close</tt>. Now, in the example above, we want to create our own slot. We create a new class <tt>CustomApplication</tt> by inheriting from <tt>Qt::Application</tt> and add a slot <tt>:sayHello</tt>. It doesn't have any arguments. So we can use the shortcut <tt>":sayHello"</tt> instead of <tt>":sayHello()"</tt>.  
In the previous example we connected the button with the existing slot <tt>:close</tt>. Now, in the example above, we want to create our own slot. We create a new class <tt>CustomApplication</tt> by inheriting from <tt>Qt::Application</tt> and add a slot <tt>:sayHello</tt>. It doesn't have any arguments. So we can use the shortcut <tt>":sayHello"</tt> instead of <tt>":sayHello()"</tt>.  
Line 100: Line 100:
with the Ruby styled code
with the Ruby styled code


<tt>text = "Hello World"</tt>.
<tt>text = "Hello World"</tt>


Remember this as you need it to find the class method in the C++ documentation of Qt.
Remember this as you need it to find the class method in the C++ documentation of Qt.
Line 111: Line 111:
== Say Hello, Ruby - the short version ==
== Say Hello, Ruby - the short version ==


<code ruby>
<syntaxhighlight lang="ruby">
#!/usr/bin/ruby
#!/usr/bin/ruby
#file: sayHello.rb
#file: sayHello.rb
Line 129: Line 129:
w.show
w.show
a.exec
a.exec
</code>
</syntaxhighlight>


The bindings offer special features, allowing you to define the actions for a given signal without having to create a slot. Just use the <tt>connect</tt> method of the Qt object which owns the signal you want to use. The <tt>connect</tt> expects you to give only one argument, the signal, followed by a code block (<tt>do ... end</tt>), which gets processed in case the signal is triggered. This way of programming allows a very compact style. In this case you don't need to create a <tt>CustomApplication</tt>.
The bindings offer special features, allowing you to define the actions for a given signal without having to create a slot. Just use the <tt>connect</tt> method of the Qt object which owns the signal you want to use. The <tt>connect</tt> expects you to give only one argument, the signal, followed by a code block (<tt>do ... end</tt>), which gets processed in case the signal is triggered. This way of programming allows a very compact style. In this case you don't need to create a <tt>CustomApplication</tt>.
Line 135: Line 135:
== Say Hello, Ruby - an even shorter version ==
== Say Hello, Ruby - an even shorter version ==


<code ruby>
<syntaxhighlight lang="ruby">
require 'Qt4'
require 'Qt4'


Line 151: Line 151:
w.show
w.show
a.exec
a.exec
</code>
</syntaxhighlight>


If you create a new object you can add a code block with some statements that gets executed in the namespace of the new object. You can also use <tt>do</tt> to inline the code belonging to <tt>msgBox</tt>, too:
If you create a new object you can add a code block with some statements that gets executed in the namespace of the new object. You can also use <tt>do</tt> to inline the code belonging to <tt>msgBox</tt>, too:


<code ruby>
<syntaxhighlight lang="ruby">
require 'Qt4'
require 'Qt4'


Line 171: Line 171:
w.show
w.show
a.exec
a.exec
</code>
</syntaxhighlight>

Latest revision as of 17:39, 10 March 2016

Ruby-Qt/KDE Book
Tutorial Series   Ruby
Previous   Installation on Linux, Installation on Mac OS or Installation on Windows
What's Next   n/a
Further Reading   Signals and Slots-Concept
100%
noframe
noframe

80% completed (estimate)

  

TODO:

  • improve writing style and remove spelling mistakes
Status Of Writing


You should now have a working ruby installation with KDE 4 bindings.

So let's try out a very minimalistic Qt 4 application to get a first impression. We don't start with KDE because that would require some extra lines which are not necessary when using Qt.

Hello Ruby

Interactive Implementation Using Qt 4

Open a shell and type irb to start the interactive ruby shell. Now copy this short code example into the irb session.

require 'Qt4'
a = Qt::Application.new ARGV
w = Qt::PushButton.new "Hello Ruby"
Qt::Object.connect( w, SIGNAL( :clicked ), a, SLOT( :quit ) )
w.show
a.exec

Before you start programming your Graphical User Interface (GUI) you have to require the libraries, in this case Qt4, but korundum4 would also do the job because the KDE libs automatically requires the Qt libs for you.

In the second line we create a new Qt Object a of Qt::Application. Qt is the Ruby module (namespace) and Application the name of the class in the module. In C++, the native language of Qt, you would write QApplication. Remember this as you will need it when you want to take a look at the Qt documentation, which assumes you use C++.

Another object w of Qt::PushButton is created in the third line. "Hello Ruby" is the first (and only) argument of the Constructor. If you check the Qt documentation, you would find out, that this is the caption of the button. Ruby would also allow you to write it with brackets.

w = Qt::PushButton.new( "Hello Ruby" )

The small w means widget. All graphical elements in Qt are called widgets.

The fourth line is probably the most complicated one. The ruby class method connect of the object Object of the module Qt is used to bind the user action button-clicked with the action application-close. Signals and slots is a special concept of Qt. You can get a short overview, and find other resources, on Wikipedia.

The C++ equivalent you will find in the Qt documentation to :clicked would be "clicked()", a signal without an argument. In the case of no arguments you can always use a ruby symbol.

The fifth line is required to make the created widget actually appear on the screen. Don't forget this line. Maybe you want to think of this as the starting point of your application.

And finally the application gets started by a.exec. Now the GUI takes over and manages the control flow. Any other command after this line will be applied after the GUI has been closed by the user of the application.

Say Hello, Ruby

In the next example we want our GUI to do something interactive. Because it is more complex you may want to save it in a file "sayHello.rb".

Clicking the file opens it in your text editor, but on Linux we can also make it start the application. Look at the top of the improved Ruby application below. That is called a Shebang line. After saving the file we need to tell Linux that the file is allowed to be executed by default with the shell command:

chmod +x sayHello.rb

After giving the file execution rights you can execute your program on the command line with ./sayHello.rb or with a click on the icon in the file browser (Dolphin, Konqueror).


#!/usr/bin/ruby
#file: sayHello.rb

require 'Qt4'

class CustomApplication < Qt::Application

  slots :sayHello

  def sayHello
    msgBox = Qt::MessageBox.new
    msgBox.text = "Hello World"
    msgBox.icon = Qt::MessageBox::Information
    val = msgBox.exec()
    
    Qt::Application.instance.quit
  end

end

a = CustomApplication.new ARGV
w = Qt::PushButton.new( "Say Hello, Ruby" )
Qt::Object.connect( w, SIGNAL( :clicked ), a, SLOT( :sayHello ) )
w.show
a.exec

In the previous example we connected the button with the existing slot :close. Now, in the example above, we want to create our own slot. We create a new class CustomApplication by inheriting from Qt::Application and add a slot :sayHello. It doesn't have any arguments. So we can use the shortcut ":sayHello" instead of ":sayHello()".

After that we define a method with the same name and a number of arguments. In the method a message box is prepared which get shown to the user with exec(). To define the properties of the message box, the binding specific syntax is used, which allows you to replace the C++ styled code

setText( "Hello World" )

with the Ruby styled code

text = "Hello World"

Remember this as you need it to find the class method in the C++ documentation of Qt.

With Qt::Application.instance.quit the program gets closed.

The last lines are nearly the same as in the last example. We have to replace Qt::Application with our own class CustomApplication and change the request to quit in the slot to :sayHello in the connection command.


Say Hello, Ruby - the short version

#!/usr/bin/ruby
#file: sayHello.rb

require 'Qt4'

a = Qt::Application.new ARGV
w = Qt::PushButton.new( "Say Hello, Ruby" )
w.connect( SIGNAL( :clicked ) ) do
  msgBox = Qt::MessageBox.new
  msgBox.text = "Hello World"
  msgBox.icon = Qt::MessageBox::Information
  val = msgBox.exec()
  
  Qt::Application.instance.quit
end
w.show
a.exec

The bindings offer special features, allowing you to define the actions for a given signal without having to create a slot. Just use the connect method of the Qt object which owns the signal you want to use. The connect expects you to give only one argument, the signal, followed by a code block (do ... end), which gets processed in case the signal is triggered. This way of programming allows a very compact style. In this case you don't need to create a CustomApplication.

Say Hello, Ruby - an even shorter version

require 'Qt4'

a = Qt::Application.new ARGV
w = Qt::PushButton.new( "Hello Ruby" ) do
  self.connect( SIGNAL :clicked ) do 
    msgBox = Qt::MessageBox.new
    msgBox.text = "Hello World"
    msgBox.icon = Qt::MessageBox::Information
    val = msgBox.exec()
    
    Qt::Application.instance.quit
  end
end
w.show
a.exec

If you create a new object you can add a code block with some statements that gets executed in the namespace of the new object. You can also use do to inline the code belonging to msgBox, too:

require 'Qt4'

a = Qt::Application.new ARGV
w = Qt::PushButton.new( "Hello Ruby" ) do
  self.connect( SIGNAL :clicked ) do 
    msgBox = Qt::MessageBox.new do
      self.text = "Hello World"
      self.icon = Qt::MessageBox::Information
    end
    val = msgBox.exec()    
    Qt::Application.instance.quit
  end
end
w.show
a.exec