Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello everyone!
I use ZK v6.0.0 and would like to create a modal window with form in it for editing some data. It seems to be quite easy, but I faced the problem of closing the modal window. I need clicking on button to lead to 2 actions:
Save button:
1. Form save = @command('save')
2. Window close = scheduleWindow.setVisible(false)
or
Cancel button: 1. Form reset = ? (not sure how to do it yet) 2. Window close = scheduleWindow.setVisible(false)
Unfortunately, code like this doesn't work:
<button id="save" onClick="@command('save'); scheduleWindow.setVisible(false)">
<button id="cancel" onClick="@{form_sch}.resetDirty(); scheduleWindow.setVisible(false)">
Below is the window ZUL code;
<idspace apply="org.zkoss.bind.BindComposer" viewModel="@id('schedule') @init('ScheduleViewModel')" validationMessages="@id('vmsgs')">
<window id="scheduleWindow" closable="true" mode="modal" sizable="false" visible="false"
form="@id('form_sch') @load(schedule) @save(schedule, before='reschedule')"
onClose="self.visible = false; event.stopPropagation();">
<vlayout>
<hlayout>
<label value="Cron expression:" ></label>
<vlayout>
<textbox mold="rounded" id="cronExpression" value="@bind(form_sch.cronExpression) @validator(schedule.validator)" ></textbox>
<label value="@bind(vmsgs)" style="color: red" ></label>
</vlayout>
</hlayout>
<checkbox label="Temporarily disable" checked="@bind(form_sch.temporarilyDisabled)" ></checkbox>
<hbox width="100%" pack="center" style="margin-top: 10px">
<button id="save" label="Save" mold="trendy" onClick="@command('save')></button>
<button id="cancel" label="Cancel" mold="trendy" onClick="scheduleWindow.setVisible(false)" ></button>
</hbox>
</vlayout>
</window>
...
<toolbarbutton image="images/calendar2.png" tooltiptext="Edit report schedule" onClick="scheduleWindow.doModal()" ></toolbarbutton>
...
</idspace>
Any help and hints are highly appreciated,
Thank you.
UPD #1 Small talks section contains examples (MVVM in ZK6 - Design CRUD page by MVVM pattern, MVVM Extension: Access UI Components Inside ViewModel) which can solve my task. However according to MVVM model ViewModel should not somehow operate with GUI components, thus I'd like to separate controller logic (show/hide modal window etc) from ViewModel.
The only thing I can say is, that I also faced some exceptions where there is no other way than wiring UI components and operate directly on them.
In my case, it was focus control and closing bandboxes which is a little bit similar to your problem.
Hi Matze2,
As for now I have chosen the way described in MVVM in ZK 6 - Design CRUD page by MVVM pattern where window visibility is controlled by the following expression:
<window title="Confirm" mode="modal" visible="@load(not empty vm.deleteMessage)">
...
</window>
Quite lightweight and easy-to-implement approach, but still having conceptual concerns.
This case is quite doable. I didn't realize that you just need to switch visibility.
But as soon as you need to dynamically create (Executions.createComponents()) or destroy (detach()) modal windows or any sub-areas of your page, you are lost.
In my case, it is not showing the model window itself. Here is the code.
<zk>
<window id="win" title=" " width="520px" height="220px"
border="normal" minimizable="false" mode="modal" maximizable="false"
closable="true" action="show: slideDown;hide: slideUp"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('domainVMS.PersonCRUDVM')" visible="@load(not empty vm.closeThis)">
<separator />
<label value="Person information" />
@Init
public void initSetup() {
this.closeThis = null;
}
@Command @NotifyChange("closeThis")
public void save() {
new PersonDAO().saveOrUpdate(this.selectedPerson);
this.closeThis = null;
}
The feature requested in this ticket might help you - at least it worked for me:
http://tracker.zkoss.org/browse/ZK-986
Hi Everybody
The next code works for me. (It is just example code)
ZUL
<window id="divEscritorio"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('package.Mvvm')"
width="100%"
height="100%">
<window
maximizable="true"
closable="true"
title="Ventana"
width="50%" height="50%"
onClose="@command('closePopupPortalServicios') "
visible="@load(vm.portalServiciosVisible)"
mode="modal"
>
</window
</window
MVVM
public class EscritorioServiciosMvvm implements Serializable {
boolean portalServiciosVisible = false;
@Command
@NotifyChange({"portalServiciosVisible"})
public void closePopupPortalServicios(@ContextParam(ContextType.TRIGGER_EVENT)Event e){
portalServiciosVisible = false;
e.stopPropagation();
}
}
Regards
If you want to close only Model Pop us you can implement you close or cancel button like this...
<button label="Cancel" onClick="sortingModelWindow.detach()" />
Where sortingModelWindow is the id of your modelpop window.. in your case you have to give id to ur ModelPopUp window
thnaks
Asked: 2012-05-05 16:53:35 +0800
Seen: 799 times
Last updated: Sep 14 '12
