我用 canvas/javascript 画了一个 dartbard,然后计算出哪个值字段被 javascript 击中。
这是问题所在:
我可以从客户端的文本框/标签更新值,但我无法让服务器注册发生更改/意识到值已更改。
我很确定这是一个简单的问题,但如果你能帮助我,那就太好了!
所以这是我被困在细节上的一点:
1)我点击了画布,一个字段被击中。命中字段值已设置
=> 这不应该触发 hitText 的 Set-Method 吗???
<label id="hiddenValue" value="@bind(vm.hitText)" visible="true" />
<canvas id="canvas" onclick="calc()"></canvas>
<script type="text/JavaScript">
<![CDATA[
function calc() {
var valuey= calcResult();zk.Widget.$(jq('$hiddenValue')[0]).setValue(valuey);
};
]]>
</script>
该值现在设置为标签(使用 javascript)。
2)在周围的 html 元素上使用 onclick 侦听器,我想处理在 java 世界中被击中的字段的值,但该值是原始值,至少对于服务器而言。
<html onClick="@command('processHiData', hit=hiddenValue.getValue())">
3)在java中我想使用那个值,但它仍然是初始值=>我怎样才能把它改成javascript设置的值???
相关java代码:
private String hitText="HitField"; //Initial Value of the Field
@Command @NotifyChange("hitString")
public void processHiData(@BindingParam("hit") String hit){
System.out.println("you hit " + hit);
}
----------------------------
完成 Zul 文件:
<zk>
<window title="The Dart Scorer" border="normal"
apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('de.itsmeagain.controller.dartViewModel')"
xmlns:w="http://www.zkoss.org/2005/zk/client">
<tabbox id="tabbox">
<tabs>
<tab label="New Game" />
<tab label="Players" />
<tab label="Lets Dart!" selected="true" />
<tab label="Player Statistics" />
</tabs>
<tabpanels>
<tabpanel>
<vbox>
<hbox>
<label id="l_gametype" value="Select Game Type:" />
<combobox id="gametype" width="150px">
<attribute name="onCreate">
<![CDATA[
List list2 = new ArrayList();
list2.add("501");
list2.add("301");
list2.add("Cricket");
list2.add("Halve It");
ListModelList lm2 = new ListModelList(list2);
lm2.addSelection(lm2.get(0));
gametype.setModel(lm2);
]]></attribute>
</combobox>
</hbox>
<button id="b_players" label="Select Players"
onclick="@command('SwitchTab',Index=1)" />
<button id="b_newGame" label="Start New Game" />
</vbox>
</tabpanel>
<tabpanel>
<vbox>
<listbox id="playerlist" model="@load(vm.players)"
selectedItem="@laod(vm.singleplayer)" width="100%" emptyMessage="Nothing Here!">
<listhead>
<listheader label="Player ID" sort="auto" width="20%" />
<listheader label="Player Name" sort="auto" width="50%" />
<listheader label="Use Player" sort="auto" width="10%" />
<listheader label="Delete Player" sort="auto" width="20%" />
</listhead>
<template name="model">
<listitem>
<listcell label="@load(each.playerID)" />
<listcell label="@load(each.playerName)" />
<listcell>
<checkbox checked="@load(each.active)" />
</listcell>
<listcell>
<button label="delete Player" />
</listcell>
</listitem>
</template>
</listbox>
<hlayout>
<button id="addPlayer" label="add new player" width="100%" />
<button id="startGame" label="StartGame" width="100%" />
</hlayout>
</vbox>
</tabpanel>
<tabpanel>
<vlayout>
<label id="hiddenValue" value="@bind(vm.hitText)" visible="true" />
<html xmlns:w="client"
onClick="@command('processHiData', hit=hiddenValue.getValue())">
<title>Dart</title>
<style>
canvas { background-color: white;
border-style: solid; }
</style>
<canvas id="canvas" onclick="calc()"></canvas>
<body onload="draw();">
</body>
<script type="text/JavaScript">
<![CDATA[
function calc() {
var valuey= calcResult();
zk.Widget.$(jq('$hiddenValue')[0]).setValue(valuey);
};
]]>
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript" src="GlobalVariables.js">
</script>
<script type="text/javascript" src="calculate.js">
</script>
<script type="text/javascript" src="drawObjects.js">
</script>
</html>
</vlayout>
</tabpanel>
</tabpanels>
</tabbox>
</window>
</zk>
----------------------
完整的 Java 类:
package de.itsmeagain.controller;
import java.util.List;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Label;
import org.zkoss.zul.Textbox;
import de.itsmeagain.db.DartField;
import de.itsmeagain.db.player;
import de.itsmeagain.interfaces.DataBaseService;
import de.itsmeagain.interfaces.DataBaseServiceImpl;
public class dartViewModel extends GenericForwardComposer {
public dartViewModel(){
getInitialDBData();
}
private DataBaseService dbService = new DataBaseServiceImpl();
private List<DartField>dartFields;
private DartField dartfield = new DartField();
private player singleplayer;
private List<player> players;
private player activeplayer;
private List<player> activePlayers;
private String hitText="HitField";
protected Label hiddenValue;
protected Textbox textbox;
public player getSingleplayer() {
return singleplayer;
}
public void setSingleplayer(player singleplayer) {
this.singleplayer = singleplayer;
}
public List<player> getPlayers() {
return players;
}
public player getActivePlayer() {
return activeplayer;
}
public void setActivePlayer(player activePlayer) {
this.activeplayer = activePlayer;
}
public List<player> getActivePlayers() {
return activePlayers;
}
public player getActiveplayer() {
return activeplayer;
}
public void setActiveplayer(player activeplayer) {
this.activeplayer = activeplayer;
}
public DartField getDartfield() {
return dartfield;
}
public void setDartfield(DartField dartfield) {
this.dartfield = dartfield;
}
public List<DartField> getDartFields() {
return dartFields;
}
private void getInitialDBData(){
dartFields=dbService.getDartFields();
players=dbService.getAllPlayer();
activePlayers=dbService.activePlayer();
}
@Command @NotifyChange("hitString")
public void processHiData(@BindingParam("hit") String hit){
System.out.println("you hit " + hit);
}
public String getHitText() {
return hitText;
}
public void setHitText(String hitText) {
this.hitText = hitText;
}
}