Hoi!
Mein leidiges Thema geht weiter..
Also vorweg möchte ich die Google Map in eine Applikation einbauen (habe ich schon in anderen Projekten geschafft) jedoch behindert mich bei meiner momentanen Implementierung dass die Google Map eine Subview ist und dadurch der Initialisierungsprozess (um Punkte in die Karte zu laden) nicht durchgeführt wird. Ich verwende myFaces 1.1.3, Richfaces und Ajax4Jsf.
Im Prinzip hatte ich es mir so gedacht (und dies funktioniert auch wenn die map von Anfang an enabled wäre) dass ich bei der Initialisierung der Map (setMap() Methode der Klasse Bean.java) den Parameter "oninit" auf "initializePoints" setze, welches eine javascript function ist (subview2.jsp - unter dem Tag "<a4j") und in dieser Funktion werden eben die Werte der Punkte aus der Bean geholt und danach wird die Javascript Funktion "createPoints(data)" aufgerufen (zu finden unter page2.jsp).
--> Dies funktioniert leider nicht da somit nie die "oninit" Funktion der Google Map aufgerufen wird, wenn die Jsp subview.jsp disabled - sprich nicht gerendered wird.
Das Problem liegt einfach darin dass ich wenn die Map gerenderd wird ich dieselbe eben noch mit den Punkten über JavaScript versorgen muss.
Hier mal Beispielcode welcher das Problem beschreibt:
page2.jsp (welche die anderen als subviews beinhaltet):
erste subview (welche die google map als subview beinhaltet):
google map subview:
servlet:
Mein leidiges Thema geht weiter..
Also vorweg möchte ich die Google Map in eine Applikation einbauen (habe ich schon in anderen Projekten geschafft) jedoch behindert mich bei meiner momentanen Implementierung dass die Google Map eine Subview ist und dadurch der Initialisierungsprozess (um Punkte in die Karte zu laden) nicht durchgeführt wird. Ich verwende myFaces 1.1.3, Richfaces und Ajax4Jsf.
Im Prinzip hatte ich es mir so gedacht (und dies funktioniert auch wenn die map von Anfang an enabled wäre) dass ich bei der Initialisierung der Map (setMap() Methode der Klasse Bean.java) den Parameter "oninit" auf "initializePoints" setze, welches eine javascript function ist (subview2.jsp - unter dem Tag "<a4j") und in dieser Funktion werden eben die Werte der Punkte aus der Bean geholt und danach wird die Javascript Funktion "createPoints(data)" aufgerufen (zu finden unter page2.jsp).
--> Dies funktioniert leider nicht da somit nie die "oninit" Funktion der Google Map aufgerufen wird, wenn die Jsp subview.jsp disabled - sprich nicht gerendered wird.
Das Problem liegt einfach darin dass ich wenn die Map gerenderd wird ich dieselbe eben noch mit den Punkten über JavaScript versorgen muss.
Hier mal Beispielcode welcher das Problem beschreibt:
page2.jsp (welche die anderen als subviews beinhaltet):
Code:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="../../script/block.js"></script>
<script type="text/javascript">
//<![CDATA[
function createPoints(data) {
for (var i = 0; data.length; i++) {
var point = new GLatLng(data[i].lat, data[i].lng);
map.addOverlay(createMarkerWithIdentifier(point, data[i].desc));
}
}
function createMarkerWithIdentifier(point, desc) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(desc);
});
return marker;
}
function createOnePoint() {
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
}
//]]>
</script>
</head>
<body>
<f:view>
<f:verbatim><h2></f:verbatim>
<h:outputText value="Hello #{helloWorldBacking.name}. We hope you enjoy Apache MyFaces"/>
<f:verbatim></h2></f:verbatim>
<h:form id="page2">
<h:commandLink id="link1" action="back">
<h:outputText id="linkText" value="GO HOME"/>
</h:commandLink>
</h:form>
<h:panelGroup>
<%@include file="subview1.jsp"%>
</h:panelGroup>
</f:view>
</body>
</html>erste subview (welche die google map als subview beinhaltet):
Code:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:subview id="subviewWhichIncludeSubview">
<f:verbatim><h2></f:verbatim>
<h:outputText value="subviewWhichIncludeSubview"/>
<f:verbatim></h2></f:verbatim>
<h:form id="subview1">
<h:panelGroup rendered="#{gmBean.activate}">
<%@include file="subview2.jsp"%>
</h:panelGroup>
<h:commandButton value="aktivieren" actionListener="#{gmBean.doActivate}">
</h:commandButton>
</h:form>
</f:subview>google map subview:
Code:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<f:subview id="subview2">
<h:panelGrid columns="2">
<rich:gmap binding="#{gmBean.map}"/>
</h:panelGrid>
<h:form id="subview2">
<a4j:jsFunction name="initializePoints" data="#{gmBean.points}"
oncomplete="createPoints(data)">
</a4j:jsFunction>
</h:form>
</f:subview>servlet:
Code:
package org.richfaces.demo.gmap;
import java.util.ArrayList;
import java.util.HashMap;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import org.richfaces.component.html.HtmlGmap;
public class Bean {
//------------------------------------------------------------------------------------------------------------------
// FIELDS
//------------------------------------------------------------------------------------------------------------------
/** google map */
private HtmlGmap map;
/** whole authorization for google map */
private String gmapKey;
/** google key for this application */
private static final String GOOGLE_API_KEY =
"ABQIAAAAU5IDceLqYFSp4k84FYLxyRTwM0brOpm-All5BF6PoaKBxRWWERSDiAIGyx-hbmMfA3v7tHF4Tvwfaw";
/** application url */
private static final String APPL_URL = "localhost:8080";
/** host string */
private static final String HOST = "host";
/** error message if key is not generated for <code>Bean.APPL_URL</code> */
private static final String KEY_ERROR_MSG =
"get the key for your domain at http://www.google.com/apis/maps/signup.html";
/** style of the google map */
private static final String MAP_STYLE = "width:400px;height:400px";
/** java script method which load points for google map - ajax4jsf script */
private static final String LOAD_POINTS_INITIALIZE = "initializePoints()";
/** google map initial zoom */
private static final String MAP_ZOOM_INITIAL = "5";
/** google map initial lattidude value */
private static final String MAP_LATTIDUDE_INITIAL = "37.4419";
/** google map initial longtidude value */
private static final String MAP_LONGTIDUDE_INITIAL = "-122.1419";
/** google map initial type of show value */
private static final String MAP_TYPE_INITIAL = "G_NORMAL_MAP";
/** google map variable for java script */
private static final String MAP_GMAP_VAR = "map";
/** contains google map points data */
private ArrayList<Place> points;
private String longtitude;
private String lattidude;
private Boolean activate = false;
//------------------------------------------------------------------------------------------------------------------
// CONSTRUCTOR
//------------------------------------------------------------------------------------------------------------------
/**
* constructor
*/
public Bean() {
this.points = this.loadDataForMap();
}
//------------------------------------------------------------------------------------------------------------------
// HELPER METHODS
//------------------------------------------------------------------------------------------------------------------
/**
* dummy methode
*/
public void doActivate(ActionEvent ae) {
if (this.activate.booleanValue()) {
this.activate = false;
} else {
this.activate = true;
}
}
/**
* reset user input from view
*/
private void resetInput() {
this.longtitude = "";
this.lattidude = "";
}
/**
* UI method
* add a new marker
* @param ae action event
*/
@Deprecated //immo noch nicht ausprobiert siehe jsp addMarker.jsp
public void addNewMarker(ActionEvent ae) {
/* add marker */
this.points.add(new Place("id", "pic", this.lattidude, this.longtitude, 10, "beschreibung"));
/* reset user input */
this.resetInput();
}
/**
* load points for google map
* @return tmp loaded point data for map
*/
private ArrayList<Place> loadDataForMap() {
ArrayList<Place> tmp = new ArrayList<Place>();
tmp.add(new Place ("goldengate", "/org/richfaces/demo/gmap/images/gold.gif", "37.81765", "-122.477603" , 14,
"Golden Gate Bridge, San Francisco"));
tmp.add(new Place ("eiffeltower", "/org/richfaces/demo/gmap/images//tower.gif", "48.858489", "2.295295" , 17,
"Eiffel Tower, Paris"));
tmp.add(new Place ("pyramids", "/org/richfaces/demo/gmap/images/pyramids.gif", "29.977785", "31.132915" , 15,
"Pyramids of Egypt, Giza"));
tmp.add(new Place ("exadel", "/org/richfaces/demo/gmap/images/exadel.gif", "37.971796", "-122.042334" , 18,
"Headquarter of Exadel, Inc , Concord"));
return tmp;
}
/**
* create the whole google map key
* @return key generated key
*/
private String createKey() {
HashMap<String, String> hosts = new HashMap<String, String>();
hosts.put(Bean.APPL_URL, Bean.GOOGLE_API_KEY);
ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
String host = (String)ec.getRequestHeaderMap().get(Bean.HOST);
String key = hosts.get(host);
if (key != null)
return key;
else
return Bean.KEY_ERROR_MSG;
}
/**
* dummy button - just test
*
*/
public void doSomething() {
System.out.println("laft");
this.map.getGmapVar();
this.map.getAttributes();
}
//------------------------------------------------------------------------------------------------------------------
// GETTER/SETTER
//------------------------------------------------------------------------------------------------------------------
/**
* getter method
* @return gmapKey
*/
public String getGmapKey() {
if (gmapKey == null) {
gmapKey = createKey();
}
return gmapKey;
}
/**
* setter method
* @param gmapKey
*/
public void setGmapKey(final String gmapKey) {
this.gmapKey = gmapKey;
}
/**
* getter method
* @return map
*/
public HtmlGmap getMap() {
return this.map;
}
/**
* setter method
* also initialized google map
* @param map
*/
public void setMap(final HtmlGmap map) {
if (this.map == null) {
this.map = map;
this.map.setGmapVar(Bean.MAP_GMAP_VAR);
this.map.setOninit(Bean.LOAD_POINTS_INITIALIZE);
this.map.setZoom(Bean.MAP_ZOOM_INITIAL);
this.map.setStyle(Bean.MAP_STYLE);
this.map.setGmapKey(this.getGmapKey());
this.map.setLat(Bean.MAP_LATTIDUDE_INITIAL);
this.map.setLng(Bean.MAP_LONGTIDUDE_INITIAL);
this.map.setMapType(Bean.MAP_TYPE_INITIAL);
} else {
this.map = map;
}
}
/**
* getter method
* @return points
*/
public ArrayList<Place> getPoints() {
return this.points;
}
/**
* setter method
* @param points
*/
public void setPoints(final ArrayList<Place> points) {
this.points = points;
}
public String getLongtitude() {
return longtitude;
}
public void setLongtitude(String longtitude) {
this.longtitude = longtitude;
}
public String getLattidude() {
return lattidude;
}
public void setLattidude(String lattidude) {
this.lattidude = lattidude;
}
public Boolean getActivate() {
return activate;
}
public void setActivate(Boolean activate) {
this.activate = activate;
}
}
