Web Tab Component: Mapping Database Tables Into UI Tabs
In this second installment of UI posts, I will show the “Tab Component” of our UI library. Tab components are very important part of rich interfaces. Tabs provide us partitioning the interface and the elements we want to display. Logical division in UI means
better user-friendliness. It empowers easy access. Nothing more to say, in every application we use there is a tabbing function.
Yes, we need a tab component in web applications but how can model it so that we achieve minimum server roundtrip, minimum development cost with better user-friendliness. One important design difference among tab component implementations is to make tabs whether server-side or client-side or mixture of both using AJAX. Server-side tabs always go to server when tab title is clicked. Other is client-side solution which all tabs are loaded on page load at the same time. Second option’s most important disadvantage is loading all tabs content at once. This results loading all tabs although user may not click and want to see some tab content (Requires many database selects). AJAX may cure this problem and we may load tabs on click or simply use server-side option.
Mapping of database tables to web tabs require following steps:
1- Your tab component should also be mapped to database access objects for lazily loading the content of tabs. Tabs should have a similar structure with database objects and database tables or vice versa.
2- Tab navigation requires a special controller mechanism (Controller servlets). You should model the navigation mechanism between tabs. Some controls are really hard to design like when edit forms should be saved and committed to database, if multi-level tabs are used it gets much more complicated.
3- Tabs should be designed within JSP pages. Tabs may contain edit forms or lists or some kind of reports. We modeled JSP pages in such a way that every tab is a JSP page. Using tabs in a master-detail manner requires much more effort and I will mention master-detail component later.
As seen from here, designing a server-side tab component is not easy. We have to design and model database access objects, controller servlets, tab JSPs in parallel. I think client-side tabs are very easy to design but they are not as rich as server-side ones. I analyzed many JavaScript libraries that have tab components but I think they are not ready for enterprise applications since their server-side processing part is missing. This is the main problem of UI components of JavaScript libraries.
Our tab component has following features:
1- Any number of tabs can be used in one level. Tab may contain edit form, lists, report or summary pages etc.
2- Any level of tabs can be used. Adding a second level and a third level of tabs is possible (No limit, as deep as your database table levels). In the example below, you can see the second level tabs.
3- Tab pages have a record navigator (At the right top side of the page). In any tab, record navigator can enable us to traverse the records in that tab. Navigator also can be used in sub-tabs.
4- User can navigate and click all tabs at once. If user views a page in a second level tab and it contains an edit form, if user clicks a link of another tab then form is automatically submitted.
5- User can save all tab modifications at once with the “Save” button which exists in first level of tabs. Any changes in tabs are held in memory. Database access objects should support memory operations appropriately like validation, formatting etc.
Here is the mapping illustration:
![MappingTabs]()
Header tab page:
![TabHeader]()
Detail tab page:
![TabDetails]()
Second-level tabs:
![TabSecondLevel]()
Yes, we need a tab component in web applications but how can model it so that we achieve minimum server roundtrip, minimum development cost with better user-friendliness. One important design difference among tab component implementations is to make tabs whether server-side or client-side or mixture of both using AJAX. Server-side tabs always go to server when tab title is clicked. Other is client-side solution which all tabs are loaded on page load at the same time. Second option’s most important disadvantage is loading all tabs content at once. This results loading all tabs although user may not click and want to see some tab content (Requires many database selects). AJAX may cure this problem and we may load tabs on click or simply use server-side option.
Mapping of database tables to web tabs require following steps:
1- Your tab component should also be mapped to database access objects for lazily loading the content of tabs. Tabs should have a similar structure with database objects and database tables or vice versa.
2- Tab navigation requires a special controller mechanism (Controller servlets). You should model the navigation mechanism between tabs. Some controls are really hard to design like when edit forms should be saved and committed to database, if multi-level tabs are used it gets much more complicated.
3- Tabs should be designed within JSP pages. Tabs may contain edit forms or lists or some kind of reports. We modeled JSP pages in such a way that every tab is a JSP page. Using tabs in a master-detail manner requires much more effort and I will mention master-detail component later.
As seen from here, designing a server-side tab component is not easy. We have to design and model database access objects, controller servlets, tab JSPs in parallel. I think client-side tabs are very easy to design but they are not as rich as server-side ones. I analyzed many JavaScript libraries that have tab components but I think they are not ready for enterprise applications since their server-side processing part is missing. This is the main problem of UI components of JavaScript libraries.
Our tab component has following features:
1- Any number of tabs can be used in one level. Tab may contain edit form, lists, report or summary pages etc.
2- Any level of tabs can be used. Adding a second level and a third level of tabs is possible (No limit, as deep as your database table levels). In the example below, you can see the second level tabs.
3- Tab pages have a record navigator (At the right top side of the page). In any tab, record navigator can enable us to traverse the records in that tab. Navigator also can be used in sub-tabs.
4- User can navigate and click all tabs at once. If user views a page in a second level tab and it contains an edit form, if user clicks a link of another tab then form is automatically submitted.
5- User can save all tab modifications at once with the “Save” button which exists in first level of tabs. Any changes in tabs are held in memory. Database access objects should support memory operations appropriately like validation, formatting etc.
Here is the mapping illustration:
Header tab page:
Detail tab page:
Second-level tabs:
