Dostosowywanie pól dialogowych Touch AEM
Dostosowywanie interfejsu użytkownika jest kluczową częścią każdego projektu. Dowiedz się, jak dostosować pola dialogowe Touch AEM w AEM 6.1. Dostosowywanie interfejsu użytkownika jest kluczową częścią każdego projektu, a AEM 6.1 oferuje wiele punktów rozszerzeń w tym celu. Ten wpis na blogu opisze, jak dostosować pola dialogowe Touch UI w AEM 6.1. Dostępne są liczne domyślne właściwości do dodawania dialogów Touch UI, ale czasami to nie wystarcza. Istnieje wiele wpisów na temat dostosowywania dialogów Classic UI, ale Touch UI wymaga innej personalizacji.
Przedstawię proces dostosowywania dialogu Touch UI, używając przykładu dialogu Color Picker.
Aby zbudować ten dialog, utwórz nowe niestandardowe pole (nazwałem je 'colorpicker’) i dziedzicz je z 'granite/ui/components/foundation/form/field’. Następnie utwórz lokalną bibliotekę klienta (clientlib) i nadpisz 'render.jsp’.
W skrypcie render.jsp zdefiniuj niezbędne właściwości do konfiguracji dialogów i powiąż je z clientlib.
Następnie utwórz nowy komponent i ustaw resourceType pola 'color’ jako 'training/components/colorpicker’.
Następnie utwórz plik .html, aby wyświetlić wartość koloru. Możemy wreszcie wybrać kolor za pomocą naszego niestandardowego narzędzia do wyboru kolorów i zwizualizować wynik.
Ale co, jeśli musisz zsynchronizować inne wartości pól z utworzonym niestandardowym polem (np. wymusić, aby pole 'color value’ miało tę samą wartość co 'color’)?
Aby to osiągnąć, utwórz nowe pole o nazwie 'color value’, dziedzicz je z pola tekstowego (granite/ui/components/foundation/form/textfield) i skonfiguruj wartość 'granite:class’ w polach 'colorvalue’ i 'color’.
W polu 'color’ skonfiguruj wartość 'granite:class’ do powiązania.
I powiąż je, tworząc węzeł 'granite:data’ pod polem 'color’.
Możesz porównać wartości we właściwościach granite:data i 'granite:class’, aby zrozumieć, jakie wartości i nazwy właściwości powinny się tam znajdować.
