C760 Ruby/Qte

SL-C760　Ruby/Qte　プログラミング
　　　逆引き　Ruby/Qt　を参照してプログラミングしてみます
　　　Ruby/Qteで動作するように変更を加えています

　１　インストール

　　　　　SL-C700　で　Ruby　を参照に　RubyとRuby/Qteをインストールします

　２　実行方法

　　　　１　ファイルを適当なディレクトリに置いてください
　　　　２　ディレクトリに移動し、
　　　　　　ruby test.rb　で実行できます
　　　　３　または、
　　　　　　chmod +x test.rb　で属性を変更し
　　　　　　./test.rb　で実行できます

　３　Hello world!

　　　　下記の内容にて、test.rbを作成します

　　　　 1 　　#!/usr/bin/env ruby
　　　　 2 　　require "qte"
　　　　 3 　　require "qpe"
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　a = QApplication.new [$0] + ARGV
　　　　 8 　　hello = QLabel.new 'Hello world!', nil
　　　　 9 　　hello.resize 200, 200
　　　　10 　　hello.setAlignment Qt::AlignCenter
　　　　11
　　　　12 　　a.setMainWidget hello
　　　　13 　　hello.show
　　　　14 　　a.exec

　　　　　　左の数字は行番号です。プログラムには必要ありません。　

　　　エラーメッセージ？が出ていますが、動作しているので・・・
　　　詳しい方、教えてもらえるとうれしいです。
　　　コマンド解説は後ほどm(__)m

　　　*　解説（Mobile PRESS　ひだかさんの記事から引用あり）

　　　　#!/usr/bin/env ruby
　　　　　Rubyスクリプトであることを示す
　　　　#!/usr/bin/env ruby -Ku
　　　　　とするとUTF-8で記述されている事を示す（りなざうでは付けるべきですね）

　　　　require "qte"
　　　　require "qpe"
　　　　include Qte
　　　　include Qpe
　　　　　Ruby/Qte拡張ライブラリを読み込む

　　　　a = QApplication.new [$0] + ARGV
　　　　　a はこのプログラムの QApplication であることを示す

　　　　hello = QLabel.new 'Hello world!', nil
　　　　　ウィンドウシステムのコード：　Hello world!　のラベル作成

　　　　hello.resize 200, 200
　　　　　windowのサイズ指定（ピクセル）：　幅，高さ
　　　　　数字を変更するとサイズが変わるので試してみましょう！

　　　　hello.setAlignment Qt::AlignCenter
　　　　　文字の位置を中央に配置
　　　　　先頭に#をつけてコメントアウトすると、文字が左に表示される

　　　　a.setMainWidget hello
　　　　　メインウィジェットにhelloのコードを指定（日本語が変かも？）

　　　　hello.show
　　　　　ウィジェットを見えるようにします

　　　　a.exec
　　　　　Ruby が Qt へ制御を移す：メインウィンドウを閉じるとアプリケーションが終了

　　　　　*　エディタで変更して保存すればプログラムとして動作するので
　　　　　　　（コンパイルの必要が無い）プログラミングの学習には最高です。
　　　　　　　私は、Zeditorで変更してターミナルで動作を確認しました。

　４　Hello world!　－FONTを指定

　　　　test.rbの１１行目に下記を追加します
　　　　hello.setFont QFont.new('Lcfont', 18, QFont::Bold)
　　　　読みにくかった文字が大きく見やすくなります

　５　Hello world!　－文字位置を指定

　　　　test.rbの１０行目
　　　　hello.setAlignment Qt::AlignCenter
　　　　　・Center　を　Left　に変更すると左位置になります

　　　　　・Center　を　Right　に変更すると右位置になります

　　　　Centerだと高さ方向もセンターなのに上になりました。挙動が違うな！

　６　りなざう流に変更

　　　　ひだかさんに確認したところ、りなざう流（標準）を御教授頂いた。
　　　　でベースを変更します。

　　　　 1 　　#!/usr/bin/env ruby -Ku
　　　　 2 　　require 'qte'
　　　　 3 　　require 'qpe'
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　class RQPop < QMainWindow
　　　　 8 　　　def initialize
　　　　 9　　　　　super
　　　　10　　　　　　# write
　　　　11　　　end
　　　　12　　end
　　　　13
　　　　14　　app = QPEApplication.new([$0] + ARGV)
　　　　15　　app.shoMainWidget(RQPop.new)
　　　　16　　app.exec

　　　　何も無いWindowが表示されます
　　　　640×480サイズになります
　　　　×をタップするか、Cancelキーを押すと終了します

　　　　これだけは面白くないので1行プログラムを追加＞おまけ(^_^)
　　　　１０行目を下記のように変更します

　　　　10　　　　　　QMultiLineEdit.new(self)

　　　　QMultiLineEditについては次で説明します。
　　　　日本語入力＞表示ができました。
　　　　Windowを指定してないので小さいし、改行すると悲惨な事に・・・(~_~;)

　　　　BOXが消えてしまって、ボタンをタップしても何も出ない

　７　QVBox　+　QMultiLineEditクラス

　　　　複数行編集画面を表示させます。
　　　　（本当は、QSingleLineEditクラスを先に説明すべきですね）
　　　　QVBoxクラスにて画面を垂直方向に並べます。

　　　　 1 　　#!/usr/bin/env ruby -Ku
　　　　 2 　　require 'qte'
　　　　 3 　　require 'qpe'
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　class RQYmc < QMainWindow
　　　　 8 　　　def initialize
　　　　 9　　　　　super
　　　　10　　　　　　v = QVBox.new(self)
　　　　11　　　　　　setCentralWidget(v)
　　　　12　　　　　　QMultiLineEdit.new(v)
　　　　13
　　　　14　　　end
　　　　15　　end
　　　　16
　　　　17　　app = QPEApplication.new([$0] + ARGV)
　　　　18　　app.shoMainWidget(RQYmc.new)
　　　　19　　app.exec

　　　*　解説

　　　　 7 　　class RQYmc < QMainWindow
　　　　　　RQYmcクラスを宣言

　　　　10　　　　　　v = QVBox.new(self)
　　　　　　垂直方向に並べます

　　　　11　　　　　　setCentralWidget(v)
　　　　　　CentralWidgetに”ｖ”を指定

　　　　12　　　　　　QMultiLineEdit.new(v)
　　　　　　QMultiLineEditを配置します

　　　　スクロールバーも自動で表示されます。
　　　　これで、ファイル操作が加われば簡易エディタになりますね(^_^)

　　　　13行目に　QMultiLineEdit.new(v)　を入れてみます

　　　　上下に編集画面が並びました。

　8　QHBoxクラス

　　　　QHBoxクラスにて画面を水平方向に並べます。

　　　　 1 　　#!/usr/bin/env ruby -Ku
　　　　 2 　　require 'qte'
　　　　 3 　　require 'qpe'
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　class RQYmc < QMainWindow
　　　　 8 　　　def initialize
　　　　 9　　　　　super
　　　　10　　　　　　v = QHBox.new(self)
　　　　11　　　　　　setCentralWidget(v)
　　　　12　　　　　　QMultiLineEdit.new(v)
　　　　13　　　　　　QMultiLineEdit.new(v)
　　　　14
　　　　15　　　end
　　　　16　　end
　　　　17
　　　　18　　app = QPEApplication.new([$0] + ARGV)
　　　　19　　app.shoMainWidget(RQYmc.new)
　　　　20　　app.exec

　　　*　解説

　　　　10　　　　　　v = QHBox.new(self)
　　　　　　水平方向に並べます

　９　QLineEditクラス

　　　　QLineEditクラスにて1行編集画面を表示します

　　　　 1 　　#!/usr/bin/env ruby -Ku
　　　　 2 　　require 'qte'
　　　　 3 　　require 'qpe'
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　class RQYmc < QMainWindow
　　　　 8 　　　def initialize
　　　　 9　　　　　super
　　　　10　　　　　　v = QVBox.new(self)
　　　　11　　　　　　setCentralWidget(v)
　　　　12　　　　　　QMultiLineEdit.new(v)
　　　　13　　　　　　QLineEdit.new(v)
　　　　14
　　　　15　　　end
　　　　16　　end
　　　　17
　　　　18　　app = QPEApplication.new([$0] + ARGV)
　　　　19　　app.shoMainWidget(RQYmc.new)
　　　　20　　app.exec

　　　*　解説

　　　　13　　　　　　QLineEdit.new(v)
　　　　　QMultiLineEdit.new(v)の次の行に入れる事によって
　　　　　下の段に1行編集画面ができました

　１０　QPushButtonクラス

　　　　QPushButtonクラスにてプッシュボタンができます

　　　　 1 　　#!/usr/bin/env ruby -Ku
　　　　 2 　　require 'qte'
　　　　 3 　　require 'qpe'
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　class RQYmc < QMainWindow
　　　　 8 　　　def initialize
　　　　 9　　　　　super
　　　　10　　　　　　v = QVBox.new(self)
　　　　11　　　　　　setCentralWidget(v)
　　　　12　　　　　　QMultiLineEdit.new(v)
　　　　13　　　　　　QPushButton.new("a",v)
　　　　14　　　　　　QLineEdit.new(v)
　　　　15
　　　　16 　　end
　　　　17　　end
　　　　18
　　　　19　　app = QPEApplication.new([$0] + ARGV)
　　　　20　　app.shoMainWidget(RQYmc.new)
　　　　21　　app.exec

　　　*　解説

　　　　13　　　　　　QPushButton.new("a",v)
　　　　　””で囲んだ文字を表示するボタンができました
　　　　　ただし、ボタンをタップした時の動作を指定してないので
　　　　　何も起きません(^_^)
　　　　　ボタンの文字を日本語にする場合は下記のようにします

　　　　13　　　　　　QPushButton.new(QString::fromUtf8("テスト"),v)

　　　　　ただし、UTF8形式で保存してください

　１１　setGeometry

　　　　setGeometryにてウィジェットの場所と大きさを指定することができます

　　　　 1 　　#!/usr/bin/env ruby -Ku
　　　　 2 　　require 'qte'
　　　　 3 　　require 'qpe'
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　class RQYmc < QMainWindow
　　　　 8 　　　def initialize
　　　　 9　　　　　super
　　　　10　　　　　　m = QMultiLineEdit.new(self)
　　　　11　　　　　　m.setGeometry(0,0,638,250)
　　　　12　　　　　　p = QPushButton.new(QString::fromUtf8("テスト"),self)
　　　　13　　　　　　p.setGeometry(0,260,638,30)
　　　　14　　　　　　i = QMultiLineEdit.new(self)
　　　　15　　　　　　i.setGeometry(0,300,638,120)
　　　　16 　　end
　　　　17　　end
　　　　18
　　　　19　　app = QPEApplication.new([$0] + ARGV)
　　　　20　　app.shoMainWidget(RQYmc.new)
　　　　21　　app.exec

　　　*　解説

　　　　11　　　　　　m.setGeometry(0,0,638,250)
　　　　　（　）内の数字ですが　開始座標ｘ，開始座標ｙ，サイズｘ，サイズｙ
　　　　　サイズｘが638なのは、640だと画面からはみ出してしまうからです

　１２　QMenuBarクラス

　　　　QMenuBarクラスにてメニューバーを表示します

　　　　 1 　　#!/usr/bin/env ruby -Ku
　　　　 2 　　require 'qte'
　　　　 3 　　require 'qpe'
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　class RQYmc < QMainWindow
　　　　 8 　　　def initialize
　　　　 9　　　　　super
　　　　11　　　　　　menubar = QMenuBar.new(self)
　　　　12　　　　　　menubar.setSeparetor(QMenuBar::InWindowsStyle)
　　　　13　　　　　　popup = QPopupMenu.new(self)
　　　　14　　　　　　popup.insertItem("&Quit",QPEApplication::qApp,"quit()")
　　　　15　　　　　　menubar.insertItem("&File",popup)
　　　　16　　　　　　m = QMultiLineEdit.new(self)
　　　　17　　　　　　m.setGeometry(0,30,638,250)
　　　　18　　　　　　p = QPushButton.new(QString::fromUtf8("テスト"),self)
　　　　19　　　　　　p.setGeometry(0,290,638,30)
　　　　20　　　　　　i = QMultiLineEdit.new(self)
　　　　21　　　　　　i.setGeometry(0,330,638,90)
　　　　22 　　end
　　　　23　　end
　　　　24
　　　　25　　app = QPEApplication.new([$0] + ARGV)
　　　　26　　app.shoMainWidget(RQYmc.new)
　　　　27　　app.exec

　　　*　解説

　　　　11　　　　　　menubar = QMenuBar.new(self)
　　　　12　　　　　　menubar.setSeparetor(QMenuBar::InWindowsStyle)
　　　　　メニューバーをWindowsスタイルで設定します
　　　　13　　　　　　popup = QPopupMenu.new(self)
　　　　　ポップアップメニューを作成します
　　　　14　　　　　　popup.insertItem("&Quit",QPEApplication::qApp,"quit()")
　　　　　QuitをタップするとQPEApplication::qAppの"quit()"を呼んで終了します
　　　　15　　　　　　menubar.insertItem("&File",popup)　

　１３　QToolBarクラス

　　　　QToolBarクラスにてツールバーを表示します

　　　　 1 　　#!/usr/bin/env ruby -Ku
　　　　 2 　　require 'qte'
　　　　 3 　　require 'qpe'
　　　　 4 　　include Qte
　　　　 5 　　include Qpe
　　　　 6
　　　　 7 　　if $PIXDIR.nil?
　　　　 8 　　　$PIXDIR = ".//"
　　　　 9 　　end
　　　　10　　
　　　　11　　class RQYmc < QMainWindow
　　　　12 　　　def initialize
　　　　13　　　　　super
　　　　14　　　　　　menubar = QMenuBar.new(self)
　　　　15　　　　　　menubar.setSeparetor(QMenuBar::InWindowsStyle)
　　　　16　　　　　　popup = QPopupMenu.new(self)
　　　　17　　　　　　popup.insertItem("&Quit",QPEApplication::qApp,"quit()")
　　　　18　　　　　　menubar.insertItem("&File",popup)
　　　　19
　　　　20　　　　　　@openIcon = QPixmap.new($PIXDIR + "fileopen.xpm")
　　　　21　　　　　　@toolbar = QToolBar.new(self,"file operations")
　　　　22　　　　　　@toolbar.setGeometry(0,30,638,30)
　　　　23　　　　　　@fileopen = QToolButton.new(@openIcon,"Open File","",self,"load",@toolbar,"open file")
　　　　24
　　　　25　　　　　　m = QMultiLineEdit.new(self)
　　　　26　　　　　　m.setGeometry(0,60,638,220)
　　　　27　　　　　　p = QPushButton.new(QString::fromUtf8("テスト"),self)
　　　　28　　　　　　p.setGeometry(0,290,638,30)
　　　　29　　　　　　i = QMultiLineEdit.new(self)
　　　　30　　　　　　i.setGeometry(0,330,638,90)
　　　　31 　　end
　　　　32　　end
　　　　33
　　　　34　　app = QPEApplication.new([$0] + ARGV)
　　　　35　　app.shoMainWidget(RQYmc.new)
　　　　36　　app.exec

　　　*　解説

　　　　 7 　　if $PIXDIR.nil?
　　　　 8 　　　$PIXDIR = ".//"
　　　　 9 　　end
　　　　　ツールバーで表示するアイコンのディレクトリの場所を指定
　　　　20　　　　　　@openIcon = QPixmap.new($PIXDIR + "fileopen.xpm")
　　　　　"fileopen.xpm"を@openIconに指定
　　　　　.xpm形式のファイルをアイコンとして使用できます
　　　　　アイコンについては　Ruby/Qte普及委員会のツールバーのアイコン作り
　　　　　を参照してください
　　　　21　　　　　　@toolbar = QToolBar.new(self,"file operations")
　　　　　ツールバーの設定
　　　　22　　　　　　@toolbar.setGeometry(0,30,638,30)
　　　　　ツールバーの表示位置の指定
　　　　23　　　　　　@fileopen = QToolButton.new(@openIcon,"Open File","",self,"load",@toolbar,"open file")
　　　　　ツールボタン@fileopenの設定
　　　　　ただし、loadに対応する動作のプログラムを書いてありませんので、
　　　　　アイコンをタップするとエラーで終了します　

　　　　　ダウンロード　fileopen.xpm　右クリックで対象をファイルに保存を選んでください
　　　　　ダウンロード後、fileopen.xpm.icoになっていますので、”.ico”を削除してください