Tab Panel Initials

[ilya_shaikovsky]

This is a first such topic related to component movement to 4.x branch. Such threads set will be started in order to discuss RFC's related to component redesign and some functionality changes which could be done while moving.

The result of such thread will be the wiki page which will describe final points and requirements.

The first I want to mention is design points. During 3.x development next possible design solutions was requested. Now we need to solve which options could be accepted (cool if all of them) and which options could be added to the list. From the beggining I will post the pictures which shows requested designs points and then will continue thread with functional points.

Different tabs positioning:


Proposed solutions for numerous count of tabs

advanced tab design

[ilya_shaikovsky]

links from jira related to some of the pictures
https://jira.jboss.org/jira/browse/RF-705
https://jira.jboss.org/jira/browse/RF-1155

And points from https://www.jboss.org/community/wiki/RichFacesFuture used

TabPanel

*Switching by JavaScript API call(+9)
*Different positions ex vertical tabs, several lines (+7)
*scrolling tabs if there is no enough place for them (+7) proto
*Customizable tab buttons(+2) (Not clear,which customization. how about just CSS?)

[nbelaevski]

"ilya_shaikovsky" wrote:
*Customizable tab buttons(+2) (Not clear,which customization. how about just CSS?)

Currently tabs do not include button controls. This point is about adding them:

[ilya_shaikovsky]

And not only button - maybe some icon possible to be defined with tab attribute instead of having to define facet as currently to perform that.

[admitriev]

I have a proposal to use 2 types of tabpanels:

1) panel with single line of tabs and horizontal tab scroll and dropdown list of all/hidden tabs
2) panel with multiline os tabs

Both of types are other render of one components. Switching of types realizing through attribute.

Single line of tabs TabPanel:
1.Tab content switching:

1.client side switching
2.reload a page (???)
3.loading data via ajax

2.Tabs row scrolling - two arrows on the left and on the right of tablines (like a option)
3.Tabs position (like options - top, bottom, right, left)
4.Tabs align (like options: for horizontal - left, right, center, for vertical - top, bottom, middle)
5.Tabs reordering(D'n'D)
6.Tabs closing (Close button)
7.DropDown list of tabs (click to special button)
8.Frozen tabs row height and/or width

Multiline of tabs TabPanel:
1.Tab content switching:

1.client side switching
2.reload a page (???)
3.loading data via ajax

2.Default tabs ordering in rows (as option)
3.Tabs position (like options - top, bottom)
4.Tabs reordering(D'n'D)
5.Tabs closing (Close button)
6.Frozen tabs row height and/or width (like a option)

Implementation proposal
I have proposal to use DIVs and style display:table for tabs row. Actually it's looks like a TABLE but some modern

[admitriev]

One more - I think that add to tab ajax status indicator (for examlpe on right side of tab before close tab) it's nice idea (for ajax mode tabs)

[admitriev]

More idea - what you think about to make tabsRows expanded/collapsed?

[ilya_shaikovsky]

And here are also some functionality points which are missed in current implementation but highly asked:

* Ajax mode with previously activated tabs caching. (Think can be not separate mode but just parameter to ajax mode which will tell how much already opened tabs to keep on the client)
* Separation of tabs controls and corresponding tabs content. This could require even tags set review because currently we have only rich:tab which points us to tab content on reRender for example. And the user in general could want to update tab content or only tab control separatelly.
* Updates of tabs controls set via ajax. Insertion and deletion tabs via ajax without dealing with fetching content as in current implementation(without having to update all tabPanel component).

to be continued.

[admitriev]

Please look at the picture - we can create different L'n'F based on same layout. Question - is it necessary to prepare 3 themes for tabs as attribute or we'll explain to user as he can do it using styles?

[ilya_shaikovsky]

As Lex said the markup for all three variants is the same but the question about to do some presets or just describe for the users how to deal with rich-* classes. As for me I prefer the second variant because want not duplicate the points of component redefinition.

[admitriev]

After discussion of new layouts of TabPanel it became clear that construction "display : table" doesn't work in Internet Explorer 7.0 without dependence from used doctypes. So there are a couple proposals on process development:

1) It is necessary to prepare a example of tabpanel layout using single TABLE construction
2) To prepare a tabpanel layout not using a "table".
3) It's necessary to compare possibilities on use of these layouts and select a way of future development of tabs.

[admitriev]

I've prepared tables variant of Tab Panel and TabPanels layout based on DIVs. Both variants have minuses.

Table variant - we use a table
DIV variant - For some values we need to use a mathematics scripts

Look at variants you can here:
https://jira.jboss.org/jira/secure/attachment/12329798/TabPanel_tab_div_variant.zip

[jbalunas]

"ilya_shaikovsky" wrote:
This is a first such topic related to component movement to 4.x branch. Such threads set will be started in order to discuss RFC's related to component redesign and some functionality changes which could be done while moving.

The result of such thread will be the wiki page which will describe final points and requirements.

I know this is a little late, but this is exactly what I am looking for. Discussions in the forums that result in wiki pages with design for each component.

[jbalunas]

"ilya_shaikovsky" wrote:
links from jira related to some of the pictures
https://jira.jboss.org/jira/browse/RF-705
https://jira.jboss.org/jira/browse/RF-1155

I like both of these features. RF-1155 seems to be a good addition to the multi-line approach.

[jbalunas]

"ilya_shaikovsky" wrote:
And not only button - maybe some icon possible to be defined with tab attribute instead of having to define facet as currently to perform that.

I think this is a big question for Lex. Is this possible?

Earlier we discussed problems if tabs are different sizes, especially if we use semantic layouts. If we allow anything as tabs we would need to assume that people to put variable height items in it.

This would also apply to icons - users would certainly put different sized images.