Dynamic Tabs

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

First Name
Acmet
Last Name
Sprat
Region
West Coast
Start Date
Feb 28, 2007
First Name
jimmy
Last Name
Leont
Region
East Coast
Start Date
Dec 28, 1985
First Name
Mary
Last Name
Contrary
Region
East Coast
Start Date
Sep 19, 2020
First Name
Sesa
Last Name
ewefasf
Region
West Coast
Start Date
Aug 7, 2020
First Name
souley
Last Name
Spill
Region
East Coast
Start Date
Feb 22, 2008
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;
}