オブジェクト

Q1
JavaScriptのような、オブジェクトの折りたたみ機能を実現したい

A1
[解決方法]
カテゴリ(項目)ごとにデータをまとめ、カテゴリ配下のデータの表示/非表示を切り替えさせる事で折りたたみを行ったような表示が実現可能です。
例えば、表示切り替えを行いたいデータをForm配下に配置し、ボタンのTouchイベントでFormの高さ(Height)の切り替えを行います。
高さ(Height)を「0」とする事で、折りたたまれたような動作を表現します。
また、各オブジェクトの配置位置(x,y)に参照演算子(&=)を用い、配置位置(x,y)を相対的な物とする事で、 折りたたみ発生時の表示位置の調整を行います。

[サンプルコード1]
[サンプルソース]
/* 折りたたみ処理用ボタン */
Button Button1 {
  X = 8;
  Y = 137;
  Width = 38;
  Height = 20;
  Title = "-";
  FontFace = $BOLD;
  Function OnTouch( e ) {
    /* Formの高さを調整し、Formの表示/非表示、
    ボタンの+/-表示を切り替 */ 
    if (^.Form1.Height == 0){
      /* 高さが「0」の場合「-」を表示 */
      Button1.Title = "-";
      /* 高さを再設定してForm1及びフォーム配下のオブジェクトを表示*/
      ^.Form1.Height = 200;
    }else{
      /* 高さが「0」以外の場合「+」を表示 */
      Button1.Title = "+";
      /* 高さを再設定してForm1及びフォーム配下のオブジェクトを非表示*/
      ^.Form1.Height = 0;
    }
  }
}

Label Label1 {
  X = 51;
  Y = 138;
  Width = 370;
  Height = 20;
  Value = "アクシス商事株式会社";
  FontSize = 12;
  HorizontalAlign = $STD;
  VerticalAlign = $CENTER;
  BgColor = $99FFFF;
}

/* 折り対象のForm1 */
Form Form1 {
  X = 43;
  Y = 170;
  Width = 395;
  Height = 203;
  
  Label Label1 {
    X = 35;
    Y = 8;
    Width = 62;
    Height = 20;
    FgColor = $STD;
    BgColor = 18;
    Value = "住所";
    HorizontalAlign = $STD;
    VerticalAlign = $CENTER;
  }
  TextBox TextBox1 {
    X = 100;
    Y = 8;
    Width = 270;
    Height = 20;
    Value = "東京都新宿区新宿1-1";
  }
  Label Label2 {
    X = 35;
    Y = 40;
    Width = 62;
    Height = 20;
    FgColor = $STD;
    BgColor = 18;
    Value = "電話番号";
    HorizontalAlign = $STD;
    VerticalAlign = $CENTER;
  }
  MaskEdit MaskEdit1 {
    X = 100;
    Y = 40;
    Width = 111;
    Height = 20;
    IMEMode = $CLOSE;
    InputMode = $NUMERIC;
    Mask = "00-0000-0000";
    FontFace = $FIXED;
    AutoTab = $TRUE;
    VerticalAlign = $BOTTOM;
    Value = "0123456789";
  }
  Label Label3 {
    X = 35;
    Y = 71;
    Width = 62;
    Height = 20;
    FgColor = $STD;
    BgColor = 18;
    Value = "利用環境";
    HorizontalAlign = $STD;
    VerticalAlign = $CENTER;
  }
  PulldownList PulldownList1 {
    X = 100;
    Y = 71;
    Width = 195;
    Height = 65;
    PulldownItem PulldownItem1[3];
  }
  
  Label Label4 {
    X = 35;
    Y = 105;
    Width = 62;
    Height = 20;
    FgColor = $STD;
    BgColor = 18;
    Value = "備考";
    HorizontalAlign = $STD;
    VerticalAlign = $CENTER;
  }
  
  EditBox EditBox1 {
    X = 100;
    Y = 105;
    Width = 269;
    Height = 90;
    Value = "Biz/Browser Vへバージョンアップ予定。";
    Value +=  "\r\nBiz/Browser AIの利用も検討されている。";
  }
}

Button Button2 {
  /* 参照演算子を用いて、表示位置の調整を行います */
  X = 8;
  /* ★ポイント★
   * 参照演算子(&=)を用い、Formの表示/非表示が
   *  切り替った際に配置位置(y)を調整します。
   */
  Y &= ^.Form1.Y +^.Form1.Height + 5;
  
  Width = 38;
  Height = 20;
  Title = "-";
  FontFace = $BOLD;
  
  Function OnTouch( e ) {
    /* Formの高さを調整し、Formの表示/非表示、
    ボタンの+/-表示を切り替 */ 
    if (^.Form2.Height == 0){
      /* 高さが「0」の場合「-」を表示 */
      Button2.Title = "-";
      /* 高さを再設定してForm2及びフォーム配下の
         オブジェクトを表示*/
      ^.Form2.Height = 200;
    }else{
      /* 高さが「0」以外の場合「+」を表示 */
      Button2.Title = "+";
      /* 高さを再設定してForm2及びフォーム配下の
         オブジェクトを非表示*/
      ^.Form2.Height = 0;
    }
  }
}
Label Label2 {
  X = 51;
  /* ★ポイント★
   * 参照演算子(&=)を用い、Formの表示/非表示が
   *  切り替った際に配置位置(y)を調整します。
   */
  Y &= ^.Form1.Y + ^.Form1.Height + 5;
  
  Width = 370;
  Height = 20;
  Value = "株式会社Biz";
  FontSize = 12;
  HorizontalAlign = $STD;
  VerticalAlign = $CENTER;
  BgColor = $99FFFF;
}

/* 折り対象のForm2 */
Form Form2 {
  X = 43;
  /* ★ポイント★
   * 参照演算子(&=)を用い、Formの表示/非表示が
   *  切り替った際に配置位置(y)を調整します。     
   */
  Y &= ^.Label2.Y + ^.Label2.Height + 5;
  Width = 395;
  Height = 204;
  
  Label Label1 {
    X = 35;
    Y = 12;
    Width = 62;
    Height = 20;
    FgColor = $STD;
    BgColor = 18;
    Value = "住所";
    HorizontalAlign = $STD;
    VerticalAlign = $CENTER;
  }
  TextBox TextBox1 {
    X = 100;
    Y = 12;
    Width = 270;
    Height = 20;
    Value = "東京都渋谷区渋谷100";
  }
・・・・(略)
}

CRSファイル形式のサンプル
  「JavaScriptのような、オブジェクトの折りたたみ機能を実現したい (Obj_007.zip)
で実際の動作をご確認いただけます。


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