Page 1 of 1

Hint property on a control in a Material Design List - #PRIM_MD.ListIcon (SOLVED)

Posted: Fri Jul 09, 2021 3:35 am
by gerryc
Hi all,

I'm trying to add a hint to an icon in a material design list row, but not succeeding!
I can display a hint on an icon that is not in a list, but icons (and labels too) in a material design list do not seem to display a hint.
The hint property on the #PRIM_MD.List does work, just can't work out how to apply it to a control within the list.
Screenshot 2021-07-08 183147.jpg
Screenshot 2021-07-08 183147.jpg (36.6 KiB) Viewed 3717 times
Here's a sample web page:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) DisplayPosition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) DisplayPosition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListIcon) MarginLeft(20) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(None)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem2) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListPrimaryText) MarginLeft(100) MarginRight(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem3) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListSecondaryText) MarginLeft(100) MarginRight(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem4) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListTertiaryText) MarginLeft(100) MarginRight(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_MD.List) Name(#List) DisplayPosition(1) LayoutManager(#LayoutList) Left(16) Parent(#COM_OWNER) RowHeight(100) TabPosition(1) ThemeDrawStyle('Card') Top(40) Width(817) HintShowOfParent(False) HintShow(False)
Define_Com Class(#PRIM_MD.ListIcon) Name(#ListIcon) DisplayPosition(1) Height(60) Icon('accessible') IconImageSizing(Cropped) Left(20) Parent(#List) TabPosition(1) ThemeDrawStyle('MediumTitle+Rounded') Top(20) Width(60) Hint('Icon in a list') HintShowOfParent(False)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Name') DisplayPosition(3) Height(20) Left(100) Parent(#List) TabPosition(3) Top(21) Width(683) Hint('Some text')
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListSecondaryText) Caption('Secondary Text') DisplayPosition(4) Height(20) Left(100) Parent(#List) TabPosition(4) Top(41) Width(683)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListTertiaryText) Caption('Tertiary Text') DisplayPosition(5) Height(18) Left(100) Parent(#List) TabPosition(5) ThemeDrawStyle('Subheading+ForegroundSecondary') Top(61) Width(683)
Define_Com Class(#PRIM_MD.Icon) Name(#Icon) DisplayPosition(2) Icon('accessible') Left(877) Parent(#COM_OWNER) TabPosition(2) Top(54) Hint('This is an accessible icon....not in a list') Height(67) Width(84) IconHeight(48)

Evtroutine Handling(#Com_owner.Initialize)

Clr_List Named(#List)

Begin_Loop Using(#STD_INT) To(10)

#ListPrimaryText := ('Primary Text line &1').TrimSubstitute( #Std_Int.AsString )
#ListSecondaryText := ('Secondary Text line &1').TrimSubstitute( #Std_Int.AsString )
#ListTertiaryText := ('Tertiary Text line &1').TrimSubstitute( #Std_Int.AsString )

#ListIcon.Hint := ('This is icon number &1').TrimSubstitute( #Std_Int.AsString )

Add_Entry To_List(#List)

* #ListIcon.CurrentItem.Hint := ('This is accessible icon number &1').TrimSubstitute( #Std_Int.AsString )


End_Loop

Endroutine

End_Com
Has anybody done this??

Re: Hint property on a control in a Material Design List - #PRIM_MD.ListIcon (SOLVED)

Posted: Fri Jul 09, 2021 8:45 pm
by gerryc
I've solved this.

I had to make two changes:
  • Made sure that my list (#PRIM_MD.List) had its HintShowOfParent set to True
  • After each Add_Entry to the list, I set the <#Prim_MD.ListIcon>.CurrentItem.Hint property
This works for multiple icons in a Prim_Md.List row.

New source below:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) DisplayPosition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) DisplayPosition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#IconMainListRow) MarginLeft(20) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(None)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem2) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListPrimaryText) MarginLeft(100) MarginRight(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem3) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListSecondaryText) MarginLeft(100) MarginRight(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem4) Alignment(CenterLeft) Column(#LayoutListColumn1) Flow(CenterVertical) Manage(#ListTertiaryText) MarginLeft(100) MarginRight(32) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem5) Alignment(CenterRight) Column(#LayoutListColumn1) Manage(#IconAccount) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(None) Flow(Left)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem6) Alignment(CenterRight) Column(#LayoutListColumn1) Manage(#IconCart) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(None) Flow(Left)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem7) Alignment(CenterRight) Column(#LayoutListColumn1) Manage(#IconAlarm) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(None) Flow(Left)

Define_Com Class(#PRIM_MD.List) Name(#List) DisplayPosition(1) LayoutManager(#LayoutList) Left(16) Parent(#COM_OWNER) RowHeight(100) TabPosition(1) ThemeDrawStyle('Card') Top(40) Width(817) HintShow(False)
Define_Com Class(#PRIM_MD.ListIcon) Name(#IconMainListRow) DisplayPosition(5) Height(60) Icon('accessible') IconImageSizing(Cropped) Left(20) Parent(#List) TabPosition(1) ThemeDrawStyle('MediumTitle+Rounded') Top(20) Width(60) Hint('Icon in a list') HintShowOfParent(False)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Name') DisplayPosition(6) Height(20) Left(100) Parent(#List) TabPosition(3) Top(21) Width(683) Hint('Some text')
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListSecondaryText) Caption('Secondary Text') DisplayPosition(7) Height(20) Left(100) Parent(#List) TabPosition(4) Top(41) Width(683)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListTertiaryText) Caption('Tertiary Text') DisplayPosition(8) Height(18) Left(100) Parent(#List) TabPosition(5) ThemeDrawStyle('Subheading+ForegroundSecondary') Top(61) Width(683)
Define_Com Class(#PRIM_MD.ListIcon) Name(#IconAccount) DisplayPosition(4) DragStyle(None) Icon('account_circle') Left(671) Parent(#List) TabPosition(6) Top(26)
Define_Com Class(#PRIM_MD.ListIcon) Name(#IconCart) DisplayPosition(2) DragStyle(None) Icon('add_shopping_cart') Left(719) Parent(#List) TabPosition(7) Top(26)
Define_Com Class(#PRIM_MD.ListIcon) Name(#IconAlarm) DisplayPosition(1) DragStyle(None) Icon('alarm') Left(767) Parent(#List) TabPosition(8) Top(26)

Evtroutine Handling(#Com_owner.Initialize)

Clr_List Named(#List)

Begin_Loop Using(#STD_INT) To(10)

#ListPrimaryText := ('Primary Text line &1').TrimSubstitute( #Std_Int.AsString )
#ListSecondaryText := ('Secondary Text line &1').TrimSubstitute( #Std_Int.AsString )
#ListTertiaryText := ('Tertiary Text line &1').TrimSubstitute( #Std_Int.AsString )

* #ListIcon.Hint := ('This is icon number &1').TrimSubstitute( #Std_Int.AsString )

Add_Entry To_List(#List)

* Set the hint for each icon on every row
#IconMainListRow.CurrentItem.Hint := ('Accessible icon row &1').TrimSubstitute( #Std_Int.AsString )
#IconAccount.CurrentItem.Hint := ('Account icon row &1').TrimSubstitute( #Std_Int.AsString )
#IconCart.CurrentItem.Hint := ('Cart icon row &1').TrimSubstitute( #Std_Int.AsString )
#IconAlarm.CurrentItem.Hint := ('Alarm icon row &1').TrimSubstitute( #Std_Int.AsString )


End_Loop

Endroutine

End_Com