Dynamic Tabs

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

First Name
Dishy
Last Name
Spoon
Region
East Coast
Start Date
Feb 29, 2008
First Name
Humpty
Last Name
Dumpty
Region
East Coast
Start Date
Dec 5, 2007
First Name
Jack
Last Name
Sprat
Region
West Coast
Start Date
Feb 28, 2007
First Name
Jill
Last Name
Spill
Region
West Coast
Start Date
Feb 29, 2008
First Name
Mary
Last Name
Contrary
Region
East 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;
}