Главное Свежее Вакансии Образование
306 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Разработка UI компонентов идет полным ходом!

Работа над новыми компонентами для UI системы оказалась намного интереснее, чем я мог себе представить, так как использовать стандартные HTML элементы форм для воссоздания UI по типу Desktop приложений оказалось неэффективно ввиду их неуниверсальности и невозможности оформлять так, как захочется разработчику.

Управляемый список.

Началось всё с создания компонента ListBox.

1?token-time=2145916800&token-hash=PyQa3

В HTML его можно создать стандартными средствами, но его отображение зависит напрямую от ОС, на которой происходит запуск приложения. Соответственно, такой подход был для меня неприемлем. Да и браузер накладывает некоторые ограничения на такие элементы: стилизовать внутренние элементы списка нельзя, что является большим минусом.

Ползунок с пользовательским диапазоном.

Следующий элемент - это ползунок. Удобная штука, однако, реализовать её средствами HTML не так и просто. Точнее, элемент для этого есть. Благо, HTML5 позволяет делать это. Но тут снова появляются ограничения, связанные с оформлением, событиями и кастомизацией.

1?token-time=2145916800&token-hash=6iy5b

Прогресс бар.

Тут тоже появились свои подводные камни. Реализовать прогресс бар средствами HTML, опять же, можно. Но ввиду ограничений, делать это не имеет никакого практического смысла. Пришлось прибегнуть к уже рабочей схеме.

1?token-time=2145916800&token-hash=fpv37

Темизация UI.

Всё это нужно было для того, чтобы дать возможность разработчику применять к оформлению своих интерфейсов специальные "скины", написанные на CSS.

1?token-time=2145916800&token-hash=Gz5NM

Так, менять оформление всего интерфейса можно всего в один клик.Помимо стандартных скинов есть возможность разработчикам писать свои, оформляя элементы так, как им захочется.

Узнать подробности и следить за ходом работы можно тут: https://www.patreon.com/skaner

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Jack Mas
Не получается добиться такого же интерфейса как на картинках,
как настроить редактор форм ?
Может быть где то есть инструкция
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.