はじめに

レイアウト : プロセスの概要

レイアウトの編集

オブジェクトの追加

Figure: HBox へのオブジェクトの追加

Figure: Canvas へのオブジェクトの追加

Figure: 寸法指定のない VBox

Figure: 寸法指定のない VBox へのオブジェクトの挿入

オブジェクトの選択と位置の確認

Figure: 選択されたオブジェクトとカーソルの位置

Figure: グループ選択

• レイアウト全体
  レイアウト全体を表示するように倍率を設定します。
• レイアウト幅
  [レイアウト] ペインの幅にレイアウトの幅が合うように倍率を設定します。

オブジェクトの移動

Figure: HBox の内部での ListBox の移動

Figure: HBox の外側への ListBox の移動

オブジェクトのコピーと貼り付け

Figure: VBox 内の TextField のコピーと貼り付け

Figure: VBox 内の CommandButton のコピーと貼り付け

プロパティの編集

プロパティ値の変更

色のプロパティ

寸法のプロパティ

• 指定なし
  プロパティに値を指定しません。実際の寸法は、これを含むオブジェクトと、この中に含まれるオブジェクトによって決まります。
• 簡単なサイズ指定
  提供されたフィールドに、10cm、25pt のようにサイズ値を入力します。この値は、[レイアウト] ペインで選択ハンドルをドラッグしてオブジェクトのサイズを変更すると、自動的に挿入されます。
• add-stretch
  ダイアログで引数を指定して add-stretch プロシージャを呼び出し、その戻り値をこのプロパティの値に設定します。「エラスティックとページ レイアウト」および add-stretch を参照してください。
• make-elastic
  ダイアログで引数を指定して make-elastic プロシージャを呼び出し、その戻り値をこのプロパティの値に設定します。「エラスティックとページ レイアウト」および make-elastic を参照してください。

検証のプロパティ

• Validator : このドロップダウン リストでは、このフィールドに使用する検証機能のタイプを選択できます。次の選択肢があります。
  • 数値 : NumericValidator を選択します。
  • 文字列 : StringValidator を選択します。
  • 正規表現 : RegExpValidator を選択します。
• [検証] ドロップダウン リストの下のセクションでは、選択した検証機能のタイプに固有のプロパティ値を入力できます。
  • 数値 : NumericValidator には次の選択肢があります。
    • ロケール : フィールドの入力を解析するときに使用する Locale を選択します。NumericValidator.locale を設定します。
    • 最小値 : このフィールドに入力できる最小値を指定します。NumericValidator.min-allowable を設定します。
    • 最大値 : このフィールドに入力できる最大値を指定します。NumericValidator.max-allowable を設定します。
    • 符号付き数値を許可する : このボックスをオンにすると、ユーザーは符号付き数値を入力できます。NumericValidator.signed? を設定します。
    • 桁区切り文字を許可する : このボックスをオンにすると、ユーザーは桁区切り文字を入力できます。NumericValidator.allow-grouping? を設定します。
    • 小数点を許可する : このボックスをオンにすると、ユーザーは小数点を入力できます。NumericValidator.allow-decimal-point? を設定します。
    • 指数を許可する : このボックスをオンにすると、ユーザーは指数を使用した科学的記数法で数字を入力できます。NumericValidator.allow-exponent? を設定します。
  • 文字列 : StringValidator には次の選択肢があります。
    • 最小文字数 : 入力する必要のある最小文字数を指定します。StringValidator.min-chars を設定します。
    • 大文字数 : 入力できる最大文字数を指定します。StringValidator.max-chars を設定します。
  • 正規表現 : RegExpValidator には次の選択肢があります。
    • パターン : さまざまな目的で定義された正規表現のリストから選択できます。このリストの詳細については、ValidationPattern を参照してください。リストの中に必要な正規表現がない場合は、パターンとして [その他] を選択します。
    • 正規表現 : 選択した正規表現が表示されます。[パターン] リストから [その他] を選択した場合、このフィールドは空白になります。定義済みのパターンを編集の開始点として使用できます。正規表現を編集し始めたときは、[パターン] の値が [その他] に変わります。
• 必須値 : このボックスをオンにすると、このフィールドへの値の入力が必須になります。ValidationController.required? を設定します。
• ValueFinished のダイアログを許可する : 検証メッセージの表示にダイアログを使用すると、この設定がダイアログの表示頻度を制御します。このボックスをオンにすると、ValueFinished イベントが発生するたびにダイアログが表示されます。オフにすると、validate-dialog が呼び出されたときだけダイアログが表示されます。ValidationController.dialog-on-finished? を設定します。
• 検証失敗後にフォーカスを元に戻す : このボックスをオンにすると、検証エラー後にフォーカスがこのフィールドに戻ります。ValidationController.refocus? を設定します。
• エラー メッセージ : このフィールドを使用して、ユーザーが無効な値を入力したときに表示されるエラー メッセージを指定してください。メッセージを入力しなければ、検証システムでは既定のメッセージが使用されます。ValidationController.message を設定します。
• 欠落しているエントリのメッセージ : このフィールドを使用して、必要な値をユーザーが入力していないときに表示されるメッセージを指定してください。メッセージを入力しなければ、検証システムでは既定のメッセージが使用されます。ValidationController.missing-entry-message を設定します。

列挙型のプロパティ

プロパティ値を元に戻す

レイアウトにおけるシェイプの使用

シェイプの追加と配置

Figure: レイアウトへの RectangleShape の追加

Figure: レイアウト ツリーへの RectangleShape の追加

Figure: ArrowShape の終点の移動

ShapeGroup による配置

Figure: ShapeGroup と ArrowShape

Figure: ShapeGroup 内の ArrowShape

Figure: ShapeGroup と ArrowShape

Figure: ShapeGroup 内の ArrowShape

Figure: ShapeGroup と ArrowShape

Figure: ShapeGroup 内の ArrowShape

Figure: ShapeGroup への ArrowShape のドラッグ

シェイプの回転

Figure: RectangleShape の回転

Figure: TextShape の回転

Figure: 水平方向の配置が左に設定された TextShape の回転

Figure: ImageShape の回転

シェイプのサイズ変更

Figure: RectangleShape の 平行移動 と 四角形

Figure: ドラッグによる RectangleShape の拡大

Figure: 平行移動 を編集せずに 四角形 を編集した場合

Z オーダー

Figure: 小さな四角形を隠す大きな四角形

Figure: 小さな四角形を前面に移動

サイズと位置を制御するプロパティ

• 平行移動 は、シェイプの現在の位置の x および y オフセット コンポーネントです。VLE レイアウトにシェイプを追加すると、カーソル位置によって他のオブジェクトの x と y の初期値が決まるため、最初の平行移動が決まります。シェイプの平行移動プロパティを編集することと、Shape.transformation を Shape.set-translation-in-parent で変更することは同じです。
• 回転 は、シェイプの現在の回転です。シェイプの 回転 プロパティを編集することと、Shape.transformation を Shape.set-rotation で変更することは同じです。
• スケール は、シェイプに現在適用されているスケール係数です。シェイプの スケール プロパティを編集することと、Shape.transformation を Shape.set-scale で変更することは同じです。
• 四角形 は、RectangleShape、RoundedRectangleShape、および EllipseShape の GRect の ascent、descent、lextent、および rextent の値です。
• 始点部 は、ArrowShape の始点の位置を定義する Distance2d です。
• 終点部 は、ArrowShape の終点の位置を定義する Distance2d です。

ShapeGroup のプロパティ

MenuBar の構築

Figure: MenuBar の追加

Figure: SubMenu の追加

Figure: SubMenu の配置

Figure: MenuBar への 2 つ目の SubMenu の追加

Figure: MenuBar の 2 つ目の SubMenu

SubMenu の構築

Figure: SubMenu への SubMenu の追加

Figure: SubMenu 内の SubMenu

メニュー構造の表示

Figure: 構造が非表示になっている MenuBar

Figure: 構造が表示された MenuBar

Figure: 非表示の SubMenu への SubMenu の追加

Figure: 追加された SubMenu

Figure: 下位レベルへの SubMenu の追加

Figure: 追加された SubMenu

Figure: 非表示のサブメニューへのオブジェクトの挿入

レイアウトにおける表の使用

空の表にオブジェクトを追加

Figure: 表に TextField を追加

Figure: 表に追加された TextField

オブジェクトの追加による列の作成

Figure: 新しい列の作成

Figure: 新しい列内の新しい TextField

オブジェクトの追加による行の作成

Figure: 新しい行の作成

Figure: 新しい行内の新しい TextField

オブジェクトの追加による行と列の作成

Figure: 新しい行と列の作成

Figure: 新しい行と列内の新しい TextField

表オブジェクトの選択と位置の確認

Figure: 行のハイライト表示

Figure: 列のハイライト表示

Figure: 列の選択

表内のコンテンツのドラッグ アンド ドロップ

Figure: テキスト フィールドのドラッグ アンド ドロップ

Figure: ドラッグ アンド ドロップ操作の完了

表オブジェクトの置き換え

Figure: TextField の置き換え

Figure: CommandButton に置き換えられた TextField

折りたたまれた表構造

Figure: 折りたたまれている行に TextField を追加

Figure: 追加された TextField

表コンポーネントの明示的な追加

表のプロパティの編集

Figure: 表、行、セルでプロパティを設定

Figure: Colspan の使用

Figure: Rowspan の使用

レイアウトにおける TabContainer の使用

Figure: レイアウトにおけるタブ　コンテナ

Figure: TabContainer へのVBoxの追加

{define-layout-class MyContainer
    || Begin meta-data DO NOT EDIT
    format-version = 2,
    design-time-class = "Canvas",
    run-time-class = "Canvas",
    || End meta-data
    width = 188.99pt,
    height = 154.76pt,
    background = "#D4D0C8",
    border-width = 1.5pt,
    border-color = "#D4D0C8",
    border-style = "raised",
    font-size = 8pt,
    control-appearance-changeable? = true,

    {layout-container void:TabContainer
        || Begin meta-data DO NOT EDIT
        anchor = "top-left",
        x = 12pt,
        y = 12pt,
        || End meta-data
        {TabContainer

            {layout-container void:VBox
                || Begin meta-data DO NOT EDIT
                tab-label = "tab1",
                || End meta-data
                {VBox
                }
            }
        }
    }

    {constructor {default}
        {self.initialize-components}
    }
}

Figure: タブ コンテナにコントロールを追加

Figure: タブ ラベルの編集

Figure: 2番目の VBox を追加

Figure: 2番目の VBox の追加

レイアウトにおける TreeControl の使用

Figure: VLE のツリー コントロールの内容

レイアウトにおける複合オブジェクトの使用

• FourImages : 複合オブジェクト FourPane を使用する単純な例で、4 つの旗のイメージを表示します。スロットには、RecordGrid、Table、Shape を含む Canvas など、より複雑なコンテンツを含めることができます。
• PicturesAndText : 複合オブジェクト TwoPaneHoriz の複数のインスタンスを使用してイメージをテキストと共に表示します。このようなレイアウトを使用すると、スタッフの写真を簡単な紹介付きで表示できます。
• ChooseFlag : スロットを含む TwoPaneVert のインスタンスを FourPane のスロットに挿入します。その結果、ドロップダウン リストを使用して FourPanes の各ペインに表示する旗のイメージを選択できます。

Figure: レイアウトにおける複合オブジェクトの使用

Figure: 選択された複合オブジェクト

Figure: スロットへのコントロールの追加

Figure: スロット内のコントロール

Figure: 複合オブジェクトからドラッグされたコントロール

Figure: オブジェクトを貼り付けてからドラッグ

イベント ハンドラの記述

{on event-type do}     

    self.design-name

    self.container