デザイン (PRIM_DESN.Design)

祖先 - オブジェクト (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

プロパティ

イベント

参照

すべてのコンポーネント クラス
テクニカルリファレンス