Переход на новый уровень обучения титановому сплаву

Стилизация в Titanium выполняется путем применения свойств к компоненту пользовательского интерфейса. И в классическом, и в Alloy это делается по свойствам.

myUIElement.backgroundColor = "#ffffff";

В Alloy у вас есть возможность стилизовать с помощью id и classes, они работают так же, как и в css. id уникальны, classes можно применять к нескольким элементам пользовательского интерфейса. Это делает стиль уже очень гибким, и уже одно это является причиной перехода на Alloy.

<Label class="myLabel" />

А потом укладка

'.myLabel': {
  font: {
    fontSize: 14
  },
  color: 'red'
}

Динамический стиль

Однако настоящая сила стиля Alloy на один шаг дальше этого. Это то, что я знаю давно, но как-то редко использую: динамические стили.

Есть одна зависимость, чтобы все работало правильно. Вам нужно добавить свойство autoStyle к каждому элементу пользовательского интерфейса, над которым вы хотите, чтобы это работало.

Если вы хотите, чтобы он работал для всего контроллера, добавьте его в тег Alloy

<Alloy autoStyle="true">

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

<Label autoStyle="true" />

Хотите, чтобы это было для всего приложения, добавьте его в config.json.

"global": {
  "autoStyle": true
}

Использование методов классов Alloy

Внутри Alloy есть несколько методов, которые вы можете использовать для добавления / удаления классов в определенные элементы пользовательского интерфейса.

Итак, допустим, у вас есть метка, которая может иметь включенное или отключенное состояние. Что часто делается, так это применение всех свойств вручную, когда я меняю состояние «включено» по умолчанию на отключенное состояние.

$.myLabel.color = "#666666";
$.myLabel.font = { fontStyle: 'italic', fontWeight: 'normal' };

Однако насколько было бы проще, если бы вы могли просто определить эти свойства в tss

'.enabled': {
  color: '#000000',
  font: {
    fontStyle: 'normal',
    fontWeight: 'bold'
  }
}
'.disabled': {
  color: '#666666',
  font: {
    fontStyle: 'italic',
    fontWeight: 'normal'
  }
}

Теперь единственное, что вам нужно сделать с вашей меткой, - это удалить класс enabled и добавить класс disabled.

$.removeClass($.myLabel, 'enabled');
$.addClass($.myLabel, 'disabled');

Если у метки есть только включенный или отключенный класс и нет других, вы также можете сделать следующее:

$.resetClass($.myLabel, 'disabled');

Это удаляет все применяемые в настоящее время классы метки, а затем применяет все классы, которые вы указали во втором атрибуте.

Вы также можете применить несколько классов таким образом, вам просто нужно разделить их пробелами, как вы это делаете с применением нескольких классов в ваших файлах xml.

$.resetClass($.myLabel, 'disabled largeLabel');

Динамический стиль в зависимости от условий

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

Все сводится к простому. По сути, вы можете указать 2 глобальных объекта (или один, но я предпочитаю оба для удобства чтения) и дважды определить один и тот же класс в tss, но с разными условиями для каждого.

".DynamicLabel[if=Alloy.Globals.isPortrait]": {}
".DynamicLabel[if=Alloy.Globals.isLandscape]": {}

Как только вы заметите изменение ориентации (или когда вы захотите повторно отрендерить его), вам просто нужно повторно применить класс. Как описано выше, вы можете сделать это с помощью добавления / удаления классов или просто сбросить. Все зависит от того, есть ли у вас какие-либо другие классы, применяемые к свойствам, которые вы хотите сохранить.

$.resetClass($.DynamicLabel, 'DynamicLabel');

ResetClass удалит все классы, а затем применит те, которые вы укажете, даже если этот класс уже был применен ранее. Любые условия будут проверены за вас. Таким образом, если значение условия изменилось, будет применяться другое правило.

Заключение

Как видите, с помощью Alloy вы можете привнести в свое приложение всевозможные классные правила стилизации. Посмотрите пример приложения ориентации, чтобы узнать, как мы узнаем, что ориентация изменилась в приложении.

Также просмотрите следующие страницы документации для получения дополнительной информации.

Переход на новый уровень обучения титановому сплаву