Таблицы стилей

Каскадные таблицы стилей (CSS), отвечающие за внешний вид экранов приложения

Расположение: device/<application_name>/Style/Default/

Для того, что бы задать таблицу стилей по умолчанию, необходимо объявить ее в файле конфигурации:

<?xml version="1.0" encoding="utf-8" ?>
<c:Configuration xmlns:c="BitMobile.Configuration" xmlns:s="BitMobile.ValueStack">
	...
	<c:Style>
		<c:DefaultStyles>			
			<c:DefaultStyle File="default.css" /><!-- Стили по умолчанию -->			
			<s:If Test="$isTablet">
				<c:DefaultStyle File="tablet.css" /><!-- Стили, специфичные для планетов -->
			</s:If>
			<s:Else>
				<c:DefaultStyle File="phone.css" /><!-- Стили, специфичные для телефонов-->
			</s:Else>			
			<s:If Test="$common.OS == 'Android'">
				<c:DefaultStyle File="android.css" /><!-- Стили, специфичные для Android устройств-->
			</s:If>			
			<s:If Test="$common.OS == 'IOS'">
				<c:DefaultStyle File="ios.css" /><!-- Стили, специфичные для IOS устройств-->
			</s:If>
			<c:DefaultStyle File="common.css" /><!-- Общие стили -->
		</c:DefaultStyles>
	</c:Style>
	...
</c:Configuration>

Кроме того, таблицу стилей можно задать для каждого конкретного экрана через атрибут StyleSheet в компоненте <c:Screen/>:

<c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack" StyleSheet="Main.css">
	...
</c:Screen>

В случае пересечения стилей, приоритет остается за последним описанным или заданным для конкретного экрана стилем.

Зададим внешний вид по умолчанию для кнопки:

default.css

Button{
    height: 4mm;
    width: 100%;
    font: 80% arial;
}

Укажем, что в Android устройствах кнопки должны быть высотой 5mm и поменяем их шрифт на специфичный для платформы:

android.css

Button{
    height: 5mm;
    font-family: roboto;
}

Так как common.css объявлена позже остальных таблиц стилей, мы можем описывать в ней специфичные классы, стили которых будут переопределять заданные по умолчанию:

common.css

.menu-button{
    font-size: 70%;
}

Но, таблица стилей, заданная для экрана имеет максимальный приоритет:

Main.css

Button{
    font-size: 50%;
}
 
.menu-button{
    font: 80% arial;
}

Быстрые ссылки

Дерево страниц

Расположение: device/<application_name>/Style/Default/