Wednesday, March 25, 2015

gmap:jsf+primefaces

Dans cet article, on va montrer comment faire la géolocalisation dans une application web en utilisant jsf et primefaces:

voici le vidéo qui montre ca :


Ceci et le code de managedBean :

package beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Marker;
import org.primefaces.model.map.Polyline;
@ManagedBean
@SessionScoped
public class MapBean {
private MapModel rectangleModel;
Polyline polyline = new Polyline();
private double lat=21.424191;
private double lng=39.813588;
private LatLng latlng=new LatLng(lat, lng);
public MapBean() {
rectangleModel = new DefaultMapModel();
polyline.getPaths().add(latlng);
polyline.setStrokeWeight(5);
polyline.setStrokeColor("green");
polyline.setStrokeOpacity(0.7);
Marker marker=new Marker(latlng);
rectangleModel.addOverlay(marker);
}
public MapModel getRectangleModel() {
return rectangleModel;
}
public void setRectangleModel(MapModel rectangleModel) {
this.rectangleModel = rectangleModel;
}
}
view raw bean.java hosted with ❤ by GitHub

Le code de la page geo.xhtml est le suivant :

<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript" ></script>
</h:head>
<body>
<p:panel header="gmap exemple">
<h:form>
<p:gmap center="21.424191,39.813588" model="#{mapBean.rectangleModel}" zoom="8" type="hybrid" style="width:1000px;height:600px" ></p:gmap>
</h:form>
</p:panel>
</body>
</html>
view raw geo.xhtml hosted with ❤ by GitHub


Le script suivant est obligatoire,sinon le map ne s'affiche pas .

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
</script>



1 comment: