How to display popup in a template and pass it arguments - mvvm

Question

Part of my application is recording the finish times of a race. Since this will most likely be done on a phone or tablet I would like to implement a small popup to easily modify the time without having to set the focus exactly and type it in. However having the time start as 00:00:00 for every finish time will make the process very laborious so I want to have it initialise to the last entered finish time. I want the popup to appear directly below the timebox, if times being entered are at the top of the grid, or above the timebox for times being entered which are at the bottom of the grid. Below is stripped down versions of my code which hopefully helps explain the concept.
My popup window: entertime.zul
<window viewModel="#id('vmtp') #init('EnterTimeVM')" onBlur="#command('close')">
<caption>
<toolbarbutton label="Save" onClick="#command('save')"/>
<toolbarbutton label="Cancel" onClick="#command('close')"/>
</caption>
<hlayout>
<vlayout>
<button label="+" onClick="#command('changeHours', amount='1')" />
<intbox value="#load(vmtp.hours)" readonly="true" />
<button label="-" onClick="#command('changeHours', amount='-1')" />
</vlayout>
<vlayout>
<button label="+" onClick="#command('changeMinutes', amount='1')" />
<intbox value="#load(vmtp.minutes)" readonly="true" />
<button label="-" onClick="#command('changeMinutes', amount='-1')" />
</vlayout>
<vlayout>
<button label="+" onClick="#command('changeSeconds', amount='1')" />
<intbox value="#load(vmtp.seconds)" readonly="true" />
<button label="-" onClick="#command('changeSeconds', amount='-1')" />
</vlayout>
</hlayout>
</window>
EnterTimeVM.java
public class EnterTimeVM {
private LocalDateTime ldt;
private Component view;
#Init
public void init(#ExecutionArgParam("initTime") LocalDateTime initTime,
#ContextParam(ContextType.VIEW) Component view) {
ldt = initTime;
this.view = view;
}
public int getHours() {
return ldt.getHour();
}
public int getMinutes() {
return ldt.getMinute();
}
public int getSeconds() {
return ldt.getSecond();
}
#Command
#NotifyChange("hours")
public void changeHours(#BindingParam("amount") int amount) {
ldt = ldt.plusHours(amount);
}
#Command
#NotifyChange({ "hours", "minutes" })
public void changeMinutes(#BindingParam("amount") int amount) {
ldt = ldt.plusMinutes(amount);
}
#Command
#NotifyChange({ "hours", "minutes", "seconds" })
public void changeSeconds(#BindingParam("amount") int amount) {
ldt = ldt.plusSeconds(amount);
}
#Command
public void save() {
Map<String, Object> args = new HashMap<>();
args.put("finishTime", ldt);
BindUtils.postGlobalCommand(null, null, "finishTime", args);
close();
}
#Command
public void close() {
view.detach();
}
}
Here is my main zul and view model.
timekeeper.zul (excess columns removed for brevity)
<window viewModel="#id('vmtk') #init('TimeKeeperVM')">
<grid model="#load(vmtk.competitors)">
<columns>
<column label="Name" />
<column label="Finish time" />
</columns>
<template name="model">
<row>
<label value="#load(each.name)" />
<timebox format="HH:mm:ss" value="#bind(each.finishTime)"
onFocus="#command('changeFinishTime', comp=each)" />
</row>
</template>
</grid>
</window>
Competitor.java
public class Competitor {
private String name;
private LocalDateTime finishTime;
// getters and setters
}
TimeKeeperVM.java
public class TimeKeeperVM {
private List<Competitor> competitors;
private Competitor selectedCompetitor;
private LocalDateTime prevFinishTime;
#Init
public void timeKeeperInit() {
prevInitTime = LocalDateTime.now();
}
public List<Competitor> getCompetitors() {
return competitors;
}
#Command
public void changeFinishTime(#BindingParam("comp") Competitor competitor,
#ContextParam(ContextType.COMPONENT) Component timebox) {
selectedCompetitor = competitor;
Map<String, Object> args = new HashMap<>();
LocalDateTime currentFinishTime = competitor.getFinishTime();
args.put("initTime", (currentFinishTime != null) ? currentFinishTime : prevFinishTime);
Window win = (Window) Executions.createComponents("entertime.zul", timebox.getParent(), args);
// Need to use the parent of timebox in this case
win.setPosition("parent,bottom,right"); // positions the popup relative to timebox parent, not timebox
win.doPopup();
}
#GlobalCommand
#NotifyChange("competitors")
public void finishTime(#BindingParam("finishTime") LocalDateTime finishTime) {
if (selectedCompetitor != null && finishTime != null) {
selectedCompetitor.setFinishTime(finishTime);
prevFinishTime = finishTime;
}
}
}
The code as I have it at the moment (i.e programatically create the popup - see changeFinishTime method) displays the popup but not in the ideal position. As per the zk popup demo I could generate the popup in the zul by having somewhere in the zul file:
<popup id="timepop">
<include src="entertime.zul" />
</popup>
and then displaying it by:
onFocus='timepop.open(self,#load(vm.popupPosition))'
The problem with this is that I can't pass args to entertime.zul. Also I can't modify the position of the popup as popupPosition will be resolved at render time; not runtime. This is the same problem if the include line (from above) is changed to:
<include initTime="#load(vm.prevFinishTime)" src="entertime.zul" />
initTime is initialised at render time; not runtime.
Any thoughts/advice greatly appreciated.

Answer 1

I would prefer to use the Executions.createComponents solution.
If the position of the modal win is the same for all the windows, I usually tag directly the position in window component:
<window viewModel="#id('vmtp') #init('EnterTimeVM')" onBlur="#command('close')" position="parent, bottom, right" width="100px">
instead of set it VM.
Then, did you try to remove the position? In my testing project with your code the popup is opened next the timebox.getParent().
With your code, the timebox.getParent is the component Row, so maybe there can be problems with row width, for example.
You can bypass the problem use a parent component before timebox like hbox.
<hbox>
<timebox format="HH:mm:ss" value="#bind(each.finishTime)" onFocus="#command('changeFinishTime', comp=each)" />
</hbox>
so that the parent result a little more usable.

Answer 2

I was hoping to position the popup relative to the row the popup is attached to. I didn't read the api of Window's setPosition properly. It says Position the window relative to its parent. That is, the left and top is an offset to his parent's left-top corner. But I can manipulate the position using session attributes:
#Command
public void changeFinishTime(#BindingParam("comp") Competitor competitor,
#ContextParam(ContextType.COMPONENT) Component timebox) {
selectedCompetitor = competitor;
// set args map
Window win = (Window) Executions.createComponents("entertime.zul", timebox.getParent(), args);
Sessions.getCurrent().setAttribute("top", "-20px");
win.doPopup();
}
And then change entertime.zul:
<window viewModel="#id('vmtp') #init('EnterTimeVM')" onBlur="#command('close')" position="parent" top="${sessionScope.top}" width="100px">
This solution is a little clunky and will have to look into how much of an issue it is if the font size changes but it does achieve what I want.
I could also remove all the positioning from the entertime.zul window element and do it in java:
Window win = (Window) Executions.createComponents("entertime.zul", timebox.getParent(), args);
win.setPosition("parent");
win.setTop("-20px");
win.doPopup();