Затем мы исследовали, как шаблоны MVVM в ZK позволяют одной ViewModel обслуживать различные представления в последнем посте.
Этот пост знаменует собой начало серии постов, которые будут проходить через шаги в создании простого приложения с нуля, используя ZK.
Задача
Сейчас мы создадим простую функцию управления запасами, которая ограничивается только загрузкой и преобразованием сбора данных из базы данных в таблицу.
ZK Особенности в действии
- MVVM: нагрузка
- Тег шаблона
Загрузка и рендеринг данных в таблицу с MVVM
Предположим, есть коллекция объектов с именем «Item» и класс DataService, который заботится о кэшировании и связи с базой данных (MongoDB и Morphia).
|
01
02
03
04
05
06
07
08
09
10
11
12
|
@Entity("items")public class Item { @Id private ObjectId id; private String name; private String model; private int qty; private float price; private Date datemod; // getters & setters |
Чтобы отобразить данные в таблицу, как показано ниже в ZK, нам нужно реализовать следующие части:
- POJO, который будет служить нашей ViewModel
- Файл разметки ZK как наша презентация
Класс ViewModel
|
1
2
3
4
5
6
7
8
9
|
public class InventoryVM { private List<item> items; public List<item> getItems() throws Exception{ items = DataService.getInstance().getAllItems(); return items; } } |
- Строка 3, список элементов должен быть объявлен как свойство класса VM
- В строке 5 нам нужно предоставить метод получения, чтобы связыватель мог получить список элементов. Напомним, что Binder содержит ссылку на компоненты пользовательского интерфейса и ViewModel, поэтому он может синхронизировать данные с обеих сторон, а также вызывать методы команд в ViewModel, так как события инициируются в View.
Разметка
|
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
|
<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('lab.sphota.zk.ctrl.InventoryVM')"> <listbox model="@load(vm.items) "> <listhead> <listheader label="Name" /> <listheader label="Model" /> <listheader label="Quantity" /> <listheader label="Unit Price"/> <listheader label="Last Modified" /> </listhead> <template name="model" var="item" > <listitem> <listcell> <textbox value="@load(item.name)" inplace="true" /> </listcell> <listcell> <textbox value="@load(item.model)" inplace="true" /> </listcell> <listcell> <spinner value="@load(item.qty)" inplace="true" /> </listcell> <listcell> <decimalbox value="@load(item.price)" inplace="true" format="#,###.00"/> </listcell> <listcell label="@load(item.datemod)" /> </listitem> </template> </listbox></window> |
- В строке 1 мы применяем стандартную реализацию ZK своего BindComposer. Он отвечает за создание экземпляра нашей виртуальной машины, а также экземпляра Binder.
- В строке 2 мы предоставляем полное имя класса ViewModel, которое мы хотим создать, и присваиваем ему идентификатор (в данном случае vm) для использования в будущем.
- В строке 3 мы присваиваем Listbox модель данных, которую мы создали как свойство нашего экземпляра ViewModel.
- В строке 11 мы указываем компоненту Template выполнять итерацию по данной коллекции. Мы также объявляем переменную с именем «item», которая будет итеративно принимать каждый объект Item внутри нашей коллекции. В качестве альтернативы, мы можем опустить объявление переменной и использовать ключевое слово «each» для ссылки на объект данных (Item).
- В строках 14, 17, 20, 23, 26 мы получаем свойства элемента, которые мы хотели бы отобразить в списке.
- Здесь мы используем элементы ввода (Textbox, Spinner, Decimalbox) внутри Listcells в ожидании нашей будущей реализации редактируемой таблицы. Атрибут «inplace = true» будет отображать эти элементы ввода как обычные метки, пока они не выбраны.
Заворачивать
ZK Binder занимает центральное место в работе ZK MVVM. Он содержит ссылки как на компоненты пользовательского интерфейса, так и на ViewModel. Класс ViewModel — это просто POJO, где мы объявляем и присваиваем наши модели данных. Он предоставляет методы получения, поэтому Binder может извлекать и связывать данные с соответствующими аннотированными компонентами пользовательского интерфейса. Затем тег шаблона позволяет итеративно визуализировать компоненты пользовательского интерфейса относительно модели данных. В нашем случае строка из 5 ячеек Listcell, каждая из которых содержит свойство bean-компонента, визуализируется итеративно через коллекцию bean-компонентов с использованием тега template.
В следующем посте мы реализуем функцию «Добавить», чтобы мы могли сохранять новые записи в существующий инвентарь, используя привязку формы MVVM.
Справочник ZK Разработчик Справочник
Ссылка: ZK в действии [0]: MVVM — загрузка и рендеринг данных от нашего партнера по JCG Лэнса Лу в блоге Tech Dojo .