Archive:Development/Tutorials/Qt4 Ruby Tutorial/Chapter 01 (zh TW): Difference between revisions

From KDE TechBase
No edit summary
 
(6 intermediate revisions by 2 users not shown)
Line 7: Line 7:
name=Hello World!|
name=Hello World!|


next=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_2|教學 2 - Calling it Quits]]
pre=[http://www.ruby-lang.org Ruby]|
 
next=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_2_(zh_TW)|教學 2 - Calling it Quits]]
}}
}}
== Hello World!==
== Hello World!==
Line 21: Line 23:
以下是完整的應用程式原始碼:
以下是完整的應用程式原始碼:


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


Line 31: Line 33:


app.exec()
app.exec()
</code>
</syntaxhighlight>


===簡介===
===簡介===
QtRuby 應用程式的上層通常只需要執行一些初始化,然後將控制權傳遞給 Qt 函式庫。然後透過事件告訴程式使用者的操作。


QtRuby 應用程式的上層通常只需要執行一些初始化,然後將控制權交給 Qt 函式庫。然後透過事件告訴程式使用者的操作。
在每個使用 Qt 的 GUI 應用程式,必須有一個確實的 [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 物件。[http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 管理各種應用程式的資源,如預設字體和游標(cursor)。
 
在每個使用 Qt 的 GUI 應用程式,必須有一個確實的[http://doc.qt.nokia.com/latest/qapplication.html Qt::Application]物件。[http://doc.qt.nokia.com/latest/qapplication.html Qt::Application]管理各種應用程式的資源,如預設字體和游標(cursor)。


[http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] 是一個 GUI push 按鈕,使用者可以按下和放開。它管理自己的外觀和感覺,就像所有其他的[http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget]。widget 是一個使用者界面物件,可以處理使用者的輸入和繪製圖形。程式設計師可以改變整體外觀和感覺以及它的一些小型屬性(如顏色),以及 widget 的內容。[http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton]可以顯示文字或[http://doc.qt.nokia.com/latest/qicon.html Qt::Icon] 。  
[http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] 是一個 GUI push 按鈕,使用者可以按下和放開。它管理自己的外觀和感覺,就像所有其他的 [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget]。widget 是一個使用者界面物件,可以處理使用者的輸入和繪製圖形。程式設計師可以改變整體外觀和感覺以及它的一些小型屬性(如顏色),以及 widget 的內容。[http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] 可以顯示文字或[http://doc.qt.nokia.com/latest/qicon.html Qt::Icon] 。  


=== 一行一行的瀏覽===
=== 一行一行的瀏覽===
 
<syntaxhighlight lang="ruby">
<code ruby>
require 'Qt4'
require 'Qt4'
</code>
</syntaxhighlight>


此行載入 QtRuby 擴充。
這行載入 QtRuby 擴充。


<code ruby>
<syntaxhighlight lang="ruby">
app = Qt::Application.new(ARGV)
app = Qt::Application.new(ARGV)
</code>
</syntaxhighlight>


'''<tt>app</tt>''' 是程式的 [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 實例(instance)。它是在這裡建立的。我們傳遞 '''<tt>ARGV</tt>''' 到 [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 建構子(constructor),使之能夠處理某些標準的命令列參數(如 X11 的 '''<tt>-display</tt>''')。所有 Qt 能識別的命令列參數將會從 '''<tt>ARGV</tt>''' 移除 。
'''<tt>app</tt>''' 是程式的 [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 實例(instance)。它是在這裡建立的。我們傳遞 '''<tt>ARGV</tt>''' 到 [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 建構子(constructor),使之能夠處理某些標準的命令列參數(如 X11 的 '''<tt>-display</tt>''')。所有 Qt 能識別的命令列參數將會從 '''<tt>ARGV</tt>''' 移除 。
Line 57: Line 57:
<strong>注意:</strong> 最重要的是, [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 物件要在使用任何 Qt 的視窗系統元件之前建立。
<strong>注意:</strong> 最重要的是, [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 物件要在使用任何 Qt 的視窗系統元件之前建立。


<code ruby>
<syntaxhighlight lang="ruby">
hello = Qt::PushButton.new('Hello World!')
hello = Qt::PushButton.new('Hello World!')
</code>
</syntaxhighlight>


在[http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 後,第一個出現的視窗系統程式碼:建立一個 push 按鈕。
在 [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 後,第一個出現的視窗系統程式碼:建立一個 push 按鈕。


The button is set up to display the text "Hello world!".
該按鈕設定為顯示文字「Hello world!」。因為我們沒有指定父視窗(作為 [http://doc.qt.nokia.com/latest/qpushbutton.html Qt::PushButton] 建構子的第二個參數),該按鈕將有它自己的視窗、自己的窗框和標題列。
Because we don't specify a parent window (as second argument to the
[http://doc.trolltech.com/4.2/qpushbutton.html Qt::PushButton] constructor),
the button will be a window of its own, with its own window frame and title bar.


<code ruby>
<syntaxhighlight lang="ruby">
hello.resize(100, 30)
hello.resize(100, 30)
</code>
</syntaxhighlight>


The button is set up to be 100 pixels wide and 30 pixels high
該按鈕設定為100像素(pixels)寬和30像素高(不包括窗框,它是由視窗系統提供的)。我們可以呼叫 [http://doc.qt.nokia.com/latest/qwidget.html#pos-prop Qt::Widget::move()] 來指派 widget 在特定的螢幕位置,不過這裡我們讓視窗系統選擇位置。
(excluding the window frame, which is provided by the windowing system).
We could call [http://doc.trolltech.com/4.2/qwidget.html#pos-prop Qt::Widget::move()] to assign a specific screen position to the widget,
but instead we let the windowing system choose a position.


<code ruby>
<syntaxhighlight lang="ruby">
hello.show()
hello.show()
</code>
</syntaxhighlight>


A widget is never visible when you create it. You must call [http://doc.trolltech.com/4.2/qwidget.html#show Qt::Widget::show()] to make it visible.
當您建立 widget 時,它是不可見的。您必須呼叫 [http://doc.qt.nokia.com/latest/qwidget.html#show Qt::Widget::show()] 使其可見。


<code ruby>
<syntaxhighlight lang="ruby">
app.exec()
app.exec()
</code>
</syntaxhighlight>


This is where our program passes control to Qt.
這裡是我們的程式將控制權傳遞到 Qt 的地方。[http://doc.qt.nokia.com/latest/qcoreapplication.html#exec Qt::CoreApplication::exec()] 會在應用程式結束時返回。([http://doc.qt.nokia.com/latest/qcoreapplication.html Qt::CoreApplication] [http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 的基礎類別。它實現[http://doc.qt.nokia.com/latest/qapplication.html Qt::Application] 的核心,非GUI 功能,並且可用於開發非 GUI 應用程式。)
[http://doc.trolltech.com/4.2/qcoreapplication.html#exec Qt::CoreApplication::exec()] will return when the application exits.
([http://doc.trolltech.com/4.2/qcoreapplication.html Qt::CoreApplication] is [http://doc.trolltech.com/4.2/qapplication.html Qt::Application]'s base class.
It implements [http://doc.trolltech.com/4.2/qapplication.html Qt::Application]'s core, non-GUI functionality and can be used when developing non-GUI applications.)


In [http://doc.trolltech.com/4.2/qcoreapplication.html#exec Qt::CoreApplication::exec()], Qt receives and processes user and system events and passes these on to the appropriate widgets.
[http://doc.qt.nokia.com/latest/qcoreapplication.html#exec Qt::CoreApplication::exec()],Qt 接收和處理使用者和系統事件,並傳遞這些到適當的 widget。


You should now try to run this program.
你現在應該嘗試執行該程式。


===執行應用程式===
===執行應用程式===
 
當您執行應用程式,您會看到一個放著單一按鈕的小視窗。在按鈕上您可以讀到那句名言:「Hello world!
When you run the application, you will see a small window filled with a single button, and on it you can read the famous words: "Hello world!"


===練習===
===練習===
嘗試調整視窗大小。按下按鈕。如果您正在執行 X11,嘗試加入 '''<tt>-geometry</tt>''' 選項來執行程式(例如,'''<tt>-geometry 100x200+10+20</tt>''')。


Try to resize the window. Click the button. If you're running X11,
[[Category:Ruby]]
try running the program with the '''<tt>-geometry</tt>''' option (for example, '''<tt>-geometry 100x200+10+20</tt>''').

Latest revision as of 15:34, 23 June 2013

Template:I18n/Language Navigation Bar (zh TW)

Template:TutorialBrowser (zh TW)

Hello World!

檔案:

概覽

第一個程式是一個簡單的「Hello world」範例。它僅包含了你完成並運作一個 Qt 應用程式的最少需求。上圖是這支程式的螢幕擷圖。

以下是完整的應用程式原始碼:

require 'Qt4'

app = Qt::Application.new(ARGV)

hello = Qt::PushButton.new('Hello World!')
hello.resize(100, 30)
hello.show()

app.exec()

簡介

QtRuby 應用程式的上層通常只需要執行一些初始化,然後將控制權傳遞給 Qt 函式庫。然後透過事件告訴程式使用者的操作。

在每個使用 Qt 的 GUI 應用程式,必須有一個確實的 Qt::Application 物件。Qt::Application 管理各種應用程式的資源,如預設字體和游標(cursor)。

Qt::PushButton 是一個 GUI push 按鈕,使用者可以按下和放開。它管理自己的外觀和感覺,就像所有其他的 Qt::Widget。widget 是一個使用者界面物件,可以處理使用者的輸入和繪製圖形。程式設計師可以改變整體外觀和感覺以及它的一些小型屬性(如顏色),以及 widget 的內容。Qt::PushButton 可以顯示文字或Qt::Icon

一行一行的瀏覽

require 'Qt4'

這行載入 QtRuby 擴充。

app = Qt::Application.new(ARGV)

app 是程式的 Qt::Application 實例(instance)。它是在這裡建立的。我們傳遞 ARGVQt::Application 建構子(constructor),使之能夠處理某些標準的命令列參數(如 X11 的 -display)。所有 Qt 能識別的命令列參數將會從 ARGV 移除 。

注意: 最重要的是, Qt::Application 物件要在使用任何 Qt 的視窗系統元件之前建立。

hello = Qt::PushButton.new('Hello World!')

Qt::Application 後,第一個出現的視窗系統程式碼:建立一個 push 按鈕。

該按鈕設定為顯示文字「Hello world!」。因為我們沒有指定父視窗(作為 Qt::PushButton 建構子的第二個參數),該按鈕將有它自己的視窗、自己的窗框和標題列。

hello.resize(100, 30)

該按鈕設定為100像素(pixels)寬和30像素高(不包括窗框,它是由視窗系統提供的)。我們可以呼叫 Qt::Widget::move() 來指派 widget 在特定的螢幕位置,不過這裡我們讓視窗系統選擇位置。

hello.show()

當您建立 widget 時,它是不可見的。您必須呼叫 Qt::Widget::show() 使其可見。

app.exec()

這裡是我們的程式將控制權傳遞到 Qt 的地方。Qt::CoreApplication::exec() 會在應用程式結束時返回。(Qt::CoreApplicationQt::Application 的基礎類別。它實現Qt::Application 的核心,非GUI 功能,並且可用於開發非 GUI 應用程式。)

Qt::CoreApplication::exec(),Qt 接收和處理使用者和系統事件,並傳遞這些到適當的 widget。

你現在應該嘗試執行該程式。

執行應用程式

當您執行應用程式,您會看到一個放著單一按鈕的小視窗。在按鈕上您可以讀到那句名言:「Hello world!」

練習

嘗試調整視窗大小。按下按鈕。如果您正在執行 X11,嘗試加入 -geometry 選項來執行程式(例如,-geometry 100x200+10+20)。