Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkGoogle_Map_API_v3_simplemap_html
72guest188.114.110.1313bsb6a3May 5, 2022 11:53:39 AMlinkresources
index.zulzul
<window title="Google Maps" xmlns:w="client">
<attribute w:name="doClick_">
function (evt) {
if (!evt.domTarget)
evt.domTarget = this.$n(); // gmaps/gmarker do not has dom element in evt
}
</attribute>
<vbox>
<gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true">
<attribute name="onMapMove">
mylat.setValue(self.getLat());
mylng.setValue(self.getLng());
</attribute>
<attribute name="onMapZoom">
myzoom.setValue(self.getZoom());
</attribute>
<attribute name="onMapClick">
if (event.getReference() instanceof org.zkoss.gmaps.Gmarker) {
event.getReference().setOpen(true);
}
</attribute>
<ginfo id="myinfo" open="true">
<attribute name="content">
Hello, <a href="http://www.zkoss.org">ZK</a>.
</attribute>
</ginfo>
<gmarker id="mymark" lat="37.4410" lng="-122.1490" draggingEnabled="true">
<attribute name="content">
Hello, <a href="http://www.zkoss.org">ZK</a> on top of Gmarker.
</attribute>
<attribute w:name="_initListeners">
function() {
// google map will ignore marker click in map click event if marker is draggable
// listen to marker's event directly
var gmarker = this.mapitem_,
gmarkerwgt = this;
this.$_initListeners();
google.maps.event.addListener(gmarker, "click", function(event) {event.target = gmarkerwgt; event.opts = {}; gmarkerwgt.parent.doClick_(event);});
}
</attribute>
</gmarker>
</gmaps>
<grid><rows>
<row>Latitude: <doublebox id="mylat" value="${mymap.lat}" onChange="mymap.panTo(self.doubleValue(), mymap.getLng())"/></row>
<row>Longitude: <doublebox id="mylng" value="${mymap.lng}" onChange="mymap.panTo(mymap.getLat(), self.doubleValue())"/></row>
<row>Zoom Level: <intbox id="myzoom" value="${mymap.zoom}" onChange="mymap.setZoom(self.getValue())"/></row>
<row>Open Info: <button label="Change" onClick="myinfo.isOpen() ? mymark.setOpen(true) : myinfo.setOpen(true)"/></row>
</rows></grid>
</vbox>
</window>
simplemap.htmlhtml<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map,
marker,
infowindow;
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 19,
center: new google.maps.LatLng(37.44212147746187, -122.14311235847475),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(37.44182147746187, -122.14311235847475),
map: map
});
openInfo();
}
function openInfo(){
infowindow = new google.maps.InfoWindow({
content: 'Hello, <a href="http://code.google.com/p/zkgmapsz/">Gmapsz</a> is easy to use.',
});
infowindow.open(map, marker);
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
</body>
</body>
</html>map.htmlhtml<!DOCTYPE html>
<html>
<head>
<title>Google Maps JS</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #mapCanvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var drawingManager ;
var markers = [];
var polyOptions = { strokeColor: '#000000', strokeOpacity: 1.0, strokeWeight: 3 };
var mapOptions = { center: new google.maps.LatLng(33.959625, -6.867029), zoom: 8 };
var poly ;
var map ;
function initializeMap()
{
map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
google.maps.event.addListener(map, 'dblclick', function(event)
{
var marker = new google.maps.Marker({ position: event.latLng , map: map, title: event.latLng.toString()});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function(event) {
alert(marker);
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
map.panTo(marker.getPosition());
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initializeMap);
function getAllMarkers() {
alert(markers);
}
function drawItineraire() {
var directionsService = new google.maps.DirectionsService();
poly = new google.maps.Polyline(polyOptions);
var path ;
var distance=0;
var duration=0;
var steps ="";
for (var i = 0; i < markers.length; i++)
{
path = poly.getPath();
if (i < markers.length - 1)
{
// params WS_Itineraire
var request = { origin:markers[i].position, destination:markers[i+1].position, language : "ar", optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING};
directionsService.route(request, function(response, status)
{
var myRoute = response.routes[0];
var leg = response.routes[0].legs[0];
if (status == google.maps.DirectionsStatus.OK)
{
// points [lng/lat]
var polyRes = myRoute.overview_path;
for (var i = 0; i < polyRes.length; i++) {
path.push(polyRes[i]);
}
poly.setMap(map);
distance+=leg.distance.value;
duration+=leg.duration.value;
document.getElementById('distance').innerHTML = "Distance:" + distance + " meters";
document.getElementById('duration').innerHTML = "Duration:" + duration + " secondes";
// instructions
for (var i = 0; i <leg.steps.length; i++) {
document.getElementById('instructions').innerHTML += "<br/>"+leg.steps[i].instructions;
steps+= "<br/>"+leg.steps[i].instructions;
}
} else
{
alert('erreur get data');
}
});
}
}
}
</script>
</head>
<body>
<input type="button" value="getAllMarkers" onClick="getAllMarkers()"/>
<input type="button" value="DrawItineraire" onClick="drawItineraire()"/>
<div id="duration">Duration: </div>
<div id="distance">Distance: </div>
<br/>
<div id="instructions">Instructions: </div>
<div id="mapCanvas"></div>
</body>
</html>
test.htmlhtml<html>
<head>
<title>Hello</title>
</head>
<body>
hello
</body>
</html>