Мастер-класс по кастомизации Jmix UI

• Приветствие участников и проверка связи.  

• Объявление о вебинаре на российском рынке.  

• Представление спикеров: Ришана Антоновна и Дмитрий Кремнев.  

• Дмитрий занимается разработкой на Vue.js около семи лет.  

• Последние пять лет работает с Vue.js.  

• Vue.js используется для создания интерфейсов из готовых компонентов.  

• Vue.js имеет широкую палитру компонентов.  

• Возможность быстро создавать интерфейсы.  

• Vue.js адаптируется к современным тенденциям и запросам разработчиков.  

• Vue.js используется для создания пользовательского интерфейса.  

• JAMix - это фулстек фреймворк, включающий бэкенд и фронтенд.  

• JAMix предоставляет собственные компоненты, такие как карты и графики.  

• Переход от Google Web Toolkit к Web Components.  

• Web Components позволяет писать компоненты на одном языке.  

• Vue.js использует Polymer от Google для клиентской части.  

• Web Components - это набор стандартов для создания веб-интерфейсов.  

• Поддержка повторного использования компонентов.  

• Упрощенное взаимодействие с компонентами на клиентской части.  

• Поддержка современных функций CSS.  

• Упрощенное взаимодействие с библиотеками JavaScript.  

• Интеграция компонентов React и npm пакетов.  

• Обзор особенностей стилизации и разметки в JAMix.  

• Демонстрация простого приложения с табличками и кнопками.  

• Изменение главного цвета и фона приложения.  

• Открытие файла стиля в IDE.  

• Применение нового цвета фона.  

• Необходимость глобального подхода к стилизации.  

• Использование встроенных тем и пользовательских переменных CSS.  

• Настройка стилей через таблицу CSS.  

• Использование инструмента Luma Theme Editor.  

• Изменение главного цвета приложения.  

• Экспорт стилей для использования в проекте.  

• Создание и использование переменных для стилизации.  

• Пример создания переменной для цвета фона.  

• Преимущества использования переменных.  

• Компоненты как сложные элементы HTML.  

• Использование Shadow DOM для изоляции стилей.  

• Стилизация компонентов через селекторы и переменные.  

• Использование селекторов и переменных для изменения стилей.  

• Примеры селекторов для различных состояний компонентов.  

• Применение переменных для изменения внешнего вида компонентов.  

• Использование атрибута class для стилизации конкретных экземпляров компонентов.  

• Пример стилизации полей формы.  

• Создание контрастной подложки для полей.  

• Настройка контрастности кнопок.  

• Использование пользовательских переменных для стилизации.  

• Исправление размера контейнера для датагрида.  

• Компоненты размещаются внутри контейнеров.  

• Использование атрибутов line-height и justify-content.  

• Примеры использования атрибутов для выравнивания элементов.  

• Flexbox - это модуль гибкой разметки, обеспечивающий эффективное выравнивание и распределение пространства между элементами.  

• Flexbox позволяет контейнерам изменять ширину и высоту для адаптации к различным устройствам.  

• Контейнер может расширяться или сжиматься для заполнения доступного пространства.  

• По умолчанию Flexbox расширяет элементы, если это возможно.  

• Для заполнения всего доступного пространства контейнер должен быть расширен.  

• Пример с приложением: сообщения об ошибках и панель с кнопками могут выходить за пределы экрана.  

• Создание большого контент-бокса для таблицы.  

• Добавление свойства overflow-y: auto для добавления полос прокрутки.  

• Изменение панели с кнопками для постоянного отображения.  

• Изменение цвета и стиля панели с кнопками.  

• Использование предопределенных стилей из библиотеки Luma Utilities.  

• Адаптация панели прокрутки для лучшего визуального восприятия.  

• Создание вертикального макета для группировки полей.  

• Использование класса .contrast-panel для группировки полей.  

• Адаптация формы для горизонтального расположения полей.  

• Замена Flexbox на Grid Layout для адаптивного макетов.  

• Определение стиля .grid-panel для отображения сетки.  

• Настройка ширины и пробелов между элементами сетки.  

• Свойство grid создает сетку из столбцов, которая преобразуется в один столбец при ширине менее 25rem.  

• Пример: сетка из двух столбцов, которая при уменьшении размера становится одним столбцом.  

• Автор доволен результатом и упоминает, что есть много гайдов по этому поводу.  

• Автор планирует демонстрацию.  

• Обсуждение, что было рассказано только о вершине айсберга, а не о всех возможностях.  

• Упоминание о возможности возобновления презентации и дополнительных материалах.  

• Обсуждение стилизации приложения и правил компоновки.  

• Упоминание, что это лишь малая часть возможностей UI-Kit.  

• Приглашение на обучение и возможность оставить заявку по QR-коду.  

• Обсуждение разницы между чистым UI-Kit и JAMix.  

• JAMix предоставляет больше подходящих компонентов и шире палитру.  

• Автоматический биндинг данных и генерация подписок на события в компонентах делают разработку эффективнее.  

• Вопрос о смене фона строк в стандартном листе.  

• Ответ: использование сервиса JAMix UI Samples для готовых примеров.  

• Пример стилизации строк в таблице с помощью портных.  

• Вопрос о предоставлении списка сущностей в виде плиток.  

• Ответ: из коробки такого решения нет, но можно реализовать самостоятельно.  

• Планы по реализации функциональности плиток в будущем.  

• Возможность расширения экранов дополнений.  

• Пример использования экранов из дополнений и их взаимодействия.  

• Глобальная стилизация системных диалогов и возможность их переопределения.  

• Пример сложной темы стилизации.  

• Использование репозитория JAMix для веб-компонентов и стилей.  

• Возможность переопределения шрифтов и иконок в системных диалогах.  

• Встроенные темные и светлые темы в UI-Kit.  

• Возможность задания собственной темы в конфигурации.  

• Пример изменения стилей для темной темы и необходимость использования дополнительных селекторов.  

• Вопрос о возможности создания стилизации как в Одноклассниках.  

• Ответ: можно создать кастомную стилизацию, если начать с базовых  

• Вопрос о том, как управлять положением лейбла кнопки при увеличении её размера.  

• Лейбл всегда остается по центру, даже при использовании марджина.  

• При масштабировании браузера лейбл съезжает.  

• Вопрос требует более детального представления и обсуждения.  

• Рекомендуется продублировать вопрос в Telegram или на форум для более предметного диалога.  

• Без повторения разметки сложно дать конкретный совет.  

• Благодарность участникам за участие в вебинаре.  

• Надежда на будущие интересные мероприятия.  

• Прощание и приглашение на следующие вебинары.