It's easy to show the selected row value in a dialog from a p:contextMenu. However, is there an easy way to show the column value (e.g. "2:b") or to get the column index on which the right-click happend?
<p:dataTable id="dt" value="#{['a','b','c']}" var="x" selection="#{bean.x}"
widgetVar="dtv" selectionMode="single" rowKey="#{x}">
<p:column>1:#{x}</p:column>
<p:column>2:#{x}</p:column>
</p:dataTable>
<p:contextMenu for="dt">
<p:menuitem value="Show" update="di" oncomplete="PF('wv').show()" />
</p:contextMenu>
<p:dialog id="di" widgetVar="wv">X=#{bean.x}</p:dialog>
Using: PF6.0 on JavaEE 7
Just idea...
Xhtml
I added two <h:inputHidden/> components and JavaScript function applySelectedCell which is called before context menu is shown.
<h:form prependId="false">
<script type="text/javascript">
function applySelectedCell(event) {
var cell = $(event.target);
if (!cell.is('td')) {
cell = cell.closest('td');
}
var row = cell.closest('tr');
var selectedCell = row.children().index(cell);
$('#selectedCell').val(selectedCell);
$('#selectedHtmlValue').val(cell.text());
}
</script>
<h:inputHidden id="selectedCell" value="#{bean.selectedCell}"/>
<h:inputHidden id="selectedHtmlValue" value="#{bean.selectedHtmlValue}"/>
<p:dataTable id="dt" value="#{['a','b','c']}" var="x" selection="#{bean.x}"
widgetVar="dtv" selectionMode="single" rowKey="#{x}">
<p:column>1:<div style="background: yellow;">#{x}</div></p:column>
<p:column>2:#{x}</p:column>
</p:dataTable>
<p:contextMenu for="dt" beforeShow="applySelectedCell(event);">
<p:menuitem value="Show" update="di" oncomplete="PF('wv').show()" />
</p:contextMenu>
<p:dialog id="di" widgetVar="wv">
<div>Cell value (Bean) = #{bean.selectedBeanValue}</div>
<div>Cell value (HTML) = #{bean.selectedHtmlValue}</div>
</p:dialog>
</h:form>
Backing bean
#ViewScoped
#Named
public class Bean implements Serializable {
private String x = "a";
private Integer selectedCell;
private String selectedHtmlValue;
public String getX() {
return x;
}
public void setX(String x) {
this.x = x;
}
public Integer getSelectedCell() {
return selectedCell;
}
public void setSelectedCell(Integer selectedCell) {
this.selectedCell = selectedCell;
}
public String getSelectedHtmlValue() {
return selectedHtmlValue;
}
public void setSelectedHtmlValue(String selectedHtmlValue) {
this.selectedHtmlValue = selectedHtmlValue;
}
public String getSelectedBeanValue() {
if (selectedCell != null) {
return (selectedCell + 1) + ":" + x;
} else {
return x;
}
}
}
Related
I have a page (page1.xhtml) with a tabView and a dataTable within one of the tabs. The dataTableuses lazy loading and should provide multisort mode.
Therefore I use a List<SortMeta> for the sortBy attribute of dataTable as found here (Initial sortorder for PrimeFaces datatable with multisort).
The List<SortMeta> is created in getPreSortOrder() but findComponent() for clientId "myForm:tabs:data:colName" always returns null!
In another constellation (page2.xhtml) where I have the dataTable not in a tabView findComponent() always returns the correct column component!
So the problem seems to be the combination with tabView?!
Any hints welcome - Thank you!
page.xhtml:
<html>
<f:metadata>
<f:viewAction action="#{model.loadData}"/>
</f:metadata>
<ui:composition template="/WEB-INF/template.xhtml">
<ui:define name="content">
<h:form id="myForm">
<p:panelGrid>...</p:panelGrid>
<p:tabView id="tabs">
<p:tab id="tab1">...</p:tab>
<p:tab id="tab2">...</p:tab>
<p:tab id="tab3">
<p:dataTable id="data" lazy="true"
value="#{model.personTableModel}" var="item"
sortMode="multiple" sortBy="#{model.tableMode.preSortOrder}">
<p:column id="colName" sortBy="#{item.name}"> // <-- findComponent for "myForm:tabs:data:colName" always returns null !!!
<h:outputText value="#{item.name}"/>
</p:column>
<p:column id="colAddress" sortBy="#{item.address}">
<h:outputText value="#{item.address}"/>
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
</h:form>
</ui:define>
</ui:composition>
</html>
page2.xhtml:
<html>
<f:metadata>
<f:viewAction action="#{model.loadData}"/>
</f:metadata>
<ui:composition template="/WEB-INF/template.xhtml">
<ui:define name="content">
<h:form id="myForm">
<p:panelGrid>...</p:panelGrid>
<p:outputPanel id="tables">
<p:fieldset>
<p:dataTable id="data" lazy="true"
value="#{model.personTableModel}" var="item"
sortMode="multiple" sortBy="#{model.tableMode.preSortOrder}">
<p:column id="colName" sortBy="#{item.name}"> // <-- findComponent for "myForm:data:colName" always component
<h:outputText value="#{item.name}"/>
</p:column>
<p:column id="colAddress" sortBy="#{item.address}">
<h:outputText value="#{item.address}"/>
</p:column>
</p:dataTable>
<p:fieldset>
</p:outputPanel>
</h:form>
</ui:define>
</ui:composition>
</html>
Model.java:
#Named // javax.inject.Named
#ViewScoped // javax.faces.view.ViewScoped
public class Model implements Serializable {
private static final String COL_NAME_CLIENT_ID = "myForm:tabs:data:colName";
#Inject PersonTableDataModel personTableDataModel; // with getter & setter
public void loadData() {
List<SortMeta> preSortOrder = getPreSortOrder(COL_NAME_CLIENT_ID, "name", SortOrder.ASCENDING);
personTableDataModel.setPreSortOrder(preSortOrder);
}
private List<SortMeta> getPreSortOrder(String columnId, String sortField, SortOrder sortOrder) {
UIViewRoot viewRoot = FacesContext.getCurrentInstance().getViewRoot();
UIComponent column = viewRoot.findComponent(columnId); // <-- ALWAYS RETURNS NULL
if (Objects.isNull(column)) {
return Collections.emptyList();
}
List<SortMeta> preSortOrder = new ArrayList<>();
SortMeta sm = new SortMeta();
sm.setSortBy((UIColumn) column);
sm.setSortField(sortField);
sm.setSortOrder(sortOrder);
preSortOrder.add(sm);
return preSortOrder;
}
}
PersonTableDataModel.java:
public class PersonTableDataModel extends TableModel<Person> {
}
TableModel.java:
public class TableModel<T> extends LazyDataModel<T> {
private List<SortMeta> preSortOrder; // with getter & setter
}
I am using Primefaces 6.1 on Wildfly 10.0.0.Final
EDIT:
I added a TabChange event listener changeTab() and traversed the UIComponents and at the end the correct clientId is written to the output?!
Model.java:
public void changeTab(TabChangeEvent event) {
TabView tabView = (TabView) event.getComponent();
logger.entry(tabView.getActiveIndex());
Tab tabProzesse = tabView.findTab("myForm:tabs:tab3");
if (Objects.nonNull(tabProzesse)) {
List<UIComponent> childs = tabProzesse.getChildren();
Optional<UIComponent> c = childs.stream().filter(child -> child.getClientId().equals("myForm:tabs:data")).findFirst();
if (c.isPresent() && c.get() instanceof DataTable) {
DataTable t = (DataTable) c.get();
Optional<UIColumn> optColName = t.getColumns().stream().filter(col -> col.getClientId().contains("colName")).findFirst();
optColName.ifPresent(colName -> {
logger.debugf("colName.clientId=%s", colName.getClientId()); // <-- output colName.clientId=myForm:tabs:data:colName
});
}
}
}
I fixed it by this work-around:
added tabChange event listener to tabView and update datatable data
added binding to initial sort column with id colName
set preSortOrder for tableModel in onTabChange listener
page.xhtml:
<p:tabView id="tabs">
<p:ajax event="tabChange" listener="#{model.onTabChange}" update="data"/>
<p:tab id="tab1">...</p:tab>
<p:tab id="tab2">...</p:tab>
<p:tab id="tab3">
<p:dataTable id="data" lazy="true"
value="#{model.personTableModel}" var="item"
sortMode="multiple"
sortBy="#{model.personTableModel.preSortOrder}">
<p:column id="colName" sortBy="#{item.name}" binding="#{mode.colName}">
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
Model.java:
private UIComponent colName;
public UIComponent getColName() {
return colName;
}
public void setColName(UIComponent colNameProzess) {
this.colName = colName;
}
public void onTabChange(TabChangeEvent event) {
TabView tabView = (TabView) event.getComponent();
UIComponent uiComponent = findComponent(tabView, colName.getId());
if (Objects.nonNull(uiComponent) && uiComponent instanceof org.primefaces.component.api.UIColumn) {
List<SortMeta> preSortOrder = getPreSortOrder(uiComponent, "name", SortOrder.ASCENDING);
personTableDataModel.setPreSortOrder(preSortOrder);
}
}
private List<SortMeta> getPreSortOrder(UIColumn column, String sortField, SortOrder sortOrder) {
List<SortMeta> preSortOrder = new ArrayList<>();
SortMeta sm = new SortMeta();
sm.setSortBy(column);
sm.setSortField(sortField);
sm.setSortOrder(sortOrder);
preSortOrder.add(sm);
return preSortOrder;
}
private UIComponent findComponent(UIComponent uiComponent, String id) {
FacesContext context = FacesContext.getCurrentInstance();
UIComponent base = Objects.nonNull(uiComponent) ? uiComponent : context.getViewRoot();
final UIComponent[] found = new UIComponent[1];
base.visitTree(VisitContext.createVisitContext(context), (context1, component) -> {
if (component.getId().equals(id)) {
found[0] = component;
return VisitResult.COMPLETE;
}
return VisitResult.ACCEPT;
});
return found[0];
}
I have seen in PrimeFaces demo an example on Adding markers and on Draggable markers.i flow the two examples and it 's working, and know i'm trying to integrate both these examples into one working example but i couldn't ( i m' a biggenner ) could you please help me .
this is the example of adding marker :
this is the ponitBean:
#Component
#Scope
#ManagedBean (name = "pointBean")
public class PointBean {
// =========================================================================
// ATTRIBUTES
// =========================================================================
private Point point ;
private PointService pointService;
private MapModel emptyModel;
// =========================================================================
// CONSTRUCTORS
// =========================================================================
public PointBean() {
super();
// TODO Auto-generated constructor stub
}
// =========================================================================
// METHODS
// =========================================================================
public void savePoint(){
pointService.savePoint(point);
addMarker();
}
#SuppressWarnings("unchecked")
public List<Point>getAllPoint(){
return pointService.getAllPoint();
}
#PostConstruct
public void reint(){
point = new Point();
}
#PostConstruct
public void init() {
emptyModel = new DefaultMapModel();
}
public void addMarker() {
Marker marker=new Marker(new LatLng(point.getLatitude(), point.getLongitude()));
emptyModel.addOverlay((marker));
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + point.getLatitude() + ", Lng:" + point.getLongitude()));
}
// =========================================================================
// GETTERS & SETTERS
// =========================================================================
public Point getPoint() {
return point;
}
public void setPoint(Point point) {
this.point = point;
}
public MapModel getEmptyModel() {
return emptyModel;
}
public void setEmptyModel(MapModel emptyModel) {
this.emptyModel = emptyModel;
}
#Autowired
public void setPointService(PointService pointService) {
this.pointService = pointService;
}
}
and this is my xhtml file :
<h:head>
<title>Home</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</h:head>
<h:body>
<p:growl id="messages" showDetail="true" />
<p:growl id="growl" showDetail="true" />
<p:gmap id="gmap" center="36.890257,10.365411" zoom="13" type="HYBRID" style="width:600px;height:400px"
model="#{pointBean.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" >
</p:gmap>
<p:dialog widgetVar="dlg" showEffect="fade">
<h:form prependId="false">
<h:panelGrid columns="2">
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{pointBean.point.titre}" />
<f:facet name="footer">
<p:commandButton value="Add" actionListener="#{pointBean.savePoint}" update=":messages" oncomplete="markerAddComplete()" />
<p:commandButton value="Cancel" onclick="return cancel()" />
</f:facet>
</h:panelGrid>
<h:inputHidden id="longitude" value="#{pointBean.point.latitude}" />
<h:inputHidden id="latitude" value="#{pointBean.point.longitude}" />
</h:form>
</p:dialog>
<script type="text/javascript">
var currentMarker = null;
function handlePointClick(event) {
if(currentMarker === null) {
document.getElementById('longitude').value = event.latLng.lng();
document.getElementById('latitude').value = event.latLng.lat();
currentMarker = new google.maps.Marker({
position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
});
PF('map').addOverlay(currentMarker);
PF('dlg').show();
}
}
function markerAddComplete() {
var title = document.getElementById('title');
currentMarker.setTitle(title.value);
title.value = "";
currentMarker = null;
PF('dlg').hide();
}
function cancel() {
PF('dlg').hide();
currentMarker.setMap(null);
currentMarker = null;
return false;
}
</script>
</h:body>
</html>
what should i add in order to have an dragable marker !!
this is the example for the dragable marker from primefaces :
this is the dragableMarkerbean :
#ManagedBean
#ViewScoped
public class DraggableMarkersView implements Serializable {
private MapModel draggableModel;
private Marker marker;
#PostConstruct
public void init() {
draggableModel = new DefaultMapModel();
//Shared coordinates
LatLng coord1 = new LatLng(36.879466, 30.667648);
LatLng coord2 = new LatLng(36.883707, 30.689216);
LatLng coord3 = new LatLng(36.879703, 30.706707);
LatLng coord4 = new LatLng(36.885233, 30.702323);
//Draggable
draggableModel.addOverlay(new Marker(coord1, "Konyaalti"));
draggableModel.addOverlay(new Marker(coord2, "Ataturk Parki"));
draggableModel.addOverlay(new Marker(coord3, "Karaalioglu Parki"));
draggableModel.addOverlay(new Marker(coord4, "Kaleici"));
for(Marker premarker : draggableModel.getMarkers()) {
premarker.setDraggable(true);
}
}
public MapModel getDraggableModel() {
return draggableModel;
}
public void onMarkerDrag(MarkerDragEvent event) {
marker = event.getMarker();
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Dragged", "Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng()));
}
}
and this is the xhtml :
<h:form>
<p:growl id="growl" showDetail="true" />
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" model="#{draggableMarkersView.draggableModel}" style="width:600px;height:400px">
<p:ajax event="markerDrag" listener="#{draggableMarkersView.onMarkerDrag}" update="growl" />
</p:gmap>
</h:form>
please could you help me!! what should i add in order to have a draggable marker in the first example !!
You have to add in javascript handlePointClick.
add: currentMarker.setDraggable(true);
after: currentMarker = new google.maps.Marker ....
I´m a begginer in Primefaces.... And I tried to make the example DragDrop - Native Primefaces
I´ll posted all the clases and xhtml files involved for this example.
I can drag any columns but it´s not working the droping property....
You can see an image showing the trouble in this link https://lh3.googleusercontent.com/clMOtntqI99ltjXGYpzUGt-8yg4N8ahtQQIBT5leNA=w314-h207-p-no
The fist file is dndColumns.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>dndColumns</title>
</h:head>
<body>
<h:form id="form">
<p:remoteCommand name="updateColumns" actionListener="#{tableBean.onColumnDrop}"
update="cars" oncomplete="initDND()"/>
<p:tree id="tree" value="#{tableBean.availableColumns}" var="column">
<p:treeNode>
<h:outputText value="#{column}" />
</p:treeNode>
<p:treeNode type="column" icon="ui-icon-grip-dotted-vertical">
<h:outputText value="#{column.property}" />
</p:treeNode>
</p:tree>
<p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">
<p:columns value="#{tableBean.columns}" var="column">
<f:facet name="header">
<h:outputText style="float:left;display:block;height:12px;width:10px;border:0 none;"
styleClass="droppoint dropleft" />
<h:outputText style="float:right;display:block;height:12px;width:10px;border:0 none;"
styleClass="droppoint dropright" />
<h:outputText value="#{column.header}" />
</f:facet>
<h:outputText value="#{car[column.property]}" />
</p:columns>
</p:dataTable>
<script type="text/javascript">
function initDND() {
$('.ui-treenode-leaf').draggable({
helper: 'clone',
scope: 'treetotable',
zIndex: ++PrimeFaces.zindex
});
$('.ui-datatable .droppoint').droppable({
activeClass: 'ui-state-active',
hoverClass: 'ui-state-highlight',
tolerance: 'pointer',
scope: 'treetotable',
drop: function(event, ui) {
var property = ui.draggable.find('.ui-treenode-label').text(),
droppedColumnId = $(this).parents('th:first').attr('id'),
dropPos = $(this).hasClass('dropleft') ? 0 : 1;
treeToTable([
{name: 'property', value: property}
,{name: 'droppedColumnId', value: droppedColumnId}
,{name: 'dropPos', value: dropPos}
]);
}
});
$('.ui-datatable th').draggable({
helper: 'clone',
scope: 'tabletotree',
helper: function() {
var th = $(this);
return th.clone().css('width', th.width());
}
});
$('.ui-tree').droppable({
helper: 'clone',
scope: 'tabletotree',
activeClass: 'ui-state-active',
hoverClass: 'ui-state-highlight',
tolerance: 'touch',
drop: function(event, ui) {
tableToTree([
{name: 'colIndex', value: ui.draggable.index()}
]);
}
});
}
$(function() {
initDND();
});
</script>
<hr/>
<p:menu>
<p:submenu label="Resources">
<p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/dndColumns.jsf" />
</p:submenu>
</p:menu>
</h:form>
</body>
</html>
The second file is TableBean.java
package org.sagarpa.src.managedBean;
import java.io.Serializable;
import java.util.Arrays;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import java.util.logging.Logger;
import javax.faces.context.FacesContext;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
// import org.primefaces.examples.domain.Car;
import org.sagarpa.src.bean.Car;
#ManagedBean
#SessionScoped
public class TableBean implements Serializable {
private final static List<String> VALID_COLUMN_KEYS = Arrays.asList("model", "manufacturer", "year", "color");
private final static String[] colors;
private final static String[] manufacturers;
private String columnTemplate = "model manufacturer year";
static {
colors = new String[10];
colors[0] = "Black";
colors[1] = "White";
colors[2] = "Green";
colors[3] = "Red";
colors[4] = "Blue";
colors[5] = "Orange";
colors[6] = "Silver";
colors[7] = "Yellow";
colors[8] = "Brown";
colors[9] = "Maroon";
manufacturers = new String[10];
manufacturers[0] = "Mercedes";
manufacturers[1] = "BMW";
manufacturers[2] = "Volvo";
manufacturers[3] = "Audi";
manufacturers[4] = "Renault";
manufacturers[5] = "Opel";
manufacturers[6] = "Volkswagen";
manufacturers[7] = "Chrysler";
manufacturers[8] = "Ferrari";
manufacturers[9] = "Ford";
}
private List<Car> carsSmall;
private List<Car> carsLarge;
private List<ColumnModel> columns = new ArrayList<ColumnModel>();
private TreeNode availableColumns;
public TableBean() {
carsSmall = new ArrayList<Car>();
populateRandomCars(carsSmall, 9);
createDynamicColumns();
createAvailableColumns();
}
private void populateRandomCars(List<Car> list, int size) {
for(int i = 0 ; i < size ; i++)
list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
}
public List<Car> getCarsSmall() {
return carsSmall;
}
private int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
private String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private String getRandomManufacturer() {
return manufacturers[(int) (Math.random() * 10)];
}
private String getRandomModel() {
return UUID.randomUUID().toString().substring(0, 8);
}
public List<ColumnModel> getColumns() {
return columns;
}
private void createAvailableColumns() {
availableColumns = new DefaultTreeNode("Root", null);
TreeNode root = new DefaultTreeNode("Columns", availableColumns);
root.setExpanded(true);
TreeNode model = new DefaultTreeNode("column", new ColumnModel("Model", "model"), root);
TreeNode year = new DefaultTreeNode("column", new ColumnModel("Year", "year"), root);
TreeNode manufacturer = new DefaultTreeNode("column", new ColumnModel("Manufacturer", "manufacturer"), root);
TreeNode color = new DefaultTreeNode("column", new ColumnModel("Color", "color"), root);
}
public TreeNode getAvailableColumns() {
return availableColumns;
}
public void createDynamicColumns() {
String[] columnKeys = columnTemplate.split(" ");
columns.clear();
for(String columnKey : columnKeys) {
String key = columnKey.trim();
if(VALID_COLUMN_KEYS.contains(key)) {
columns.add(new ColumnModel(columnKey.toUpperCase(), columnKey));
}
}
}
public void treeToTable() {
Map<String,String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
String property = params.get("property");
String droppedColumnId = params.get("droppedColumnId");
String dropPos = params.get("dropPos");
String[] droppedColumnTokens = droppedColumnId.split(":");
int draggedColumnIndex = Integer.parseInt(droppedColumnTokens[droppedColumnTokens.length - 1]);
int dropColumnIndex = draggedColumnIndex + Integer.parseInt(dropPos);
//add to columns
this.columns.add(dropColumnIndex, new ColumnModel(property.toUpperCase(), property));
//remove from nodes
TreeNode root = availableColumns.getChildren().get(0);
for(TreeNode node : root.getChildren()) {
ColumnModel model = (ColumnModel) node.getData();
if(model.getProperty().equals(property)) {
root.getChildren().remove(node);
break;
}
}
}
public void tableToTree() {
Map<String,String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
int colIndex = Integer.parseInt(params.get("colIndex"));
//remove from table
ColumnModel model = this.columns.remove(colIndex);
//add to nodes
TreeNode property = new DefaultTreeNode("column", model, availableColumns.getChildren().get(0));
}
static public class ColumnModel implements Serializable {
private String header;
private String property;
public ColumnModel(String header, String property) {
this.header = header;
this.property = property;
}
public String getHeader() {
return header;
}
public String getProperty() {
return property;
}
}
}
And the third and last file is Car.java
package org.sagarpa.src.bean;
// import java.util.Date;
public class Car {
private String model;
private int year;
private String manufacturer;
private String color;
public Car(String model, int year, String manufacturer, String color) {
this.model = model;
this.year = year;
this.manufacturer = manufacturer;
this.color = color;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
public int getYear() {
return year;
}
public void setYear(int year) {
this.year = year;
}
public String getManufacturer() {
return manufacturer;
}
public void setManufacturer(String manufacturer) {
this.manufacturer = manufacturer;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}
The problem exists when I want to drag any component because its can´t drop on the table or on the Columns area rectangle.
Please.... Could you help me to complete the code ??? Any sugestion ???
Regards...
I YET solved my problem....
Only make a change into the fist file is dndColumns.xhtml
We need to replace this line:
<p:remoteCommand name="updateColumns" actionListener="#{tableBean.onColumnDrop}" update="cars" oncomplete="initDND()"/>
for other these two lines:
<p:remoteCommand name="treeToTable" actionListener="#{tableBean.treeToTable}" update="tree cars" oncomplete="initDND()"/>
<p:remoteCommand name="tableToTree" actionListener="#{tableBean.tableToTree}" update="tree cars" oncomplete="initDND()"/>
And test it again.....
WONDERFUL....!!!!!!
I'll post the complete dndColumns.xhtml file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>dndColumns</title>
</h:head>
<body>
<h1 class="title ui-widget-header ui-corner-all">DragDrop - Native</h1>
<p>This sample demonstrates how to integrate low level jquery apis with PrimeFaces. Tree component displays the available
columns which are draggable. Column headers have drop targets and dropping a treenode onto one of these adds the related property column to the datatable.
Column headers can also be moved back to the tree.</p>
<h:form id="form">
<p:remoteCommand name="treeToTable" actionListener="#{tableBean.treeToTable}" update="tree cars" oncomplete="initDND()"/>
<p:remoteCommand name="tableToTree" actionListener="#{tableBean.tableToTree}" update="tree cars" oncomplete="initDND()"/>
<p:tree id="tree" value="#{tableBean.availableColumns}" var="column">
<p:treeNode>
<h:outputText value="#{column}" />
</p:treeNode>
<p:treeNode type="column" icon="ui-icon-grip-dotted-vertical">
<h:outputText value="#{column.property}" />
</p:treeNode>
</p:tree>
<br />
<p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">
<p:columns value="#{tableBean.columns}" var="column">
<f:facet name="header">
<h:outputText style="float:left;display:block;height:20px;width:10px;border:0 none;" styleClass="droppoint dropleft" />
<h:outputText style="float:right;display:block;height:20px;width:10px;border:0 none;" styleClass="droppoint dropright" />
<h:outputText value="#{column.header}" />
</f:facet>
<h:outputText value="#{car[column.property]}" />
</p:columns>
</p:dataTable>
<script type="text/javascript">
function initDND() {
$('.ui-treenode-leaf').draggable({
helper: 'clone',
scope: 'treetotable',
zIndex: ++PrimeFaces.zindex
});
$('.ui-datatable .droppoint').droppable({
activeClass: 'ui-state-active',
hoverClass: 'ui-state-highlight',
tolerance: 'pointer',
scope: 'treetotable',
drop: function(event, ui) {
var property = ui.draggable.find('.ui-treenode-label').text(),
droppedColumnId = $(this).parents('th:first').attr('id'),
dropPos = $(this).hasClass('dropleft') ? 0 : 1;
treeToTable([
{name: 'property', value: property}
,{name: 'droppedColumnId', value: droppedColumnId}
,{name: 'dropPos', value: dropPos}
]);
}
});
$('.ui-datatable th').draggable({
helper: 'clone',
scope: 'tabletotree',
helper: function() {
var th = $(this);
return th.clone().css('width', th.width());
}
});
$('.ui-tree').droppable({
helper: 'clone',
scope: 'tabletotree',
activeClass: 'ui-state-active',
hoverClass: 'ui-state-highlight',
tolerance: 'touch',
drop: function(event, ui) {
tableToTree([
{name: 'colIndex', value: ui.draggable.index()}
]);
}
});
}
$(function() {
initDND();
});
</script>
<hr/>
<p:menu>
<p:submenu label="Resources">
<p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/dndColumns.jsf" />
</p:submenu>
</p:menu>
</h:form>
</body>
</html>
Environment:
1, glassfish 3.1
2, primefaces 3.0.1
Requirement:
1, Develop a composite component named "corpInfoMap", which shows the locations of corporations in google map as "markers". when user click a marker, display the corporation's infomation in mapInfoWindow.
2, Develop an other composite component named "corpInfoMapDialog", which is a p:dialog contains the "corpInfoMap".
Problem:
The Map works excellent, both in page or in dialog. but when user click the marker in map:
The "OverlaySelectEvent"(event) which is passed into the listener method is NULL. So "event.getgetOverlay()" throws NullPonterException.
Code:
1 corpInfoMap.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
>
<cc:interface displayName="单位地理信息">
<cc:attribute name="mapModel" required="true" displayName="地理信息Model,com.ui.fwjg.viewModel.CorporationMapModel类型" />
<cc:attribute name="selectedListener" required="true" method-signature="void method(org.primefaces.event.map.OverlaySelectEvent)" displayName="选择锚点的方法" />
</cc:interface>
<cc:implementation>
<f:view contentType="text/html">
<p:gmap zoom="#{cc.attrs.mapModel.zoom}"
type="HYBRID"
center="#{cc.attrs.mapModel.centerWd},#{cc.attrs.mapModel.centerJd}"
style="width:#{cc.attrs.mapModel.width}px;height:#{cc.attrs.mapModel.height}px;"
model="#{cc.attrs.mapModel.model}"
>
<p:ajax event="overlaySelect" listener="#{cc.attrs.selectedListener}"></p:ajax>
<p:gmapInfoWindow rendered="#{cc.attrs.mapModel.selectedMarker != null}" maxWidth="#{cc.attrs.mapModel.width / 2}">
<p:outputPanel style="text-align:center;display:block;margin:auto:" rendered="#{cc.attrs.mapModel.selectedMarker != null}">
<h:panelGroup style="width:100%;font-size:1.5em;line-height:2em;font-weight:bold;text-align:center;">
#{cc.attrs.mapModel.selectedMarker.data.dwmc}
</h:panelGroup>
<h:panelGroup layout="block" styleClass="com-ui-clearboth"></h:panelGroup>
<h:graphicImage rendered="#{not empty cc.attrs.mapModel.selectedMarker.data.dwsltFile}"
style="max-width:#{cc.attrs.mapModel.width / 2};display:block;margin:20px auto;"
url="/file.ui?f=#{cc.attrs.mapModel.selectedMarker.data.dwsltFile}"></h:graphicImage>
<h:outputText value="#{mapBean.marker.title}" />
<h:panelGroup layout="block" styleClass="com-ui-clearboth"></h:panelGroup>
<h:outputText rendered="#{not empty cc.attrs.mapModel.selectedMarker.dwjj}"
value="<p style="font-size:1em;line-height:1.5em;text-indent:2em;">"
escape="false"></h:outputText>
<h:outputText rendered="#{not empty cc.attrs.mapModel.selectedMarker.dwjj}" value="#{cc.attrs.mapModel.selectedMarker.dwjj}">
</h:outputText>
<h:outputText rendered="#{not empty cc.attrs.mapModel.selectedMarker.dwjj}" value="</p>" escape="false"></h:outputText>
</p:outputPanel>
</p:gmapInfoWindow>
</p:gmap>
</f:view>
</cc:implementation>
2 corpInfoMapDialog.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:comuicommon="http://java.sun.com/jsf/composite/components/ui/common">
<!-- INTERFACE -->
<cc:interface displayName="单位地理信息窗口">
<cc:attribute name="mapModel" required="true" displayName="地理信息Model,com.ui.fwjg.viewModel.CorporationMapModel类型" />
<cc:attribute name="selectedListener" required="true" method-signature="void method(javax.faces.component.behavior.AjaxBehavior)" displayName="选择锚点的方法" />
<cc:attribute name="dialogId" default="corpInfoMapDialog" displayName="对话框的ID" />
</cc:interface>
<cc:implementation>
<p:dialog header="单位地理信息" widgetVar="#{cc.attrs.dialogId}" id="#{cc.attrs.dialogId}" width="#{cc.attrs.mapModel.width}">
<h:panelGroup rendered="#{cc.attrs.mapModel != null and cc.attrs.mapModel.model != null and (not empty cc.attrs.mapModel.model.markers)}" layout="block">
<comuicommon:corpInfoMap mapModel="#{cc.attrs.mapModel}" selectedListener="#{cc.attrs.selectedListener}"/>
</h:panelGroup>
<h:panelGroup rendered="#{not (cc.attrs.mapModel != null and cc.attrs.mapModel.model != null and (not empty cc.attrs.mapModel.model.markers))}"
layout="block" style="font-size:2em;text-align:center;">
该单位无地理信息。
</h:panelGroup>
</p:dialog>
</cc:implementation>
</html>
3 The Backing Beans(One of them):
#ManagedBean
#ViewScoped
public class JlltWssbDjjsbEditPage implements Serializable{
... // a lot of lines
private CorporationMapModel corporationMapModel;
#PostConstruct
public void init() {
corporationMapModel = new CorporationMapModel();
... // other codes, have no business with corporationMapModel.
}
// the OverlaySelectEvent listener method
// when user click the marker in map, this method is invoked, but the parameter "evnet" is null.
public void setSelectedMarker(OverlaySelectEvent event){
corporationMapModel.onMarkerSelect(event);
}
public CorporationMapModel getCorporationMapModel() {
return corporationMapModel;
}
public void setCorporationMapModel(CorporationMapModel corporationMapModel) {
this.corporationMapModel = corporationMapModel;
}
// reset the jsb, reset the corporationMapModel's properties(only it's properties, neither it nor the mapModel in it.)
public void setJsb(JlltWssbDjjsb jsb) {
this.jsb = jsb;
Corporation corporation = jsb == null ? null : (jsb.getWineInfo() == null ? null : jsb.getWineInfo().getCorporation());
corporationMapModel.resetModel(corporation);
setShowHistory(jsb != null);
initWineInfo();
}
... // a lot of lines, have no business with
}
4 CorporationMapModel.java
public class CorporationMapModel implements Serializable{
private List<Corporation> corporations; // 企业列表 corporation list
private MapModel model; // 地理信息Model primefaces map model
private String centerJd; // 地图中间位置-经度 lng
private String centerWd; // 地图中间位置-维度 lat
private String zoom; // 地图缩放级别 gmap zoom
private Marker selectedMarker; // 被选择的Marker selected marker(overlay)
private int width = 600; // the width(px) of the map
private int height = 480; // the height(px) of the map
public void resetModel(Corporation corporation) {
List<Corporation> corporations = new ArrayList<Corporation>();
if(corporation != null){
corporations.add(corporation);
}
setCorporations(corporations);
}
public void resetModel(List<Corporation> corporations) {
corporations = corporations == null ? new ArrayList<Corporation>() : corporations;
setCorporations(corporations);
}
private void calInfosByCorporations() {
if(model == null)
model = new DefaultMapModel();
model.getMarkers().clear();
if (corporations != null && corporations.size() > 0) {
for (Corporation corporation : corporations) {
CorporationMapInfo mapInfo = CorporationMapInfo.generateNewCorporationMapInfo(corporation);
if (mapInfo != null) {
model.addOverlay(mapInfo);
}
}
List<Marker> markers = model.getMarkers();
if (markers != null && markers.size() > 0) {
double maxWd = 0D;
double minWd = 0D;
double maxJd = 0D;
double minJd = 0D;
for (int i = 0; i < markers.size(); i++) {
Marker marker = markers.get(i);
if (i == 0) {
maxWd = marker.getLatlng().getLat();
minWd = marker.getLatlng().getLat();
maxJd = marker.getLatlng().getLng();
minJd = marker.getLatlng().getLng();
} else {
double wd = marker.getLatlng().getLat();
double jd = marker.getLatlng().getLng();
maxWd = maxWd < wd ? wd : maxWd;
maxJd = maxJd < jd ? jd : maxJd;
minWd = minWd > wd ? wd : minWd;
minJd = minJd > jd ? jd : minJd;
}
}
BigDecimal centerWd = new BigDecimal((maxWd + minWd) / 2D);
BigDecimal centerJd = new BigDecimal((maxJd + minJd) / 2D);
centerWd = centerWd.setScale(6, BigDecimal.ROUND_HALF_UP);
centerJd = centerJd.setScale(6, BigDecimal.ROUND_HALF_UP);
setCenterWd(centerWd.toPlainString());
setCenterJd(centerJd.toPlainString());
zoom = GoogleMapZoom.getZoom(maxWd, minWd, maxJd, minJd, width, height);
}
}
}
public void onMarkerSelect(OverlaySelectEvent event) {
selectedMarker = (Marker) event.getOverlay();
}
public List<Corporation> getCorporations() {
return corporations;
}
public void setCorporations(List<Corporation> corporations) {
corporations = corporations == null ? new ArrayList<Corporation>() : corporations;
this.corporations = corporations;
calInfosByCorporations();
}
public MapModel getModel() {
return model;
}
public String getCenterJd() {
return centerJd;
}
public void setCenterJd(String centerJd) {
this.centerJd = centerJd;
}
public String getCenterWd() {
return centerWd;
}
public void setCenterWd(String centerWd) {
this.centerWd = centerWd;
}
public String getZoom() {
return zoom;
}
public void setZoom(String zoom) {
this.zoom = zoom;
}
public Marker getSelectedMarker() {
return selectedMarker;
}
public int getWidth() {
return width;
}
public void setWidth(int width) {
this.width = width;
}
public int getHeight() {
return height;
}
public void setHeight(int height) {
this.height = height;
}
public void setModel(MapModel model) {
this.model = model;
}
public void setSelectedMarker(Marker selectedMarker) {
this.selectedMarker = selectedMarker;
}
}
5 js.xhtml("js" means "reduce", not "javascript"), the important part in this xhtml file:
<h:form id="dwMapForm">
<comuicommon:corpInfoMapDialog
mapModel="#{jlltWssbDjjsbEditPage.corporationMapModel}"
selectedListener="#{jlltWssbDjjsbEditPage.setSelectedMarker(org.primefaces.event.map.OverlaySelectEvent)}"
dialogId="dwMapDialog"
/>
</h:form>
what I've done:
1, I've googled a lot, but there are no answers.
2, I've debuged, I found that the event object has been generated by primefaces (at least, in the method of AjaxBehaviorRenderer.decode(FacesContext context, UIComponent component, ClientBehavior behavior), the event object is exists, not null.)
3, and in the method of JlltWssbDjjsbEditPage.setSelectedMarker(OverlaySelectEvent event), the event is null.
Thank you every one!
I hope I've make it clear.
Best regards!
I've a datatable in primefaces and I want, when I add a row in it, view the last page of the datatable.
My .xhtml page is:
<h:form id=...>
...
<p:dataTable var="webTemplate" id="templateTable" widgetVar="tbl1"/>
...
</h:form>
<h:form id=...>
...
<p:inputText id="txt_description" value="#{templateController.templateDescription}" label="templateDescription">
<f:validateLength for="txt_name" minimum="1"/>
<p:ajax event="change"
listener="#{calculatePageTable.setPageTableTemplate}" onsuccess="setTabIndexTT()"/>
</p:inputText>
...
</h:form>
<script type="text/javascript">
function setTabIndexTT(){
tbl1.getPaginator().setPage(#{calculatePageTable.pageTableTemplate});
}
</script>
bean:
#ManagedBean
#SessionScoped
public class CalculatePageTable {
private int pageTableTemplate = 0;
private int pageTableField = 0;
public void setPageTableTemplate() {
final DataTable d = (DataTable) FacesContext.getCurrentInstance().getViewRoot()
.findComponent("form:templateTable");
pageTableTemplate = d.getPageCount() - 1;
}
public int getPageTableTemplate() {
return pageTableTemplate;
}
public void setPageTemplateField() {
final DataTable d = (DataTable) FacesContext.getCurrentInstance().getViewRoot()
.findComponent("detailsTable:webTemplateUpdateTable");
pageTableField = (d.getPageCount() - 1);
}
public int getPageTableField() {
return pageTableField;
}
}
But the js function setTabIndexTT() is never called by onsuccess ajax...
How do I can set last page of my datatable when adding a row?
Primefaces version is 3.1.1
In your managed bean you can try this code:
public void setPageDataTable() {
final DataTable d = (DataTable) FacesContext.getCurrentInstance().getViewRoot()
.findComponent("form:templateTable");
int first = 1;
if (d.getRowCount() % ROWS_DATATABLE == 0) {
first = (d.getRowCount() - ROWS_DATATABLE);
}
else
{
first = (d.getRowCount()/ROWS_DATATABLE)*ROWS_DATATABLE;
}
d.setFirst(first);
}
Call this method when you add a new row
if the datatable widgetVar is dataTableWidget then use this:
<script type="text/javascript">
$(document).ready(function () {
dataTableWidget.paginator.setPage(0);
});
</script>
I would do it without any JavaScript. Primefaces's datatable has a first attribute, which is the index of the first data to display.
<p:dataTable first="#{calculatePageTable.first}"/>
...
<p:commandButton value="Add a row" action="#{calculatePageTable.addRow}"/>
And your backing bean:
public class CalculatePageTable {
private int first = 1;
public int getFirst(){
return first;
}
public void addRow(){
// 1. your stuff for adding the row
...
// 2. switch to the row
first = getFirstRowOnLastPage();
}
private int getFirstRowOnLastPage(){
...
}
}
You could avoid the explicit ID in your code by using bindings:
xhtml:
<p:dataTable var="webTemplate" id="templateTable" widgetVar="tbl1" binding="#{calculatePageTable.dataTable" />
bean:
public class CalculatePageTable {
private DataTable dataTable;
public DataTable getDataTable() {
return dataTable;
}
public void setDataTable(DataTable dataTable) {
this.dataTable = dataTable;
}
/* See Teg's answer */
public void setPageDataTable() {
int first = 1;
if (dataTable.getRowCount() % ROWS_DATATABLE == 0) {
first = (dataTable.getRowCount() - ROWS_DATATABLE);
}
else
{
first = (dataTable.getRowCount()/ROWS_DATATABLE)*ROWS_DATATABLE;
}
dataTable.setFirst(first);
}
}