Question

我的部分申请是记录比赛的结束时间。由于这很可能是在手机或平板电脑上完成的，我想实现一个小弹出窗口，以便轻松修改时间，而无需精确设置焦点并输入。但是时间从00:00:00开始完成时间会使这个过程非常费力，所以我想让它初始化到最后输入的完成时间。我希望弹出窗口直接显示在时间框下方，如果输入的时间位于网格的顶部，或者输入的时间位于网格底部的时间框之上。下面是我的代码的版本，希望有助于解释这个概念。

我的弹出窗口：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();
    }
}

这是我的主要zul和视图模型。

timekeeper.zul（为简洁起见删除了多余的列）

<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;
        }
    }
}

我现在拥有的代码（即以编程方式创建弹出窗口 - 请参阅changeFinishTime方法）显示弹出窗口但不在理想位置。根据{{3}}我可以通过在zul文件中的某个位置生成zul中的弹出窗口：

<popup id="timepop">
    <include src="entertime.zul" />
</popup>

然后按以下方式显示：

onFocus='timepop.open(self,@load(vm.popupPosition))'

问题在于我无法将args传递给entertime.zul。此外，我无法修改弹出窗口的位置，因为popupPosition将在渲染时解析;不是运行时。如果包含行（从上面）更改为：

，则会出现同样的问题

<include initTime="@load(vm.prevFinishTime)" src="entertime.zul" />

initTime在渲染时初始化;不是运行时。

非常感谢任何想法/建议。

Answer 1

我更喜欢使用Executions.createComponents解决方案。

如果所有窗口的模态获胜位置相同，我通常会直接标记窗口组件中的位置：

<window viewModel="@id('vmtp') @init('EnterTimeVM')" onBlur="@command('close')" position="parent, bottom, right" width="100px">

而不是将其设置为VM。

然后，你试图删除这个位置吗？在我的代码测试项目中，弹出窗口将在timebox.getParent（）。

旁边打开

使用您的代码，timebox.getParent是组件Row，因此可能存在行宽问题，例如。

您可以在像hbox这样的时间框之前使用父组件来绕过问题。

<hbox>
    <timebox format="HH:mm:ss" value="@bind(each.finishTime)" onFocus="@command('changeFinishTime', comp=each)" />
</hbox>

这样父母的结果就更有用了。

Answer 2

我希望将弹出窗口相对于弹出窗口附加的行放置。我没有正确阅读Window's setPosition的api。它说Position the window relative to its parent. That is, the left and top is an offset to his parent's left-top corner.但我可以使用会话属性来操纵位置：

@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();
}

然后改变entertime.zul：

<window viewModel="@id('vmtp') @init('EnterTimeVM')" onBlur="@command('close')" position="parent" top="${sessionScope.top}" width="100px">

这个解决方案有点笨拙，如果字体大小发生变化但是它确实达到了我想要的效果，那么它将不得不考虑一个问题。

我还可以从entertime.zul窗口元素中删除所有定位，并在java中执行：

Window win = (Window) Executions.createComponents("entertime.zul", timebox.getParent(), args);
win.setPosition("parent");
win.setTop("-20px");
win.doPopup();

如何在模板中显示弹出窗口并传递参数

2 个答案: