Темы оформления мобильного приложения - История изменений

A.bursakov в 14:36, 10 ноября 2025

2025-11-10T14:36:41Z

← Предыдущая версия		Версия от 14:36, 10 ноября 2025
Строка 313:		Строка 313:
	''Локализированное значение'' > ''Значение из base'' > ''Локализированное значение из дефолтной темы'' > ''Значение из base дефолтной темы'' > Системной значение (Там где возможно. Например, для AppBar/NavigationBar)		''Локализированное значение'' > ''Значение из base'' > ''Локализированное значение из дефолтной темы'' > ''Значение из base дефолтной темы'' > Системной значение (Там где возможно. Например, для AppBar/NavigationBar)

	=Публикация темы оформления на сервере PayControl=		= Публикация темы оформления на сервере PayControl =

	Скины размещаются на Interaction-Rest сервер (PCIS External).		Скины размещаются на Interaction-Rest сервер (PCIS External).
	== Для приложения PayControl Classic (v3) ==
			== Для приложения PayControl Classic (v3.6-3.9) ==
	# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;		# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;
	# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):		# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):
Строка 322:		Строка 323:
	#*: /opt/wildfly/paycontrol_skins		#*: /opt/wildfly/paycontrol_skins
	#* Windows		#* Windows
	#*: C:\wildfly\paycontrol_skins		#*: C:\wildfly\paycontrol_skins

	После добавления скина на сервер, он должен стать доступным по адресу:		После добавления скина на сервер, он должен стать доступным по адресу:
	<pre>http{s}://{servername}/PayControl-interaction-rest/skin/{systemid}</pre>		<pre>http{s}://{servername}/PayControl-interaction-rest/skin/{systemid}</pre>
	== Для приложения PayControl (v5) ==
			== Для приложения PayControl (v5.0-5.1) ==

	# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;		# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;
	# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):		# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):
Строка 332:		Строка 335:
	#*: /opt/wildfly/pc_themes/v5		#*: /opt/wildfly/pc_themes/v5
	#* Windows		#* Windows
	#*: C:\wildfly\pc_themes\v5		#*: C:\wildfly\pc_themes\v5

	После добавления скина на сервер, он должен стать доступным по адресу:		После добавления скина на сервер, он должен стать доступным по адресу:
Строка 338:		Строка 341:
	<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v5/{systemid}</pre>		<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v5/{systemid}</pre>

	== Для приложения PayControl (v5.2 ~~и выше~~) ==		== Для приложения PayControl (v5.2-5.5) ==

	# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;		# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;
	# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):		# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):
Строка 344:		Строка 348:
	#*: /opt/wildfly/pc_themes/v52		#*: /opt/wildfly/pc_themes/v52
	#* Windows		#* Windows
	#*: C:\wildfly\pc_themes\v52		#*: C:\wildfly\pc_themes\v52

	После добавления скина на сервер, он должен стать доступным по адресу:		После добавления скина на сервер, он должен стать доступным по адресу:
	<pre>http{s}://{servername}/pc-client-api/themes/v52/{systemid}</pre>		<pre>http{s}://{servername}/pc-client-api/themes/v52/{systemid}</pre>
	<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v52/{systemid}</pre>		<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v52/{systemid}</pre>

			== Для приложения PayControl (v6) ==

			https://repo.paycontrol.org/server/doc/latest/pc-reference-guide/ru/#публикация-темы-оформления-на-сервере-pce

D.bizyukov: /* Для приложения PayControl (v5.2) */

2024-01-17T11:38:35Z

Для приложения PayControl (v5.2)

← Предыдущая версия		Версия от 11:38, 17 января 2024
Строка 338:		Строка 338:
	<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v5/{systemid}</pre>		<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v5/{systemid}</pre>

	== Для приложения PayControl (v5.2) ==		== Для приложения PayControl (v5.2 и выше) ==
	# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;		# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;
	# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):		# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):

D.bizyukov: /* Публикация темы оформления на сервере PayControl */

2022-11-25T07:29:28Z

Публикация темы оформления на сервере PayControl

← Предыдущая версия		Версия от 07:29, 25 ноября 2022
Строка 315:		Строка 315:
	=Публикация темы оформления на сервере PayControl=		=Публикация темы оформления на сервере PayControl=

	Скины размещаются на Interaction-Rest сервер (PCIS ~~Internal~~).		Скины размещаются на Interaction-Rest сервер (PCIS External).
	== Для приложения PayControl Classic (v3) ==		== Для приложения PayControl Classic (v3) ==
	# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;		# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;

D.bizyukov: /* Для приложения PayControl (v5) */

2021-02-26T10:15:24Z

Для приложения PayControl (v5)

← Предыдущая версия		Версия от 10:15, 26 февраля 2021
Строка 336:		Строка 336:
	После добавления скина на сервер, он должен стать доступным по адресу:		После добавления скина на сервер, он должен стать доступным по адресу:
	<pre>http{s}://{servername}/pc-client-api/themes/v5/{systemid}</pre>		<pre>http{s}://{servername}/pc-client-api/themes/v5/{systemid}</pre>
			<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v5/{systemid}</pre>

	== Для приложения PayControl (v5.2) ==		== Для приложения PayControl (v5.2) ==
	# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;		# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;

D.bizyukov: /* Для приложения PayControl (v5.2) */

2021-02-26T10:14:48Z

Для приложения PayControl (v5.2)

← Предыдущая версия		Версия от 10:14, 26 февраля 2021
Строка 346:		Строка 346:
	После добавления скина на сервер, он должен стать доступным по адресу:		После добавления скина на сервер, он должен стать доступным по адресу:
	<pre>http{s}://{servername}/pc-client-api/themes/v52/{systemid}</pre>		<pre>http{s}://{servername}/pc-client-api/themes/v52/{systemid}</pre>
			<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v52/{systemid}</pre>

A.bursakov: /* Описание состава файлов тем */

2021-02-15T12:53:29Z

Описание состава файлов тем

← Предыдущая версия		Версия от 12:53, 15 февраля 2021
Строка 1:		Строка 1:
	=Описание состава файлов тем=		=Описание состава файлов тем=
			==v5.0==
	===Структура файла темы===		===Структура файла темы===

A.bursakov: /* Публикация темы оформления на сервере PayControl */

2021-02-15T12:50:55Z

Публикация темы оформления на сервере PayControl

← Предыдущая версия		Версия от 12:50, 15 февраля 2021
Строка 335:		Строка 335:
	После добавления скина на сервер, он должен стать доступным по адресу:		После добавления скина на сервер, он должен стать доступным по адресу:
	<pre>http{s}://{servername}/pc-client-api/themes/v5/{systemid}</pre>		<pre>http{s}://{servername}/pc-client-api/themes/v5/{systemid}</pre>
			== Для приложения PayControl (v5.2) ==
			# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;
			# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):
			#* Linux
			#*: /opt/wildfly/pc_themes/v52
			#* Windows
			#*: C:\wildfly\pc_themes\v52

			После добавления скина на сервер, он должен стать доступным по адресу:
			<pre>http{s}://{servername}/pc-client-api/themes/v52/{systemid}</pre>

A.bursakov: /* Для приложения PayControl (v5) */

2020-04-14T08:32:25Z

Для приложения PayControl (v5)

← Предыдущая версия		Версия от 08:32, 14 апреля 2020
Строка 334:		Строка 334:

	После добавления скина на сервер, он должен стать доступным по адресу:		После добавления скина на сервер, он должен стать доступным по адресу:
	<pre>http{s}://{servername}/~~PayControl~~-~~interaction~~-~~rest~~/themes/v5/{systemid}</pre>		<pre>http{s}://{servername}/pc-client-api/themes/v5/{systemid}</pre>

A.bursakov: /* Публикация темы оформления на сервере PayControl */

2019-12-27T16:43:37Z

Публикация темы оформления на сервере PayControl

← Предыдущая версия		Версия от 16:43, 27 декабря 2019
Строка 313:		Строка 313:

	=Публикация темы оформления на сервере PayControl=		=Публикация темы оформления на сервере PayControl=

	Скины размещаются на Interaction-Rest сервер (PCIS Internal).		Скины размещаются на Interaction-Rest сервер (PCIS Internal).
			== Для приложения PayControl Classic (v3) ==
	# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;		# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;
	# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):		# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):
Строка 319:		Строка 321:
	#*: /opt/wildfly/paycontrol_skins		#*: /opt/wildfly/paycontrol_skins
	#* Windows		#* Windows
	#*: ~~/opt/~~wildfly/paycontrol_skins		#*: C:\wildfly\paycontrol_skins

	После добавления скина на сервер, он должен стать доступным по адресу:		После добавления скина на сервер, он должен стать доступным по адресу:
	<pre>http{s}://{servername}/PayControl-interaction-rest/skin/{systemid}</pre>		<pre>http{s}://{servername}/PayControl-interaction-rest/skin/{systemid}</pre>
			== Для приложения PayControl (v5) ==
			# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;
			# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):
			#* Linux
			#*: /opt/wildfly/pc_themes/v5
			#* Windows
			#*: C:\wildfly\pc_themes\v5

			После добавления скина на сервер, он должен стать доступным по адресу:
			<pre>http{s}://{servername}/PayControl-interaction-rest/themes/v5/{systemid}</pre>

A.bursakov: Новая страница: «=Описание состава файлов тем= ===Структура файла темы===

 . ├── locales.json // optional ├── base │…»

2019-09-18T09:01:47Z

Новая страница: «=Описание состава файлов тем= ===Структура файла темы=== <pre> . ├── locales.json // optional ├── base │…»

Новая страница

=Описание состава файлов тем=
===Структура файла темы===

<pre>
.
├── locales.json // optional
├── base
│ ├── fonts
│ │ ├── fontName1.ttf
│ │ └── fontName2.ttf
│ ├── text
│ │ └── about.html
│ ├── images
│ │ ├── imageName1.png
│ │ ├── imageName2.png
│ │ └── imageName3.png
│ └── theme.json
├── ru-RU
│ ├── fonts
│ │ └── ...
│ ├── text
│ │ └── ...
│ ├── images
│ │ └── ...
│ └── theme.json
├── en-US
│ ├── fonts
│ │ └── ...
│ ├── text
│ │ └── ...
│ ├── images
│ │ └── ...
│ └── theme.json
└── ...
├── fonts
│ └── ...
├── text
│ └── ...
├── images
│ └── ...
└── theme.json
</pre>

Каждая тема состоит из папок с локализованными версиями тем и опционального файла ''locales.json'', который описывает какую версию темы использовать для определенных региональных параметров.

===Локализация===

Каждая тема может включать базовую локализацию '''base''', а так же локализации для других языков и регионов (ru-RU, en-US, ...). Приложение должно подтягивать информацию из локализированной версии темы. Если информация в локализированной версии отсутствует — она подтягивается из ''base''. Если отсутствует base, то из локализированной версии дефолтной темы или Base-версии дефолтной темы.

Файл ''locales.json'' опционален. Он необходим, если нужно сопоставить разные региональные идентификаторы с определённым идентификатором. Например, если для Украины, Беларуси нужно использовать русскую версию темы, то файл будет выглядеть так:
<syntaxhighlight lang="json">
{
"ru-UA": "ru-RU",
"be-BY": "ru-RU"
}
</syntaxhighlight>

===Структура локализированной версии===
<pre>
base // ru-RU, en-US, ...
│ ├── fonts
│ │ ├── fontName1.ttf
│ │ └── fontName2.ttf
│ ├── text
│ │ └── about.html
│ ├── images
│ │ ├── imageName1.png
│ │ ├── imageName2.png
│ │ └── imageName3.png
│ └── theme.json
</pre>

Каждая локализация содержит файл ''theme.json'', который описывает тему, и папки с ресурсами (''images'', ''fonts'', ''text'').

===Структура theme.json===

Набор установленных значений дан в качестве примера.
<syntaxhighlight lang="json">
{
"images": {
"menuImage": "logo.png",
...
},
"fonts": {
"default": "fontName.ttf"
},
"colors": {
"text": "#FFFFFF",
"error": "#FF0000",
"success": "#0000FF",
"background": "#110011",
"menuBackground": "#00ff00",
...
},
"sizes": {
"large": 20.0,
"default": 16.0,
"small": 14.0
...
},
"elements": {
"heading": {
"fontSize": "large",
"fontWeight": "medium",
"textColor": "text"
},
"caption": {
"fontSize": "default",
"fontWeight": "medium",
"textColor": "text"
},
"body": {
"fontSize": "default",
"fontWeight": "regular",
"textColor": "text"
},
"footnote": {
"fontSize": "small",
"fontWeight": "regular",
"textColor": "text"
},
"error": {
"fontSize": "small",
"fontWeight": "regular",
"textColor": "text",
"iconColor": "iconColor"
},
"menu": {
"fontSize": "default",
"fontWeight": "regular",
"textColor": "menuText",
"iconColor": "menuIcons"
},
"primaryButton": {
"fontSize": "default",
"fontWeight": "medium",
"textColor": "background",
"backgroundNormalColor": "button"
},
"secondaryButton": {
"fontSize": "default",
"fontWeight": "medium",
"textColor": "text",
"iconColor": "text",
"backgroundNormalColor": "secondaryButton"
},
"confirmationButton": {
"fontSize": "default",
"fontWeight": "medium",
"textColor": "text",
"backgroundNormalColor": "button"
},
"declineButton": {
"fontSize": "default",
"fontWeight": "medium",
"textColor": "text",
"backgroundNormalColor": "button"
},
"bar": {
"textColor": "barText",
"iconColor": "text",
"backgroundNormalColor": "background"
},
"timer": {
"fontSize": "timer",
"fontWeight": "medium",
"textColor": "text"
},
"confirmation": {
"fontSize": "confirmation",
"fontWeight": "regular",
"textColor": "text"
}
},
"feedback": "feedback@paycontrol.ru"
}
</syntaxhighlight>

* ''images'': Список картинок. Каждому ключу соответствует определённая картинка из папки ''images''. Есть системные ключи (список ниже), которые можно перезаписывать (тогда картинка в приложении соответствующая ключу поменяется), но можно добавлять и свои. Ключи картинок можно использовать в описании элементов.
* ''fonts'': Список шрифтов. Каждому ключу соответствует определённый шрифт в папке ''fonts''. В описании элементов указывается непосредственно ключ шрифта, а не конкретное значение. В дефолтной теме приложения словарь пустой — используется системный шрифт. Но если перезаписать ключ ''default'' на кастомный шрифт, то шрифт приложения должен поменяться на указанный.
* ''colors'': Список цветов. Каждому ключу соответствует определённый цвет. В описании элементов указывается непосредственно ключ цвета, а не конкретное значение. Есть системные ключи (например ''background'', весь список ниже), если их перезаписать, то поменяется цвет у элементов приложения, соответствующих ключу. Можно указывать свои ключи и значения, а потом использовать ключ в описании элементов.
* ''sizes'': Список размеров текста. Каждому ключу соответствует определённые размер. В описании элементов указывается непосредственно ключ размера, а не конкретное значение. Есть системные ключи (например ''default'', весь список ниже), если их перезаписать, то поменяется размер текста у элементов, которые используют данные ключ. Можно указывать свои ключи и значения, а потом использовать их в описании элементов.
* ''elements'': Описание стилей всех элементов приложения. Список элементов ограничен, добавлять можем только мы. Создатель темы может лишь перезаписать нужные ему значения. Каждый элемент содержит ограниченный набор полей.

===Системные значения images===

Названия картинок даны в качестве примера.
<syntaxhighlight lang="json">
"images": {
"main": "key_large.png", // Основная картинка приложения (там где сейчас ключ на главном экране)
"menu": "logo_small.png", // Логотип в боковом меню
"keys": "key_small.png", // Логотип в списке ключей
"bar": "logo_small.png", // Логотип в AppBar'е на Android или NavigationBar'е на iOS
"launch": "logo.png" // Логотип на сплешскрине
}
</syntaxhighlight>

===Системные значения fonts===

Название шрифта дано в качестве примера. В дефолтной теме приложения этого ключа нет, т.к. используется системный шрифт. Если добавить данные ключ-значение — то шрифт приложения поменяется на указанный.
<syntaxhighlight lang="json">
"fonts": {
"default": "font.ttf" // Глобальный шрифт приложения
}
</syntaxhighlight>

===Системные значения sizes===

Значения, которые используются по-умолчанию. Если любое значение изменить — поменяется размер во всех элементах, которые его используют.
<syntaxhighlight lang="json">
"sizes": {
"large": 20.0,
"default": 16.0,
"small": 14.0,
"timer": 24.0,
"confirmation": 54.0
}
</syntaxhighlight>

===Системные значения colors===

Значения указаны в качестве примера. Цвета указываются в формате '''hex''', могут использоваться как RGB, так и RGBA.
<syntaxhighlight lang="json">
"colors": {
"text": "#FFFFFF", // Цвет основного текста
"error": "#FF0000", // Цвет для элементов указывающих на ошибку
"success": "#00FF00", // Цвет для элементов указывающих на успешное действие
"background": "#0000FF", // Цвет фона приложения
"menuBackground": "#FFFFFF", // Цвет фона в боковом меню
"menuHeader": "#0000FF", // Цвет шапки бокового меню
"menuIcons": "#AAAAAA", // Цвет иконок в боковом меню,
"menuText": "#000000", // Цвет разделов в боковом меню
"bar": "#FFFFFF", // Цвет фона AppBar'а/NavigationBar'а
"timer": "#FFFFFF", // Цвет таймера обратного отсчёта
"statusbar": "#0000FF", // Цвет фона статусбара (для Android)
"button": "#FFFFFF", // Цвет фона кнопки в нормальном состоянии
"secondaryButton":"#0000FF", // Цвет вторичных кнопок
"badge": "#F44336" // Цвет фона бейджа
}
</syntaxhighlight>

===Системные значения sizes===
<syntaxhighlight lang="json">
"sizes": {
"large": 20.0, // В основном используется для заголовков
"default": 16.0, // Основной размер текста, кнопок, разделов меню
"small": 14.0, // Для подписей к текстовым полям, ошибкам
"timer": 24.0, // Размер таймера обратного отсчёта
"confirmation": 54.0 // Максимальный размер кода подтверждения
},
</syntaxhighlight>

===Элементы приложения elements===

Значения указаны в качестве примера. Цвета указываются в формате '''hex''', могут использоваться как RGB, так и RGBA.
<syntaxhighlight lang="json">
"elements": {
"heading": { ... }, // Крупные заголовки
"caption": { ... }, // Мелкие заголовки (заголовки текстовых полей)
"body": { ... }, // Основной текст
"footnote": { ... }, // Сноски и примечания
"error": { ... }, // Текст ошибок
"menu": { ... }, // Разделы бокового меню
"primaryButton": { ... }, // Стиль основных кнопок (например, «Далее»)
"secondaryButton": { ... }, // Стиль дополнительных кнопок (например, выбор типа пароля)
"confirmationButton": { ... }, // Кнопка подтверждения
"declineButton": { ... }, // Кнопка отклонения
"bar": { ... }, // Стиль AppBar'a или NavigationBar'a
"timer": { ... }, // Стиль обратного отсчёта
"confirmation": { ... }, // Стиль кода подтверждения
"badge": { ... } // Стиль контента бейджа
}
</syntaxhighlight>

===Описание стиля элемента===

Эти ключи опциональны и есть у каждого элемента. Значения указаны в качестве примера.
<syntaxhighlight lang="json">
"elementName":
{
"font": "fontKey", // Ключ шрифта из списка fonts
"fontSize": "sizeKey", // Ключ размера из списка sizes
"fontWeight": "regular", // Начертание шрифта
"textColor": "text", // Ключ цвета из списка colors
"iconColor": "iconColor", // Цвет иконки, если она присутствует у элемента
"icon": "iconKey", // Ключ изображения из списка images
"backgroundNormalColor": "button", // Цвет фона в нормальном состоянии
"backgroundPressedColor": "button", // Цвет фона в нажатом состоянии. Если пусто — используется системное поведение. Например, в iOS — полупрозрачный цвет нормального состояния
"backgroundDisabledColor": "button", // Цвет фона в неактивном состоянии. Если пусто — используется системное поведение. Например, в iOS — почти прозрачный цвет нормального состояния
}
</syntaxhighlight>

===Обратная связь feedback===

В качестве значения указывается email. У каждой локализации может быть свой адрес.

<syntaxhighlight lang="json">
{
"feedback": "feedback@paycontrol.ru"
}
</syntaxhighlight>

===Файлы с текстом из директории text===

Папка ''text'' содержит файлы с текстом для различных экранов. Сейчас есть только ''about.html'', он подставляется на экран about. Но в дальнейшем могут появится другие.

===Правила получения значений===

Т.к. все значения опциональны, то значения берутся по цепочке:

''Локализированное значение'' > ''Значение из base'' > ''Локализированное значение из дефолтной темы'' > ''Значение из base дефолтной темы'' > Системной значение (Там где возможно. Например, для AppBar/NavigationBar)

=Публикация темы оформления на сервере PayControl=
Скины размещаются на Interaction-Rest сервер (PCIS Internal).
# Убедиться, что название файла скина имеет вид {systemid}.zip, где {systemid} - идентификатор системы, для которой размещается скин;
# Разместить не распаковывая файл скина на сервере PCIS External в папке (создав её при необходимости):
#* Linux
#*: /opt/wildfly/paycontrol_skins
#* Windows
#*: /opt/wildfly/paycontrol_skins

После добавления скина на сервер, он должен стать доступным по адресу:
<pre>http{s}://{servername}/PayControl-interaction-rest/skin/{systemid}</pre>