.. index:: 
	single: フォームデザイナーの用法; はじめに

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

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

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

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

.. image:: rnotefd.png
	:alt: フォームデザイナー - Ring ノートパッドの内面図

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

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

.. image:: formdesigner.png
	:alt: フォームデザイナー

.. index:: 
	pair: フォームデザイナーの用法; フォームデザイナーのウィンドウ

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

* ツールボックス (Toolbox)     : ウィンドウへ追加するコントロールを選択します。

* プロパティ (Properties)      : アクティブなウィンドウ、またはコントロールのプロパティを設定します。

* デザイン領域 (Design Region) : ウィンドウとコントロールの選択、移動、サイズを変更します。

.. index:: 
	pair: フォームデザイナーの用法; ツールボックス

ツールボックス
==============

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

* ロック (Lock)                         : 同じ種類の様々なコントロールを描画するために使えます。

* 選択 (Select)                         : デザイン領域のコントロールを選択します。

* コントロールボタン (Controls Buttons) : ウィンドウへ追加するコントロールを選択します。

.. index:: 
	pair: フォームデザイナーの用法; プロパティ

プロパティ
==========

* ウィンドウ、またはコントロールの選択時に、選択したオブジェクトには、プロパティ (Properties) があります。

* また、プロパティのウィンドウには、アクティブなコントロールを選択するためのコンボボックスがあります。

* プロパティの一部では、プロパティ値の隣にボタンがあります。ボタンをクリックすると追加のオプションがあります。

* コントロールを複数選択した時は、複数のオプションがあります。

.. image:: fdms.png
	:alt: フォームデザイナー - 複数選択

.. index:: 
	pair: フォームデザイナーの用法; フォームの実行

フォームの実行
==============

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

* Controller クラス
* View クラス

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

フォームデザイナーは以下のファイルを生成します。

* helloworldcontroller.ring
* helloworldview.ring

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

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

.. index:: 
	pair: フォームデザイナーの用法; イベントのコード

イベントのコード
================

(1) イベントプロパティに、メソッド名を入力します。

.. image:: fdeventmethod.png
	:alt: フォームデザイナー - イベントのメソッド

これで Controller クラスへコードが追加されます。


.. code-block:: ring

	func CloseWindow
		oView {
		}

(2) 次に、 Controller クラスへメソッドのコードを記述します。

.. image:: fdeventcode.png
	:alt: フォームデザイナー - イベントのコード

この用例での記述は

.. code-block:: ring

	func CloseWindow
		oView.win.close()

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

その他の用例:

.. image:: fdsayhello1.png
	:alt: フォームデザイナー - Say Hello

イベントのコード

.. code-block:: ring

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


.. index:: 
	pair: フォームデザイナーの用法; キーボードショートカット

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

コントロールを複数選択後に、

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


.. index:: 
	pair: フォームデザイナーの用法; メニューバーデザイナー

メニューバーデザイナー
======================

ウィンドウのプロパティからメニューバーデザイナーを開けます。


.. image:: menubardesigner.png
	:alt: フォームデザイナー - メニューバーデザイナー

.. index:: 
	pair: フォームデザイナーの用法; ウィンドウフラグ

ウィンドウフラグ
================

ウィンドウのプロパティからウィンドウフラグのウィンドウを開けます。


.. image:: windowflags.png
	:alt: フォームデザイナー - ウィンドウフラグ


.. index:: 
	pair: フォームデザイナーの用法; 項目の入力

項目の入力
==========

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

.. image:: fdlistitems.png
	:alt: フォームデザイナー - リスト項目


.. index:: 
	pair: フォームデザイナーの用法; レイアウトの用法

レイアウトの用法
================

(1) レイアウトを使うには、まずウィンドウへ Layout コントロールを追加します。

(2) ウィンドウの “レイアウトの設定” プロパティからメインレイアウトを決定します。

(3) Layout プロパティから、コントロールとレイアウトの種類を決定します。


.. index:: 
	pair: フォームデザイナーの用法; オブジェクトの並び順とレイアウト

オブジェクトの順序とレイアウト
==============================

どのようなオブジェクトであろうとオブジェクトを追加すると必ず先頭に配置します。

二個のボタンとレイアウトから成るフォームの場合は

レイアウトの作成後に第三ボタンを追加するにはオブジェクトの並び順を変更することが必要です。

この指定をするには「プロパティ (Properties)」ウィンドウからのボタンを用いて「オブジェクトの順序 (Objects Order)」ウィンドウを開きます。

.. image:: layoutobjsshot1.png
	:alt: オブジェクトのレイアウト順序

つぎに「Button3」を選択後に「上へ移動 (Move Up)」をクリックます。

.. image:: layoutobjsshot2.png
	:alt: オブジェクトのレイアウト順序

そして「オブジェクトの順序 (Objects Order)」ウィンドウを閉じます。

.. image:: layoutobjsshot3.png
	:alt: オブジェクトのレイアウト順序

.. index:: 
	pair: フォームデザイナーの用法; その他のサンプルとテスト

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

フォルダをご確認ください : ring/samples/UsingFormDesigner

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

