В этом посте я хотел бы рассказать об очень интересной разработке фреймверке ZK.

ZK это UI фреймверк, который позволяет создавать удивительные веб- и мобильные приложения без необходимости изучать JavaScript или AJAX.

Это перевод, оригинал статьи — http://books.zkoss.org/wiki/ZK_Getting_Started/Learn_ZK_in_10_Minutes

С чего начать

Создание пользовательского интерфейса с ZK достаточно легкий и удобный процес, достаточно комбинировать и смешивать из сотен компонентов, которые у вас всегда “под рукой”. Вы можете быстро создать собственный пользовательский интерфейс с различными компонентами ZK. Стиль каждого компонента, поведение и функции могут быть настроены в соответствии с вашими желаниями.

Getstarted-simpleZK-UI.png

ZUL, легко читаемый язык в формате XML, используемый для описанной выше формы регистрации.

1
2
3
4
5
6
7
8
9
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

<window border="normal" width="400px" style="padding-top:20px;padding-left:20px;" title="Welcome! New User">
    <grid hflex="1">
        <auxhead>
            <auxheader colspan="2" label="Registration Form" style="font-size:16px" image="../images/picture.png"/>
        </auxhead>
        <columns/>
        <rows>
            <row>
                User Name <textbox id="nameBox" hflex="1" constraint="no empty"/>
            </row>
            <row>
                Gender:
                <radiogroup id="genderRadio">
                    <radio label="Male" value="male" image="../images/male.png" checked="true"/>
                    <radio label="Female" value="female" image="../images/female.png"/>
                </radiogroup>
            </row>
            <row >
                Birthday <datebox id="birthdayBox" hflex="1" constraint="no empty, no today, no future"/>
            </row>
            <row spans="2" align="center" >
                <hlayout>
                    <checkbox id="acceptTermBox"/> Accept Term of Use
                </hlayout>
            </row>
            <row spans="2" align="right">
                <hlayout>
                    <button id="resetButton" label="Reset" />
                    <button id="submitButton" label="Submit" disabled="true"/>
                </hlayout>
            </row>
        </rows>
    </grid>
</window>
  • Строка 1: Один тег представляет собой один компонент. Некоторые компоненты могут содержать дочерние компоненты внутри них. В этом примере window содержит a grid.
  • Строка 29: Вы можете задать атрибут «ID» компонента, чтобы вы могли управлять им в контроллере интерфейса.

ZK также позволяет создавать пользовательский интерфейс программно также, как вы можете использует Java Swing в Richlet [8].

ZK компоненты пользовательского интерфейса, как строительные блоки, можно комбинировать, смешивать или наследовать и вносить их в новые компоненты для выполнения различных задач. Эта универсальность увеличивает повторное использование кода и модульность приложения [9].

Интуитивное управление UI

ZK является компонентно-базовым фреймверком такой модель программирования, как управление событиями. Поэтому разработчики добавляют новые функции для ответа на события компонентов, которые вызваны взаимодействием пользоватей.

UI контроллер

Для управления пользовательским интерфейсом, во-первых, вам нужно реализовать класс контроллера, который наследует SelectorComposer ZK[1] для ZUL. Затем, вы можете получить UI компоненты Java объекта путем аннотирования @Wire к переменным элементам контроллера. После этого, вы можете контролировать и управлять пользовательским интерфейсом, путем доступа к этим аннотированный переменным элементам.

1
2
3
4
5
6
7
8
9
10
11
12

package foo;
 
// some import statements are omitted for brevity.
 
public class RegistrationComposer extends SelectorComposer {
 
    @Wire
    private Button submitButton;   
 
    @Wire
    private Checkbox acceptTermBox;
}
  • Строки 7,10: Имена переменных «SubmitButton» и «acceptTermBox» соответствуют атрибутам ID компонентов, которые определены ZUL в предыдущем разделе.

Мы можем использовать контроллер, чтобы контролировать наши компоненты пользовательского интерфейса, указав атрибут «apply» в ZUL.

1
2
3
4

<window border="normal" width="400px" style="padding-top:20px;padding-left:20px;" title="Welcome! New User"
apply="foo.RegistrationComposer">
<!-- omit other components for brevity -->
</window>
  • Строка 2: Применяя контроллер корневого компонента, вы можете контролировать все дочерние компоненты внутри корневого компонента.

Примечание:

  1. SelectorComposer было введен в ZK 6,0

Управление действиями пользователя

Одной из особенностей применения регистрационной формы выше, является то, что «Submit» кликабельна только тогда, когда пользователь включил чекбокс «Term of use».

Сначала кнопка «Submit» не активна, когда чекбокс «Term of use» не включен.

Simplezk-uncheck.png

После включения чекбокса «Term of use», кнопка «Submit» включена с соответствующей иконкой.

Simplezk-check.png

ZK является компонентно-базовым фреймверком действий пользователя, следовательно, постоянно проверяются события компонента. ZK предоставляет аннотирует @Listen, которые могут быть использованы как метод “прослушивания” события компонента, который вы укажете. Для достижения этой особенности, вы можете аннотировать метод, чтобы слушать событие «onCheck» чекбокса «Term of use». Всякий раз, когда пользователь включает/выключает чекбокс, вызывается событие «onCheck», ZK вызывает аннотированный методов. Описанный выше UI эффект мы реализуем путем изменения свойств компонента (Java объекта) в аннотированном методе

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

public class RegistrationComposer extends SelectorComposer {
    @Wire
    private Button submitButton;
    @Wire
    private Checkbox acceptTermBox;
 
    @Listen("onCheck = #acceptTermBox")
    public void changeSubmitStatus(){
        if (acceptTermBox.isChecked()){
            submitButton.setDisabled(false);
            submitButton.setImage("/images/submit.png");
        }else{
            submitButton.setDisabled(true);
            submitButton.setImage("");
        }
    }
 
}
  • Строка 7: Используйте @Listen для объявления метода обработки onCheck события “acceptTermBox».
  • Строка 10,11: Включение кнопки «Submit» и отображение значка, когда включен чекбокс «Term of use».
  • Строка 13,14: Отключение кнопки «Submit» и скрытие иконки.

С помощью ZK, вы можете легко добавлять модные эффекты пользовательского интерфейса, такие как подсказки, drag & drop, горячие клавиши и т.д. [8] в ваше приложение.

Простая интеграция бекэнда

ZK позволяет контролировать UI с помощью контроллера на стороне сервера, поэтому контроллер основная точка для интеграции любой Java библиотеки или фреймверка. Для интеграции ZK с другими фреймверками, напишите свой код контроллера, используя классы back-end системы, которые составляют ваш бизнес- или персистентный слой.

Интеграция сторонних библиотек

С помощью интерфейса контроллера ZK — SelectorComposer, легко интегрировать вашу существующие классы, объект домена и любые сторонние библиотеки, такие как Log4j.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public class RegistrationIntegrateComposer extends SelectorComposer {
 
    //omit other variables for brevity
    private static Logger logger = Logger.getLogger(RegistrationIntegrateComposer.class.getName());
    private LegacyRegister legacyRegister = new LegacyRegister();
    private User newUser = new User();
 
    @Listen("onClick = #submitButton")
    public void register(){
        //save user input into newUser object
        legacyRegister.add(newUser);
        logger.debug("a user was added.");
        //...
    }
}
  • Строка 4,12: Вызвать лог ошибок Log4j.
  • Строка 5,11: Используйте ваш системный объект в контроллере.
  • Строка 6,11: Используйте свой ​​объект домена.

Интеграция приложения и персистентность фреймверка

Это очень важно, что основа пользовательского интерфейса может сотрудничать с другими бизнес-слоями или персистентными слоями при создании многоуровневых веб-приложений. ZK легко интегрируемых с бизнес-фреймворкми, как Spring.

Предположим, вы разработали и внедрили некоторые классы в соответствии с Data Access Object (DAO) шаблонам, как и персистентный слой вашего приложение с Hibernate, JPA или другие персистентные фоеймверки. Это есть в вашем контроллере, в котором вы должны использовать классы для реализации функций приложения.

1
2
3
4
5
6
7
8
9
10
11
12

@VariableResolver(org.zkoss.zkplus.spring.DelegatingVariableResolver.class)
public class RegistrationSpringComposer extends SelectorComposer {
 
    @WireVariable
    private RegistrationDao registrationDao;
 
    @Listen("onClick = #submitButton")
    public void submit(){
        // omit irrelevant code for brevity
        registrationDao.add(newUser);
    }
}
  • Строка 1: Для использования CDI, просто использовать другой решение: org.zkoss.zkplus.cdi.DelegatingVariableResolver.class .
  • Строка 4: Для этих переменных с @WireVariable , ZK будет вводить подходящие Spring beans путем извлечения их из контекста Spring.

Ссылки

  1. Демо фреймверка: ZK Demo
  2. Try Скачать дистрибутив: Download ZK
  3. Изучение примеров ZK MVC: Get ZK Up and Running with MVC
  4. Изучение примеров ZK MVVM: Get ZK Up and Running with MVVM
  5. Изучение базовый понятий: Read «ZK Essential»
  6. Погружение во все аспекты ZK: Read «ZK Developer’s Reference»
  7. Инструменты для более эффективной разработки: Read «ZK Studio Essentials»
  8. Программное создание UI: Richlet
  9. Расширение существующих компонентов: Macro Component
  10. Улучшение UI: UI Pattern

Оригинал статьи http://books.zkoss.org/wiki/ZK_Getting_Started/Learn_ZK_in_10_Minutes