📄 index.jsp
字号:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ page import="org.zkoss.jspdemo.model.*" %>
<%@ page import="org.zkoss.jspdemo.bean.*" %>
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="zk" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<zk:init use="org.zkoss.zkplus.databind.AnnotateDataBinderInit"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ZK Restaurant Benchmark</title>
</head>
<body>
<zk:page id="eltests">
<zk:window title="ZK Restaurant Benchmark" width="840px" height="680px" border="normal">
<zk:zscript>
import org.zkoss.jspdemo.model.*;
import org.zkoss.jspdemo.bean.*;
import java.util.ArrayList;
import java.util.LinkedHashMap;
//config this to fit Browser size: 1024*768, 1280*1024....
String defaultWidth = "840px";
String defaultHeight = "680px";
String fullWidth = "820px";
String halfWidth = "570px";
//footer size...
String footerHeight = "140px";
String southSize = "25%";
String restWidth = "300px";
String bm1Width = "70px";
String imageWidth = "190px";
LinkedHashMap linker = new LinkedHashMap();
RestaurantRepository respository = new RestaurantRepository();
Restaurant current = respository.getAll().get(0);
</zk:zscript>
<zk:borderlayout>
<zk:center border="0">
<zk:borderlayout id="layout">
<%-- ********** Google Map panel ********** --%>
<zk:center border="0">
<zk:div style="background:#E0E0E0" height="100%">
<%-- the following javascript can NOT be loaded dynamically
Note: gmapsKey is generated by food.ui.GmapMainWindow
if the server matches one of the predefined keys.--%>
<zk:script use="food.ui.GmapImportScript"/>
<zk:gmaps id="mymap" width="${defaultWidth}" height="${defaultHeight}"
showSmallCtrl="true" showTypeCtrl="true" zoom="14"
lng="@{current.location.longitude}"
lat="@{current.location.latitude}">
<zk:attribute name="lng">121.55298871046938</zk:attribute>
<zk:attribute name="lat">25.042063183495276</zk:attribute>
<zk:attribute name="onMapMove">
mylat.setValue(self.getLat());
mylng.setValue(self.getLng());
</zk:attribute>
<zk:attribute name="onMapZoom"><%-- ***** first Databinding ***** --%>
binder.loadComponent(rightPanel);
</zk:attribute>
<zk:attribute name="onMapClick">
Gmarker gmarker = event.getGmarker();
if (gmarker != null) {
gmarker.setOpen(true);
current = gmarker.getAttribute("value");
int index = restaurantListBox.getModel().indexOf(current);
restaurantListBox.selectedItem = restaurantListBox.getItemAtIndex(index);
binder.loadComponent(footerPanel);
System.out.println("current: "+current);
}
</zk:attribute>
<zk:ginfo id="myinfo" open="true" lat="25.042063183495276" lng="121.55297871035938">
<zk:attribute name="content">
Hello, <a href="http://www.zkoss.org">ZK</a>.
</zk:attribute>
</zk:ginfo>
<%-- ***** preprocessing generate gmarkers ***** --%>
<c:forEach var="each" items="${respository.all}">
<zk:gmarker lat="${each.location.latitude}" lng="${each.location.longitude}"
draggable="true">
<zk:custom-attributes value="${each}"/>
<zk:attribute name="content">
${each.name},<br/>
${each.description}<br/>
${each.location.address}
</zk:attribute>
<zk:attribute name="onCreate">
linker.put(self.getAttribute("value"),self);
</zk:attribute>
</zk:gmarker>
</c:forEach>
</zk:gmaps>
</zk:div>
</zk:center>
<%-- ********** Main Control panel ********** --%>
<zk:west id="mainCtrlPanel" size="${halfWidth}" border="0" collapsible="true" open="false">
<zk:div style="background:#E0E0E0" height="100%">
<%-- ********** See What you can Add Here!!! ********** --%>
<zk:label value=" See What Functions you can Add Here!!! "
style="color:white;font-size:36px" />
</zk:div>
</zk:west>
<%-- ********** Right Map Ctrl Panel ********** --%>
<zk:east id="rightPanel" maxsize="300" size="250px" border="0" collapsible="true" >
<zk:attribute name="onOpen">
if(event.isOpen())
mainCtrlPanel.setSize(halfWidth);
else
mainCtrlPanel.setSize(fullWidth);
layout.resize();
</zk:attribute>
<zk:div style="background:#E0E0E0" height="100%">
<%-- ********** Google Map Control ********** --%>
<zk:radiogroup onCheck="mymap.mapType = self.selectedItem.value">
<zk:grid>
<zk:auxhead>
<zk:auxheader label="Gmap settings" image="/img/gmap_ico.png"
align="center" style="font-size:20px;" colspan="2"/>
</zk:auxhead>
<zk:columns>
<zk:column label="item"/>
<zk:column label="value"/>
</zk:columns>
<zk:rows>
<zk:row>Latitude: <zk:doublebox id="mylat" value="${mymap.lat}"
onChange="mymap.panTo(self.doubleValue(), mymap.getLng())"/></zk:row>
<zk:row>Longitute: <zk:doublebox id="mylng" value="${mymap.lng}"
onChange="mymap.panTo(mymap.getLat(), self.doubleValue())"/></zk:row>
<zk:row>General:<zk:radio label="Genral Road Map" value="normal" checked="true"/></zk:row>
<zk:row>Satellite:<zk:radio label="Satellite image" value="satellite"/></zk:row>
<zk:row>Hybrid:<zk:radio label="hybrid" value="hybrid"/></zk:row>
<%-- ***** place to add databinding ***** --%>
<zk:row>scale:
<zk:hbox>
<zk:slider id="myzoom" maxpos="18" curpos="@{mymap.zoom}"/>
<zk:label value="@{mymap.zoom}"/>
</zk:hbox>
</zk:row>
</zk:rows>
</zk:grid>
</zk:radiogroup>
<%-- ********** Resturant List********** --%>
<zk:listbox id="restaurantListBox" model="@{respository.all}" selectedItem="@{current}"
onCreate="self.setSelectedIndex(0);">
<zk:listhead >
<zk:listheader label="Restaurant List" align="center" image="/img/home.gif"/>
</zk:listhead>
<zk:listitem self="@{each='res'}" value="@{res}">
<zk:attribute name="onClick">
linker.get(self.getValue()).setOpen(true);
</zk:attribute>
<zk:listcell label="@{res.name}"/>
</zk:listitem>
</zk:listbox>
<%-- ********** Power toys ********** --%>
<zk:window id="uploadPannel" title="Picture Swap" border="normal" height="250px">
<div style="background:#FFFFFF" height="100%">
<zk:button label="Upload" image="/img/folder.gif">
<zk:attribute name="onClick">
Object media = Fileupload.get();
if (media instanceof org.zkoss.image.Image) {
storeImg.setContent(current.getImage());
current.setImage(media);
binder.loadComponent(outsideShow);
} else if (media != null)
Messagebox.show("This is not a picture: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
</zk:attribute>
</zk:button>
<zk:button id="restore" label="Swap" image="/img/folder.gif">
<zk:attribute name="onClick">
Object media = storeImg.getContent();
if (media!=null) {
storeImg.setContent(current.getImage());
current.setImage(media);
binder.loadComponent(outsideShow);
} else
Messagebox.show("No temporary picture: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
</zk:attribute>
</zk:button>
<zk:image id="storeImg" height="155px" width="100%" />
</div>
</zk:window>
</zk:div>
</zk:east>
</zk:borderlayout>
</zk:center>
<%-- ********** footer pannel ********** --%>
<zk:south id="footerPanel" style="background:#E0E0E0"
maxsize="300" size="${southSize}" border="0" splittable="true" collapsible="true">
<zk:attribute name="onOpen">
rightPanel.setOpen(event.isOpen());
if(!event.isOpen())mainCtrlPanel.setSize(fullWidth);
else mainCtrlPanel.setSize(halfWidth);
layout.resize();
</zk:attribute>
<zk:groupbox height="${footerHeight}">
<zk:hbox>
<%-- ********** Restaurant Introduction ********** --%>
<zk:grid width="${restWidth}">
<zk:auxhead>
<zk:auxheader label="Restaurant Information" align="center" colspan="2"/>
</zk:auxhead>
<zk:columns>
<zk:column label="Item" width="28px"/>
<zk:column label="Content"/>
</zk:columns>
<zk:rows>
<zk:row>Name: <zk:label value="@{current.name}"/></zk:row>
<zk:row>Description: <zk:label value="@{current.description}"/></zk:row>
<zk:row>Address: <zk:label value="@{current.location.address}"/></zk:row>
</zk:rows>
</zk:grid>
<%-- ********** Restaurant Benchmark ********** --%>
<zk:grid width="${restWidth}" >
<zk:columns>
<zk:column label="Item" width="${bm1Width}"/>
<zk:column label="Score"/>
</zk:columns>
<zk:rows>
<zk:row>Services: <zk:progressmeter width="80%" value="@{current.benchmark.service}"/></zk:row>
<zk:row>Cleanness: <zk:progressmeter width="80%" value="@{current.benchmark.cleanness}"/></zk:row>
<zk:row>Environment: <zk:progressmeter width="80%" value="@{current.benchmark.environment}"/></zk:row>
<zk:row>Delicious: <zk:progressmeter width="80%" value="@{current.benchmark.delicious}"/></zk:row>
<zk:row>Price: <zk:progressmeter width="80%" value="@{current.benchmark.baseprice}"/></zk:row>
</zk:rows>
</zk:grid>
<%-- ********** Restaurant Image ********** --%>
<zk:image id="outsideShow" content="@{current.image}" height="135px" width="${imageWidth}" />
</zk:hbox>
</zk:groupbox>
</zk:south>
<%-- ********** Header menu panel ********** --%>
<zk:north id="headerPanel" size="30px" border="0">
<zk:menubar id="menubar" height="25px" autodrop="true">
<zk:menu label="Display Type">
<zk:menupopup>
<zk:menuitem label="Devided Map(Default)" onClick="HalfViewMode()"/>
<zk:menuseparator/>
<zk:menuitem label="Full Size Map" onClick="MapViewMode()"/>
<zk:menuitem label="Full Size Control" onClick="HalfCtrlMode()"/>
<zk:menuitem label="Control Only" onClick="MainCtrlMode()"/>
</zk:menupopup>
</zk:menu>
</zk:menubar>
</zk:north>
</zk:borderlayout>
<%-- ********** Map Panel Control Functions ********** --%>
<zk:zscript>
void MapViewMode()
{
mainCtrlPanel.setOpen(false);
rightPanel.setOpen(false);
footerPanel.setOpen(false);
mainCtrlPanel.setSize(halfWidth);
layout.resize();
}
void HalfViewMode()
{
MapViewMode();
rightPanel.setOpen(true);
footerPanel.setOpen(true);
}
void HalfCtrlMode()
{
MapViewMode();
mainCtrlPanel.setOpen(true);
rightPanel.setOpen(true);
footerPanel.setOpen(true);
}
void MainCtrlMode()
{
rightPanel.setOpen(false);
footerPanel.setOpen(false);
mainCtrlPanel.setOpen(true);
mainCtrlPanel.setSize(fullWidth);
layout.resize();
}
</zk:zscript>
</zk:window>
</zk:page>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -