canvas/javascript でダーツボードを描き、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;
}
}