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

フォームデザイナーの用法です。

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/samples/UsingFormDesigner

オンライン版 : https://github.com/ring-lang/ring/tree/master/samples/UsingFormDesigner