В прошлом блоге я в основном говорил о настройке среды разработки, а в этом блоге речь пойдет о разработке интерактивного диалога.
С тех пор я работаю над преобразованием еще нескольких диалогов в React. Я преобразовал три диалога — диалог свойств календаря, диалог предупреждений календаря и диалог печати в их эквиваленты React. Диалоговое окно будильника календаря и диалоговое окно печати все еще нуждаются в некоторой доработке логики состояния, но это не займет много времени. Вот несколько скриншотов этих диалогов.
Создавая эквиваленты реакции, я обнаружил, что XUL сильно зависит от атрибутов и их значений. HTML не работает с атрибутами и их значениями так, как это делает XUL. HTML позволяет минимизировать атрибуты, а с React есть некоторые другие трудности, связанные с атрибутами. React автоматически игнорирует все атрибуты HTML не по умолчанию, поэтому, чтобы добавить эти атрибуты, я должен добавить их явно, используя метод setAttribute для элемента, когда он смонтирован. Вот короткий фрагмент кода, который показывает, как я добавляю пользовательские атрибуты HTML и обновляю их в React.
class CalendarAlarmWidget extends React.Component {
componentDidMount() {
this.addAttributes(this.props);
}
componentWillReceiveProps(nextProps) {
// need to call removeAttributes first
// so that previous render attributes are removed
this.removeAttributes();
this.addAttributes(nextProps);
}
addAttributes(props) {
// add attributes here
}
removeAttributes() {
// remove attributes here
}
}
XUL также имеет элемент диалога, который используется вместо окна для диалоговых окон. Я также сделал его реактивным эквивалентом, который имеет почти все атрибуты и функциональные возможности диалогового элемента XUL. Так как XUL имеет немного другую технику расположения элементов по сравнению с HTML, я опустил некоторые атрибуты, специфичные для макета. С мощью современного CSS довольно легко создать макет, поэтому вместо того, чтобы управлять макетом с помощью атрибутов, я больше полагаюсь на CSS, чтобы делать эти вещи. Некоторые методы, такие как centerWindowOnScreen и moveToAlertPosition, зависят от родительской оболочки XUL, поэтому я также отказался от них для эквивалента React.
В XUL есть некоторые элементы, HTML-эквиваленты которых недоступны, а для некоторых XUL-элементов HTML-эквиваленты не имеют такой же структуры, поэтому их внешний вид значительно отличается. Прекрасным примером может служить menulist, HTML-эквивалент которого — select. В отличие от menulist, прямым дочерним элементом которого является menupopup, который включает в себя все элементы меню, элемент select непосредственно включает в себя все параметры. поэтому пользовательский интерфейс select нельзя сделать точно таким же, как у menulist. Элементы option также нельзя настраивать, в отличие от menuitem, а также не поддерживаются стили. Хотя полезно иметь компоненты React, которые ведут себя аналогично своим аналогам XUL, в конце концов останется только HTML. Поэтому неизбежно, что некоторые функции, бесполезные для новых компонентов, будут удалены.
Я сделал несколько пользовательских элементов React, чтобы обеспечить все функции, которые предоставляют существующие диалоговые окна, хотя я все еще использую HTML-элемент select в некоторых местах вместо пользовательского элемента списка меню, потому что использую javascript и дополнительный CSS только для того, чтобы сделать элемент, похожий на аналог XUL, того не стоит.
Поскольку каждая платформа имеет свой особый внешний вид, естественно, существуют различия в правилах CSS. Я организовал файлы таким образом, чтобы было легко написать правила, общие для всех платформ, но также добавить различия для каждой ОС. Многие различия пользовательского интерфейса обрабатываются автоматически с помощью правил -moz-appearance, которые предписывают платформе Mozilla использовать стили ОС для отображения элементов. Веб-приложение автоматически определит вашу ОС, чтобы вы могли увидеть, как диалог будет выглядеть на разных платформах.
Я подумал, что было бы здорово получить быстрые предложения и отзывы о пользовательском интерфейсе диалогов от сообщества, поэтому я добавил раздел комментариев на каждую страницу диалога. Я буду добавлять в веб-приложение больше интересных функций, которые, возможно, помогут в достижении прогресса в этом проекте.
Благодаря BrowserStack за предоставление бесплатных планов OSS, теперь я могу быстро проверить, как мои диалоги выглядят на Windows и Mac.
Спасибо Юлии (разработчику Devtools в Mozilla) за то, что она нашла время для обсуждения реализации диалога в ответ, я надеюсь, что в будущем будет больше обсуждений в ответ :)
Не стесняйтесь проверять диалоги в веб-приложении и комментировать, если у вас есть какие-либо вопросы.
Ознакомьтесь с другими блогами из серии проектов Convert XUL to HTML —
Часть 1: Первые шаги — преобразование XUL в HTML
