FlexView

Q12 34

FlexViewの列数(FlexItemオブジェクト)を動的に変更したい 
[内容]
FlexViewの列数を条件によって変更するにはどうすればよいか

A12 34
FlexViewの列数を条件によって変更する方法としては、以下のような方法があります。

【方法A】
  表示する最大数で列を作成し、列(FlexItemオブジェクト)のWidthプロパティの値を変更して動的に列数を変更しているように実装する。

[例]
A・B・C列のうち、C列のWidthプロパティを「0」に設定してA・B列だけが表示されているように表示する。

[サンプルコード1]
FlexView FlexView1 {
    X = 30;
    Y = 40;
    Width = 304;
    Height = 125;
    FlexRecord FlexRecord1 {
      FlexLabel FlexLabel1 {
        Title = "A";
      }
      FlexLabel FlexLabel2 {
        Title = "B";
      }
      FlexLabel FlexLabel3 {
        Title = "C";
      }
    }
    InsertRow(5);
  }
  Button Button1 {
    X = 194;
    Y = 186;
    Width = 138;
    Height = 32;
    Title = "C列を表示/非表示";
    
    Function OnTouch( e ) {
      /* C列のWidthを取得 */
      var cWidth = Form1.FlexView1.FlexRecord1.FlexLabel3.Width;
      
      if(cWidth > 0){
        /* C列の幅を「0」にして非表示 */
        Form1.FlexView1.FlexRecord1.FlexLabel3.Width = 0;
        /* 非表示にした列分、FlexViewの幅を調整 */
        Form1.FlexView1.Width = Form1.FlexView1.Width - cWidth;
      }else{
        /* C列の幅を表示 */
        Form1.FlexView1.FlexRecord1.FlexLabel3.Width = 100;
        /* 表示にした列分、FlexViewの幅を調整 */
        Form1.FlexView1.Width = Form1.FlexView1.Width + 100;
      }
    }
  }

【方法B】
  動的にFlexView全体の定義内容を変化させる。(FlexViewの再生成を行う)

[サンプルコード2]
Form Flex_034_2 {
 Width = 433;
 Height = 399; 
 TextBox:Number TextBox1 {
  X = 111;
  Y = 155;
  Width = 89;
  Height = 29;
  VerticalAlign = $STD;
  Value = 3;
 }
 Button Button1 {
  X = 199;
  Y = 154;
  Width = 135;
  Height = 30;
  Title = "FlexView生成";
  
  Function OnTouch( e ) {
   var c = ^.TextBox1;
   if( c <= 0 || 5 < c ) {
    /* 列数のチェック */
    MessageBox("1〜5を入れてください");
    return;
   }
   Flex_034_2 {
    FlexView FlexView1 {
     X = 56;
     Y = 215;
     Width = 300;
     Height = 150;
     
     if(c < 4 ){
      /* 表示が3列以下の場合は、FlexViewの幅を調整 */
      Width = 100 * c;
     }
     FlexRecord FlexRecord1 {
      /* 指定された列数のオブジェクトを生成 */
      if( c > 0 ) FlexLabel FlexLabel1{Title = "A";}
      if( c > 1 ) FlexLabel FlexLabel2{Title = "B";}
      if( c > 2 ) FlexLabel FlexLabel3{Title = "C";}
      if( c > 3 ) FlexLabel FlexLabel4{Title = "D";}
      if( c > 4 ) FlexLabel FlexLabel5{Title = "E";}
     }
     InsertRow(5);
    }
   }
  }
 }
}

上記A、Bどちらの方法でも実装は可能ですが、
 方法Aの場合は、非表示列にもカーソルが当たってしまうので、カーソルの制御が必要
 方法Bの場合は、スクリプトが複雑化しやすい
といった点があります。
ぞれぞれ動作を確認し、開発するアプリケーションに沿う手法をご選択ください。

実際の挙動については、CRSファイル形式のサンプル
   「FlexViewの列数(FlexItemオブジェクト)を動的に変更したい(Flx_034.zip)」
をご確認ください。

管理番号:Flx_034
  Biz-Collections Bizの宝箱 トップへ
  Biz/Browser・Biz/Designer TIPS集 トップへ