Dynamic Tabs

Here we produce dynamic tabs by combining Tapestry's Loop with BootStrap's Tabs.

First Name
joe
Last Name
Spill
Region
West Coast
Start Date
Feb 29, 2008
First Name
lee1423431
Last Name
23123
Region
East Coast
Start Date
Feb 19, 2008
First Name
Mary
Last Name
Contrary
Region
East Coast
Start Date
Feb 29, 2008
First Name
Mary1
Last Name
gsd
Region
East Coast
Start Date
Feb 6, 2008
First Name
Raq11
Last Name
Sprat22
Region
East Coast
Start Date
Feb 28, 2007
References: Loop, BootStrap Tabs.

Home


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
     
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
    <h3>Dynamic Tabs</h3>
    
    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     

    <p>Here we produce dynamic tabs by combining Tapestry's Loop with BootStrap's Tabs.</p>
    
    <div class="eg">
    
        <!--  The row(s) of tabs. -->
    
        <ul t:id="tabs" t:type="any" class="nav nav-tabs">
            <t:loop source="persons" value="person" index="index">
                <li class="${tabCssClass}">
                    <a href="#tab${person.id}" data-toggle="tab">${person.firstName} ${person.lastName}</a>
                </li>
            </t:loop>
        </ul>
        
        <!-- The contents of each tab. -->
        
        <div class="tab-content">
            <t:loop source="persons" value="person" index="index">
                <div id="tab${person.id}" class="tab-pane ${tabPaneCssClass}">
                    <t:beandisplay object="person" include="firstName,lastName,region,startDate"/>
                </div>
            </t:loop>
        </div>
        
    </div>
    
    References: 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Loop.html">Loop</a>,
    <a href="http://getbootstrap.com/components/#nav-tabs">BootStrap Tabs</a>.<br/><br/> 

    <t:pagelink page="Index">Home</t:pagelink><br/><br/>
    
    <t:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/navigation/DynamicTabs.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/navigation/DynamicTabs.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/js.css"/>
    </t:tabgroup>
</body>
</html>


package jumpstart.web.pages.examples.navigation;

import java.util.List;

import javax.ejb.EJB;
import javax.inject.Inject;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceRemote;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;

@Import(stylesheet = "css/examples/js.css")
public class DynamicTabs {
    static private final int MAX_RESULTS = 20;

    // Screen fields

    @Property
    private List<Person> persons;

    @Property
    private Person person;

    @Property
    private int index;

    // Useful bits and pieces

    @EJB
    private IPersonFinderServiceRemote personFinder;

    @Inject
    private JavaScriptSupport javaScriptSupport;

    // The code

    void setupRender() {
        persons = personFinder.findPersons(MAX_RESULTS);
    }

    void afterRender() {
        javaScriptSupport.require("bootstrap/tab");
    }

    public String getTabCssClass() {
        return index == 0 ? "active" : "";
    }

    public String getTabPaneCssClass() {
        return index == 0 ? "fade in active" : "fade";
    }

}


.eg {
                margin: 20px 0;
                padding: 14px;
                color: #888;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}

.js-required {
                color: red;
                display: block;
                margin-bottom: 14px;
}

.js-recommended {
                color: red;
                display: block;
                margin-bottom: 14px;
}