Мы видели, что когда метод украшен аннотацией @NotifyChange () , по завершении его выполнения Binder будет информирован об изменениях свойства VM, чтобы Binder мог соответствующим образом обновить соответствующий пользовательский интерфейс.
В этом посте, пока мы реализуем функциональность удаления элементов в нашем инвентаре, мы увидим, как мы можем программно обновлять компоненты пользовательского интерфейса во время выполнения.
Задача
Создайте функцию удаления для нашей простой функции инвентаризации CRUD.
ZK особенность в действии
- MVVM: BindUtils
Реализовать удаление с помощью MVVM BindUtils. Мы будем:
- Добавьте разметку для кнопки удаления и назначьте ей обработчик события onClick
- Реализуйте метод команды « deleteItem () » в ВМ
Разметка
|
1
2
3
4
5
6
|
<window apply='org.zkoss.bind.BindComposer' viewModel='@id('vm') @init('...InventoryVM')'> <toolbar width='100%'> <toolbarbutton label='Add' onClick='@command('createNewItem')' /> <toolbarbutton label='Delete' onClick='@command('deleteItem')' disabled='@load(empty vm.selected)'/> </toolbar> |
- В строке 5 назначьте метод команды ‘ deleteItem ‘ для обработчика onClick кнопки удаления.
- строка 5, ‘ disabled =’ @ (empty vm.selected) ‘ ‘ гарантирует, что кнопка удаления будет работать, только если была выбрана запись в таблице
Класс ViewModel
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
public class InventoryVM { private Item selected; private List<Item> items; ... @Command public void deleteItem() throws Exception{ if (selected != null){ String str = 'The item with name \'' +selected.getName() +'\' and model \'' +selected.getModel() +'\' will be deleted.'; Messagebox.show(str,'Confirm Deletion', Messagebox.OK|Messagebox.CANCEL, Messagebox.QUESTION, new EventListener<event>(){ @Override public void onEvent(Event event) throws Exception { if (event.getName().equals('onOK')){ DataService.getInstance().deleteItem(selected); items = getItems(); BindUtils.postNotifyChange(null, null, InventoryVM.this, 'items'); }); } ... } ...} |
- В строке 7 мы украшаем наш метод deleteItem с помощью @Command, чтобы он мог быть связан как обработчик события onClick в нашей добавленной разметке:
<toolbarbutton label = ‘Delete’ onClick = ‘@ command (‘ deleteItem ‘)’ /> ; - В строке 9 мы продолжаем процесс удаления, только если элемент выбран.
- В строке 16 мы показываем окно сообщения, которое предлагает пользователю подтвердить удаление выбранного элемента.
- В строке 20, если пользователь нажимает «ОК», наша программа переходит к удалению выбранного элемента.
- В строке 23 мы вызываем BindUtils.postNotifyChange (String queueName , String queueScope , Object bean , String свойство ), чтобы обновить нашу таблицу инвентаризации. Если для параметра queueScope задано нулевое значение, используется область очереди рабочего стола по умолчанию. Третий и четвертый аргументы даны как таковые, поскольку мы хотим уведомить Binder, что свойство ‘items’ в нашем экземпляре InventoryVM изменилось. Связыватель затем обновит пользовательский интерфейс (удалит элемент записи в таблице инвентаризации).
Заворачивать
Аннотация @NotifyChange позволяет обновлять пользовательский интерфейс через Binder ZK MVVM, чтобы отразить изменения, внесенные в свойства ViewModel. Уведомление запускается, когда аннотированный метод завершает выполнение. В нашей реализации мы прикрепили класс слушателя анонимного события к Messagebox. В этом случае после выполнения deleteItem аннотация @NotifyChange (‘items’) ложно оповестит Binder до завершения обработки события. Программный способ отразить изменения состояния в ViewModel для пользовательского интерфейса решает эту конкретную проблему удобно.
Далее редактируем записи с помощью MVVM.
Ссылка: ZK в действии [2]: MVVM — Обновление программного представления от нашего партнера по JCG Лэнса Лу в блоге Tech Dojo .