Page 1 of 1
vlweb MD TabSheet
Posted: Thu Oct 03, 2019 6:20 pm
by soa
Can anyone explain to me how to use the Material Design TabSheet?
When I select Tabs from the MD Controls List U can see 2 -
1 MD looking thing that says 'Three top aligned...' and '
2. Standard Tab Control.
When I drag the first one on to a form it just has captions and no tab body area. It has TabItemn children which have a Tabsheet property but I can see no way of creating Tabeheets. I can define them in code (below) and they are then available for selection in the properties window but seting these values has no affect in the design view and I can see now way of getting content onto the tabsheet
Define_Com Class(#PRIM_TBSH) Name(#Sheet1) Displayposition(7) Height(100) Width(100)
I've got the wrong idea somewhere? Standard Tab control seems to work the way I expected except I can't set margins.
Re: vlweb MD TabSheet
Posted: Fri Oct 04, 2019 12:46 am
by Pablo
Hi soa,
There is a shipped example part of the Material Design controls web page xMdMain - View is named xMdTabs.
It seems the tabsheets are PRIM_TBSH which are the sheets you specify in the Tabsheet property of the TabItem you mention in your post.
Hope this helps.
Regards,
Pablo
Re: vlweb MD TabSheet
Posted: Fri Oct 04, 2019 9:41 am
by soa
Thanks pablo.
I've copied in code and sort of got it working but it looks me as if something is broken in the IDE tooling for this component since I can't get tabsheets to from the Controls tab.
I think I'll give this a miss until e apply the next EPC where, hopefully, it is fixed. Unless someone knows the secret!
Re: vlweb MD TabSheet
Posted: Sat Jun 26, 2021 3:46 am
by Dino
Revising this post, my steps to make it work are:
1. Drag the Material Tabs component, it comes without tab sheets, just the 3 tabs.
2. Somewhere below it, I drag the old Tabs component, it comes with 2 tab sheets and his own tab header. I make it even adding one more sheet for example.
3. Now, if I want the Material Tabs to control the Sheets in the second tab, there is a property called "TabSheet" for each Tab Item, I make the first one to control #Sheet1, the 2nd #Sheet2, etc.
4. I dont want to have two tab headers, so, in order to hide the tabs in the second one, I change the property Showpagetabs to false.
This is the resultant code:
Code: Select all
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)
Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(50) Left(20) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Top(20)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem) Caption('ITEM 1') Displayposition(1) Height(50) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0) Tabsheet(#Sheet1)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem3) Caption('ITEM 1') Displayposition(4) Height(50) Left(300) Parent(#Tab) Tabposition(4) Tabstop(True) Top(0)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('ITEM 2') Displayposition(2) Height(50) Left(100) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0) Tabsheet(#Sheet2)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('ITEM 3') Displayposition(3) Height(50) Left(200) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0) Tabsheet(#Sheet3)
Define_Com Class(#PRIM_TAB) Name(#Tab1) Bottomlayoutpriority(4) Componentversion(2) Displayposition(2) Height(393) Left(20) Leftlayoutpriority(1) Parent(#COM_OWNER) Rightlayoutpriority(2) Tabposition(2) Top(100) Toplayoutpriority(3) Width(897) Showpagetabs(False)
Define_Com Class(#PRIM_TBSH) Name(#Sheet1) Caption('Page1') Displayposition(1) Height(393) Left(0) Parent(#Tab1) Tabposition(1) Tabstop(False) Top(0) Width(897)
Define_Com Class(#PRIM_TBSH) Name(#Sheet2) Caption('Page2') Displayposition(3) Height(393) Left(0) Parent(#Tab1) Tabposition(2) Tabstop(False) Top(0) Width(897)
Define_Com Class(#PRIM_TBSH) Name(#Sheet3) Caption('Page3') Displayposition(2) Height(393) Left(0) Parent(#Tab1) Tabposition(3) Tabstop(False) Top(0) Width(897)
End_Com
example final code before layout:
Code: Select all
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)
Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(50) Left(20) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Top(20)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem) Caption('ITEM 1') Displayposition(1) Height(50) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0) Tabsheet(#Sheet1)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem3) Caption('ITEM 1') Displayposition(4) Height(50) Left(300) Parent(#Tab) Tabposition(4) Tabstop(True) Top(0)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('ITEM 2') Displayposition(2) Height(50) Left(100) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0) Tabsheet(#Sheet2)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('ITEM 3') Displayposition(3) Height(50) Left(200) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0) Tabsheet(#Sheet3)
Define_Com Class(#PRIM_TAB) Name(#Tab1) Bottomlayoutpriority(4) Componentversion(2) Displayposition(2) Height(393) Left(20) Leftlayoutpriority(1) Parent(#COM_OWNER) Rightlayoutpriority(2) Tabposition(2) Top(100) Toplayoutpriority(3) Width(897) Showpagetabs(False)
Define_Com Class(#PRIM_TBSH) Name(#Sheet1) Caption('Page1') Displayposition(1) Height(393) Left(0) Parent(#Tab1) Tabposition(1) Tabstop(False) Top(0) Width(897)
Define_Com Class(#PRIM_TBSH) Name(#Sheet2) Caption('Page2') Displayposition(3) Height(393) Left(0) Parent(#Tab1) Tabposition(2) Tabstop(False) Top(0) Width(897)
Define_Com Class(#PRIM_TBSH) Name(#Sheet3) Caption('Page3') Displayposition(2) Height(393) Left(0) Parent(#Tab1) Tabposition(3) Tabstop(False) Top(0) Width(897)
* Some elements for the tab sheets:
Define_Com Class(#PRIM_LIST) Name(#List) Columnheaderheight(48) Columnlines(False) Displayposition(1) Height(360) Left(20) Parent(#Sheet1) Rowheight(48) Tabposition(1) Top(20) Width(500)
Define_Com Class(#PRIM_LIST.String) Name(#ListColumn1) Columnwidth(133) Displayposition(1) Parent(#List) Sortonclick(True) Source(#EMPNO)
Define_Com Class(#PRIM_LIST.String) Name(#ListColumn2) Columnwidth(159) Displayposition(2) Parent(#List) Sortonclick(True) Source(#SURNAME)
Define_Com Class(#PRIM_MD.CheckBox) Name(#CheckBox) Caption('Checkbox') Checkstate(Checked) Displayposition(1) Iconcolor(ThemeSuccessMedium) Left(50) Parent(#Sheet3) Tabposition(1) Top(50)
Define_Com Class(#PRIM_MD.CheckBox) Name(#CheckBox1) Caption('Checkbox') Checkstate(Checked) Displayposition(1) Iconcolor(ThemeErrorMedium) Left(30) Parent(#Sheet2) Tabposition(1) Top(30)
End_Com
Re: vlweb MD TabSheet
Posted: Mon Jun 28, 2021 9:42 am
by BrendanB
I guess everyone does it differently...
The Materials Tab Component creates the tab bar and 3 items (you can add more).
The easiest way to use it:
drag a ViewContainer onto your page. (usually underneath the Tab component, but doesnt have to be...
create your views (or drag them on if you have them built already).
on the Details Tab for the TabItem, you will see a property called 'View' -- use the dropdown arrow to set this to the view that you want to see when you click that Tab.
(I think you can also set a TabItem to launch a 'dialog' instead...)
A simple code example: (Note, i called the Views 'TabSheet1, TabSheet2, TabSheet3, but they are just #PRIM_VIEWs).
Code: Select all
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) LayoutManager(#LayoutMain)
Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) DisplayPosition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) DisplayPosition(1) Parent(#LayoutMain) Height(60) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) DisplayPosition(2) Parent(#LayoutMain) Height(8) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) DisplayPosition(3) Parent(#LayoutMain) Height(56) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow4) DisplayPosition(4) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopLeft) Column(#LayoutMainColumn1) Manage(#Appbar) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopLeft) Column(#LayoutMainColumn1) Manage(#Tab) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Alignment(TopLeft) Column(#LayoutMainColumn1) Manage(#ViewContainer) Parent(#LayoutMain) Row(#LayoutMainRow4)
Define_Com Class(#PRIM_MD.AppBar) Name(#Appbar) Caption('Tab Example') DisplayPosition(1) Icon('menu') Parent(#COM_OWNER) TabPosition(1) ThemeDrawStyle('Heading2') Height(60) Width(1200)
Define_Com Class(#PRIM_MD.Tab) Name(#Tab) DisplayPosition(2) Parent(#COM_OWNER) TabPosition(2) ThemeDrawStyle('LightTitle+Heading2') Top(68) Width(1200) SelectionColor(Theme900)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem) Caption('ITEM 1') DisplayPosition(1) Height(56) Left(0) Parent(#Tab) TabPosition(1) TabStop(True) Top(0) View(#TabSheet1)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('ITEM 2') DisplayPosition(2) Height(56) Left(100) Parent(#Tab) TabPosition(2) TabStop(True) Top(0) View(#Tabsheet2)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('ITEM 3') DisplayPosition(3) Height(56) Left(200) Parent(#Tab) TabPosition(3) TabStop(True) Top(0) View(#Tabsheet3)
Define_Com Class(#PRIM_MD.ViewContainer) Name(#ViewContainer) DisplayPosition(3) Parent(#COM_OWNER) TabPosition(3) Top(124) Height(676) Width(1200)
Define_Com Class(#TabSheet1) Name(#TabSheet1) Height(676) Left(400) Parent(#ViewContainer) Width(1200)
Define_Com Class(#Tabsheet2) Name(#Tabsheet2) DisplayPosition(2) Height(676) Left(800) Parent(#ViewContainer) TabPosition(2) Width(1200)
Define_Com Class(#Tabsheet3) Name(#Tabsheet3) DisplayPosition(3) Height(676) Parent(#ViewContainer) TabPosition(3) Top(222) Width(1200)
Evtroutine Handling(#Com_owner.Initialize)
#TabSheet1.Show
Endroutine
End_Com