フォームデザイナーの用法

フォームデザイナーの用法を学びます。

Ring ノートパッドからフォームデザイナーを実行できます。

Ring ノートパッドのメニューバーから → 表示メニュー → フォームデザイナーを選択するとフォームデザイナーのウィンドウを表示、または非表示にできます。

フォームデザイナー - Ring ノートパッドの内面図

また、別のウィンドウからフォームデザイナーを実行することもできます。

Ring ノートパッドからツールメニュー → フォームデザイナーを選択します。

フォームデザイナー

フォームデザイナーのウィンドウ

  • ツールボックス (Toolbox) : ウィンドウへ追加するコントロールを選択します。
  • プロパティ (Properties) : アクティブなウィンドウ、またはコントロールのプロパティを設定します。
  • デザイン領域 (Design Region) : ウィンドウとコントロールの選択、移動、サイズを変更します。

ツールボックス

このようなボタンがあります。

  • ロック (Lock) : 同じ種類の様々なコントロールを描画するために使用できます。
  • 選択 (Select) : デザイン領域のコントロールを選択できます。
  • コントロールボタン (Controls Buttons) : ウィンドウへ追加するコントロールを選択します。

プロパティ

  • ウィンドウ、またはコントロールの選択時に、選択したオブジェクトには、プロパティ (Properties) があります。
  • また、プロパティのウィンドウには、アクティブなコントロールを選択するためのコンボボックスがあります。
  • 一部のプロパティでは、プロパティ値の隣にボタンがあります。ボタンをクリックすると追加のオプションがあります。
  • 一つ以上のコントロールを選択した時は、複数のオプションがあります。
フォームデザイナー - 複数選択

フォームの実行

フォームデザイナーは、フォームファイル (*.rform) の保存時に二種類の Ring ファイルを作成します。

  • Controller クラス
  • View クラス

例えば、フォームファイルが helloworld.rform ならば、

フォームデザイナーはファイルを二つ生成します。

  • helloworldcontroller.ring
  • helloworldview.ring

プログラムを実行するには、 Controller クラスのファイルを開いた後に Run ボタン (Ctrl+F5) をクリックします。

情報

Ring ノートパッドでフォームを開いた時は自動的に Controller クラスが開かれます。そのまま実行するには (Ctrl+F5) を打鍵、またはフォームデザイナーのウィンドウがアクティブな時に Run ボタンをクリックしてください。

イベントのコード

  1. イベントプロパティに、メソッド名を入力します。
フォームデザイナー - イベントのメソッド
  1. 次に、 Controller クラスへメソッドのコードを記述します。
フォームデザイナー - イベントのコード

この用例での記述は

func CloseWindow
        oView.win.close()

Controller クラスの内側では、 oView オブジェクトを使用してフォームへアクセスします。

その他の用例:

フォームデザイナー - Say Hello

イベントのコード

func SayHello
        oView {
                LineEdit2.setText("Hello "+ LineEdit1.text() )
        }

キーボードショートカット

一つ以上のコントロールを選択後に、

  • カーソルキー (上、下、左、右) で移動します。
  • Shift + カーソルキー (上、下、左、右) でコントロールのサイズを変更します。
  • Del キーでコントロールを削除します。
  • Ctrl + Shift + V でコントロールを複製します。

メニューバーデザイナー

ウィンドウのプロパティからメニューバーデザイナー開くことができます。

フォームデザイナー - メニューバーデザイナー

ウィンドウフラグ

ウィンドウのプロパティからウィンドウフラグのウィンドウを開くことができます。

フォームデザイナー - ウィンドウフラグ

項目の入力

List ウィジェットなどのコントロールでは、項目をコンマ‘,’で区切って入力できます。

フォームデザイナー - リスト項目

レイアウトの用法

  1. レイアウトを使用するには、まずウィンドウへ Layout コントロールを追加します。
  2. ウィンドウの “レイアウトの設定” プロパティからメインレイアウトを決定します。
  3. Layout プロパティから、コントロールとレイアウトの種類を決定します。

その他のサンプルとテスト

フォルダをご確認ください : ring/applications/formdesigner/tests

オンライン版 : https://github.com/ring-lang/ring/tree/master/applications/formdesigner/tests