WOLFRAM

Wolfram言語 ＆ システムドキュメントセンター
レイアウトサンプル

レイアウトサンプル

GUIKitで提供されていた機能は，組込みのWolfram言語にネイティブのインターフェース構造およびコントロール関数で利用できるようになった．
タブ付きウィンドウ枠のサンプルレイアウトサンプル 3
ウィンドウ枠の分割サンプルレイアウトサンプル 4
レイアウトサンプル 1レイアウトサンプル 5
レイアウトサンプル 2

ある種のレイアウト要素をいつ使うべきかは，サイズ変更が可能なダイアログを作るために各々を組み合せて視覚的に描いてみると最も分かりやすいだろう．以下は，これまでに使ったレイアウトと一般的なインターフェースレイアウトのパターンを組み合せたいくつかの例である．

タブ付きウィンドウ枠のサンプル

次は，タブ付きウィンドウ枠内のコンテンツを生成する例題である．

Wolfram Language code: ref = GUIRun[ Widget["Panel", WidgetGroup[{ {Widget["Button", {"text" -> "ボタン A"}], Widget["TextField", {"text" -> "テキストA"}]}, {Widget["Button", {"text" -> "ボタン B"}], Widget["TextField", {"text" -> "テキストB"}]} }, Name -> "myTabPane", WidgetLayout -> {"Grouping" -> {Tabs, Bottom, {"One", "Two"}}}] ] ]
Wolfram Language code: GUIScreenShot[ref]

タブ付きのWidgetGroupの各要素は，ひとつのタブ付きのパネルに置かれるウィジェットのリスト，またはコンテンツがひとつのウィンドウ枠の中に置かれるひとつのウィジェットでもよい．

Wolfram Language code: ref = GUIRun[ Widget["Panel", WidgetGroup[{ Widget["Wolfram/Example/PrimeFinder"], Widget["Wolfram/Example/CellularGroup"] }, Name -> "myTabPane", WidgetLayout -> {"Grouping" -> {Tabs, Top, {"1", "2"}}}] ] ]
Wolfram Language code: GUIScreenShot[ref]

ウィンドウ枠の分割サンプル

次は，分割されたウィンドウ枠を使い，名前特性を使ってランタイムで操作できるように分割されたウィンドウ枠に任意でどのように名前を付けるかを示す例題である．

Wolfram Language code: ref = GUIRun[ Widget["Panel", WidgetGroup[{ Widget["Button", {"text" -> "ボタン B"}], WidgetGroup[{Widget["Button", {"text" -> "ボタン A"}], Widget["TextField", {"text" -> "テキスト"}]}, WidgetLayout -> Column] }, WidgetLayout -> {"Grouping" -> {Split, Vertical}}, Name -> "mySplitPane"] ] ]
Wolfram Language code: GUIScreenShot[ref]
Wolfram Language code: ref @ PropertyValue[{"mySplitPane", "dividerLocation"}]

パネルを少し大きくすると，プログラム的に分割位置が移動できることが分かる．

Wolfram Language code: ref @ SetPropertyValue[{"mySplitPane", "dividerLocation"}, 50]
Wolfram Language code: GUIScreenShot[ref]

整数の特性値の代りに百分率値のメソッドを使うこともできる．

Wolfram Language code: ref @ InvokeMethod[{"mySplitPane", "setDividerLocation"}, 0.50]

レイアウトサンプル 1

Wolfram Language code: ref = GUIRun[ Widget["Panel", { {Widget["Label", {"text" -> "ファイル"}], Widget["TextField", {"columns" -> 10}], Widget["Button", {"text" -> "選択"}] }, Widget["Label", {"text" -> "ファイルを表示"}], Widget["TextArea", {"text" -> "ファイルの内容"}] }] ]
Wolfram Language code: GUIScreenShot[ref]

サイズ調整後：

Wolfram Language code: GUIScreenShot[ref]

レイアウトサンプル 2

Wolfram Language code: ref = GUIRun[ Widget["Panel", WidgetGroup[{ Widget["Label", {"text" -> "入力"}], WidgetGroup[{ {Widget["Label", {"text" -> "A"}], Widget["TextField", {"columns" -> 10}], Widget["Label", {"text" -> "ft"}], WidgetSpace[5]}, {Widget["Label", {"text" -> "BB"}], Widget["TextField", {"columns" -> 10}], Widget["Label", {"text" -> "in"}], Widget["CheckBox", {"label" -> "四捨五入"}]}, {Widget["Label", {"text" -> "CCC"}], Widget["TextField", {"columns" -> 10}], Widget["Label", {"text" -> "m"}], WidgetGroup[{ Widget["Label", {"text" -> "または"}], Widget["TextField", {"columns" -> 10}], Widget["Label", {"text" -> "km"}]}, WidgetLayout -> {"Grouping" -> Row, "Border" -> {{RGBColor[1, 0, 0], 3}, {{5, 5}, {5, 5}}}}] } }, WidgetLayout -> Grid]}, WidgetLayout -> {"Border" -> {{RGBColor[0, 0, 1], 3}, {{5, 5}, {5, 5}}}}] ] ]
Wolfram Language code: GUIScreenShot[ref]

サイズ調整後：

Wolfram Language code: GUIScreenShot[ref]

レイアウトサンプル 3

Wolfram Language code: ref = GUIRun[ Widget["Panel", { WidgetGroup[{ WidgetGroup[{ WidgetGroup[{ {Widget["Label", {"text" -> "A"}, WidgetLayout -> {"Alignment" -> {Right, Automatic}}], Widget[" TextField", {"columns" -> 10}], Widget["Label", {"text" -> "ft"}]}, {Widget["Label", {"text" -> "BB"}, WidgetLayout -> {"Alignment" -> {Right, Automatic}}], Widget[" TextField", {"columns" -> 10}], Widget["Label", {"text" -> "in"}]}, {Widget["Label", {"text" -> "CCC"}, WidgetLayout -> {"Alignment" -> {Right, Automatic}}], Widget[" TextField", {"columns" -> 10}], Widget["Label", {"text" -> "m"}]} }, WidgetLayout -> { "Grouping" -> Grid, "Border" -> {{RGBColor[1, 0, 0], 3}, {{5, 5}, {5, 5}}}}], WidgetFill[]}, WidgetLayout -> {"Border" -> {{RGBColor[1, 1, 0], 3}, {{5, 5}, {5, 5}}}}], WidgetSpace[5], {WidgetFill[], Widget["Button", {"text" -> "foo"}]}}, WidgetLayout -> {"Grouping" -> Row, "Border" -> {{RGBColor[0, 0, 1], 3}, {{5, 5}, {5, 5}}}}] }] ]
Wolfram Language code: GUIScreenShot[ref]

サイズ調整後：

Wolfram Language code: GUIScreenShot[ref]

レイアウトサンプル 4

Wolfram Language code: ref = GUIRun[ Widget["Panel", {Widget["Label", {"text" -> "入力"}, WidgetLayout -> {"Alignment" -> Center}, Name -> "mainLabel"], {Widget["Label", {"text" -> "BB"}], WidgetAlign[], Widget["TextField", {"columns" -> 10}], WidgetAlign[], Widget["Label", {"text" -> "in"}], WidgetAlign[], Widget["CheckBox", {"label" -> "四捨五入"}]}, {Widget["Label", {"text" -> "CCC"}], WidgetAlign[], Widget["TextField", {"columns" -> 10}], WidgetAlign[], Widget["Label", {"text" -> "m"}], Widget["Label", {"text" -> "または"}], WidgetAlign[], Widget["TextField", {"columns" -> 10}], Widget["Label", {"text" -> "km"}]}, {WidgetFill[], WidgetAlign[{"mainLabel", After}, Before], Widget["Button", {"text" -> "送信"}], WidgetFill[]} }] ]
Wolfram Language code: GUIScreenShot[ref]

サイズ調整後：

Wolfram Language code: GUIScreenShot[ref]

レイアウトサンプル 5

Wolfram Language code: ref = GUIRun[ Widget["Panel", { {Widget["Label", {"text" -> "int型"}], Widget["TextField", {"columns" -> 5}], Widget["Label", {"text" -> "double型"}], Widget["TextField", {"columns" -> 5}, WidgetLayout -> {"Stretching" -> {Maximize, None}}], Widget["Label", {"text" -> "double型"}], Widget["TextField", {"columns" -> 5}, WidgetLayout -> {"Stretching" -> {Maximize, None}}]}, { {Widget["Label", {"text" -> "長い長い長い長い長い長い長いラベル"}], Widget["TextArea", {}, WidgetLayout -> {"Stretching" -> {WidgetAlign, True}}]}, {WidgetFill[], Widget["Button", {"text" -> "送信"}]} } }] ]
Wolfram Language code: GUIScreenShot[ref]

サイズ調整後：

Wolfram Language code: GUIScreenShot[ref]