Qt をはじめよう!

Qt をはじめよう! 第19回: 独自ウィジェットを作成しデザイナで使用しよう

Published Thursday July 21st, 2011 | 1 Comment on Qt をはじめよう! 第19回: 独自ウィジェットを作成しデザイナで使用しよう
Posted in Qt をはじめよう! | Tags: ,

前回 はタブオーダーの設定について学びました。今回は独自ウィジェットを作成し、それらのデザイナでは標準で提供 されていない ウィジェットをデザイナで使用する簡単な方法を学びましょう。 独自ウィジェットについて Qt では [qt “ラベル” l=qlabel] や [qt “ボタン” l=qpushbutton] のような基本的なものから [qt “リストビュー” l=qlistview] や [qt “ウェブのコンテンツを表示するためのウィジェット” l=qwebview] など [qt “多種多様なウィジェット” l=gallery] を提供しています。これらのウィジェットをそのまま使用するだけではなく、あるウィジェットの派生クラスを作成して機能を拡張したり、いくつかのウィジェットを組み合わせて新しいウィジェットを作成したり、さらには全く新しいウィジェットを作成することも可能です。今回は最初の2つのケースを例に、独自クラスを作成し、それらをデザイナで使用する方法について解説します。 プロジェクトの作成 今回は新たなプロジェクトを作成するところから始めましょう。プロジェクトの作成方法は以前にも解説していますが、Qt Creator のバージョンアップに伴い若干変更されている点がありますので、今回は Qt Creator 2.2.1 を用いて再度説明します。 はじめに、メニューから「ファイル(F)」→「ファイル/プロジェクトの新規作成(N)…」 を選択してください。 プロジェクトの中から「Qt ウィジェット プロジェクト」を選択し、「Qt GUI アプリケーション」を選択して「選択(C)…」をクリックしてください。

Read More

Qt をはじめよう! 第18回: タブオーダーを設定しよう

Published Tuesday May 10th, 2011 | Leave a comment
Posted in Qt をはじめよう! | Tags: , ,

前回 はアクセスキーの設定について学びました。今回はタブオーダーです。 タブオーダーとは デスクトップで動くアプリケーションではフォーカス可能なウィジェット間を移動するために(Shift+)タブキーが使用されます。Qt ではタブキーを押した際にどのウィジェットへフォーカスを移すかを設定することが可能で、この順番をタブオーダーと呼びます。 Qt ではデザイナを使用してウィジェットを配置した場合でも、ソースコードでウィジェットを配置した場合でも、これらのウィジェットのタブオーダーは自動的に割り振られるため、あまり意識する必要はありません。 しかし、画面が複雑な場合や、後で画面のレイアウトを変更した際などに、タブオーダーがずれてしまったり、自動的に割り振られる順番が理想的ではないこともあります。今回はこのタブオーダーを明示的に指定する方法について学びましょう。 フォームの作成 タブオーダーの設定の準備として以下のようなフォームを作成しましょう。 左側のレイアウトは以下のウィジェットを FormLayout でまとめたものです。 Label text を “Search &for” に変更 LineEdit Label text を “Replace &with” に変更 LineEdit CheckBox text を “&Case sensitive” に変更 “Search for:” と “Replace with:” では 前回 学んだ Buddy の設定もそれぞれの右側にある LineEdit に対して行っています。 右側のレイアウトは以下のウィジェットを垂直に並べたものです。 PushButton text を “&Find” に変更 PushButton text を “&Replace” […]

Read More

Qt をはじめよう! 第17回: アクセスキーを設定しよう

Published Thursday April 21st, 2011 | Leave a comment
Posted in Qt をはじめよう! | Tags: , ,

前回 は GUI デザイナ上での独自シグナル/スロットの接続と、シグナルから直接スロットを作成する機能を学びました。今回はウィジェットのアクセスキーの設定についてです。 アクセスキーとは Windows や Linux のアプリケーションではメニューやボタン、入力エリアなどに対してキーボードを使用してアクセスするために「アクセスキー」と呼ばれる機能が使われます。一般的にはメニューの「ファイル(F)」やボタンの「OK」のように1文字のアルファベットに下線がついたもので、キーボードで Alt キー+そのアルファベットを押した場合にそのウィジェットにフォーカスがあたます。ウィジェットによってはそれに伴う処理(メニューを開く、ボタンを押すなど)が起こることもあります。 ファイルの保存に対する「Ctrl+S」のような機能に割り当てられる「ショートカットキー」とは異なり、アクセスキーは主にあるウィジェットにフォーカスを移す目的で用いられます。 なお、Mac にはこのような習慣がないため、Qt で UI を作成する際にアクセスキーの設定を行っても無効になります。Mac 用のアプリケーションの開発にのみ興味がある人は今回は読み飛ばしていただいてもかまいません。ただし、Qt の API のみで書かれたアプリケーションは他のプラットフォームでも動作することから、クロスプラットフォーム対応として、アクセスキーの設定を行うことを推奨します。 Windows 7 ではデフォルトではアクセスキーの下線が表示されません。一度 Alt キーを押すことで下線を表示できます。常に下線を表示したい場合には「キーボードを使いやすくする」の「ショートカット キーとアクセス キーに下線を表示します」の設定を行ってください。 直接アクセスキーの設定ができるウィジェット メニューやボタンなどのそれ自体に文字を表示するウィジェットでは、表示する文字の中のアルファベットの前に「&」をつけることでその直後のアルファベットをアクセスキーとして設定することができます。 まず準備として以下のようにフォームを作成してみましょう。

Read More

Qt をはじめよう! 第17回: アクセスキーを設定しよう

Published Thursday April 21st, 2011 | Leave a comment
Posted in Qt をはじめよう! | Tags: , ,

前回 は GUI デザイナ上での独自シグナル/スロットの接続と、シグナルから直接スロットを作成する機能を学びました。今回はウィジェットのアクセスキーの設定についてです。 アクセスキーとは Windows や Linux のアプリケーションではメニューやボタン、入力エリアなどに対してキーボードを使用してアクセスするために「アクセスキー」と呼ばれる機能が使われます。一般的にはメニューの「ファイル(F)」やボタンの「OK」のように1文字のアルファベットに下線がついたもので、キーボードで Alt キー+そのアルファベットを押した場合にそのウィジェットにフォーカスがあたます。ウィジェットによってはそれに伴う処理(メニューを開く、ボタンを押すなど)が起こることもあります。 ファイルの保存に対する「Ctrl+S」のような機能に割り当てられる「ショートカットキー」とは異なり、アクセスキーは主にあるウィジェットにフォーカスを移す目的で用いられます。 なお、Mac にはこのような習慣がないため、Qt で UI を作成する際にアクセスキーの設定を行っても無効になります。Mac 用のアプリケーションの開発にのみ興味がある人は今回は読み飛ばしていただいてもかまいません。ただし、Qt の API のみで書かれたアプリケーションは他のプラットフォームでも動作することから、クロスプラットフォーム対応として、アクセスキーの設定を行うことを推奨します。 Windows 7 ではデフォルトではアクセスキーの下線が表示されません。一度 Alt キーを押すことで下線を表示できます。常に下線を表示したい場合には「キーボードを使いやすくする」の「ショートカット キーとアクセス キーに下線を表示します」の設定を行ってください。 直接アクセスキーの設定ができるウィジェット メニューやボタンなどのそれ自体に文字を表示するウィジェットでは、表示する文字の中のアルファベットの前に「&」をつけることでその直後のアルファベットをアクセスキーとして設定することができます。 まず準備として以下のようにフォームを作成してみましょう。

Read More

Qt をはじめよう! 第16回: GUI デザイナでスロットを作成しよう

Published Wednesday March 23rd, 2011 | 7 Comments on Qt をはじめよう! 第16回: GUI デザイナでスロットを作成しよう
Posted in Qt をはじめよう! | Tags: ,

前回 は GUI デザイナ上でのシグナル/スロットの接続機能について学びました。 今回は GUI デザイナのシグナル/スロット関連機能のもう一歩進んだ使い方を学びましょう。 独自シグナル/スロットの接続 前回は既存のウィジェットで定義済みのシグナル/スロットを接続しましたが、自分で追加したシグナル/スロットの接続も可能です。これを試すための準備として、プロジェクトの作成時に生成される QWidget のサブクラス Widget にシグナルとスロットを1つずつ追加しましょう。 widget.h public slots: void setText(const QString &text); signals: void textLengthChanged(int textLength); widget.cpp void Widget::setText(const QString &text) { emit textLengthChanged(text.length()); } この記事の最後に全てのソースコードを掲載しており、上記の行番号はそこに対応しています。 文字列を設定するスロット(setText())を作成し、その中では設定された文字列の長さが変わった事を通知するシグナル(textLengthChanged())を発生させています。簡略化のため、設定された文字列を内部で保持したり、現状の文字列と新しい文字列の長さが本当に違うかどうかの判断などはここでは省略しています。 それではフォームを編集し、このシグナル/スロットを他のウィジェットと接続してみましょう。 今回はテキストを入力するための LineEdit とそこに入力された文字列の長さを表示するための Label を以下のように配置します。 次に、シグナル/スロットを接続します。まずはじめに LineEdit の textChanged シグナルを Widget クラスに追加した setText スロットに接続します。シグナルを発生させるウィジェット(LineEdit)からそれを受け取るウィジェット(フォーム自体)にマウスをドロップすると、シグナル/スロットの一覧のダイアログが表示されます。 Widget に作成したスロットはこの一覧には表示されていません。これは、デザイナがこのフォームを QWidget クラスとして扱っているためです。自分で作成したスロットを接続する場合はそのスロットの定義を手動で追加する必要があります。

Read More

Qt をはじめよう! 第16回: GUI デザイナでスロットを作成しよう

Published Wednesday March 23rd, 2011 | Leave a comment
Posted in Qt をはじめよう! | Tags: ,

前回 は GUI デザイナ上でのシグナル/スロットの接続機能について学びました。 今回は GUI デザイナのシグナル/スロット関連機能のもう一歩進んだ使い方を学びましょう。 独自シグナル/スロットの接続 前回は既存のウィジェットで定義済みのシグナル/スロットを接続しましたが、自分で追加したシグナル/スロットの接続も可能です。これを試すための準備として、プロジェクトの作成時に生成される QWidget のサブクラス Widget にシグナルとスロットを1つずつ追加しましょう。 widget.h public slots: void setText(const QString &text); signals: void textLengthChanged(int textLength); widget.cpp void Widget::setText(const QString &text) { emit textLengthChanged(text.length()); } この記事の最後に全てのソースコードを掲載しており、上記の行番号はそこに対応しています。 文字列を設定するスロット(setText())を作成し、その中では設定された文字列の長さが変わった事を通知するシグナル(textLengthChanged())を発生させています。簡略化のため、設定された文字列を内部で保持したり、現状の文字列と新しい文字列の長さが本当に違うかどうかの判断などはここでは省略しています。 それではフォームを編集し、このシグナル/スロットを他のウィジェットと接続してみましょう。 今回はテキストを入力するための LineEdit とそこに入力された文字列の長さを表示するための Label を以下のように配置します。 次に、シグナル/スロットを接続します。まずはじめに LineEdit の textChanged シグナルを Widget クラスに追加した setText スロットに接続します。シグナルを発生させるウィジェット(LineEdit)からそれを受け取るウィジェット(フォーム自体)にマウスをドロップすると、シグナル/スロットの一覧のダイアログが表示されます。 Widget に作成したスロットはこの一覧には表示されていません。これは、デザイナがこのフォームを QWidget クラスとして扱っているためです。自分で作成したスロットを接続する場合はそのスロットの定義を手動で追加する必要があります。

Read More

Qt をはじめよう! 第15回: GUI デザイナでシグナル/スロットを接続しよう

Published Sunday February 27th, 2011 | Leave a comment
Posted in Qt Creator, Qt をはじめよう! | Tags: , ,

前回 に引き続き今回も GUI デザイナの使い方を説明します。 GUI デザイナではフォーム上のウィジェット間のシグナル/スロットを接続することが可能です。 今回はこの機能を試してみましょう。 シグナル/スロットの接続(1) まず始めに、以下のように LineEdit と PushButton をフォーム上に配置してください。 何か情報を入力して「OK」を押した場合に閉じるようなアプリケーションを想定しています。このため、今回は使用しませんが Label も配置してあります。また、各ウィジェットの文字列の変更やレイアウトはここでは省略してあります。 ここで、ツールバーにある「シグナル/スロットの編集」ボタンをクリックし、シグナル/スロットの編集モードに切り替えましょう。「F4」キーでも同様の操作になります。 それではシグナル/スロットを接続してみましょう。

Read More

Qt をはじめよう! 第15回: GUI デザイナでシグナル/スロットを接続しよう

Published Sunday February 27th, 2011 | Leave a comment
Posted in Qt Creator, Qt をはじめよう! | Tags: , ,

前回 に引き続き今回も GUI デザイナの使い方を説明します。 GUI デザイナではフォーム上のウィジェット間のシグナル/スロットを接続することが可能です。 今回はこの機能を試してみましょう。 シグナル/スロットの接続(1) まず始めに、以下のように LineEdit と PushButton をフォーム上に配置してください。 何か情報を入力して「OK」を押した場合に閉じるようなアプリケーションを想定しています。このため、今回は使用しませんが Label も配置してあります。また、各ウィジェットの文字列の変更やレイアウトはここでは省略してあります。 ここで、ツールバーにある「シグナル/スロットの編集」ボタンをクリックし、シグナル/スロットの編集モードに切り替えましょう。「F4」キーでも同様の操作になります。 それではシグナル/スロットを接続してみましょう。

Read More

Qt をはじめよう! 第15回: GUI デザイナでシグナル/スロットを接続しよう

Published Sunday February 27th, 2011 | Leave a comment
Posted in Qt Creator, Qt をはじめよう! | Tags: , ,

前回 に引き続き今回も GUI デザイナの使い方を説明します。 GUI デザイナではフォーム上のウィジェット間のシグナル/スロットを接続することが可能です。 今回はこの機能を試してみましょう。 シグナル/スロットの接続(1) まず始めに、以下のように LineEdit と PushButton をフォーム上に配置してください。 何か情報を入力して「OK」を押した場合に閉じるようなアプリケーションを想定しています。このため、今回は使用しませんが Label も配置してあります。また、各ウィジェットの文字列の変更やレイアウトはここでは省略してあります。 ここで、ツールバーにある「シグナル/スロットの編集」ボタンをクリックし、シグナル/スロットの編集モードに切り替えましょう。「F4」キーでも同様の操作になります。 それではシグナル/スロットを接続してみましょう。

Read More

Qt をはじめよう! 第14回: GUI デザイナでのレイアウトに慣れよう!

Published Saturday December 4th, 2010 | 1 Comment on Qt をはじめよう! 第14回: GUI デザイナでのレイアウトに慣れよう!
Posted in Qt Creator, Qt をはじめよう! | Tags: , ,

今回は GUI デザイナを通して、UI を作成する際に使用する様々なレイアウトについて学びましょう。 今回も新たにプロジェクトを作成しましょう。 テンプレートは「Qt GUI アプリケーション」を選択してください。 プロジェクトのパスと名前は任意の名前を指定してください。 基底クラスは「QWidget」で、クラス名の所は今回はデフォルトのまま「Widget」にします。 「フォームを生成する」のチェックは外さないでください。 プロジェクトの作成方法は 第13回 と同様ですので、詳細はそちらを参照してください。 様々なレイアウトを使用する レイアウト管理を学ぼう で紹介したとおり Qt では4つのレイアウトが標準で利用できます。GUI デザイナでもこれらのレイアウトを使用する事が可能です。 [qt QVBoxLayout] を使用すると複数のウィジェットやレイアウトを縦方向に並べることができます。 [qt QHBoxLayout] を使用すると複数のウィジェットやレイアウトを横方向に並べることができます。 [qt QGridLayout] を使用すると複数のウィジェットやレイアウトをグリッド状に並べることができます。 [qt QFormLayout] は入力ウィジェットをラベルとセットにして複数並べるためのレイアウトです。同様のレイアウトは QGridLayout でも基本的には可能ですが、QFormLayout では一般的な入力フォーム向けに [qt “レイアウトが最適化” l=qformlayout m=#details] されます。 レイアウトを設定する GUI デザイナでのレイアウトの設定方法は2種類あります。ウィジェットに対してレイアウトを設定する場合と、複数のウィジェットをレイアウトでまとめるだけの場合です。ウィジェットに対してレイアウトを設定した場合は、そのウィジェットのサイズに応じて動的にレイアウトが更新されます。一方、レイアウトを作成しただけの場合にはそのような動的な更新は行われません。このレイアウトは他のレイアウトやウィジェットを組み合わせて複雑なレイアウトを実現する為に使用します。 それではこの2つの違いを実際に確認してみましょう。

Read More
Get started today with Qt Download now