Form¶

Object
- DisplayObject
  - ContainerObject
    - LayoutContainerObject
      - Form

フォームを表示するクラスです。

フォームの下位には別のオブジェクトを配置して管理します。下位のオブジェクトは自分が所属する親Formオブジェクトの領域を超えて表示されることはなく、親Formオブジェクトの大きさでクリッピングされます。

スケーリング時の注意点¶

自身は上位のFormオブジェクトのスケーリング値によりスケーリングされます。
下位のオブジェクトは上位のFormオブジェクトのスケーリング値に自身のスケーリング値を乗じた値でスケーリングされます。

ジェスチャ操作について¶

Biz/Browserでは、FormクラスのuseGestureプロパティおよびGestureイベントを利用して、タッチ操作によるジェスチャをイベントとして取得できます。

捕捉できるジェスチャの種類¶

Formクラスでは、下記のジェスチャを捕捉することができます。

フリック操作

フリック操作とは、画面上で一本の指を弾くように素早く動かしながら指を離す操作のことを指します。

主に画面の切り替えやフリック入力式のソフトウェアキーボードなどで使用されており、主にフリック方向の情報を用いて処理を行います。

スワイプ操作

スワイプ操作とは、画面上に一本の指をおいたまま指を動かす操作を指します。

主に画面のスクロール処理やアイテムの移動操作などで使用されており、指を動かす度に発生するイベントにて処理を行います。

ピンチ操作

ピンチ操作とは、画面上に二本の指を置き、二本の指の間隔を狭めたり広げたりする操作を指します。
指の間隔を狭める操作のことをピンチイン、広げる操作のことをピンチアウトといいます。
主に画面の拡大縮小操作などで使用されており、指を動かす度に発生するイベントにて処理を行います。

上位Formへのジェスチャ操作の転送¶

useGestureプロパティへフリック操作、スワイプ操作を指定しない場合、ジェスチャは上位Formへ転送されます。
これによりジェスチャを行っているFormより上位に位置するFormをスワイプによりスクロールさせることができます。
useGestureプロパティにてフリックまたはスワイプ操作を補足中の場合、スワイプ操作による上位Formのスクロールは行えません。

ジェスチャ操作の従来のマウスイベントへのマッピング¶

以下のジェスチャ操作は従来のマウスイベントへマッピングされます。

タップ操作

Clicked、LButtonUpイベントに対応

ダブルタップ操作

DoubleClickedイベントに対応

ロングタップ操作

RClicked、RButtonUpイベントに対応

ジェスチャ操作をハンドリングしなかった場合¶

useGestureプロパティでジェスチャをハンドリングしなかった場合に下記のイベントが発生します。

スワイプ操作

MouseMoveイベント

ピンチ操作

MouseWheelイベント

スケーリング動作について¶

Biz/Browserは、FormクラスにあるhorizontalScale、verticalScale、fontScaleプロパティを利用して擬似的な拡大縮小(スケーリング)および縦横比の変更を行うことが可能です。

この章ではスケーリング動作における注意点を記載します。

スケーリングの実行原理¶

horizontalScale、verticalScale、fontScaleプロパティを利用すると各オブジェクトの縦横およびフォントサイズの拡大縮小を行うことができます。これは配下のオブジェクトのプロパティを直接変化させないため、論理的なサイズで画面設計を行い、適宜ディスプレイサイズにマッチングさせるような実装が可能です。

また、フォントサイズも動的にスケーリングさせることが可能になり、あたかも拡大縮小するように振る舞わせることが可能です。フォントサイズはオブジェクトのサイズと独立して拡大縮小率を設定できるため、画面の拡大比率よりやや小さめにするなど、細かな調整が可能です。

下記のようなCRSを実行すると、Biz/Browserのウィンドウサイズから各スケーリング倍率を自動的に調整するようになります。

Form frmMain {
    x = 0;
    y = 0;
    width &= //.width;
    height &= //.height;
    horizontalScale &= //.width / 600;
    verticalScale &= //.height / 400;
    fontScale &= //.width / 600;

    Button btnExit {
        x = 50;
        y = 50;
        width = 100;
        height = 60;
    }
    TextBox txtInput {
        x = 200;
        y = 50;
        width = 200;
        height = 50;
    }
}