TabFrameのタブ切り替え操作時の注意事項

CRS - コンテナ

TabFrameのタブ切り替え操作時の注意事項

タブ切り替えの処理は、TabFrameオブジェクトのChangeイベントで実装してください。
ChangeイベントはuseChangeプロパティをtrueに設定することで有効となります。

タブ切り替え時に発生するイベントは、Changeイベントの他Clickedイベントがありますがこちらは利用しないでください。
Clickedイベントでvalue値を参照しようとすると、イベントが発生するタイミングとvalueプロパティが変化するタイミングに差があり、クリックしたタブとvalueプロパティの値が異なる場合があります。
また、Clickedイベントでの実装はClickedイベントがタブ切り替えをしないマウスクリックでも発生し、不必要な処理が実行される可能性があります。

その他、タブの選択位置を取得する際の処理にも注意が必要です。
タブの選択位置を取得する場合、TabFrameオブジェクトで発生したイベントでTabFormオブジェクトのselectedプロパティの値を取得しないでください。

例えば、TabFrameオブジェクトで発生したChangeイベントでselectedプロパティを参照しようとすると、イベントが発生するタイミングとselectedプロパティが変化するタイミングに差があり、異なる値が取得される可能性があります。

Form form1 {
    width = 800;
    height = 600;
    
    TabFrame TabFrame1 {
        x = 32;
        y = 56;
        width = 600;
        height = 200;
        tabWidth = 200;
        /* Changeイベントを有効にする */
        useChange = true;
        
        TabForm TabForm1 {
            title = "タブ1";
            
            Label label1 {
                x = 16;
                y = 8;
                width = 243;
                height = 18;
                bgColor = Color.WHITE;
                value = "タブ2のフォーム背景色、タブ背景色選択";
            }
            
            OptionButton OptionButton1 {
                x = 16;
                y = 30;
                width = 243;
                height = 84;
                bgColor = Color.WHITE;
                OptionItem OptionItem1[3] {
                    height = 25;
                    width = 90;
                }
                OptionItem1[0].title = "青色";
                OptionItem1[0].value = 0;
                OptionItem1[1].title = "赤色";
                OptionItem1[1].value = 1;
                OptionItem1[2].title = "紫色";
                OptionItem1[2].value = 2;
                
                /* 初回選択位置 */
                value = 0;
            }
        }
        
        TabForm TabForm2 {
            title = "タブ2";
			bgColor = Color.BLUE;
            tabBgColor = Color.BLUE;
			tabFgColor = Color.WHITE;
            
            CheckBox CheckBox1 {
                x = 16;
                y = 30;
                width = 280;
                height = 35;
                bgColor = Color.WHITE;
                CheckItem CheckItem1[1] {
                    height = 30;
                    width = 245;
                    title = "タブ3への切り替えを許可";
                }
            }
        }
        
        TabForm TabForm3 {
            title = "タブ3";
            bgColor = Color.GREEN;
            tabBgColor = Color.GREEN;
        }
        
        function onChange(e) {
            switch(e.from.value) {
                case 0:
                    break;
                case 1:
                    /* 選択内容によって、フォーム背景色、タブ背景色の設定を変える */
                    if(this.TabForm1.OptionButton1.value == 0){
                        this.TabForm2.bgColor = Color.BLUE;
                        this.TabForm2.tabBgColor = Color.BLUE;
                    }else if(this.TabForm1.OptionButton1.value == 1){
                        this.TabForm2.bgColor = Color.RED;
                        this.TabForm2.tabBgColor = Color.RED;
                    }else{
                        this.TabForm2.bgColor = Color.MAGENTA;
                        this.TabForm2.tabBgColor = Color.MAGENTA;
                    }
                    break;
                case 2:
                    /* タブ2のタブ切り替えチェックがある場合だけ切り替えを行う */
                    if( this.TabForm2.CheckBox1.CheckItem1[0].selected == false){
                        //.messageBox( "タブ3に切り替えることはできません。\nタブ2の『タブ3への切り替えを許可』をチェックしてください。" );
                        value = 1;
                    }
                    break;
            }
        }
    }
}


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser DT・Biz/Designer DT TIPS集トップへ