Page 1 of 1

Tabs

Posted: Wed Jan 15, 2020 7:28 pm
by Pratibha
Hello,

I want to show the underline color of the tab . Please see the screenshot. How is it possible?
screen1.PNG
screen1.PNG (49.04 KiB) Viewed 1917 times

Re: Tabs

Posted: Thu Jan 16, 2020 8:10 am
by JamesDuignan
Hi,

Make sure 'ShowSelection' property is set and the 'SelectionColor' will allow you to select the colour of the line the tab container (#prim_md.tab) the viewstyle property should also be set to 'TopNavigation''

https://docs.lansa.com/14/en/lansa016/p ... ection.htm
https://docs.lansa.com/14/en/lansa016/p ... ncolor.htm

Regards,
James

Re: Tabs

Posted: Fri Jan 17, 2020 9:03 pm
by Pratibha
I am using the component #PRIM_TBSH in Prim.tab. How is it possible to show underline colour in tabsheets.

regards,
Pratibha

Re: Tabs

Posted: Tue Jan 21, 2020 8:07 am
by JamesDuignan
Hi Pratibha,

This cannot be done with prim_tab. It can only be achieved with PRIM_MD.tab.

Regards,
James

Re: Tabs

Posted: Tue Jan 21, 2020 7:08 pm
by Pratibha
Hi James,

I have tried to use #PRIM_MD.TAB but was unable to show drag the list in #PRIM_MD.TAB. Don't know was it een error or bug in LANSA.

Regards,
Pratibha

Re: Tabs

Posted: Wed Jan 22, 2020 8:10 am
by JamesDuignan
Hi Pratibha,

I am not sure what you mean.
PRIM_MD.tab is just a container to display prim_md.TabItems, these can be linked to tabs or views to open them upon clicking on the item.

here is an example of using it with tabsheets:

Code: Select all

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

Define_Com Class(#PRIM_VS.Style) Name(#Style1) Borderbottom(0) Borderleft(0) Borderright(0) Bordertop(0) Textcolor(3DMediumShadow)

Define_Com Class(#PRIM_VS.Style) Name(#Style2) Borderbottom(1) Borderleft(1) Borderright(1) Bordertop(1)

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(50) Units(Content)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Tab) Parent(#LayoutMain) Row(#LayoutMainRow1) Sizing(None)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Tab1) Parent(#LayoutMain) Row(#LayoutMainRow2) Marginbottom(8) Marginleft(8) Marginright(8)
* Md tab controls. This contains the Tab items linked to the Tab sheets using property Tabsheet
Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(50) Left(420) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Width(360) Selectioncolor(ThemeAccentDark)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('Open Tab Sheet 1') Displayposition(1) Height(50) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0) Tabsheet(#Sheet1) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('Open Tab Sheet 2') Displayposition(2) Height(50) Left(120) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0) Tabsheet(#Sheet2) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem3) Caption('Open Tab Sheet 3') Displayposition(3) Height(50) Left(240) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0) Tabsheet(#Sheet3) Width(120)


* The definition of the tab container and the tabsheets contained in them. Note property Showpagetabs is set to false
Define_Com Class(#PRIM_TAB) Name(#Tab1) Bottomlayoutpriority(4) Componentversion(2) Displayposition(2) Height(742) Leftlayoutpriority(1) Parent(#COM_OWNER) Rightlayoutpriority(2) Tabposition(2) Top(50) Toplayoutpriority(3) Width(1184) Showpagetabs(False) Left(8) Style(#Style1)
Define_Com Class(#PRIM_TBSH) Name(#Sheet1) Caption('ITEM 1') Displayposition(1) Height(742) Left(0) Parent(#Tab1) Tabposition(1) Tabstop(False) Top(0) Width(1184) Style(#Style2)
Define_Com Class(#PRIM_TBSH) Name(#Sheet2) Caption('ITEM 2') Displayposition(2) Height(742) Left(0) Parent(#Tab1) Tabposition(2) Tabstop(False) Top(0) Width(1184) Style(#Style2)
Define_Com Class(#PRIM_TBSH) Name(#Sheet3) Caption('ITEM 3') Displayposition(3) Height(742) Left(0) Parent(#Tab1) Tabposition(3) Tabstop(False) Top(0) Width(1184) Style(#Style2)

* Labels to be shown in each tab
Define_Com Class(#prim_md.Label) Name(#LabelSheet1) Parent(#Sheet1) Caption('I am Tab Sheet 1') Displayposition(1) Tabposition(1) Top(0) Left(0) Width(250) Height(60) Themedrawstyle('ForegroundMediumError')
Define_Com Class(#prim_md.Label) Name(#LabelSheet2) Parent(#Sheet2) Caption('I am Tab Sheet 2') Displayposition(1) Tabposition(1) Top(0) Left(0) Width(250) Height(60) Themedrawstyle('ForegroundMediumAccent')
Define_Com Class(#prim_md.Label) Name(#LabelSheet3) Parent(#Sheet3) Caption('I am Tab Sheet 3') Displayposition(1) Tabposition(1) Top(0) Left(0) Width(250) Height(60) Themedrawstyle('ForegroundMediumSuccess')

End_Com
Regards,
James

Re: Tabs

Posted: Wed Jan 22, 2020 9:39 am
by soa
James

I've posted earlier about MD Tabs

viewtopic.php?f=3&t=2207&p=6051&hilit=tabs#p6051

They do not seem to be intuitively working from the IDE (i.e. drag and drop a tabsheet on the surface, then drop one or more sheets on to it which then act like standard panels). There is a single example available but as this is code only it does not explain how one uses this control in the IDE to build a UI.

Since this poster had the same problem I had perhaps a walk-through or a video example would be useful.

Cheers
Jim

Re: Tabs

Posted: Wed Jan 22, 2020 7:56 pm
by Pratibha
Hello James,

I am using currently only #PRIM_TAB component and not using #PRIM_MD.Tab at all. Is it possible to show another color or text bold only in PRIM.TAb component . At this position I cannot go back to component #PRIM_MD.TAB as I have to change lot of code and that will take time. Please see the snapshot...

If there is any solution in this #PRIM.Tab component, would like to hear please.

Regards,
Pratibha
SCR1.PNG
SCR1.PNG (22.63 KiB) Viewed 1786 times

Re: Tabs

Posted: Fri Jan 24, 2020 12:44 pm
by JamesDuignan
Hi Pratibha,

No, unfortunately, there is not a way to change the style on individual tab buttons.

But, I would like to stress there is not much of a code change for adding in the prim_md.tab component, you can still keep your prim_tab and tabsheets, the prim_md.tab is just control that contains buttons for the tab sheet selection.

1. In your current example, it would be the addition of 4 define_com statements
2. placing it in the layout appropriately and
3. Setting the ShowPageTabs to false on the on prim_tab component.

Code: Select all

Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(50) Left(420) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Width(360) Selectioncolor(ThemeAccentDark)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('Lastdrager Geleverd') Displayposition(1) Height(50) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0) Tabsheet(#<Add Tabsheet for Lastdrager Geleverd>) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('Lastdrager Retour') Displayposition(2) Height(50) Left(120) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0) Tabsheet(#<Add tabsheet for Lastdrager Retour>) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem3) Caption('Emballage') Displayposition(3) Height(50) Left(240) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0) Tabsheet(#<Add Tab Sheet for Emballage>) Width(120)
Regards,
James

Re: Tabs

Posted: Fri Jan 24, 2020 3:45 pm
by soa
So the MD Tab control just provides the bit at the top but an old school tab control is used to provide the tabsheets. I've just tried it and it works but I would never have guessed that!

Thanks.

Re: Tabs

Posted: Thu Jan 30, 2020 1:43 am
by Pratibha
JamesDuignan wrote:
Fri Jan 24, 2020 12:44 pm
Hi Pratibha,

No, unfortunately, there is not a way to change the style on individual tab buttons.

But, I would like to stress there is not much of a code change for adding in the prim_md.tab component, you can still keep your prim_tab and tabsheets, the prim_md.tab is just control that contains buttons for the tab sheet selection.

1. In your current example, it would be the addition of 4 define_com statements
2. placing it in the layout appropriately and
3. Setting the ShowPageTabs to false on the on prim_tab component.

Code: Select all

Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(50) Left(420) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Width(360) Selectioncolor(ThemeAccentDark)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('Lastdrager Geleverd') Displayposition(1) Height(50) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0) Tabsheet(#<Add Tabsheet for Lastdrager Geleverd>) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('Lastdrager Retour') Displayposition(2) Height(50) Left(120) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0) Tabsheet(#<Add tabsheet for Lastdrager Retour>) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem3) Caption('Emballage') Displayposition(3) Height(50) Left(240) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0) Tabsheet(#<Add Tab Sheet for Emballage>) Width(120)
Regards,
James


Thank you So much for your advice James. It is working now.