<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:b="http://butterfaces.org/components"> <h:head> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> </h:head> <body> <h:form id="formId"> <div class="row repeat-episode-list"> <b:repeat value="#{myBean.values}" var="episode" rendered="true"> <div class="col-md-4 repeat-episode-item"> <img src="#{episode.image}" alt="#{episode.title}"/> <div class="repeat-episode-content"> <div><strong>#{episode.title}</strong></div> <div><small>written by: #{episode.writtenBy}</small></div> <b:commandLink value="Play" action="#{repeatShowcase.play}" glyphicon="fa fa-play-circle-o" styleClass="btn btn-outline-secondary btn-sm"> <f:ajax execute="@this"/> </b:commandLink> </div> </b:repeat> </div> </h:form> </body> </html>
package org.butterfaces.repeat.demo; import import javax.faces.view.ViewScoped; import import javax.inject.Named; @ViewScoped @Named public class MyBean implements Serializable { private static final String IMAGE_PATH = "resources/images/treebox/"; private List<Episode> episodes = new ArrayList<Episode>(); public List<Episode> getValues() { if(episodes.isEmpty()) { episodes.add(createEpisode(1, "Children of the Gods 1/2", "Mario Azzopardi", "Jonathan Glassner & Brad Wright", "July 27, 1997", "ChildrenoftheGods.jpg")); episodes.add(createEpisode(2, "Children of the Gods 2/2", "Mario Azzopardi", "Jonathan Glassner & Brad Wright", "July 27, 1997", "ChildrenoftheGods.jpg")); ... } return episodes; } private static Episode createEpisode(int numberInSeries, String title, String directedBy, String writtenBy, String originalAirDate, String image) { final Episode episode = new Episode(); episode.setNumberInSeries(numberInSeries); episode.setTitle(title); episode.setDirectedBy(directedBy); episode.setWrittenBy(writtenBy); episode.setOriginalAirDate(originalAirDate); episode.setImage(IMAGE_PATH + image); return episode; } }
package org.butterfaces.repeat.demo; public class Episode { private int numberInSeries; private String title; private String writtenBy; private String originalAirDate; private String image; // [...] getter + setter @Override public String toString() { return title; } }
.repeat-episode-list { padding: 0 10px; max-height: 400px; overflow: auto; } .repeat-episode-item repeat-episode-content a { position: inherit; right: 25px; bottom: 20px; } .repeat-episode-item img { width: 100%; } .repeat-episode-item repeat-episode-content { opacity: 0.6; position: absolute; top: 0; color: white; margin-top: 10px; margin-left: 10px; height: 100%; width: 100%; } .repeat-episode-item { border: #ddd 1px solid; border-radius: 4px; } .repeat-episode-item.col-md-4 { padding: 5px; width: calc(33.33333333% - 12px); }
