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>
Related
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;
}
}
}
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 ....
How can i create a secondary y axis on primefaces 3.4?
i already read the primefaces manual e googled out there
Google tells that y2axis (from jqplot) is the way
but primefaces manual doesn't mention y2axis at all
my class
package br.com.inmetrics.managedbean;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.chart.CartesianChartModel;
import org.primefaces.model.chart.LineChartSeries;
import javax.faces.event.ComponentSystemEvent;
import br.com.inmetrics.entity.Grafico;
import javax.faces.event.AbortProcessingException;
import br.com.inmetrics.dao.SistemaDAO;
#ManagedBean(name = "chartMB")
#SessionScoped
public class ChartManagedBean implements Serializable {
private static final long serialVersionUID = 1L;
private SistemaDAO apoioDao = new SistemaDAO();
private List<Grafico> graficos = new ArrayList<Grafico>();
private CartesianChartModel categoryModel;
private CartesianChartModel linearModel;
private String sistema;
private String hostname;
private String metrica;
private String alinhamento;
private String funcao;
private int maximo;
public ChartManagedBean() {
}
public CartesianChartModel getCategoryModel() {
return categoryModel;
}
public CartesianChartModel getLinearModel() {
return linearModel;
}
private void createLinearModel() {
try {
graficos = apoioDao.getGrafico(hostname, metrica);
} catch (Exception ex) {
ex.printStackTrace();
}
linearModel = new CartesianChartModel();
LineChartSeries series1 = new LineChartSeries();
this.alinhamento = metrica.equalsIgnoreCase("GBL_LOADAVG") ? "ne" : "e";
this.funcao = metrica.equalsIgnoreCase("GBL_LOADAVG") ? "ext2" : "ext1";
this.maximo = metrica.equalsIgnoreCase("GBL_LOADAVG") ? 1 : 100;
series1.setLabel(metrica);
for (Grafico s : graficos) {
series1.set(s.getData(), s.getValor());
}
LineChartSeries series2 = new LineChartSeries();
series2.setLabel("Threshold");
series2.setMarkerStyle("filledSquare");
for (Grafico t : graficos) {
series2.set(t.getData(), metrica.equalsIgnoreCase("GBL_LOADAVG") ? 0.48 : 80);
}
//teste
LineChartSeries series3 = new LineChartSeries();
series3.setLabel("Threshold");
series3.setMarkerStyle("filledSquare");
for (Grafico t : graficos) {
series3.set(t.getData(), metrica.equalsIgnoreCase("GBL_LOADAVG") ? 0.48 : 90);
}
linearModel.addSeries(series1);
linearModel.addSeries(series2);
//teste
linearModel.addSeries(series3);
}
public String getSistema() {
return sistema;
}
public void setSistema(String sistema) {
this.sistema = sistema;
}
public String getHostname() {
return hostname;
}
public void setHostname(String hostname) {
this.hostname = hostname;
}
public String getMetrica() {
return metrica;
}
public void setMetrica(String metrica) {
this.metrica = metrica;
}
public void push(ComponentSystemEvent evt) throws AbortProcessingException {
createLinearModel();
}
public String getAlinhamento() {
return alinhamento;
}
public void setAlinhamento(String alinhamento) {
this.alinhamento = alinhamento;
}
public int getMaximo() {
return maximo;
}
public void setMaximo(int maximo) {
this.maximo = maximo;
}
public String getFuncao() {
return funcao;
}
public void setFuncao(String funcao) {
this.funcao = funcao;
}
}
my xhtml:
<h:head>
<link rel="shortcut icon" href="images/ico.ico" />
<title>Capacity - Dashboard</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</h:head>
<h:body>
<h:form>
<script type="text/javascript">
function ext1() {
this.cfg.axes.yaxis.tickOptions = {
formatString : '%d\%'
};
}
function ext2() {
this.cfg.axes.yaxis.tickOptions = {
formatString : '%.2f'
};
}
</script>
<div id="externa_corpo">
<div id="corpo">
<div id="logo">
<img src="images/pt/logo.png" width="200" height="74" />
</div>
<!--logo-->
<div id="titulo-book">
Dashboard <br />
</div>
<div id="logo-cliente">
<img src="images/logoTIM.jpg" width="122" height="53" />
</div>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<p:lineChart id="linear" value="#{chartMB.linearModel}"
legendPosition="#{chartMB.alinhamento}"
title="#{chartMB.hostname} - P90" minY="0" maxY="#{chartMB.maximo}"
style="height:450px" animate="true" xaxisAngle="270"
seriesColors="FFFF00, FF0000" extender="#{chartMB.funcao}" showMarkers="true"
zoom="false" />
<f:metadata>
<f:viewParam name="sistema" value="#{chartMB.sistema}" />
<f:viewParam name="hostname" value="#{chartMB.hostname}" />
<f:viewParam name="metrica" value="#{chartMB.metrica}" />
<f:event type="preRenderView" listener="#{chartMB.push}" />
</f:metadata>
</div>
</div>
</h:form>
</h:body>
</html>
Kind Regards and Best Wishes,
Geraldo Netto
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);
}
}