Dynamic Tabs

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

First Name
11
Last Name
km
Region
West Coast
Start Date
Feb 28, 2007
First Name
87888Poop
Last Name
De scoop
Region
East Coast
Start Date
Jul 7, 2007
First Name
Acme2
Last Name
456
Region
East Coast
Start Date
Jun 19, 1952
First Name
Mary
Last Name
dgzfgdf
Region
East Coast
Start Date
Feb 29, 2008
First Name
yuno
Last Name
3clover
Region
West Coast
Start Date
Feb 12, 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;
}