You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

View Container (PRIM_MD.ViewContainer)
View collector used to organise views within an application
Ancestors - Container (PRIM_CPST)Control (PRIM_CTRL)Object (PRIM_OBJT)

Details


View Container is one of a set of controls designed to work together to build a typical mobile application framework.
A View Container typically occupies the bulk of the available screen space, resizing as required.
The other controls are -
Application title bar which is used to as the header of the application
Application Draw which is used to present the application menu
Application View used to present the application functionality
Application Dialog used as an editor
Navigation Button used as a menu item on the Application Draw

Example


This is a simpified example showing how the various parts interact.
In a real world application, the Views would be reusable parts.
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)

  • No labels