AXAMIT logo
Домашняя Страница Блог 2016 Расширение возможностей полей в Touch UI диалогах

Расширение возможностей полей в Touch UI диалогах

Расширение возможностей полей в Touch UI диалогах

Расширение возможностей интерфейса пользователя является важной частью любого проекта, и в AEM 6.1 для этого есть много возможностей. В этой статье мы покажем, как в AEM 6.1 произвести собственную модификацию полей в Touch UI диалогах. Мы в состоянии добавлять в Touch UI диалоги другие возможности “из коробки”, но иногда их оказывается недостаточно. Можно найти много статей о том, как расширить возможности Classic UI диалогов, но для Touch UI диалогов требуется немного иной подход.

Мы познакомим Вас с процессом расширения возможностей Touch UI диалогов, используя в качестве примера Color Picker диалог.

Чтобы построить такой диалог, создайте новый собственный тип поля (мы назвали его ‘colorpicker’) и сделайте его наследником ‘granite/ui/components/foundation/form/field’. Затем создайте локальную клиентскую библиотеку (clientlib) и переопределите ‘render.jsp’.

В скрипте ‘render.jsp’ задайте нужные свойства для настройки диалога и свяжите их с клиентской библиотекой.

После этого нужно построить новый компонент и для его поля ‘color’ установить следующий resourceType: ‘training/components/colorpicker’.

Затем напишите скрипт .html, чтобы отображать значения цвета. Теперь мы можем выбирать цвет с помощью нашего собственного поля color picker и показывать результат.

Но что же делать, если вам понадобится синхронизировать значения других полей с созданным Вами собственным полем? Например, установить в поле ‘color value’ такое же значение, как в поле ‘color’.

Для этого создайте новое поле, назовите его ‘color value’, сделайте его наследником поля textfield (granite/ui/components/foundation/form/textfield) и в обоих полях ‘colorvalue’ и ‘color’ настройте значение ‘granite:class’.

В поле ‘color’ установите значение ‘granite:class’ для синхронизации.

И свяжите их путём создания у поля ‘color’ ноды ‘granite:data’.

Для понимания того, какие значения и названия свойств следует использовать в этом примере, Вы можете сравнить значения свойств у ‘granite:data’ и ‘granite:class’.

Автор

Арсений Ворган
  • Арсений Ворган
  • Certified AEM Developer