ナビゲーションのオプションを表示するポップアップ サイドバー

祖先 - パネル (PRIM_PANL) コンテナ (PRIM_CPST) コントロール (PRIM_CTRL) オブジェクト (PRIM_OBJT)

詳細

アプリケーションのドロワーは、一緒に作動する複数のコントロールのまとまりで、一般的なモバイル・アプリケーションのフレームワークを作ります。
 
通常ドロワーは左側に配置され、メニューとして使用されます。小さい画面サイズの場合は必要に応じて開いたり、閉じたりしますが、大きめの画面の場合は常に利用できるようにすることができます。
 
その他のコントロールとしては、次のようなものがあります。
 
アプリケーション タイトルバー: アプリケーションのヘッダーとして使用します。
 
ビューコンテナ: アプリケーション内の複数のビューの管理・整理に使用します。
 
アプリケーション ビュー: アプリケーション機能の表示に使用します。
 
アプリケーション ダイアログ: エディターとして使用します。
 
ナビゲーション ボタン: アプリケーション ドロー上のメニュー アイテムととして利用します。

例

以下は、様々なパーツがやり取りする様子を簡単に示したものです。
 
実際のアプリケーションでは、ビューが再利用可能パーツになります。

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME) LayoutManager(#LayoutMain)
 
   Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
   Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) DisplayPosition(1) Parent(#LayoutMain) Units(Content) Width(220)
   Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn2) DisplayPosition(2) Parent(#LayoutMain)
   Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) DisplayPosition(1) Parent(#LayoutMain) Height(56) Units(Pixels)
   Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) DisplayPosition(2) Parent(#LayoutMain)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Column(#LayoutMainColumn1) Manage(#AppBar) Parent(#LayoutMain) Row(#LayoutMainRow1) ColumnSpan(2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Column(#LayoutMainColumn1) Manage(#AppDrawer) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(FitToHeight)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Column(#LayoutMainColumn2) Manage(#ViewContainer) Parent(#LayoutMain) Row(#LayoutMainRow2)
 
   Define_Com Class(#PRIM_TBLO) Name(#LayoutAppDrawer)
   Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutAppDrawerColumn1) DisplayPosition(1) Parent(#LayoutAppDrawer)
   Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutAppDrawerRow1) DisplayPosition(1) Parent(#LayoutAppDrawer)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutAppDrawerItem1) Alignment(TopCenter) Column(#LayoutAppDrawerColumn1) Flow(Down) Manage(#NavButton1) Parent(#LayoutAppDrawer) Row(#LayoutAppDrawerRow1) Sizing(FitToWidth)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutAppDrawerItem2) Alignment(TopCenter) Column(#LayoutAppDrawerColumn1) Flow(Down) Manage(#NavButton2) Parent(#LayoutAppDrawer) Row(#LayoutAppDrawerRow1) Sizing(FitToWidth)
 
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutAppDrawerItem3) Alignment(TopCenter) Column(#LayoutAppDrawerColumn1) Flow(Down) Manage(#NavButton3) Parent(#LayoutAppDrawer) Row(#LayoutAppDrawerRow1) Sizing(FitToWidth)
 
   Define_Com Class(#PRIM_MD.AppBar) Name(#AppBar) DisplayPosition(1) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Width(1200) ThemeDrawStyle('Heading1') CaptionMarginLeft(15) Caption('TITLE') CaptionMarginBottom(0) CaptionMarginRight(0) CaptionMarginTop(0) Icon('menu')
   Define_Com Class(#PRIM_MD.AppDrawer) Name(#AppDrawer) DisplayPosition(2) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(56) Height(744) LayoutManager(#LayoutAppDrawer) ThemeDrawStyle('MediumTitle') Width(220)
   Define_Com Class(#PRIM_MD.ViewContainer) Name(#ViewContainer) DisplayPosition(3) Left(220) Parent(#COM_OWNER) TabPosition(3) TabStop(False) Top(56) Height(744) Width(980)
 
   Define_Com Class(#PRIM_MD.NavButton) Name(#NavButton1) Caption('View 1') CaptionAlignment(CenterLeft) CaptionMarginLeft(16) DisplayPosition(1) IconMarginLeft(16) Left(0) Parent(#AppDrawer) TabPosition(1) TabStop(False) Top(0) Width(219) Height(48) Icon('view_quilt') Manage(#View1)
   Define_Com Class(#PRIM_MD.NavButton) Name(#NavButton2) Caption('View 2') CaptionAlignment(CenterLeft) CaptionMarginLeft(16) DisplayPosition(2) IconMarginLeft(16) Left(0) Parent(#AppDrawer) TabPosition(3) TabStop(False) Top(48) Width(219) Height(48) Icon('view_quilt') Manage(#View2)
   Define_Com Class(#PRIM_MD.NavButton) Name(#NavButton3) Caption('View 3') CaptionAlignment(CenterLeft) CaptionMarginLeft(16) DisplayPosition(3) IconMarginLeft(16) Left(0) Parent(#AppDrawer) TabPosition(2) TabStop(False) Top(96) Width(219) Height(48) Icon('view_quilt') Manage(#View3)
 
   * Views
   Define_Com Class(#PRIM_View) Name(#View1) Height(744) Parent(#ViewContainer) TabStop(False) Width(980) DisplayPosition(1) TabPosition(1)
   Define_Com Class(#PRIM_View) Name(#View2) Height(744) Left(326) Parent(#ViewContainer) TabStop(False) Width(980) DisplayPosition(2) TabPosition(2)
   Define_Com Class(#PRIM_View) Name(#View3) Height(744) Parent(#ViewContainer) TabStop(False) Width(980) Left(652) DisplayPosition(3) TabPosition(3)
 
   Define_Com Class(#prim_md.Label) Name(#View1Text) Caption('View 1') Parent(#View1) DisplayPosition(1) TabPosition(1)
   Define_Com Class(#prim_md.Label) Name(#View2Text) Caption('View 2') Parent(#View2) DisplayPosition(1) TabPosition(1)
   Define_Com Class(#prim_md.Label) Name(#View3Text) Caption('View 3') Parent(#View3) DisplayPosition(1) TabPosition(1)
 
   Evtroutine Handling(#AppBar.IconClick)
 
      #AppDrawer.ToggleDrawer
 
   Endroutine
 
   Evtroutine Handling(#Sys_Web.DeviceChanged)
 
      If (#Sys_Web.Device = Mobile)
 
         #AppDrawer.DrawerStyle := SlideInLeft
 
      Else
 
         #AppDrawer.DrawerStyle := Permanent
 
      Endif
 
Endroutine
 
End_Com

ﾌﾟﾛﾊﾟﾃｨ

イベント

ﾒｿｯﾄﾞ

参照

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

テクニカルリファレンス

EPC142030 February 2019