.. 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: フォームデザイナー - イベントのメソッド

(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: フォームデザイナーの用法; その他のサンプルとテスト

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

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

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

