Упрощенная верстка в Mobile SMARTS

Для простого форматирования текста можно использовать теги упрощённой верстки. Основными тегами упрощенной верстки являются:

• <r> — обычный шрифт;
• <b> — жирный шрифт;
• <u> — подчеркнутый шрифт;
• <i> — наклонный шрифт;
• <h1> — заголовок первого уровня;
• <h2> — заголовок второго уровня;
• <h3> — заголовок третьего уровня.

Для вышеописанных тегов необходимо использовать закрывающий тег, например:

<r>Обычный текст</r> <b>Жирный текст</b> <i>Наклонный текст</i> <u>Подчеркнутый текст</u> <h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3>

Также, существуют теги упрощенной верстки, для которых закрывающий тег не нужен:

• <br/> — перенос строки;
• <hr/> — горизонтальная линия

Пример простого синтаксиса:

Горизонтальная<hr/>линия — \<hr/> Перенос<br/>строки — \<br/>

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

Пример простого синтаксиса:

Текст с <br/> переносом И снова на другой строке

В случае, если теги упрощенной верстки используются внутри тега <div>, данная верстка будет являться и обрабатываться по правилам блочной верстки.

Для формирования правильного отображения теги можно комбинировать между собой. Главное, следить за тем, где находится закрывающий тег. В следующем примере теги используются совместно с атрибутами( подробнее в статье «Использование атрибутов тегов»).

Пример простого синтаксиса:

<b><u><i>Наклонный жирный текст с подчеркиванием</i></u></b> <b color="green» align="right">Жирный зеленый текст справа</b> <green size="10">Зелено</green>-<red size="14">красный</red> <red>текст</red> <r color="#0000FF» align="center">Синий <i>наклонный</i> текст в центре</r> <red size="14">Большой красный текст</red>

Вышеуказанные теги можно применять при отображении данных из переменной/свойств объектов.

Пример простого синтаксиса:

<b align="center">Способ 1</b> Сегодня <red>{CurrentDate.Day}</red> число. Сегодня \<red>\{CurrentDate.Day\}\</red> число. <b align="center">Способ 2</b> Сегодня {CurrentDate.Day:<red>(0)</red>} число. Сегодня \{CurrentDate.Day:\<red>(0)\</red>\} число.

В отличие от вышеуказанных тегов, которые используются для формирования отображения текста в упрощенной верстке, также могут использоваться следующие теги: <button> и <img>.

Тег <button> используется для создания кнопки. Обязательно должен иметь завершающий тег. С помощью данного тега можно создать дополнительные кнопки управления в различных частях окон.

Примеры использования данного тега:

<button direction="">Дальше</button> <button direction=»» enabled="false">Дальше</button> <button direction=»» visible="false">Дальше</button>

С помощью атрибута direction указывается, на какое действие алгоритма будет совершен переход при нажатии. Атрибуты enabled и visible управляют доступностью нажатия/отображения элемента.

Тег <img> используется для отображения изображения. Обязательно должен иметь завершающий тег. С помощью данного тега можно отображать изображения из файла ресурсов, по ссылке, через переменную из таблицы/по ссылке.

Пример простого синтаксиса:

{logo = "https://www.cleverence.ru/local/templates/cleverence/img/logo.png"} <img>https://www.cleverence.ru/local/templates/cleverence/img/logo.png</img> <img>logo.png</img> <img>testres.logo</img> <img>{logo}</img>

Само изображение для отображения может быть задано несколькими путями: