Статьи

Стилизация нативных приложений с помощью CSS

Январь 8, 2018

Автор Георги Атанасов для Telerik Blog.

Стилизация нативных приложений с помощью CSS

Теперь, когда второй главный предварительный с открытым исходным кодом Telerik в NativeScript продукт был выпущен , я очень рад поделиться с вами , где мы сейчас и то , что мы после с точки зрения повторного использования кода и кросс-платформенной UI API. Этот выпуск является важной вехой для нас, так как нам удалось создать прототип и изначально реализовать большинство основных строительных блоков уровня пользовательского интерфейса. Вкратце это:

  • Visual Tree (или DOM), следуя лучшим практикам и стандартам W3C;
  • Наблюдение за событиями в соответствии с наблюдаемой схемой проектирования;
  • Привязка данных (включая распространение контекста по визуальному дереву);
  • Расширенная система свойств для включения каскадных значений и наследования;
  • Механизм компоновки с предопределенными контейнерами — например, Grid, позволяющий легко выполнить любую сложную компоновку;
  • Navigation Framework для упрощения и унификации переходов между экранами различных приложений;
  • CSS-подобный механизм стилей над деревом визуалов;
  • Начальный набор кроссплатформенных виджетов пользовательского интерфейса.

Более подробной информации об этой версии вы можете обратиться к моему коллеге объявления посту .

Примечание: Если у вас все еще нет доступа к битам, пожалуйста, попросите присоединиться к бета-группе NativeScript, а затем отправьте электронное письмо ([email protected]), чтобы убедиться, что вы будете в числе первых, кто получит доступ к свежим биты.

CSS в нативных мобильных приложениях?

Да, это возможно, и это то, что мы сделали в NativeScript! В этом посте я поделюсь некоторыми подробностями о технической стороне этой функции, о том, как она реализована, и о том, что мы думаем о будущих обновлениях.

Почему CSS?

Каскадные таблицы стилей — это, конечно же, механизм стилей для веба, и поэтому он широко используется и хорошо известен. Поскольку NativeScript стремится обеспечить некоторое (если не полное) повторное использование JavaScript и навыков веб-разработки, и, учитывая, что у нас будет наша версия объявления UI разметки, единственным логическим механизмом стилизации для нас с самого начала был CSS.

Что в настоящее время реализовано?

Будучи стилевым механизмом веб-дизайна, CSS постоянно расширяется и обогащается на протяжении многих лет. На сегодняшний день она настолько многофункциональна и сложна, что для нас технически невозможно включить все стандартизированные функции. Тем не менее, мы создали основу, и будущие расширения должны сделать ее намного проще и намного быстрее.

Наша реализация строго следует спецификации CSS синтаксиса и правил, включая селекторы и объявления. Однако набор свойств будет отличаться от того, что доступно в веб-CSS, поскольку мы нацелены на общий знаменатель трех различных мобильных платформ, предоставляя функции, отличные от HTML DOM.

Поддерживаемые селекторы

  1. Тип селектора
    button { … }

  2. Выбор класса
    .my-class { ... }

  3. Селектор идентификаторов
    #login-button { ... }

  4. Селектор псевдоклассов (или то, что мы называем Селектором состояний)
    button:pressed { ... }

Поддерживаемые свойства

  1. цвет — позволяет изменять цвет переднего плана соответствующего вида.
  2. background-color : позволяет изменять цвет фона соответствующего вида.
  3. размер шрифта : позволяет изменять размер шрифта соответствующего вида (работает только в устройствах, не зависящих от устройства).

В будущих выпусках появилось много других.

Вышеуказанные три свойств было достаточно для нас , чтобы встретить веху мы установили — реализовать простое приложение для чтения Reddit с помощью кросс-платформенного кода только . Но, как я упоминал ранее, создание фундамента позволит нам продолжать предоставлять новые функции и свойства.

Объект Стиль

Как и объект стиля DOM , каждый экземпляр View предоставляет свойство стиля. На самом деле, когда CSS анализируется и обрабатывается, это свойство используется для применения объявлений к каждому сопоставленному представлению. Затем именно View и его Stylelers решают, как сопоставить примененные свойства базовым нативным виджетам.

Могу ли я увидеть настоящий код?

Следующий фрагмент извлекается из файла main.js в нашем шаблонном проекте Hello World :

//Create and return the page.
var page = new pages.Page();
page.content = panel;
page.css = " button { font-size: 42 } .title { font-size: 30 }" +
    " .message { font-size: 20; color: #284848; }";
exports.Page = page;

И этот код демонстрирует, как применить красный фон к
экземпляру Button, используя его свойство style напрямую:

var buttonModule = require("ui/button");
var button = new buttonModule.Button();
button.text = "Click me!";
button.style.backgroundColor = new colorModule.Color("red");

Как насчет существующего CSS?

Вам может быть интересно, что произойдет, если вы вставите уже существующую таблицу стилей в NativeScript. Что ж, он будет проанализирован и обработан, но большинство правил будут проигнорированы, и будут применены только поддерживаемые в настоящее время селекторы и свойства.

Хорошей новостью является то, что наша реализация расширяема и позволяет регистрировать новые свойства и сопоставлять их с базовыми нативными виджетами. Тем не менее, некоторые сложные правила, такие как переходы и макеты, потребуют дополнительной реализации, в то время как другие будет невозможно реализовать из-за различий в HTML DOM и нашем Visual Tree. У нас есть планы предоставить простой и интуитивно понятный высокоуровневый API поверх нашего слоя CSS, чтобы позволить разработчикам регистрировать и реализовывать пользовательские свойства, не углубляясь во внутренности фреймворка.

Что будет дальше?

Наши ближайшие планы:

  • Включить свойства макета, такие как ширина, высота, поля и т. Д .;
  • Расширить селекторы псевдоклассов, которые являются более сложными и требуют дополнительной обработки различных событий на нативной стороне;
  • Реализуйте некоторые комбинаторы — например, gridpanel button { ... }означающие «все кнопки на панели сетки».
  • Селекторы и объявления для конкретной платформы — например,
    -ios-button { ... }илиbutton { -ios-color:red }

Этот список может расти почти бесконечно, и мы должны тщательно решить, что имеет более высокий приоритет, а что может быть реализовано на более позднем этапе.

Нам нужен ваш отзыв

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

Изображение заголовка любезно предоставлено Карлисом Дамбрансом

39
Share: