Статьи

ZK в действии: MVVM — переплет формы

Апрель 18, 2019
Это второй эпизод в наших усилиях по созданию приложения ZK с нуля. В предыдущем посте речь шла о загрузке и обработке данных в таблице с использованием MVVM. В этом посте мы познакомимся с привязкой форм ZK MVVM.

Задача

Мы создадим функцию «Добавить», которая позволит нам сохранять новые записи в инвентаре.

Форма появляется при нажатии «Добавить»
Новая запись добавляется при нажатии «Сохранить»

ZK Особенности в действии
 

  • MVVM: сохранение, привязка формы, условная привязка

Добавить новые записи с привязкой формы MVVM

нам нужно реализовать эти части:

  • Расширьте нашу ViewModel POJO
  • Добавьте разметку пользовательского интерфейса, чтобы представить форму и украсить разметку соответствующими аннотациями

Класс 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
29
30
public class InventoryVM {
 
    private List<item> items;
    private Item newItem;
  
    @NotifyChange("newItem")
    @Command
    public void createNewItem(){
        newItem = new Item("", "",0, 0,new Date());
    }
  
    @NotifyChange({"newItem","items"})
    @Command
    public void saveItem() throws Exception{
        DataService.getInstance().saveItem(newItem);
        newItem = null;
        items = getItems();
    }
   
    @NotifyChange("newItem")
    @Command
    public void cancelSave() throws Exception{
        newItem = null;
    }
  
    public List<item> getItems() throws Exception{
        items = DataService.getInstance().getAllItems();
        return items;
        }
    }
  • В строке 4 мы объявляем объект Item с именем newItem, который будет ссылаться на экземпляр Item для сохранения в базе данных.
  • Строка 6, @NotifyChange информирует механизм связывания для обновления пользовательского интерфейса о состоянии соответствующего свойства ViewModel.
    В нашей разметке пользовательского интерфейса, показанной ниже, в строке 8 у нас есть Groupbox с аннотацией visible = ”@ load ( не пустой vm.newItem ) , поэтому Groupbox станет видимым, как только createNewItem назначит экземпляр Item для newItem .
    Проще говоря, @NotifyChange обновляет пользовательский интерфейс в отношении обновлений свойств ViewModel.
  • В строке 7 мы аннотируем метод createNewItem с помощью @Command, а в нашей разметке пользовательского интерфейса, показанной ниже, в строке 4 у нас есть панель инструментов с onClick = ”@ commnad (createNewItem)” . Поэтому, когда нажимается кнопка панели инструментов, вызывается метод createNewItem.
  • Аналогично, в строке 12-18 у нас есть метод saveItem, который вызывается при срабатывании соответствующего события onClick. Как только новый объект Item будет сохранен в кэше базы данных, мы сбросим newItem в null и получим новый список элементов. Изменения, внесенные в свойства ViewModel newItem (теперь снова нулевые) и элементы (теперь с дополнительной записью), отражаются в пользовательском интерфейсе с помощью @NotifyChange, как и раньше.



Разметка

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<window apply="org.zkoss.bind.BindComposer"
 viewModel="@id('vm') @init('lab.sphota.zk.ctrl.InventoryVM')">
<toolbar>
 <toolbarbutton label="Add" onClick="@command('createNewItem')" />
</toolbar>
<groupbox form="@id('itm') @load(vm.newItem)
        @save(vm.newItem, before='saveItem')"
 visible="@load(not empty vm.newItem)">
 <caption label="New Item"></caption>
 <grid width="50%">
  <rows>
   <row>
    <label value="Item Name" width="100px"></label>
    <textbox id="name" value="@bind(itm.name)" />
   </row>
   <row>
    <label value="Model" width="100px"></label>
    <textbox value="@bind(itm.model)" />
   </row>
   <row>
    <label value="Unit Price" width="100px"></label>
    <decimalbox value="@bind(itm.price)" format="#,###.00"
     constraint="no empty, no negative" />
   </row>
   <row>
    <label value="Quantity" width="100px"></label>
    <spinner value="@bind(itm.qty)"
     constraint="no empty,min 0 max 999:
    Quantity Must be Greater Than Zero" />
   </row>
   <row>
    <cell colspan="2" align="center">
     <button width="80px" label="Save"
      onClick="@command('saveItem')" mold="trendy" />
     <button width="80px" label="Cancel"
      onClick="@command('cancelSave')" mold="trendy" />
    </cell>
   </row>
  </rows>
 </grid>
</groupbox>
<listbox>
...
</listbox>
</window>
  • В строке 1 мы применяем стандартную реализацию ZK своего BindComposer. Он отвечает за создание экземпляров наших экземпляров ViewModel и Binder.
  • В строке 2 мы предоставляем полное имя класса ViewModel, которое мы хотим создать, и даем ему идентификатор для дальнейшего использования.
  • В строке 4 мы назначаем «метод метода» нашего ViewModel createNewItem в качестве обработчика события onClick для кнопки панели инструментов.
  • В строке 6 свойство newItem в ViewModel становится доступным для ссылок по всему Groupbox с использованием идентификатора «itm».
  • В строке 6,7, используя привязку формы, чтобы избежать недопустимых или неполных данных, сохраненных в свойстве ViewModel, записи в форме сохраняются во временном объекте до тех пор, пока не будет вызван командный метод saveItem .
  • В строке 8 мы показываем Groupbox для ввода нового элемента Item, только пользователь нажал кнопку «Добавить»; который, в свою очередь, вызывает метод createNewItem и назначает свойству VM newItem экземпляр Item со значением по умолчанию (пустые строки и 0 с).
  • Строки 14, 18, 22, 27, мы связываем свойства Item с входными элементами. @bind фактически эквивалентен @load плюс @save.

В скорлупе

Подводя итог в форме точки:

  • Использование привязки формы позволяет избежать непосредственного изменения данных в свойствах ViewModel путем сохранения записей формы во временном объекте. Данные записываются в свойства ViewModel, только если указанное условие выполняется; в нашем примере, только если вызывается метод saveItem .
  • Аннотация @Command позволяет связующему отображать обработчики событий пользовательского интерфейса в командные методы ViewModel.
  • @NotifyChange информирует механизм связывания, какие свойства ViewModel были изменены после выполнения командного метода, чтобы изменения данных можно было затем отразить в пользовательском интерфейсе.
  • Мы можем присваивать значения любым атрибутам компонентов пользовательского интерфейса во время выполнения с помощью привязки MVVM, чтобы манипулировать такими параметрами, как видимость, стиль, отключение / включение и т. Д.

В этом посте мы не видели, как проверяются записи данных. До этого мы реализуем функции удаления и редактирования в следующем посте.

Справочник ZK Разработчик Справочник

Ссылка: ZK в действии [1]: MVVM — переплет формы от нашего партнера JCG Лэнса Лу в блоге Tech Dojo .

40
Share: