Layout tuning options allow you to control the spacing between boards, the width of each board, and whether boards use percentage-based widths for responsive layouts.
Source
<h:panelGrid columns="3" styleClass="ui-fluid" columnClasses="p-2,p-2,p-2">
<p:outputLabel for="gutter" value="Gutter" styleClass="font-bold" />
<p:inputText id="gutter" value="#{kanbanLayoutController.gutter}" style="width:100px">
<p:ajax update="kanban" process="@this" />
</p:inputText>
<p:outputLabel value="Spacing between boards (e.g. 5px, 15px, 30px)" />
<p:outputLabel for="widthBoard" value="Board Width" styleClass="font-bold" />
<p:inputText id="widthBoard" value="#{kanbanLayoutController.widthBoard}" style="width:100px">
<p:ajax update="kanban" process="@this" />
</p:inputText>
<p:outputLabel value="Width of each board (e.g. 200px, 250px, 350px)" />
<p:outputLabel for="responsivePercentage" value="Responsive %" styleClass="font-bold" />
<p:selectOneMenu id="responsivePercentage" value="#{kanbanLayoutController.responsivePercentage}">
<f:selectItem itemLabel="false" itemValue="false" />
<f:selectItem itemLabel="true" itemValue="true" />
<p:ajax update="kanban" process="@this" />
</p:selectOneMenu>
<p:outputLabel value="Use percentage-based board widths" />
</h:panelGrid>
<pe:kanban id="kanban"
widgetVar="kanbanLayoutWidget"
value="#{kanbanLayoutController.columns}"
draggable="true"
gutter="#{kanbanLayoutController.gutter}"
widthBoard="#{kanbanLayoutController.widthBoard}"
responsivePercentage="#{kanbanLayoutController.responsivePercentage}"
style="height:400px;margin-top:12px">
</pe:kanban>
@Named
@ViewScoped
public class KanbanLayoutController implements Serializable {
private static final long serialVersionUID = 1L;
private List<KanbanColumn> columns;
private String gutter = "15px";
private String widthBoard = "250px";
private boolean responsivePercentage;
@PostConstruct
public void init() {
columns = new ArrayList<>();
KanbanColumn backlogColumn = new KanbanColumn("backlog", "Backlog");
backlogColumn.setCssClass("kanban-backlog");
backlogColumn.addItem(new KanbanItem("item1", "Gather requirements",
"Collect and document all project requirements"));
backlogColumn.addItem(new KanbanItem("item2", "Create wireframes",
"Design initial wireframes for the new feature"));
KanbanColumn designColumn = new KanbanColumn("design", "Design");
designColumn.setCssClass("kanban-design");
designColumn.addItem(new KanbanItem("item3", "UI mockups",
"Create high-fidelity UI mockups"));
designColumn.addItem(new KanbanItem("item4", "Review designs",
"Review designs with stakeholders"));
KanbanColumn developmentColumn = new KanbanColumn("development", "Development");
developmentColumn.setCssClass("kanban-development");
developmentColumn.addItem(new KanbanItem("item5", "Set up project",
"Initialize project and configure build tools"));
developmentColumn.addItem(new KanbanItem("item6", "Implement core",
"Implement core functionality"));
KanbanColumn testingColumn = new KanbanColumn("testing", "Testing");
testingColumn.setCssClass("kanban-testing");
testingColumn.addItem(new KanbanItem("item7", "Write unit tests",
"Write unit tests for all modules"));
testingColumn.addItem(new KanbanItem("item8", "Integration tests",
"Run and validate integration tests"));
columns.add(backlogColumn);
columns.add(designColumn);
columns.add(developmentColumn);
columns.add(testingColumn);
}
public List<KanbanColumn> getColumns() {
return columns;
}
public void setColumns(List<KanbanColumn> columns) {
this.columns = columns;
}
public String getGutter() {
return gutter;
}
public void setGutter(String gutter) {
this.gutter = gutter;
}
public String getWidthBoard() {
return widthBoard;
}
public void setWidthBoard(String widthBoard) {
this.widthBoard = widthBoard;
}
public boolean isResponsivePercentage() {
return responsivePercentage;
}
public void setResponsivePercentage(boolean responsivePercentage) {
this.responsivePercentage = responsivePercentage;
}
}