Dynamic Tabs

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

First Name
aa65
Last Name
b
Region
East Coast
Start Date
Dec 10, 2018
First Name
dzadzad65
Last Name
Spoon
Region
East Coast
Start Date
Feb 8, 2008
First Name
Jack2
Last Name
Sprat
Region
West Coast
Start Date
Feb 22, 2007
First Name
Jill
Last Name
Spill
Region
East Coast
Start Date
Feb 14, 2008
First Name
Mary
Last Name
Contrary
Region
West Coast
Start Date
Feb 29, 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;
}