タブ コンテナ

要約：
  • TabContainer はサブセットに分割される一組の情報に役立ちます。
  • TabContainer は各サブセットを別々のペインに表示します。
  • TabContainer はタブ自体がなくても使用できます。

概要

タブ コンテナは一組の情報をいくつかのサブセットに編成します。各サブセットはコントロール内で別々のペインに表示されます。エンド ユーザーは、対応するタブをクリックして各ペインを表示します。例えば、このドキュメント ビューアの [目次]、[索引]、および [検索] タブは、同じ情報を 3 つの異なるビューで表示します。Curl IDE エディタは、タブ コンテナ内のタブを使用して、複数のファイルを編集用に開きます。

TabContainerの作成

TabContainer クラスがコントロールを定義します。TabContainer は TabPane を含みます。各ペインは、コントロールが提供する全情報のサブセットを含み、これを編成します。TabPane を含まない TabContainer を作成し、後からアプレットでペインを追加することができます。次の例は、コンストラクタに 3 つの TabPane を追加する、簡単な TabContainer を作成するものです。この例では、タブのラベル テキストを指定しないので、TabContainer がペインの追加順序に基づいて既定のラベルを提供します。

例: 簡単な TabContainer
{TabContainer
    {TabPane
        {text font-size = 28pt, 1}
    },
    {TabPane
        {text font-size = 28pt, 2}
    },
    {TabPane
        {text font-size = 28pt, 3}
    }
}
TabContainer の任意の辺にタブを位置付けることができます。次の例は、考えられるすべてのタブ配置を示しています。TabContainer コンストラクタは、タブの初期配置を "右" に設定します。新しいタブを選択するたびに、タブ配置は右回りで次の位置に移動します。この例では各タブのラベルを提供することに、注意してください。
この例はまた、TabContainer.current-pane が変わるたびに TabContainer で起動されるイベント CurrentPaneChanged も示しています。

例: タブ配置
{TabContainer
    tab-placement  = "right",
    {TabPane
        label = "1",
        {text font-size = 28pt, 1}
    },
    {TabPane
        label = "2",
        {text font-size = 28pt, 2}
    },
    {TabPane
        label = "3",
        {text font-size = 28pt, 3}
    },
    {on CurrentPaneChanged at tc:TabContainer do
        {switch tc.tab-placement
         case TabPlacement.right do
            set tc.tab-placement  = "bottom"
         case TabPlacement.bottom do
            set tc.tab-placement  = "left"
         case TabPlacement.left do
            set tc.tab-placement  = "top"
         else
            set tc.tab-placement  = "right"
        }
    }
}

TabPane の作成

TabPane クラスはコントロール内のペインを定義します。TabPane は、ペインに表示されるコントロールと、ペインの概観および動作を制御するいくつかのオプションを含みます。次の例は、上記の例に似た 3 つのペインを、いくつかの追加オプションとともに定義します。タブ ペインは、ペイン (この場合は数値を 1 つだけ含む TextFlowBox) に表示される情報を含みます。タブ ペインはまた、タブ ラベルとタブのヒントも定義します。
TabPane は Frame のサブクラスなので、他の Frame と同じように、これに対してグラフィック オプション (整列オプションを含む) を設定できます。Frame と同様に、TabPane はただ 1 つの子オブジェクトを含むことができます。
また、コントロールに追加したときにペインを表示するかどうかを決定するオプション TabPane.show? にも注意してください。この例では、2 というラベルの付いたペインが TabPane.show? を true に設定するので、そのペインがコントロール内で一番手前に表示されます。既定値は false です。タブ コントロールに追加されたすべてのペインについて TabPane.show? が false の場合は、最初に追加されたペインが一番手前に表示されます。

例: TabPane オプション
{TabContainer
    {TabPane
        label = "1",
        tab-button-tooltip = "first tab",
        {TextFlowBox font-size = 28pt, "1"}
    },
    {TabPane
        label = "2",
        tab-button-tooltip = "second tab",
        show? = true,
        {TextFlowBox font-size = 28pt, "2"}
    },
    {TabPane
        label = "3",
        tab-button-tooltip = "third tab",
        {TextFlowBox font-size = 28pt, "3"}
    }
}

プログラムによる現行ペインの設定

プロパティ TabContainer.current-pane は、コントロールに現在表示されているペインです。タブをクリックすると、関連するペインが現行ペインになります。アプレットは、コントロール内で最適のペインをユーザーに表示するように、現行ペインを設定できます。
次の例は、エンド ユーザーからの入力を使用してどの TabPane を表示するかを決定する、簡略化されたユーザー ログイン プロシージャをシミュレーションするものです。ユーザーが New User というラベルの付いたラジオ ボタンを選択すると、アプレットが TabContainer.current-pane を、new-user と呼ばれるペインに設定します。このペインは、Web サイトに新しいアカウントを作成するのに適したコントロールを含みます。ユーザーが Returning User というラベルの付いたラジオ ボタンを選択すると、アプレットが TabContainer.current-pane を、returning-user と呼ばれるペインに設定します。このペインは、既存のアカウントにログインするのに適したコントロールを含みます。

例: 新規または復帰ユーザー
{let new-user:TabPane = 
    {TabPane
        label = "New User",
        {Table
            {row-prototype
                {cell-prototype
                    colspan = 2,
                    {TextFlowBox
                        font-size = 10pt,
                        font-weight = "bold",
                        "Sign up now!!!!!!"
                    }
                }
            },
            {row-prototype
                {TextFlowBox
                    text-breakable? = false,
                    paragraph-justify = "right",
                    "user name: "
                },
                {TextField }
            },
            {row-prototype
                {TextFlowBox
                    text-breakable? = false,
                    "email address: "
                },
                {TextField}
            },
            {row-prototype
                {TextFlowBox
                    text-breakable? = false,
                    "password: "
                },
                {PasswordField}
            },
            {row-prototype
                {Fill
                    width = 76pt
                },
                {Fill
                    width = 150pt
                }
            }
        }
    }
}
{let returning-user:TabPane = 
    {TabPane
        label = "Returning User",
        {Table
            {row-prototype
                {cell-prototype
                    colspan = 2,
                    {TextFlowBox
                        font-size = 10pt,
                        font-weight = "bold",
                        "Enter your name and password."
                    }
                }
            },
            {row-prototype
                {TextFlowBox
                    "user name: "
                },
                {TextField}
            },
            {row-prototype
                {bind halign to ""},
                {TextFlowBox
                    "password: "
                },
                {PasswordField}
            },
            {row-prototype
                {Fill
                    width = 76pt
                },
                {Fill
                    width = 150pt
                }
            }
        }
    }
}
{let tc:TabContainer = 
    {TabContainer
        tab-placement = "top",
        new-user,
        returning-user
    }
}
{let rf:RadioFrame = 
    {RadioFrame
        {VBox
            {RadioButton label = "New User", radio-value = 1},
            {RadioButton label = "Returning User", radio-value = 2}
        }
    }
}
{let v:View = {View tc}}
{VBox
    rf,
    {CommandButton
        label = "Login now.",
        {on Action do
            {if rf.value == 1 then
                set tc.current-pane = new-user
                {if v.destroyed? then set v = {View tc}}
                {v.show}
             elseif rf.value == 2 then
                set tc.current-pane = returning-user
                {if v.destroyed? then set v = {View tc}}
                {v.show}
             else
                {popup-message
                    "Tell us about yourself!"
                }
            }
        }
    }
}

ペインの追加と削除

TabPane を含まない TabContainer を作成し、後からペインを追加することができます。次の例は、空のタブ コンテナを作成してから、同様のペインを 10 個追加するものです。この例はまた、その他の要点もいくつか示しています。
プロパティ TabContainer.close-button-proc は、ユーザーがタブ クローズ ボタンを押したときに実行されるプロシージャを指定します。プロシージャを指定するとボタンが表示されます。この例では、プロシージャ remove-it が TabContainer.remove-pane-at-index を使用して現行ペインを閉じます。
この例はまた、タブ表示のいくつかの面を制御するプロパティ TabContainer.tab-style も示しています。スタイル TabStyle.compress と TabStyle.scroll は、tab-placement が top または bottom で、すべてのタブを完全な状態で表示できるほど表示域が広くないときに役立ちます。
tab-style の値を compress から scroll に変更してみてください。

例: タブ ペインの追加と削除
{let tc:TabContainer = 
    {TabContainer 
        background ="#ece9d8",
        tab-style = "compress",
        tab-placement = "bottom",
        close-button-proc = remove-it
    }
}
{define-proc {remove-it tc:TabContainer}:void
    {tc.remove-pane-at-index
        tc.current-pane-index
    }
}
{for i:int = 1 to 10 do
    {tc.add-pane
        {TabPane
            label = "Pane # " & i,
            {Table
                {row-prototype
                    {TextFlowBox
                        "This is pane # " & i
                    },
                    {TextField}
                }
            }
        }        
    }
}
{value tc}
また、 TabContainer 上で、show-first、show-last、show-next、および show-previous などのメソッドを使用して現行ペインを操作することもできます。
次の例は、TabContainer.show-next を使用して、ユーザーがコマンド ボタンをクリックしたときコンテナ内の次の TabPane を表示するものです。

例: show-next による現行ペインの変更
{let tc:TabContainer = 
    {TabContainer}
}
{for i:int = 1 to 10 do
    {tc.add-pane
        {TabPane
            label = "Pane # " & i,
            {Table
                {row-prototype
                    {TextFlowBox
                        "This is pane # " & i
                    },
                    {CommandButton
                        label = "Next Pane",
                        {on Action do
                            {tc.show-next cycle? = true}
                        }
                    }
                }
            }
        }        
    }
}
{value tc}

TabContainer タブがない場合

TabContainer.tab-style を hide に設定すれば、TabContainer 内でのペインの表示を、ペインのタブ以外の手段で制御することができます。この例では、CommandButton を使用して、3 つのペインをそれぞれ TabContainer に表示します。

例: タブの非表示
{let rule-1:Rule = 
    {Rule
        color = "transparent"
    }
}
{let ratio-button-pane:TabPane = 
    {TabPane 
        {VBox 
            {RadioFrame
                {on ValueChanged at rf:RadioFrame do
                    set rule-1.color = rf.value
                },
                {VBox
                    {RadioButton
                        label = "red",
                        radio-value = "red"
                    },
                    {RadioButton
                        label = "blue",
                        radio-value = "blue"
                    },
                    {RadioButton
                        label = "white",
                        radio-value = "white"
                    }
                }

            }
        }
    }
}
{let color-dropdown-pane:TabPane = 
    {TabPane 
        {ColorDropdown
            color-array = {StringArray "red", "blue", "white"},
            {on ValueFinished at cdd:ColorDropdown do
                set rule-1.color = cdd.value
            }
        }
    }
}
{let combo-box-pane:TabPane = 
    {TabPane 
        {VBox 
            "Choose or Enter a Color: ", 
            {ComboBox
                "red", 
                "blue", 
                "white",
                value = "white",
                {on ValueFinished at cb:ComboBox do
                    set rule-1.color = cb.value
                }
            }
        }
    }
}
{let tc:TabContainer = 
    {TabContainer 
        tab-style = "hide",
        ratio-button-pane,
        color-dropdown-pane,
        combo-box-pane
    }
}
{HBox
    valign = "center",
    background = "#eeeeee",
    {VBox
        {CommandButton
            label = "Radio Buttons",
            width = {add-stretch},
            {on Action do
                {tc.show-pane ratio-button-pane}
            }

        },
        {CommandButton
            label = "Color Dropdown",
            width = {add-stretch},
            {on Action do
                {tc.show-pane color-dropdown-pane}
            }

        },
        {CommandButton
            label = "Combo Box",
            width = {add-stretch},
            {on Action do
                {tc.show-pane combo-box-pane}
            }
        }
    },
    {VBox
        border-width = 1px,
        tc,
        rule-1
    }
}

TabAccordion

TabAccordion も TabPane を使って中身を体系化しますが、 全てのペインを表示せず、各ペイン毎に中身を表示します。ユーザーが別のペインをクリックすると 現在表示されているペインは閉じます。 次の例では、前例と同様の機能を TabAccordion を使って実装しています。

例: A simple TabAccordion
{let rule-1:Rule = 
    {Rule
        height = 1cm,
        width = {make-elastic},
        color = "transparent"
    }
}
{let ratio-button-pane:TabPane = 
    {TabPane 
        {VBox 
            {RadioFrame
                {on ValueChanged at rf:RadioFrame do
                    set rule-1.color = rf.value asa String
                },
                {VBox
                    {RadioButton
                        label = "red",
                        radio-value = "red"
                    },
                    {RadioButton
                        label = "blue",
                        radio-value = "blue"
                    },
                    {RadioButton
                        label = "white",
                        radio-value = "white"
                    }
                }

            }
        }
    }
}
{let color-dropdown-pane:TabPane = 
    {TabPane 
        {ColorDropdown
            color-array = {StringArray "red", "blue", "white"},
            {on ValueFinished at cdd:ColorDropdown do
                set rule-1.color = cdd.value asa String
            }
        }
    }
}
{let combo-box-pane:TabPane = 
    {TabPane 
        {VBox 
            "Choose or Enter a Color: ", 
            {ComboBox
                "red", 
                "blue", 
                "white",
                value = "white",
                {on ValueFinished at cb:ComboBox do
                    set rule-1.color = cb.value
                }
            }
        }
    }
}
{let ta:TabAccordion = 
    {TabAccordion 
||--            animate? = false,
||--            tab-orientation = "horizontal",
        ratio-button-pane,
        color-dropdown-pane,
        combo-box-pane
    }
}
{HBox
    valign = "center",
    background = "#eeeeee",
    {VBox
        border-width = 1px,
        border-color = "black",
        ta,
        rule-1
    }
}

MultiTabAccordion

MultiTabAccordion は、一度に一つ以上のタブ ペインを表示することのできるTabAccordion です。 ユーザーが、複数のペインにあるデータやコントロールにアクセスするのに便利です。 （例えば、ユーザーがペインでデータを入力中に、別のペインにあるデータを参照することができます） 次は MultiTabAccordion の例です。 各タブ セレクタをクリックしてみてください。 三つのタブ ペインを同時に閲覧することができます。 この例では MultiTabAccordion.tab-orientation が horizontal に設定されています。

例: A simple MultiTabAccordion
{MultiTabAccordion
    tab-orientation = "horizontal",
    {TabPane
        label = "- 1 -",
        tab-button-tooltip = "first tab",
        {TextFlowBox font-size = 28pt, "1"}
    },
    {TabPane
        label = "- 2 -",
        tab-button-tooltip = "second tab",
        {TextFlowBox font-size = 28pt, "2"}
    },
    {TabPane
        label = "- 3 -",
        tab-button-tooltip = "third tab",
        {TextFlowBox font-size = 28pt, "3"}
    }
}

タブ コンテナの階層

MultiUIControlFrame
∟ BaseTabControl
∟ SingleTabControl
∟ TabContainer
∟ TabAccordion
∟ MultiTabControl
∟ MultiTabAccordion
StandardActiveTraversalContainer
∟ TabPane
Frame — ControlUI
∟ BaseTabControlUI
∟ SingleTabControlUI
∟ TabContainerUI
∟ TabAccordionUI
∟ MultiTabControlUI
∟ MultiTabAccordionUI
ValueChanged
∟ CurrentPaneChanged
GuiEvent
∟ TabPaneShown
∟ TabPaneHidden
Copyright © 1998-2008 Sumisho Computer Systems Corp. All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of Sumisho Computer Systems Corp. that are registered in the United States. Surge Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE) logo are trademarks of Sumisho Computer Systems Corp.