異なるデバイス サイズに対し異なるレイアウトや外観を提供するために使用されるデザイン クラス

祖先 - ブジェクト (PRIM_OBJT)

詳細

デザインは、アプリケーションのサイズ変更時の外観を制御するために使用されます。
 
Layout Managers は、コントロールのサイズを正しく確認するために使用できますが、レイアウトフローとコントロールスタイルの変更を許可するには、追加の機能が必要です。
 
たとえば、大画面ではページは左右の 2 辺として表示されるが、携帯電話では上下に表示されるます。
 
コンテナの Width がそのしきい値に達すると、デザインが実装されます。DesignChanged イベントは、新しいデザインが起動していることを示すために起動します。DesignChanged は再利用可能なすべての部分でも起動し、コードを実行して外観を調整する機会を提供します。
 
すべてのデザインは独立しており、外観の面を設定するために他のデザインに頼るべきではありません。

例

この例では、画面のサイズ変更に伴ってラベルのサイズが変化する簡単なレスポンスデザインを示しています。
 
モバイルデザインは、幅が 320 ピクセルの場合に実装されます。フォントサイズが変更され、新しいレイアウトがページに適用されます。

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(360) Width(737) Layoutmanager(#LayoutMobile) Style(#ApplicationStyle) Designmanager(#Designs)
   Define_Com Class(#PRIM_VS.Style) Name(#ApplicationStyle) Fontsize(36)
 
   Define_Com Class(#PRIM_VS.Style) Name(#Style2) Backgroundbrush(#Brush1)
   Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(219:244:255)
 
   Define_Com Class(#PRIM_VS.Style) Name(#Style3) Backgroundbrush(#Brush2)
   Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush2) Color(232:255:210)
 
   Define_Com Class(#PRIM_DESN) Name(#Designs)
   Define_Com Class(#PRIM_DESN.Design) Name(#Mobile) Designmanager(#Designs) Width(320)
 
   Define_Com Class(#PRIM_TBLO) Name(#LayoutWide)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) Displayposition(1) Parent(#LayoutWide)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column2) Displayposition(2) Parent(#LayoutWide)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) Displayposition(1) Parent(#LayoutWide)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Alignment(TopLeft) Column(#Column1) Flow(Down) Manage(#Height) Parent(#LayoutWide) Row(#Row1)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Alignment(TopLeft) Column(#Column2) Flow(Down) Manage(#Width) Parent(#LayoutWide) Row(#Row1)
 
   Define_Com Class(#PRIM_TBLO) Name(#LayoutMobile)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column3) Displayposition(1) Parent(#LayoutMobile)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) Displayposition(1) Parent(#LayoutMobile)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row3) Displayposition(2) Parent(#LayoutMobile)
   Define_Com Class(#PRIM_TBLO.Item) Name(#HeightItem1) Column(#Column3) Manage(#Height) Parent(#LayoutMobile) Row(#Row2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#WidthItem1) Column(#Column3) Manage(#Width) Parent(#LayoutMobile) Row(#Row3)
 
   Define_Com Class(#PRIM_LABL) Name(#Height) Caption('Height') Displayposition(1) Ellipses(Word) Height(180) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Verticalalignment(Center) Width(737) Alignment(Center) Style(#Style2)
   Define_Com Class(#PRIM_LABL) Name(#Width) Caption('Width') Displayposition(2) Ellipses(Word) Height(180) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(180) Verticalalignment(Center) Width(737) Alignment(Center) Style(#Style3)
 
   Evtroutine Handling(#Com_owner.DesignChanged) Design(#Design)
 
      If (#Design *IsEqualTo #Mobile)
 
         #Com_owner.LayoutManager <= #LayoutMobile
         #ApplicationStyle.FontSize := 22
 
 Endif
 
      If (#Design *Is *null)
 
         #Com_owner.LayoutManager <= #LayoutWide
         #ApplicationStyle.FontSize := 36
 
 Endif
 
 Endroutine
 
   Evtroutine Handling(#Com_owner.SizeChanged)
 
      #Height := "Height " + #Com_owner.Height.asstring
      #Width := "Width " + #Com_owner.Width.asstring
 
 Endroutine
 
 End_Com

ﾌﾟﾛﾊﾟﾃｨ

イベント

参照

すべてのコンポーネント クラス

テクニカルリファレンス

2018 - V14SP1