Application Bar (PRIM_MD.AppBar)

Application title bar

Ancestors - Panel (PRIM_PANL) Container (PRIM_CPST) Control (PRIM_CTRL) Object (PRIM_OBJT)

Details

Application title bar is one of a set of controls designed to work together to build a typical mobile application framework.
 
The title bar is tyically positioned at the top, showing a hamburger menu icon, title and other features such as a search box.
 
The other controls are -
 
Application Draw which is used to present the application menu
 
View Container used to manage and organize the views in an application
 
Application View used to present the application functionality
 
Application Dialog used as an editor
 
Menu 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)
 
   * 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

Properties

NameDescription
BusyUpdatesBusyUpdates specifies how the control updates itself Inherited from Control (PRIM_CTRL)
BusyUpdatesOfParentBusyUpdatesOfParent specifies whether the parent controls updates Inherited from Control (PRIM_CTRL)
CanFocusCanFocus returns a value indicating whether the control can receive keyboard focus Inherited from Control (PRIM_CTRL)
CaptionText to be displayed within the title bar
CaptionAlignmentPosition of the caption within the control
CaptionMarginBottomBottom margin in pixels
CaptionMarginLeftLeft margin in pixels
CaptionMarginRightRight margin in pixels
CaptionMarginTopTop margin in pixels
ComponentClassNameComponentClassName is the name of the component's class. Inherited from Object (PRIM_OBJT)
ComponentControlsComponentControls is a collection of all the controls contained in this component. Inherited from Container (PRIM_CPST)
ComponentMembersComponentMembers provides access to all the member components of this component Inherited from Object (PRIM_OBJT)
ComponentPatternNameComponentPatternName is used to qualify the class of the component. Inherited from Object (PRIM_OBJT)
ComponentTagGeneric space allowing a value to be stored for the instance Inherited from Object (PRIM_OBJT)
ComponentTypeComponentType gives you access to the type information about the component Inherited from Object (PRIM_OBJT)
ComponentTypeNameComponentTypeName is the fully qualified name of the component's class. Inherited from Object (PRIM_OBJT)
CursorCursor sets the cursor image Inherited from Control (PRIM_CTRL)
DesignManagerReference to a Design Manager instance for this panel Inherited from Panel (PRIM_PANL)
DisableNoScrollDisableNoScroll controls whether scroll bars are displayed. Inherited from Panel (PRIM_PANL)
DisplayPositionDisplayPosition determines the order in which components are shown Inherited from Control (PRIM_CTRL)
DragStyleDragStyle determines how a component can be dragged Inherited from Control (PRIM_CTRL)
EnableChildrenEnableChildren specifies if the parent sets the Enabled property of child components Inherited from Container (PRIM_CPST)
EnabledEnable activates/deactivates the component Inherited from Control (PRIM_CTRL)
FixedPositionFix the control position so that it does not move if the parent is scrolled Inherited from Control (PRIM_CTRL)
FocusFocus tells whether the component has focus Inherited from Control (PRIM_CTRL)
FocusedStyleReference to a style to be applied when the control is focus Inherited from Control (PRIM_CTRL)
FocusedStylesCollection of styles to be applied when the control is focus Inherited from Control (PRIM_CTRL)
HandleReturns the Windows handle in desktop applications Inherited from Control (PRIM_CTRL)
HeightThe height of the control in pixels Inherited from Control (PRIM_CTRL)
HintCaption displayed when the mouse hovers over the control Inherited from Control (PRIM_CTRL)
HintPopupHintPopup allows a PopupPanel instance to be used instead of the default hint text box Inherited from Control (PRIM_CTRL)
HintShowEnabled or disable the appearance of hints Inherited from Control (PRIM_CTRL)
HintShowOfParentDelegate hints appearance to the parent control Inherited from Control (PRIM_CTRL)
HintTitleHintTitle defines the text shown at the top of the hint window in emphasized text Inherited from Control (PRIM_CTRL)
HorizontalScrollShow the horizontal scroll bar Inherited from Panel (PRIM_PANL)
HorizontalScrollIncHorizontalScrollInc specifies the pixel increment for horizontal scroll bar. Inherited from Panel (PRIM_PANL)
HorizontalScrollPosHorizontalScrollPos sets the position of the horizontal scroll bar Inherited from Panel (PRIM_PANL)
HorizontalScrollRemainderSpecifies the pixels remaining to the right of the current scroll position Inherited from Panel (PRIM_PANL)
IconImage displayed within the application bar
IconAlignmentPosition of the icon within the control
IconColorColor to be applied to the icon
IconFileNameFileName is the name of image file
IconHeightHeight of the icon in pixels
IconImageMaterial design image to show on the control
IconImageSizingSpecifies the sizing behaviour of the IconImage
IconKindSpecifies how opacity is applied to the icon
IconMarginBottomBottom margin in pixels
IconMarginLeftLeft margin in pixels
IconMarginRightRight margin in pixels
IconMarginTopTop margin in pixels
IconOpacityPercentage opacity of the icon
ImageRepository enrolled image to show in the control Inherited from Panel (PRIM_PANL)
ImageAlignmentPosition of the image within the panel Inherited from Panel (PRIM_PANL)
IsAnimatingIsAnimating indicates that a control is currently being animated Inherited from Control (PRIM_CTRL)
IsRealizedTrue if the control is currently realized Inherited from Control (PRIM_CTRL)
LayoutManagerReference to a layout manager used to control the position of child controls Inherited from Panel (PRIM_PANL)
LeftPosition of the control relative to the left boundary of its parent Inherited from Control (PRIM_CTRL)
ModifiedModified indicates that the contents of the component have changed Inherited from Control (PRIM_CTRL)
MouseOverMouseOver determines whether the mouse is directly over a control Inherited from Control (PRIM_CTRL)
MouseOverPartTrue if the cursor is within the bounds of a child component Inherited from Container (PRIM_CPST)
MouseOverStyleMouseOverStyle defines the style to be applied to a control when the mouse is over it Inherited from Control (PRIM_CTRL)
MouseOverStylesMouseOverStyles is a collection of styles to be applied to a control when the mouse is over it Inherited from Control (PRIM_CTRL)
NameName identifies the component Inherited from Object (PRIM_OBJT)
OpacityOpacity denotes the appearance of a control in terms of its interaction with its background Inherited from Control (PRIM_CTRL)
OwnerOwner owns this component Inherited from Object (PRIM_OBJT)
ParentReference to the control in which this control is visually positioned Inherited from Control (PRIM_CTRL)
PopupPopup allows a PopupPanel instance to be used instead of the typical right click popup menu Inherited from Control (PRIM_CTRL)
PopupMenuReference to a PopupMenu to be shown on a right click Inherited from Control (PRIM_CTRL)
PrivateStyleStyle applied to the control but not inherited by child controls Inherited from Container (PRIM_CPST)
PrivateStylesCollection of styles applied to the control but not inherited by child controls Inherited from Container (PRIM_CPST)
RenderStyleRender content as DirectX or defer to the parent control Inherited from Panel (PRIM_PANL)
RotationRotation allows a control to rotate a number of degrees about a given origin Inherited from Control (PRIM_CTRL)
RotationOriginLeftRotationOriginLeft defines the left coordinate of an imaginary point around which a control will rotate Inherited from Control (PRIM_CTRL)
RotationOriginTopRotationOriginTop defines the top coordinate of an imaginary point around which a control will rotate Inherited from Control (PRIM_CTRL)
ScaleHeightScaleHeight is the percentage of the height to use in the visual appearance of a control Inherited from Control (PRIM_CTRL)
ScaleOriginLeftScaleOriginLeft defines the left coordinate of an imaginary point from which a control will scale Inherited from Control (PRIM_CTRL)
ScaleOriginTopScaleOriginTop defines the top coordinate of an imaginary point from which a control will scale Inherited from Control (PRIM_CTRL)
ScaleWidthScaleWidth is the percentage of the width to use in the visual appearance of a control Inherited from Control (PRIM_CTRL)
ScreenLeftScreenLeft sets the distance from the left of the screen Inherited from Control (PRIM_CTRL)
ScreenTopScreenTop sets the distance from the top of the screen Inherited from Control (PRIM_CTRL)
ScrollLeftLeft position of a horizontally scrolled child control relative to its parent control Inherited from Control (PRIM_CTRL)
ScrollTopTop position of a vertically scrolled child control relative to its parent control Inherited from Control (PRIM_CTRL)
SkewLeftSkewLeft defines the angle at which to skew the control horizontally Inherited from Control (PRIM_CTRL)
SkewOriginLeftSkewOriginLeft defines the left coordinate of an imaginary point from which a control will skew Inherited from Control (PRIM_CTRL)
SkewOriginTopSkewOriginTop defines the top coordinate of an imaginary point from which a control will skew Inherited from Control (PRIM_CTRL)
SkewTopSkewTop defines the angle at which to skew the control vertically Inherited from Control (PRIM_CTRL)
StyleStyle defines the style to be applied to a control Inherited from Control (PRIM_CTRL)
StylesCollection of styles to be applied to the control Inherited from Control (PRIM_CTRL)
TabPositionTabPosition sets the order of focus when the Tab key is used Inherited from Control (PRIM_CTRL)
TabStopSet to false to stop focus being given to the control via the Tab key Inherited from Control (PRIM_CTRL)
ThemeBackgroundThemed background for Material Design themed applications Inherited from Panel (PRIM_PANL)
ThemeDrawStyleName of the Theme DrawStyle to be applied to the panel Inherited from Panel (PRIM_PANL)
ThemeStyleSpecifies how theme usage is determined Inherited from Panel (PRIM_PANL)
TopPosition of the control relative to the top boundary of its parent Inherited from Control (PRIM_CTRL)
TouchMoveDetermines how the control will respond to touch move processing Inherited from Control (PRIM_CTRL)
TouchRotateDetermines how the control will respond to touch rotation Inherited from Control (PRIM_CTRL)
TouchScaleDetermines how the control will respond to touch scaling Inherited from Control (PRIM_CTRL)
TouchSizeDetermines whether a control can be resized Inherited from Control (PRIM_CTRL)
VerticalScrollShow the vertical scroll bar Inherited from Panel (PRIM_PANL)
VerticalScrollIncVerticalScrollInc specifies the pixel increment for vertical scroll bar. Inherited from Panel (PRIM_PANL)
VerticalScrollPosVerticalScrollPos sets the position of the vertical scroll bar Inherited from Panel (PRIM_PANL)
VerticalScrollRemainderSpecifies the pixels left to the botom from the current scroll position Inherited from Panel (PRIM_PANL)
VisibleShow or hide the control Inherited from Control (PRIM_CTRL)
VisualStyleVisualStyle sets the appearance Inherited from Control (PRIM_CTRL)
VisualStyleOfParentAdopt the Visual style from the parent control Inherited from Control (PRIM_CTRL)
WidthWidth of the component in pixels Inherited from Control (PRIM_CTRL)

Events

NameDescription
AnimationEndedFired when an animation is ended Inherited from Control (PRIM_CTRL)
Cancelled
ClickFired when the mouse is clicked on the control Inherited from Control (PRIM_CTRL)
Origin, Handled
CreateInstanceCreateInstance is signalled when an instance of a component is created Inherited from Control (PRIM_CTRL)
DesignChangedFired when the a design is activated Inherited from Control (PRIM_CTRL)
Design, DesignManager
DestroyInstanceDestroyInstance is signalled when an instance of a component is about to be destroyed Inherited from Control (PRIM_CTRL)
DoubleClickFired when the user double clicks Inherited from Control (PRIM_CTRL)
Origin, Handled
DragDropFired on mouse up to signify the end of a drag process Inherited from Control (PRIM_CTRL)
PosX, PosY, Source, Payload, AggregatedSource, Origin, Handled, DragResult
DragOverFired during the drag and drop process when the cursor moves over the control Inherited from Control (PRIM_CTRL)
PosX, PosY, Source, Payload, DragState, AcceptDrop, DragCursor, ShowDropHilight, AggregatedSource, Origin, Handled
EndDragFired when the drag and drop process has completed Inherited from Control (PRIM_CTRL)
Source, Payload, DragResult, AggregatedSource, Origin, Handled
EnterFired when the Enter key is pressed Inherited from Control (PRIM_CTRL)
KeyCode, Char, IsAltDown, IsControlDown, IsShiftDown, Handled
IconClickFired when the icon is clicked
Origin, Handled
InitializeFired after a component has been realized for the first time Inherited from Control (PRIM_CTRL)
KeyPressFired when a key is pressed on the keyboard Inherited from Control (PRIM_CTRL)
KeyCode, Char, IsAltDown, IsControlDown, IsShiftDown, Handled
MouseEnterThe mouse has entered the bounds of the control Inherited from Control (PRIM_CTRL)
MouseHoverThe mouse has hovered over the control Inherited from Control (PRIM_CTRL)
Origin, Handled
MouseLeaveThe mouse has left the bounds of the control Inherited from Control (PRIM_CTRL)
ScrollChangedFired when the scrollbars in a composite control are moved Inherited from Control (PRIM_CTRL)
Orientation
SizeChangedFired when the size of the panel is changed Inherited from Control (PRIM_CTRL)
StartDragFired when the user starts a drag and drop process Inherited from Control (PRIM_CTRL)
Source, Payload, Continue, DragList, AggregatedSource, Origin, Handled
TouchChangeFired repeatedly between the TouchStart and TouchEnd boundaries to provide details of the touch events Inherited from Control (PRIM_CTRL)
MoveLeft, MoveTop, ScaleWidth, ScaleHeight, Rotation, Continue
TouchEndFired when the user stops touching the screen Inherited from Control (PRIM_CTRL)
TouchStartFired when the user first makes physical contact with the screen Inherited from Control (PRIM_CTRL)
Origin, TouchMove, TouchRotate, TouchScale, TouchSize

Methods

NameDescription
FadeInAnimate from invisible to visible Inherited from Control (PRIM_CTRL)
Duration, Delay
FadeOutAnimate from visible to invisible Inherited from Control (PRIM_CTRL)
Duration, Delay, Visible
HorizontalScrollToSet the horizontal scroll position using a child control Inherited from Panel (PRIM_PANL)
Control, ScrollPosition
MoveFromMove a control from the specified position to the current position Inherited from Control (PRIM_CTRL)
Left, Top, Duration, Delay
MoveToAnimate a move from the specified number of pixels Inherited from Control (PRIM_CTRL)
Left, Top, Duration, Delay
RealizeCreates the visual portion of dynamically created controls Inherited from Control (PRIM_CTRL)
ScaleAnimate a change of scale Inherited from Control (PRIM_CTRL)
ScaleWidth, ScaleHeight, Duration, Delay
SetFocusSets the control to be the focus control Inherited from Control (PRIM_CTRL)
ShowMessagesLANSA Internal Use Inherited from Control (PRIM_CTRL)
TransitionAnimate the change from one control to another Inherited from Container (PRIM_CPST)
From, To, TransitionType, Duration, Delay
UnrealizeDestroys the visual portion of dynamically created controls Inherited from Control (PRIM_CTRL)
UpdateDisplayUpdateDisplay updates the display immediately Inherited from Control (PRIM_CTRL)
VerticalScrollToSet the vertical scroll position using a child control Inherited from Panel (PRIM_PANL)
Control, ScrollPosition

See also

All Component Classes

Technical Reference

V14SP2 April 2018