Single-Page Application Template
Tabkit is a template for building a tabbed web application. It is both a demonstration and a component of the
Use it as a Starter Kit for build your
Modify this site to build your application. You do not have to know the details of how it works to use it.
The list of tabs on the left is a Tab Group.
Each tab group has a home page. This page is the home page for this group.
It is also the documentation for Tabkit.
- You can embed one tab group within another. Try clicking on Tab 1.
Tabkit has two mode: Expand and Collapse. Click on the icon in the top left (or anywhere near
the top) to go to collapse mode (click on Tab 1 if you do not see the icon).
Tabkit scrolls automatically in collapse mode.
Users will usually be in collapse mode.
There are two settings for collapse mode: Collapse all and Collapse all but last.
Collapse all is designed for small screens. It hides tabs in collapsed mode.
Click on the icon at the top right to choose this option.
The best way to think of Tabkit is as a tree for mounting pages. The tree is a singe-page application.
- Tabkit simplifies building single-page applications. Place your pages in tabs and build them as regular pages.
- Tabkit manages the URL. Tabs can be bookmarked. They are searchable.
- Tabkit manages the browser history. It will handle back and forth for you.
- Tabs load quickly. Pages are cached on the browser.
Try clicking between Tab 2 and Tab 3
- Tabkit support mobile and touch.
See Tab 1 (in footer) learn how to build a list of tabs.
Tabkit generates the UI from this list.
Install the Trap demo.
The demo includes the Tabkit application template along with the examples in this page.
Modify the pages in this demo. Include your own JSP fragments.
The Trap framework enables you to treat fragments as virtual pages.
Developers will often avoid using a template building an application.
"When you can't create you can work." *
Tabkit is based on the Trap fragment framework.
You can use a mixture of server-side and client-side technologies.
Build pages the way you are used to.
It is not cutting edge.
The trend in web development is to move application code to the client and have the server provide web
Tabkit is a server-oriented framework.
The big picture is to treat Tabkit as a tool to break up a large single-page application into
smaller tab bodies.
It takes too much time to learn.
There is almost no Tabkit code in the tab body page.
You only need a few people on your team to be familiar with Tabkit for building controllers.
Container developers can build services for fragments.
Fragment developers do not have to know a lot of Java.
It has a restrictive UI.
You can build innovative UI within tabs. You can also hide
tabs for custom pages (see Full Page).
Adaptive Web Interface
Tabkit supports responsive web design in two ways:
It makes big pages smaller.
The tendency with single-page application views is that they become bigger as developers add features.
Tabkit makes it easy to place features in another tab.
It makes small screens bigger.
Tabkit slides menus and breadcrumbs off the page on small screens. However, these menus are easily
Build your application with a combination of tab groups, tabs, and banners.
Use this site as a template for your application.
Treat Tabkit as pre-packaged architecture.
Tabkit's advantage is that it builds the UI for you.
Decide if the UI is suitable for your application.
Tabkit generates the UI from lists of tabs A few ways to customize the UI.
Tabkit's UI is made up of regular JSP pages. You can easily modify it.
Add your own CSS.
Build custom tab writers. For example, you can add an icon to a tab.
Build custom render page for the tab list (the section on the left).
For example, you show a list of tabs with pictures and text.
You may use third party UI component frameworks within a Tab page.
Nested tabs perform the same role as breadcrumbs.
They give users an easy way to leave a page (by sliding in menus).
- Caching is configurable.
Caching provides a better user experience. It also reduce server load.
Tabkit will cache a tab page when you leave it (not when you load it).
It will cache the latest version.
- Clicking a tab again flushes the cache and reloads the tab. You do not have to add refresh buttons.
There must be a home. It does not have to be the first or be called Home.
This demo have static lists. However, you can build tab lists dynamically.
For example, suppose a user goes to a tab user_999999.
You intercept the request; build this tab; and add it to the list.
Wrap your tab body page with a div that has a max-width
This prevent content from filling a wide screen.
This tab body is set to 750.
Your handler will be called when the user leaves a tab. For example, you add a handler to capture the content of a
form that the user has partially filled out.
When the user comes back you prefill the form.
See Angular for an example.
Disabling a tab prevents the user from accessing
it (manipulating the URL would not work). Tabkit sends the user to the home tab if it cannot find a match.
Use tab groups for access control. For example, don't add a tab if the user does not have access to it.
You can also disable tabs (see Tab 4)
if certain conditions have not been met.
You may add menu items to the top right corner. See comments in the tabkit.jsp to see
- Think of banners as a container for another Tabkit tree.
Fragments interact with each other through services. For example, a catalog use a
ShoppingCart service to add a product to the cart.
See Curtain for an example.
Place services in banners (banners can be invisible).
Use selectTabFill to go to a tab directly. Avoid linking with the URL because
Load resources in banners and pass them to a tab. Tabs should be constructed with the resources they need.
They should not load them directly.
You may add a global banner that floats on top of the Tabkit application.
Instructions to do so are in page comments.
There is a maximum nesting level. The default is set at 17.
In testing, Firefox seems to have problems above this level.
Other factors (e.g. Side panel pages) will affect this limit.
Deep nesting will also affect performance.
Tabkit works on small and large screen It support touch.
Furthermore, Tabkit has built-in ways to reload tabs and pages.
You can use it with browsers in kiosk mode (i.e. no address bar).
The bulk of Tabkit's code is in two template page: tabkit.jsp and tabgroup.jsp.
Avoid making changes to these two pages. This will make upgrading easier.
Tabkit requires a nesting path: e.g. /category_1/category_2/product_123.
You can attach a filter to convert the path: e.g. from /product/123.
Tabkit uses two arrow icons from useiconic.com.
Open Iconic does not require attribution.
Contact us to learn more about Tabkit. We can help you evaluate our product.
We also offer development services.
We are in the process of developing a reusable UI for an online (bucket-based) file system based on Tabkit.