1. Введение
   1. Виды тем
   2. Акцентный цвет
   3. Системная тема и тема приложения
2. Системная тема
   1. Получение параметров системной темы
   2. Механизмы отслеживания системной темы
   3. Как управлять системной темой в приложении
   4. Запрет автоматической смены системной темы в приложении
   5. Темная тема
3. Тема FGX Native
   1. Цветовая система Material Design
      1. Основной цвет
      2. Вторичный цвет
      3. Цвета поверхности, фона и ошибок
      4. Цвета "На"
      5. Альтернативные цвета
      6. Прочее
   2. Генерация темы в FGX Native
   3. Применение темы
      1. Приложение
      2. Форма
      3. Принцип смены темы
   4. Использование ресурсов темы
      1. Типы значений
      2. Приоритет
      3. Применение ресурсов темы
      4. Фиксация темы
   5. Расширение темы
4. Пример разработки приложения с поддержкой темной и светлой тем и разных цветовых оттенков.
   1. Создание тем в дизайнере ресурсов
   2. Настройки тем в проекте
   3. Программная смена тем и акцентированного цвета
5. Советы

1. Введение

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

1.1 Виды тем

В современном мире обычно различают два вида тем:

1. Светлая тема - преимущественно использует светлые цвета в UI.
2. Темная тема - преимущественно использует темные цвета в UI.

Именно эти два вида распространены в Android и iOS. Далее, в каждом виде могут быть уже темы разных цветовых палитр, с разными акцентными цветами и т.д.

1.2 Акцентный цвет

Акцентный цвет - это дополнительный цвет, который контрастирует или дополняет основные цвета, используемые в приложения. По умолчанию, в iOS такой цвет голубой, а в Android - изумрудный.

Вот некоторые задачи, для которых используют акцентные цвета:

• Привлечение внимания. Яркий акцентный цвет привлекает взгляд пользователей и помогает им ориентироваться на странице.
• Организация информации. Использование акцентного цвета для заголовков и подзаголовков помогает организовать информацию на странице и делает её более понятной для пользователей.
• Выделение важных элементов. Акцентный цвет помогает выделить важные элементы, такие как акционные предложения или срочные сообщения, и привлечь внимание пользователей к ним.

При выборе акцентного цвета часто используют правило 60-30-10: 60% — основной цвет, 30% — акцентный, 10% — второй акцентный цвет, если он имеется.

1.3 Системная тема и тема приложения

В дальнейшем, когда мы будем говорить про тему, то мы будем рассматривать два типа тем:

1. Системная тема (Обязательная). Это та, которая поставляется вместе с операционной системой и все приложения используют ее по умолчанию.
2. Тема приложения (Необязательная). Это та, которая поставляется вместе с приложением и предназначена для переопределения системной темы.

2. Системная тема

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

Разработчик может оставить внешнее отображение компонентов, как есть, доверив их системе. Либо же, может переопределить их на уровне своего приложения и настроить внешний вид уже так, как он хочет на уровне темы приложения. 

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

2.1 Получение параметров системной темы

В FGX Native предоставляет кроссплатформенный механизм для получения некоторых параметров системной темы и отслеживания их изменения. В любой момент времени вы можете запросить параметры системной темы через FGX.SystemInfo.TfgSystemInfo.Appearance:

  /// <summary>Данные о отображении операционной системы.</summary>
  TfgSystemAppearance = class
  private
    function GetSystemColor(const Index: TfgSystemColorType): TAlphaColor;
    function GetThemeKind: TfgSystemThemeKind;
  public
    /// <summary>
    ///   Акцентный цвет операционной системы. Обычно используется для подчеркивания элементов компонентов.
    /// </summary>
    property AccentColor: TAlphaColor index TfgSystemColorType.Accent read GetSystemColor;
    /// <summary>Вид системной темы.</summary>
    property ThemeKind: TfgSystemThemeKind read GetThemeKind;
  end;

• ThemeKind - вид системной темы (Светлая/Темная). 
• AccentColor - акцентный цвет в текущей теме.

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

2.2 Механизмы отслеживания изменений системной темы.

При изменении любых параметров системной темы, которые влияют на приложение, система оповещает приложение о таких изменениях. Эти изменения можно узнать следующими способами:

Первый способ: На уровне формы есть событие TfgForm.OnSystemAppearanceChanged, которое вызывается каждый раз, когда меняется один из параметров отображения системной темы.

TfgSystemAppearanceChangedEvent = procedure(Sender: TObject; const AAppearance: TfgSystemAppearance) of object;

В параметре AAppearance (FGX.Platform.TfgSystemAppearance) передается объект, позволяющий извлечь базовую информацию о теме.

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

Второй способ: Если вы хотите отслеживать изменения в системной теме вне формы, то вы можете подписаться на широковещательную рассылку на сообщение FGX.Platform.TfgSystemAppearanceChangedMessage

/// <summary>Уведомление о смене системной темы.</summary>
TfgSystemAppearanceChangedMessage = class(TObjectMessage<TfgSystemAppearance>);

Полученный объект TfgSystemAppearance удалять не нужно.

2.3 Управление системной темой в приложении.

Как мы упомянули выше, системная тема определяет внешний вид вашего приложения по умолчанию. Однако, пользователи вашего приложения могут иметь свои предпочтения в использовании светлой или темной темы в рамках вашего приложения. И поэтому FGX Native предлагает механизм для указания этого предпочтения.

Управление применением системной темой к приложению осуществляется при помощи настроек Application.Themes. Вид системной темы указывается в свойстве: Application.Themes.Kind.

  TfgThemeKind = (SystemDefault, Light, Dark);

Допускает три варианта значений:

1. Light - приложение использует светлую тему.
2. Dark - приложение использует темную тему.
3. SystemDefault - приложение использует такую же тему, как и в системе. При смене темы в системе, автоматически изменится тема и в приложении. Только, если приложение поддерживает темную тему (смотри следующий раздел).

2.4 Запрет автоматической смены темы в приложении

Если ваше приложение не поддерживает темную тему. Например, если вы используете свой дизайн или вы не предусмотрели отображение приложения в темной теме, то вы можете отключить темную тему для приложения, чтобы приложение не пыталось её использовать. Это выполняется в настройках проекта Project -> FGX Options -> Приложение -> Темы. Необходимо снять галку "Включить темную тему".

2.5 Темная тема

Не смотря на то, что темная системная тема появилась относительно давно, ее полноценная поддержка есть не на всех версиях.

• iOS 13.0+. До 13 версии поддержки нет.
• Android 10+ (Level 29+). До 10 версии есть только адаптация.

3. Тема FGX Native

Тема FGX Native представляет собой ни что иное, как заранее определенный набор цветовых ресурсов, которые помещены в одну папку и имеют относительно этой папки "известные" для FGX Native названия. В качестве цветовой системы использует цветовая системы Material Design 2.0 по умолчанию. Не смотря на это, вы можете использовать свои цветовые системы, которые вам могут быть удобнее. Выбор в большей степени зависит от вашего дизайна приложения.

Прежде, чем перейти непосредственно к использованию темы в FGX Native, следует разобраться с принципом построения и использования системы Material Design.  

3.1 Цветовая система Material Design

Примечание: Данный текст частично взят и переработан с учетом специфики FGX Native с официального сайта Material Design.

Система цветов помогает вам применять цвета в UI вашего приложения осмысленным образом. В системе Material Design 2.0 вы выбираете основной (Primary) и дополнительный (Secondary) цвета для представления вашего бренда. Затем на основании этих двух цветов строятся все остальные цвета, включая темные и светлые варианты каждого цвета.

Базовая цветовая тема состоит из следующих цветов:

1. Первичный/Основной (Primary) и вторичный (Secondary) цвета.
2. Варианты основных и дополнительных цветов (Primary Varian, Secondary Variant). Эти цвета в FGX Native имеют следующие названия:  
   1. "Primary\Dark Primary", "Secondary\Dark Primary" - Темный вариант основного и вторичного цветов
   2. "Primary\Light Primary", "Secondary\Light Primary" - Светлый вариант основного и вторичного цветов
3. Дополнительные цвета пользовательского интерфейса, такие как цвета фона, поверхностей, ошибок, типографики и иконок.

3.1.1. Основной цвет

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

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

3.1.2 Вторичный цвет

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

Если у вас нет вторичного цвета, основной цвет также можно использовать для акцентирования элементов.

Вторичные цвета лучше всего подходят для:

• Плавающие кнопки действий
• Элементы управления выбором, такие как ползунки и переключатели
• Выделение выделенного текста
• Индикаторы прогресса
• Ссылки и заголовки

Как и основной цвет, ваш вторичный цвет может иметь темные и светлые варианты. Цветовая тема может использовать ваш основной цвет, вторичный цвет и темные и светлые варианты каждого цвета.

3.1.3 Цвета поверхности / фона и ошибок

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

• Цвета поверхности (Surface) влияют на поверхности компонентов, таких как карточки TfgForm / TfgCardPanel / TfgBottomSheetLayout / TfgDrawerLayout, списки TfgCollectionView/TfgListMenu и меню.
• Цвет фона (Background) отображается за прокручиваемым содержимым. Базовый фон и цвет поверхности — #FFFFFF.
• Цвет ошибки (Error) указывает на ошибки в компонентах, такие как недопустимый текст в текстовом поле. Базовый цвет ошибки — #B00020.

Если попробовать упростить эту модель и перенести ее на компоненты FGX Native, то можно выделить основные правила использования:

1. Background обычно используется, как самый задний цвет контейнера верхнего уровня. Например, TfgForm.
2. Surface используется, как цвет заднего фона для контейнеров, которые лежат на контейнере с фоном Background. Чаще всего это TfgCardPanel, TfgBottomSheetLayout

3.1.4 Цвета На/On

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

Эта категория цветов называется «На/On» цветами, ссылаясь на тот факт, что они окрашивают элементы, которые появляются «на» поверх поверхностей и используют следующие цвета: основной цвет, вторичный цвет, цвет поверхности, фоновый цвет или цвет ошибки. Когда цвет появляется «на» поверх основного цвета, он называется «над основным цветом». Они маркируются с использованием исходной цветовой категории (например, основной цвет) с префиксом «On».

«On» цвета применяются в основном к тексту, иконографии и штрихам. Иногда они применяются к поверхностям.

Такие цвета есть для всех цветов: основного, вторичного, поверхности, фона и ошибок цветов. В FGX Native такой набор состоит из 6 цветов:

1. Text - основной цвет текст. 
2. Secondary Text - цвет дополнительного текста. Используется для выделения второстепенной текстовой информации, как примечание, подзаголовок и тд.
3. Icon - цветовой оттенок иконок, отображаемых на текущем цвете.
4. Dividers - цвет полосок разделителей. Например, полоса-разделитель элементов в списке TfgCollectionView.
5. Hint Text - цвет текста для подсказки ввода текста в поля ввода (TextPrompt)
6. Disabled Text - текст на компонентах, не доступных для взаимодействия.

Пример ниже иллюстрирует ручное применение цветов темы для элементов кнопки. Если кнопка использует основной цвет "Primary", как фон. То, соответственно, иконка и текста должны использовать цвета из группы цветов "On Primary"

3.1.5 Альтернативные цвета

Используемая цветовая система является рекомендованной, но не обязательной. Вы всегда можете, как добавить в нее дополнительные основные "Primary" цвета, чтобы расширить разнообразие цветов, так и использовать любую другую, например из Material Design 3.0. 

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

3.1.6 Прочее

Об остальных вариантах использования цветов и правил их применения следует обратиться к официальной документации.

• Официальная документация

3.2 Генерация темы FGX Native

Для того, чтобы добавить тему буквально в один клик, мы предлагаем генератор темы в дизайнере ресурсов (Project -> FGX Assets Manager). Он доступен либо в контекстном меню дерева ресурсов "Сгенерировать тему" , либо через соответствующую иконку на панели инструментов.

В самом верху окна вам необходимо выбрать тип темы. Здесь все просто: "светлая" или "темная".

Затем выбираете два базовых цвета: Основной Primary/P и Вторичный Secondary/S цвета. Левой кнопкой мыши выбирается основной цвет P, а правой - вторичный S.

При выборе основных цветов, генератор автоматически определяет оттенок группы цветов "On" используемой на каждом из двух цветов. При необходимости вы можете откорректировать группы при помощи радиокнопок внизу. Если основной цвет яркий, то для соблюдения контраста, все элемента отображаемые На ярком цвете, должны быть темными и наоборот. После нажатия на кнопку "Сгенерировать", мы получаем наборы цветом согласно системе цветов Material Design.

Если вы планируете использовать несколько тем в вашем приложении, мы рекомендуем группировать темы по типу (Светлая / Темная) и цветовым оттенкам. Например, так:

Обратите внимание, что если вы хотите использовать темы вашем приложении, то вам как минимум надо сгенерировать светлую тем, а максимум, добавить еще и темную.

3.3 Применение темы

В FGX Native тема может применяться на двух уровнях:

1. Приложение
2. Форма

3.3.1 Приложение

Тема, применяемая на уровне приложения автоматически применяется ко всем формам и ко всем компонентам. Кроме случаев, о которых будет сказано далее. 

Тема может быть задана двумя способами.

1. На уровне настроек проекта (DesignTime) с 1.19.0.0: Этот основной способ и он позволяет применить тему, как в дизайнере, так и автоматически на старте приложения на устройстве.

Чтобы задать тему на уровне приложения, нужно зайти в настройки проекта Project -> FGX Options... -> Приложение -> Темы

В поле (1) мы можем указать способ выбора темы при старте приложения. Доступны три варианта:

1. Согласно системной теме. Если на устройстве используется светлая тема, то будет использоваться светлая тема в приложении, если же в системе используется темная, то в приложении автоматически будет применена темная тема
2. Светлая - Независимо от системной темы, внутри приложения будет использовать светлая тема. 
3. Темная - Независимо от системной темы, внутри приложения будет использовать темная тема. 

В поле (2) указываем название светлой FGX Native темы из дизайнера ресурсов. Если вы использовали нашу рекомендацию по группировке и именованию тем, то это может быть "Themes\Light\Green" (Светлая тема с зеленым основным цветов).

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

В поле (4) указываем название темной темы из дизайнера ресурсов (если включена поддержка темной темы).

В момент старта приложения FGX Native применяет тему согласно вашим настройкам. Например, вот так:

В режиме выполнения (Runtime): Этот способ может использоваться, если вы хотите позволить пользователю менять вашу тему в соответствии с его предпочтениями. За настройки темы (аналогичные 3.3.1) отвечает свойство Application.ThemeSettings:

/// <summary>Название светлой темы FGX Native, используемой по умолчанию во всех формах.</summary>
property LightThemeName: TfgThemeName read FLightThemeName write SetLightThemeName;
/// <summary>Название темной темы FGX Native, используемой по умолчанию во всех формах.</summary>
property DarkThemeName: TfgThemeName read FDarkThemeName write SetDarkThemeName;
/// <summary>Применяемая тема по умолчанию.</summary>
property ThemeKind: TfgThemeKind read FThemeKind write SetThemeKind;

По сути здесь те же свойства, что и в настройках проектах, кроме возможность отключить темную тему во всем приложении.

Например, если вы хотите добавить несколько вариантов тем для разных акцентных цветов, то вы можете это сделать так (если вы используете предложенные вариант группировки тем в дизайнере ресурсов)

  Application.ThemeSettings.LightThemeName := 'Themes\Light\' + AccentColorName;
  Application.ThemeSettings.DarkThemeName := 'Themes\Dark\' + AccentColorName;

В любой момент времени, изменяя название темы приведет к автоматическом применению темы ко всему приложению.

Узнать используемое в текущий момент времени название темы приложения можно через Application.ThemeName.

3.3.2 Форма

Если по каким-то соображениям, вы не хотите, чтобы на каком-то экране/форме у вас использовалась тема приложения, вы можете ее переопределить локально на уровне формы, указав ее имя в свойстве TfgForm.ThemeName:

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

3.3.3 Принцип смены темы

Когда меняется тема в приложении или локально в рамках одной формы, форма сообщает всем компонентам дерева о необходимости сменить тему. У каждого компонента вызывается виртуальный метод TfgControl.ThemeChanged и передается имя новой темы "AThemeName":

/// <summary>Информирует, что изменена тема и следует обновить связи с ресурсами.</summary>
procedure ThemeChanged(const AThemeName: TfgThemeName); virtual;

Затем каждый компонент в зависимости от набора настроек выполняет применение новой темы к свойствам. Например, каждый компонент имеет задний фон BackgroundName, который поддерживает темизацию. Поэтому базовая реализация вызывает метод для установки нового имени темы для фона при помощи BackgroundLink.ChangeTheme (BackgroundLink - это сущность, связывающая ресурс фона с компонентом).

procedure TfgControl.ThemeChanged(const AThemeName: TfgThemeName);
begin
  TfgAssert.IsNotNil(BackgroundLink, 'BackgroundLink');

  if TfgDebugAssetsOption.Themes in TfgLibraryDiagnostics.DebugAssetsOptions then
    TfgLog.Trace(ThemesTag, SThemesApplyingNewTheme, [ToString, AThemeName]);

  BackgroundLink.ChangeTheme(AThemeName);
  SendMessage<TfgThemeName>(TfgControlMessages.WM_THEME_CHANGED, AThemeName);
end;

Если в имени ресурса используется указание на использование темы (наличие ":", как разделитель между название темы и ресурса), то происходит автоматическая замена старой темы на новую. В противном случае, ничего не происходит. 

3.4 Использование ресурсов темы

После того, как мы научились делать свою тему и применять ее, теперь необходимо научиться настройке внешнего вида компонента на основании текущей темы.

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

3.4.1 Типы значений

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

1. Если в свойстве ничего не указано, то значит будет использовать соответствующий цвет из системной темы. Например: у кнопки по умолчанию не используется цвет из темы, поэтому ее внешний вид и цвет будет отличаться в Android и iOS.

2. Если в свойстве бледно серым цветом указано название ресурса, то это название ресурса из темы FGX Native, которое будет использоваться, если в приложении создана тема. Например, форма по умолчанию использует цвет "Background":

На изображении выше видно, что по умолчанию форма использует белый цвет Background из светлой темы с зеленым основным цветом "Themes\Light\Green".

3. Если в свойстве значение указано бледно серым цветом и слева от названия вы видите рамку с красным крестиком, это значит, что либо в приложении нет темы FGX Native, либо в текущей теме нет ресурса с именем Background.

4. Если в свойстве название ресурса указано ярким цветом, то это значит, что цвет указан вручную и переопределяет цвет по умолчанию из темы, если он есть.  

5. Начиная с 1.19.0.0. Цветовое свойство допускает указание кода цвета напрямую в качестве имени ресурса. 

3.4.2 Приоритеты

Большинство цветовых свойств компонентов FGX Native присутствует в двух вариантах:

1. С постфиксом "Name": TintColorName, ColorName
2. Без постфикса "Name": TintColor, Color

Если вы видите такие парные свойства, значит они оба отвечают за настройку одной характеристики внешнего вида компонента. Приоритет у таких свойств следующий в порядке убывания и наличия: 

1. Указанное вручную название ресурса цвета.
2. Указанное название ресурса цвета из темы по умолчанию.
3. Значение цвета из свойства Color, TintColor и т.д.
4. Значение цвета из системной темы (определяется каждым компонентов самостоятельно реализацией).

Данное дублирование появилось с самого начала разработки FGX Native и было предназначено только для быстрого прототипирования компонентов в дизайнере и облегчения перехода разработчиков с VCL и FMX. Однако, использование цвета напрямую не было рекомендовано к использованию. Несмотря на это, главным и основным способом указания цвета остается использование цвета через имя ресурса. В будущих версиях мы планируем скрыть из дизайнера все свойства с прямым заданием кода цвета и перенесем эту возможность напрямую в свойство имени цвета (Как указано в конце раздела 3.4.1).

3.4.3 Применение ресурсов темы

Для корректного отображения некоторых компонентов, которые могут иметь несколько вариантов отображения (например, кнопка), вам необходимо настроить внешний вид, используя ручное указание ресурсов темы.

Например, мы используем в приложении заполненную (Contained) цветом кнопку с иконкой. Указываем цвета для иконки, текста и оттенок согласно системе цветов. И тогда при переключении темы с "Themes\Dark\Green" на "Themes\Light\Blue" внешний вид кнопки будет согласован с темами. 

При указании ресурса из темы важно (начиная с 1.19.0.0) использовать ":", как знак разделитель темы и ресурса темы. Соответственно, если у нас есть тема: "Themes\Light\Blue", а внутри цвет "Secondary\Color", то полное имя ресурса будет выглядит так "Themes\Light\Blue:Secondary\Color" 

При смене темы формы или приложения, все свойства, которые используют имена ресурсов с указанием темы с ":" будут автоматически обновлены на использование новой темы. 

3.4.4 Фиксация ресурса цвета

Возможны ситуации, когда необходимо использовать цвет из темы, но без автоматического обновления. Например, вы сделали несколько тем с разными акцентными цветами, и хотите их отобразить на форме. В таком случае, не нужно использовать ":", как разделитель ресурсов, а использовать "\". Тогда при смене темы такие значения не будут изменены.

3.5 Расширение темы

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

4. Пример разработки приложения с поддержкой темной и светлой тем и разных цветовых оттенков.

Рассмотрим применение тем на практике. В качестве площадки для практики возьмем любое приложение. Вы можете взять свое. Я же взял заготовку из демонстрационных проектов. 

В данном проекте нет никакого использования ресурсов, а так же нет никаких тем.

Перед нами стоят следующие задачи:

1. Добавить поддержку темной и светлой тем.
2. Добавить возможность переключать темы вручную.
3. Добавить возможность переключать темы автоматически согласно настройкам системной темы на устройстве.
4. Добавить возможность менять акцентированный цвет. В примере рассмотрим два цвета: зеленый и синий. На практике как цвета, так и их количество может быть любым.

4.1 Создание тем в дизайнере ресурсов

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

1. Светлая
2. Темная

А так же два вида акцентированного (Primary) цвета для каждого вида тем:

1. Зеленый
2. Синий.

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

1. Первый уровень - Themes, сюда складываем все виды тем.
2. Второй уровень - Dark/Light - группировка всех тем по виду.
3. Третий уровень - Green/Blue акцентированный цвет.

Открываем дизайнер ресурсов Project -> FGX Assets Manager.

Создаем такую структуру.

После чего пользуемся встроенным мастером создания темы и создаем две темы с одинаковыми акцентированными цветами для светлой и темной тем. В результате должно получиться вот так:

4.2 Настройки тем в проекте

Наши FGX Native темы готовы, теперь сохраняем изменения и переходим к настройке тем в проекте. Для этого открываем настройки проекта Project -> FGX Options...-> Приложение -> Темы.

1. Выбираем конфигурацию "All Configurations - All platforms", чтобы наши настройки тем применились для всех платформ и конфигураций.
2. Пусть при старте у нас будет использоваться такая же тема, как и в системе. Для этого в "Используемая тема при старте" (2) выбираем "Согласно системной теме"
3. В поле "название светлой темы" (3) указываем одну из двух наших светлых тем. Будем считать, что зеленый акцентированный цвет будет использоваться по умолчанию. Поэтому указываем соответствующую светлую тему: "Themes\Light\Green"
4. Включаем поддержку темной темы в приложении (4). 
5. В поле "название темной темы" (5) указываем соответствующую темную тему: "Themes\Dark\Green"

Теперь при старте нашего приложения, приложение автоматически получит тему с зеленым акцентированным цветом соответствующего типа. Запускаем и проверяем. При старте в системе установлена светлая тема, она же и применилась в приложении. Меняем системную тему на темную при помощи панели управления Android или iOS и приложение автоматически меняет ее на темную.

Как вы можете видеть, компоненты уже адаптированы и заточены на использование тем FGX Native, поэтому в данном случае мы не выполняли никакой ручной настройки компонентов.

Половина дела уже сделана. Добавлена поддержка двух тем с автоматической синхронизацией с системной темой. Теперь необходимо добавить возможность ручного управления темами и акцентированным цветом. 

4.3 Программная смена тем и акцентированного цвета

Чтобы пользователь мог менять тему в приложении по своему усмотрению, создадим такую панель управления, выдвигаемую снизу экрана. Для этого используем TfgRadioButton и TfgBottomSheetLayout.

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

Для синего цвета используем такое указание название цвета: "Themes\Light\Blue\Primary\Color".

Важно: чтобы в качестве разделителя имени темы "Themes\Light\Blue" и ресурса "Primary\Color" использовался разделитель "\". В этом случае, при любой смене темы данное имя не будет изменяться. В противном случае, при смене темы цвет так же будет изменяться.

Задаем группы (TfgRadioButton.GroupName ) "ThemeKind" и "AccentColor" для трех верхних и двух нижних групп радиокнопок соответственно. Тип используемой темы задается при помощи перечисляемого типа "TfgThemeKind = (SystemDefault, Light, Dark);". Чтобы нам было удобнее, задаем трем верхним радио кнопкам соответствующие значениям TfgThemeKind целочисленные значения от 0 до 2 в свойстве Tag.

Теперь при выборе типа темы, нам нужно отразить это изменение в приложении. Для этого выбираем три верхних TfgRadioButton и пишем такой обработчик OnChanged.ChangeTheme:

procedure TFormMain.ChangeTheme(Sender: TObject);
var
  RadioButton: TfgRadioButton;
begin
  TfgAssert.IsClass(Sender, TfgRadioButton);

  RadioButton := TfgRadioButton(Sender);
  Application.ThemeSettings.ThemeKind := TfgThemeKind(RadioButton.Tag); // Свойство Tag содержит целочисленное значение TfgThemeKind
end;

Проверяем, Sender действительно ли является TfgRadioButton. Затем извлекаем целочисленное значение TfgThemeKind и устанавливаем его в настройки приложения Application.ThemeSettings.ThemeKind.

Для того, чтобы поменять акцентированный цвет, нам нужно поменять название светлой и темной тем в Application.ThemeSettings. Для этого пишем такой обработчик для двух нижних радиокнопок:

procedure TFormMain.ChangeAccentColor(Sender: TObject);
var
  RadioButton: TfgRadioButton;
  AccentColorName: TfgThemeName;
begin
  TfgAssert.IsClass(Sender, TfgRadioButton);

  RadioButton := TfgRadioButton(Sender);
  AccentColorName := RadioButton.Text;
  Application.ThemeSettings.LightThemeName := 'Themes\Light\' + AccentColorName;
  Application.ThemeSettings.DarkThemeName := 'Themes\Dark\' + AccentColorName;
end;

Берем название акцентированного цвета напрямую из названия TfgRadioButton. И формируем новое название тем.

Проверяем. Запускаем наше приложение.

Вот таким незамысловатым способом можно легко добавить поддержку тем в 1.19.0.0.

5. Советы

1. При проектировании интерфейса всегда учитывайте, что у вас должна быть поддержка светлой и темной тем.
2. Лучше сразу добавить в самом начале две базовые темы: светлая и темная с одним из основных цветов.
3. При настройке внешнего вида компонентов, используйте ресурсы из темы, где это необходимо. Это сильно упростит вам дальнейшую настройку внешнего вида приложения и добавление поддержки новых тем. 
4. Вы всегда можете проверить корректность внешнего вида приложения в дизайнере, вручную указав название темы в форме, либо воспользовавшись переключателем вида темы в дизайнере форм.
5. Не используйте зашитые коды цветов прямо в компонентах (свойства Color, TintColor и т.д.), иначе при смене темы, эти цвета останутся без адаптации. 
6. При любом использовании цветов, выносите его в ресурсы. Если вы понимаете, что данный цвет может зависеть от темы, то смело включайте его в состав тем.

Не секрет, что в Java/Kotlin мире огромное количество готовых и бесплатных к использованию Android библиотек, чего нельзя сказать о Delphi. Более того, если речь идет про внешние устройства для устройств на базе Android, то производитель всегда поставляет SDK в виде Android библиотеки.  Будь то софт для работы с устройством по USB, промышленный сканер, медицинское оборудование или что-либо другое, все обычно имеет готовый SDK. Если же вы хотите воспользоваться облачными сервисами аналитики от Google или Yandex, то опять же самым удобным вариантом будет использование готового поставляемого SDK.

К сожалению, надо отметить, что крайне редко производитель поставляет SDK для языка Delphi. Что в итоге делает процесс интеграции SDK на другом языке в Delphi не самой тривиальной задаче и требует специальных интеграции со стороны разработчиков. В этой статье мы рассмотрим о новых возможностях по интеграции библиотек для Android приложения на базе FGX Naitve.   

С радостью хотим с вами поделиться новыми возможностями в FGX Native в области интеграции сторонних Android библиотек в ваше приложение. Долгое время Delphi не позволяла и до сих пор не позволяет с легкостью добавлять существующие Android-библиотеки. Это значит, что весь мир использования существующих Java библиотек под Android для Delphi был практически недоступен.  Почему это так, и в чем трудности, я затронул в статье в главе "Почему переход на AndroidX не был выполнен ранее?":

И о чем я рассказал в статье (раздел "Поддержка сторонних Android-библиотек")

Раньше вы могли добавлять только JAR библиотеки (стандартная возможность RAD Studio IDE). Чуть позже, мы добавили поддержку AAR библиотеки (FGX Native 1.15.0.0). А начиная с FGX Native 1.15.2.0 мы расширили эту поддержку и теперь вы можете просто указать название публичной библиотеки, без необходимости искать JAR/AAR и всех зависимостей.

Андроид библиотека

Андроид библиотека идентифицируется тремя параметрами:

1. Группа - Уникальное название группы, в рамках которой могут находиться разные библиотеки. Обычно название группы отражает название компании и направление библиотек.
   Например: "com.yandex.android"
2. Артефакт - короткое название библиотеки в рамках группы (1).
   Например: "mobmetricalib"
3. Версия. Номер версии.
   Например: "5.2.0"

Объединенные параметры, разделенные ":", квалифицируют библиотеку среди остальных: "com.yandex.android:mobmetricalib:5.2.0".

Управление используемыми библиотеки в приложении FGX Native для Android осуществляется через наш менеджер, доступный через главное меню:  "Project -> FGX Android Libraries".

Существует два способа интеграции Андроид-библиотеки.

1. Старый. Долго, сложно и не поддерживает транзитивные зависимости. Добавление файла библиотеки и всех зависимостей вручную. 

Для этого вам надо:

1. Cкачать физический файл библиотеки в JAR или AAR формате.
2. Определить все используемые транзитивные зависимости и скачать их файлы так же.
3. После чего вручную добавить их через мастер "FGX Android Libraries".

Например, чтобы этим способом добавить поддержку Yandex AppMetrika версии 5.2.0 нужно найти и добавить в сумме 11 файлов библиотек:

2. Новый. Указание названия библиотеки для автоматического скачивания библиотеки и всех зависимостей и интеграция в FGX Native приложение. 

Начиная с 1.15.2.0 достаточно указать полное название библиотеки и все остальное произойдет автоматически.

Чтобы добавить новую зависимость, нужно нажать на кнопку "+" и выбрать "Зависимость-библиотека". После чего указать полное имя зависимости или воспользоваться быстрым поиском для поиска интересуемой зависимости.

Таким способом достаточно указать только полное наименование библиотеки. Например, та же Yandex AppMetrika добавляется путем добавления зависимости на "com.yandex.android:mobmetricalib:5.2.0".

Репозитории

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

• Maven Central - https://mvnrepository.com/
• Google Maven - https://maven.google.com/web/index.html

Помимо общеизвестных, любой желающий может развернуть свой репозиторий и хранить там свои наработки. В таком репозитории можно получить информацию о любой библиотеке. Например, Яндекс предлагает библиотеку "mobmetricalib" для работы с AppMetrika. Библиотека называется "com.yandex.android » mobmetricalib" и может быть найдена в одном из таких репозиториев:

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

FGX Native подключает два публичных репозитория по умолчанию (Maven Central, Google Maven). Вы можете управлять списком репозиториев и добавлять свои, открыв список кнопкой "Репозитории", если это требуется:

Как использовать добавленные библиотеки в коде?

После того, как вы интегрировали стороннюю библиотеку, встает вопрос о том, как вызвать API, которое она поставляет. Для этого вам нужно получить заголовочные файлы. Это можно сделать при помощи нашей утилиты Java2Delphi, входящей в поставку FGX Native.

Описание работы утилиты описано в этой статье:

Всем спасибо за внимание

В этой статье мы рассмотрим настройку и использование сервиса Firebase Messaging (FCM)для приема push-уведомлений на платформе iOS.

Начиная с версии FGX Native 1.15.2.0, вы можете использовать Firebase не только на Android, но теперь и на iOS. Тем самым не нужно выполнять дополнительные действия для конвертации токенов устройств из Apple Push Service (APS) в токен Firebase (FCM), сделав ваш код полностью кроссплатформенным.

Перед тем, как приступить к работе с уведомлениями, необходимо выполнить регистрацию аккаунта Google.

Регистрация приложения в Firebase для iOS

1. Откройте Firebase Console и выполните вход в учетную запись Google. 

2. Нажмите кнопку "Создать проект"

3. Укажите название вашего проекта и нажмите кнопку "Continue". Вы можете использовать любое название. Например: "FGX Native project". 

4. На текущей странице вы можете отключить поддержку Google Analytics. Вы можете ее отключить. Однако, рекомендуем ее оставить. Так в будущем вы сможете использовать аналитику для данного проекта. Нажмите кнопку "Continue".

5. Выберите или создайте аккаунт Google Analytics. Я взял созданные раннее, в который будет добавлена аналитика для нового проекта. Нажмите кнопку "Create Project".

6. Ожидаем окончания процесса создания проекта в Firebase. По окончании нажимаем "Continue". Когда проект будет создан, вы увидите главную страницу:

7. Теперь необходимо зарегистрировать ваше FGX Native iOS приложение для этого нажимаете на кнопку с логотипом iOS.

8. Указываете имя пакета вашего iOS приложения, такое же, как у вашего приложения (если оно есть), или такое, какое оно будет (его можно будет указать)

• Если у вас уже есть приложение, то узнать название пакета можно в настройках проекта: Project -> Options... -> Version Info >  CFBundleIdentifier ".

• Если у вас еще нет приложения, то придумайте название пакета. Например: "ru.fgx.pushnotificationdemo".

9. Нажмите кнопку "Register app".

10. Скачиваем конфигурационный файл "GoogleService-Info.plist", нажав на кнопку "Download" и сохраняем файл в папку FGX Native проекта (можно сохранить в любое другое место). Этот файл содержит настройки для инициализации FGX Native приложения на iOS.

14. Заканчиваем добавление вашего приложения путем нажатия кнопок "Next" -> "Next" -> "Continue to console"

15. Теперь вы увидите ваше iOS приложение на главной странице.

Теперь необходимо выполнить настройку FGX Native приложения в IDE.

Настройка приложения

1. Откройте существующий проект или создайте новый.

• Если вы создаете новый проект, то в мастере создания проекта обязательно укажите (на основании шага 8 регистрации приложения в Firebase):

  • Идентификатор организации. Например: "ru.fgx".

  • Имя проекта. Например: "pushnotificationdemo".

• Если открываете существующий, то убедитесь, что название пакета в Project -> Options... -> Version Info >  CFBundleIdentifier " соответствует названию из шага 8.

2. Откройте: "Главное меню" -> "Project ->  Deployment".

2.1. В выпадающем списке конфигурации выберите "All Configurations -> iOS-Device 64-bit platform".

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

2.2. Добавьте ранее скаченный файл настроек "GoogleService-Info.plist" (на основании шага 10 регистрации приложения в Firebase).

Примечание: Если этого не сделать, то при старте приложение упадет.

3. Сохраните изменения.

4. Откройте главную форму вашего приложения и подключите модуль FGX.PushNotification.FCM. 

Примечание: FGX Native использует Firebase по умолчанию на Android. Однако, на iOS мы используем Apple Push Service по умолчанию. Поэтому Firebase библиотека не линкуется по умолчанию. По этому важно подключить данный модуль. 

5. Добавьте на форму компонент TfgPushNotificationService и укажите "ServiceNamne = FCM".

Минимально необходимая настройка вашего приложения для получения пуш уведомлений выполнена. Если приложение будет свернуто или выгружено из памяти, то при отправке push-уведомление отобразиться в центре уведомлений устройства. Если же приложение активно, то пуш уведомление не будет попадать в центр уведомления устройства.

Получение токена устройства

При первом старте приложения, оно выполняет свою регистрацию в облаке Firebase. При этом облако выдает устройству уникальный токен DeviceToken. Перед тем, как отправить тестовое уведомление, необходимо узнать токен устройства. Для получения токена устройства нужно написать обработчик события "TfgPushNotificationService.OnDeviceTokenChanged". Данное событие вызывается каждый раз, когда выдается новый токен устройства. Токен устройства может меняться.

Получив токен, вам необходимо передать его на ваш сервер, отправляющий Push-уведомления для будущих отправок сообщений. 

В данном примере, мы не будем его сохранять, а выведем в лог устройства.

procedure TFormMain.PushServiceDeviceTokenChanged(Sender: TObject; const ADeviceToken: string);
begin
  TfgLog.Info('Device token changed: deviceToken="%s"', [ADeviceToken]);
end;

Получение push-уведомления

Для получения токена устройства нужно написать обработчик события "TfgPushNotificationService.OnPushNotificationReceived". Данное событие вызывается, когда устройство принимает push-уведомление.

Примечание: В зависимости от реализации, событие может вызываться в разные моменты времени. Например, если приложение не в памяти или в фоне, то событие вызовется в момент нажатия пользователем на уведомление в Центре локальных уведомлений.

Пример вывода в лог полученного push-уведомления:

procedure TFormMain.PushServicePushNotificationReceived(Sender: TObject; const ANotification: TfgPushNotification);
begin
  TfgLog.Info('Notification received: notification="%s"', [ANotification.ToString]);
end;

Запустите приложение и запомните токен устройства из консоли. 

О том, как пользоваться Console для просмотра логов устройства, читайте в статье:

Отправка тестового сообщения

Чтобы отправить тестовое сообщение на конкретное устройство, можно воспользоваться Firebase консолью.  

1. Откройте консоль: https://console.firebase.google.com

2. Перейдите в меню навигации к разделу: "Engage -> Messaging"

3. Нажмите кнопку "Create your first campaign".

4. Выберите тип "Firebase Notification Messages".

4. Заполните данные уведомления. Например так:

5. Нажмите кнопку "Send test message". Консоль предложит указать на какие устройства необходимо отправить данное уведомление.

6. Укажите в поле токен устройства (раздел "Получение токена устройства") и нажмите кнопку "+".

7. Выполните отправку уведомления, путем нажатия на кнопку "Протестировать" и наблюдайте появление вашего уведомления в центре локального уведомления на устройстве:

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

Если пользователь нажимает на push-уведомление в центре уведомлений, то система запустит ваше приложение. В любой момент времени можно получить данные стартового уведомления напрямую из локального Firebase сервиса (Раздел "Получение Push-уведомлений").

var 
  Notifications: TArray<TfgPushNotification>; 
begin 
  Notifications := fgPushNotificationService1.StartupNotifications;
end;

ВАЖНО!

Приложение падает на старте и вы используете компоненты FireDAC. (спасибо @Roman)

Quote

Отдельно хочу отметить, что при использовании в приложении компонента TFDConnection с драйвером SQLite (TFDConnection.DriverName=SQLite), по умолчанию устанавливается режим статической привязки движка SQLite. Что в свою очередь, после интеграции Firebase, приводит к падению iOS-приложения при запуске.

Для исправления проблемы необходимо:

1. вместе с TFDConnection разместить компонент TFDPhysSQLiteDriverLink;

2. установить динамическую привязку SQLite: TFDPhysSQLiteDriverLink.EngineLinkage=slDynamic;

3. в модуле, который использует TFDConnection, из uses удалить FireDAC.Phys.SQLiteWrapper.Stat. 

Обратите внимание!
Все вышеописанное справедливо ТОЛЬКО для iOS!

Для Android необходима статическая привязка движка SQLite!

Чтобы ваше приложение на Android смогло работать с БД, необходимо пойти по одному из вариантов:

1. для Android использовать отдельный модуль данных со статической привязкой SQLite;

2. перед сборкой Android-приложения вернуть значение TFDPhysSQLiteDriverLink.EngineLinkage=slStatic.

Надеюсь, эта информация позволит избежать аналогичных ошибок 😉

Настройка серверной части

1. Переходим по ссылке и попадаем в список приложений. Нажимаем на кнопку Create 

   

2. Заполняем название, выбираем тип Standalone app и нажимаем кнопку Connect app

   

3. После подтверждения по телефонному звонку попадаем на страницу вновь созданного приложения и переходим в раздел Settings
4. В настройках запоминаем значение параметра App ID (он далее понадобится нам при настройке Delphi приложения)
5. На этой же странице указываем идентификатор нашего приложения в поле App Bundle ID for iOS (также понадобится далее при настройке Delphi приложения)
6. App status изменяем на Application on and visible to all

   

7. Сохраняем настройки с помощью кнопки Save.

Настройка клиентской части

1. Переходим в настройки iOS профиля приложения и назначаем CFBundleIdentifier из шага 5 настройки серверной части

   

2. Открываем в текстовом редакторе файл info.plist.TemplateiOS.xml из директории проекта и сразу после плейсхолдера <%StoryboardInfoPListKey%> добавляем следующий текст

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>vkAPP-ID</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>vkAPP-ID</string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>vk</string>
    <string>vk-share</string>
    <string>vkauthorize</string>
</array>
<key>VKAppID</key>
<string>APP-ID</string>

где APP-ID - App ID из шага 4

Внимание! Если вы в приложении используете одновременно аутентификацию Facebook Login, то необходимо скомбинировать вышеуказанные ключи с имеющимися ключами от Facebook Login.

Итоговый файл можно посмотреть в прикрепленном демо проекте Authentication - Clients.zip

Спасибо за внимание.

Настройка серверной части

1. Переходим по ссылке и попадаем н а страницу документации с пошаговым мастером настройки, запускаемым по кнопке Configure a project

   

2. Запускаем мастер и указываем имя проекта (внутреннее именование, невидимое для конечного пользователя)

   

3. Указываем имя продукта для OAuth клиента, которое увидит конечный пользователь в диалоге аутентификации

   

4. Далее в выпадающем списке выбираем тип клиента Android, указываем имя пакета (далее понадобится нам при настройке Delphi приложения) и отпечаток сертификата (получение рассмотрено ниже)

   

5. Завершаем настройку (при надобности сохраните конфигурационные данные клиента)

   

Получение SHA-1 отпечатка сертификата

При сборке Android приложение подписывается сертификатом разработчика. От типа сборки, режима конфигурации и версии Delphi будет зависеть местоположение файла сертификата от которого мы будет получать отпечаток. Ниже будет рассмотреть вариант получения отпечатка для Debug сборки в режиме конфигурации Development для Delphi 11.

Открываем командуню строку Windows и выполяем следующую команду 

keytool -list -v -alias androiddebugkey -keystore "C:\Users\%USERNAME%\AppData\Roaming\Embarcadero\BDS\22.0\debug.keystore"

где %USERNAME% - имя залогиненого пользователя Windows

22.0 - версия Delphi 11 (для Delphi 10.4 этот параметр будет равен 21.0).

Если вы используете собственный сертификат разработчика и режим конфигурации Application Store, подставьте путь к вашему .keystore файлу.

Настройка клиентской части

1. Переходим в настройки Android профиля приложения и назначаем package из шага 4 настройки серверной части

   

2. Открываем в текстовом редакторе файл AndroidManifest.template.xml из директории проекта и сразу после закрывающего тега </activity> добавляем следующий текст

        <!-- Google Play Services version, which are used in this application. This value is checked by Play Services in runtime -->
        <meta-data android:name="com.google.android.gms.version" android:value="12451000" />
		
        <activity
            android:name="com.google.android.gms.auth.api.signin.internal.SignInHubActivity"
            android:excludeFromRecents="true"
            android:exported="false"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" />

        <!--
            Service handling Google Sign-In user revocation. For apps that do not integrate with
            Google Sign-In, this service will never be started.
        -->
        <service
            android:name="com.google.android.gms.auth.api.signin.RevocationBoundService"
            android:exported="true"
            android:permission="com.google.android.gms.auth.api.signin.permission.REVOCATION_NOTIFICATION" />	

Внимание! Если в настройках вашего проекта вклюены опции AdMob Service, Maps Service или Receive push notifications указывать первую строку с версией Google Play Services необязательно, т.к. она добавится автоматически. 

Итоговый файл можно посмотреть в прикрепленном демо проекте Authentication - Clients.zip

Спасибо за внимание.

Настройка серверной части

1. Переходим по ссылке и попадаем в список приложений
2. Для создания нового приложения нажимаем кнопку Create App

   

3. Выбираем наиболее подходящий под вашу задачу тип приложения

   

4. Заполняем название приложения и контактную информацию

   

5. После завершения создания нового приложения мы попадаем на страницу настроек приложения. Заходим в настройки сервиса Facebook Login

   

6. Выбираем платформу iOS

   

7. Далее идёт пошаговая настройка. Большая часть шагов не представляет для нас интереса. 
   В шаге 2 необходимо указать Bundle ID (он далее понадобится нам при настройке Delphi приложения)

   

   В шаге 3 нужно включить опцию Enable Single Sign On

   

8. Скопируем несколько значений из серверных настроек, которые понадобятся нам для настройки Delphi приложения наравне с Bundle ID из предыдущего шага:
   a) App ID, который можно взять в тулбаре настроек, либо со страницы Settings-Basic

   

   b) Client token, который находится на странице Settings-Advanced-Security

   

Настройка клиентской части

1. Переходим в настройки iOS профиля приложения и назначаем CFBundleIdentifier из шага 7 настройки серверной части

   

2. Открываем в текстовом редакторе файл info.plist.TemplateiOS.xml из директории проекта и сразу после плейсхолдера <%StoryboardInfoPListKey%> добавляем следующий текст

   <key>CFBundleURLTypes</key>
   <array>
     <dict>
     <key>CFBundleURLSchemes</key>
     <array>
       <string>fbAPP-ID</string>
     </array>
     </dict>
   </array>
   <key>FacebookAppID</key>
   <string>APP-ID</string>
   <key>FacebookClientToken</key>
   <string>CLIENT-TOKEN</string>
   <key>FacebookDisplayName</key>
   <string>APP-NAME</string>
   <key>LSApplicationQueriesSchemes</key>
   <array>
     <string>fbapi</string>
     <string>fb-messenger-share-api</string>
   </array>

   где APP-ID - App ID из шага 8a
   CLIENT-TOKEN - Client token из шага 8b
   APP-NAME - имя приложения
   
   Итоговый файл можно посмотреть в прикрепленном демо проекте Authentication - Clients.zip

Спасибо за внимание.

Что такое аутентификация?

Согласно википедии «аутентификация» — это процедура проверки подлинности. Те другими словами это доказательство того, что перед вами именно тот пользователь, кем он представился. В обычной жизни можно провести аналогию со сличением личности по паспорту.

Что является результатом аутентификации?

Основным результатом аутентификации является идентификатор аккаунта (TfgAccountId), а так же ряд дополнительных полей наличие и состав которых зависит от сервиса аутентификации и желания пользователя их предоставить. Как правило, сервисы возвращают имя пользователя, email.

Сервис аутентификации в библиотеке FGX Native

Каждый сервис аутентификации реализует интерфейс IFGXAuthenticationService, который включает в себя метод по входу, выходу и проверке состояния авторизации по указанному индентификатору аккаунта.

За регистрацию, хранение и поиск сервисов аутентификации отвечает класс TfgAuthenticationServiceManager.

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

Клиент для аутентификации с помощью Apple ID - TfgAppleIdAuthenticationClient (iOS)

Общие сведения по использованию фреймворка.

Абсолютно все сервисы аутентификации требуют предварительной настройки на стороне сервера и на стороне клиента (приложения).

Важно: необходимо иметь платный аккаунт разработчика.

Настройка серверной части.

1. Переходим по ссылке и попадаем в список идентификаторов приложений.
2. Нажимаем кнопку добавления нового идентификатора приложения.

   

3. Выбираем опцию App IDs

   

4. Тип идентификатора App

   

5. Добавляем описание, указываем уникальный Band ID (он далее понадобится нам при настройке приложения) и отмечаем галку напротив опции Sign In with Apple

   

6. Подтверждаем изменения и сохраняем новый идентификатор.

Настройка клиентской части.

1. Для успешной сборки приложения необходимо в SDK добавить фреймворк AuthenticationServices .

   Для этого необходимо открыть настройки SDK Tools-Options-Deployment-SDK Manager, в списке SDK выбрать iOS и нажать кнопку добавления нового элемента.

   

2. Добавляем фреймворк со следующими параметрами:

   Path: $(SDKROOT)/System/Library/Frameworks
   Name: AuthenticationServices
   Type: Framework

   

3. Нажимаем кнопку Update Local File Cache для обновления SDK.

4. Переходим в настройки iOS профиля приложения и назначаем CFBundleIdentifier из шага 5 настройки серверной части.

   

Демо пример использования клиентов аутентификации

В версии 1.14.0.0 в поставку библиотеки будет включен пример по использованию клиентов аутентификации, который будет расширяться по мере добавления новых сервисов.

Данный пример вы можете загрузить уже сейчас не дожидаясь следующего релиза Authentication - Clients.zip.

Спасибо за внимание.

Мы плотно работаем над новой версией библиотеки FGX Native, в которую войдут новые компоненты-контейнеры и многие другие улучшения. В этой статье мы хотели бы поделиться двумя новыми компонентами-контейнерами TfgVirtualPagerLayout и TfgPagerLayout, которые появятся в релизе 1.13.1.0. 

TfgVirtualPagerLayout

Это базовый компонент, который предназначен для динамической загрузки/выгрузки страниц по мере их необходимости. В отличии от привычных подходов с добавлением вложенных компонентов заранее в дизайнере, этот компонент запрашивает загрузку/выгрузку страницы через события OnLoadPage и OnUnloadPage по мере их необходимости. Это значит, что фактически вместо загрузки 10-20 страниц, он загружает только видимую и еще 1-2 смежных в зависимости от текущего состояния компонента и, как следствие, ускоряет загрузку приложения.

На базе данного компонента можно легко сделать оптимизированный слайдер изображений. Например вот такой:

Компонент не хранит все страницы у себя и работает по cхожему c TfgCollectionView принципу, те запрашивает необходимую информацию у разработчика через набор событий. Перед использованием компонента, вам необходимо написать обработчики для 3-х событий:

• OnGetPageCount - вернуть общее количество страниц в компоненте.
• OnLoadPage - вернуть компонент страницы. Это может быть любой визуальный компонент. Вы можете создавать  страницу в этом событии динамически, а можете реализовать пул объектов, чтобы повторно использовать выгруженные ранее страницы.
• OnUnloadPage - можно выполнить уничтожение страницы или вернуть страницу в пул объектов для дальнейшего повторного использования.

Типичным примером реализации данных событий может быть такой код, создающий страницы с текстом на базе TfgLabel:

procedure TFormMain.fgVirtualPagerLayout1GetPageCount(Sender: TObject; var ACount: Integer);
begin
  // Сообщаем компоненту о количестве страниц.
  ACount := 100;
end;

procedure TFormMain.fgVirtualPagerLayout1LoadPage(Sender: TObject; const AItemIndex: Integer; var APage: TfgControl);
var
  LPage: TfgLabel;
begin
  // Создаем страницу на базе TfgLabel, которая будет отображать номер страницы.
  LPage := TfgLabel.Create(nil);
  LPage.Font.Size := 30;
  LPage.Text := Format('Page %d', [AItemIndex]);
  APage := LPage;
end;

procedure TFormMain.fgVirtualPagerLayout1UnloadPage(Sender: TObject; const AItemIndex: Integer;
  const APage: TfgControl);
begin
  // Удаляем страницу.
  APage.Free;
end;

В результате получим:

Пул страниц

В этом примере вы можете обратить внимание, что если страницы по структуре одинаковые, то смысла удалять страницу и создавать заново особо не имеет смысла. Поэтому для этого случая, можно написать простой пул объектов, который не будет удалять вкладку, как только она не нужна, а складывать ее в список для дальнейшего повторного использования. Для реализации пула страниц создадим два списка:

1. Список используемых страниц в компоненте в текущий момент времени - FAcquiredPages.
2. Список использованных страниц, которые уже не используются в текущий момент времени - FReleasedPages.

Код по объявлению списков выглядит так:

type
  TFormMain = class(TfgForm)
  private
    FAcquiredPages: TList<TfgLabel>;
    FReleasedPages: TObjsetList<TfgLabel>;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  end;

var
  FormMain: TFormMain;

implementation

{$R *.xfm}

uses
  System.SysUtils, FGX.Application, FGX.Dialogs, FGX.Log;

{ TFormMain }

constructor TFormMain.Create(AOwner: TComponent);
begin
  inherited;
  FAcquiredPages := TList<TfgLabel>.Create;
  FReleasedPages := TObjsetList<TfgLabel>.Create;
end;

destructor TFormMain.Destroy;
begin
  FreeAndNil(FAcquiredPages);
  FreeAndNil(FReleasedPages);
  inherited;
end;

Теперь, когда компонент запрашивает страницу мы выполняем простые действия:

• Если страница есть в пуле, то мы ее извлекаем.
• Если свободной страницы в пуле нет, то создаем новую.

Когда же страница выгружается компонентом, мы просто возвращаем ее в пул.

procedure TFormMain.fgVirtualPagerLayout1GetPageCount(Sender: TObject; var ACount: Integer);
begin
  ACount := 100;
end;

procedure TFormMain.fgVirtualPagerLayout1LoadPage(Sender: TObject; const AItemIndex: Integer; var APage: TfgControl);
var
  Page: TfgLabel;
begin
  if FReleasedPages.Count = 0 then
  begin
    // В пуле нету свободных страниц, создаем новую
    Page := TfgLabel.Create(nil);
    Page.Font.Size := 30;
  end
  else
    // В пуле есть свободная страница, берем ее
    Page := FReleasedPages.ExtractAt(0);

  // Переносим страницу в список используемых страниц.
  FAcquiredPages.Add(Page);

  // Задаем текст и возвращаем страницу
  Page.Text := Format('Page %d', [AItemIndex]);
  APage := Page;
end;

procedure TFormMain.fgVirtualPagerLayout1UnloadPage(Sender: TObject; const AItemIndex: Integer;
  const APage: TfgControl);
begin
  TfgAssert.IsClass(APage, TfgLabel);

  // Возвращаем страницу в пул для повторного использования
  FAcquiredPages.Remove(APage as TfgLabel);
  FReleasedPages.Add(APage as TfgLabel);
end;

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

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

Динамическое изменение страниц

Поскольку компонент запрашивает страницы и их количество у разработчика, то при любом изменении количества страниц, удаление/добавление страниц необходимо уведомить об этом компонент при помощи следующих методов:

• Reload - Уведомляет компонент о том, что список страниц изменился и надо заново его построить.
• NotifyPageInserted - Уведомляет компонент, что в список вставлены новые страницы по указанным индексам.
• NotifyPageRemoved - Уведомляет компонент, что из списка нужно удалить страницы по указанным индексам.

Состав страниц нельзя менять в процессе переключения вкладок!

Дополнительные события

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

• OnChanged - Вызывается только при интерактивной смене вкладки, как только компонент понимает на какую вкладку окончательно переключается пользователь. 
• OnBeginDragging - Вызывается, когда пользователь опустил палец на экран и начал двигать содержимое. 
• OnEndDragging - Вызывается, когда пользователь поднял палец с экрана и закончил двигать содержимое.
• OnBeginScrolingAnimation - Вызывается, когда началась анимация смены вкладки.
• OnEndScrolingAnimation - Вызывается, когда анимация смены вкладки закончилась.

TfgPagerLayout 

Этот компонент-контейнер построен на базе TfgVirtualPagerLayout и в отличии от TfgVirtualPagerLayout выравнивает все добавленные в него компоненты по страницам. Он не выгружает/загружает страницы и по сути является аналогом TfgPageControl. Вы добавляете в него любые компоненты и TfgPagerLayout сам осуществляет их выравнивание и переключение.
 

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

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

Условно механизм логирования можно разделить на источник логов и на утилиты для сборки и просмотра логов.

Источники логов.

Источником логов может быть как библиотека FGX Native, операционная система, так и само приложение (сообщения отправленные непосредственно разработчиком). На первые два варианта разработчик особо не может повлиять, поэтому более подробно остановимся на третьем варианте.

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

Основным методом класса является метод Log позволяющий отправить строку с указанным уровнем лога.

    /// <summary>Выводит в системный лог сообщение <c>AMessage</c> типа <c>ALogType</c>.</summary>
    class procedure Log(const ALevel: TfgLogLevel; const AMessage: string);

Уровни лога определяют степень важности того или иного события.

  /// <summary>Уровень логирования.</summary>
  TfgLogLevel = (Trace, Debug, Info, Warning, Error, Fatal);

Вы можете определить минимальный уровень лога с помощью свойства MinimumLevel, чтобы уменьшить количество выводимых в лог сообщений

    /// <summary>
    ///   Указывает минимальный уровень лога, начиная с которого сообщение будет выводиться в системный лог.
    ///   Порядок следования уровней: Debug, Info, Warning, Error, Fatal. Debug - самый низкий.
    /// </summary>
    /// <remarks>
    ///   Для <c>DEBUG</c> конфигурации выводятся все типы сообщений по умолчанию. Для <c>RELEASE</c> сообщений выше
    ///   <c>Info</c>. Если вы хотите видеть в релизной сборке вашего приложения и отладочные сообщения, то задайте
    ///   значение <c>TfgLogLevel.Debug</c> в это свойство. Данная настройка распространяется только на этот класс. На
    ///   логирование через сервис <c>IFGXLoggerService</c> она не действует.
    /// </remarks>
    class property MinimumLevel: TfgLogLevel read FMinimumLogLevel write FMinimumLogLevel;

Для удобства у класса TfgLog есть набор одноименных методов, соответствующих каждому уровню лога. Например:

    /// <summary>
    ///   Выводит в системный лог низкоуровневое отладочное сообщение <c>AMessage</c> для выполнения трассировки.
    /// </summary>
    class procedure Trace(const AMessage: string); overload;
    /// <summary>Выводит в системный лог отладочное сообщение <c>AMessage</c>.</summary>
    class procedure Debug(const AMessage: string); overload;

В дополнение, у каждого такого метода существует перегруженная версия, принимающая во втором аргументе список параметров для отправки форматированной строки:

    /// <summary>
    ///   Выводит в системный лог низкоуровневое отладочное сообщение <c>AMessage</c> с поддержкой форматирования <c>System.Format</c>.
    /// </summary>
    class procedure Trace(const AFormat: string; const Args: array of const); overload;
    /// <summary>
    ///   Выводит в системный лог отладочное сообщение <c>AMessage</c> с поддержкой форматирования <c>System.Format</c>.
    /// </summary>
    class procedure Debug(const AFormat: string; const Args: array of const); overload;

Сборка и просмотр логов.

Для просмотра логов с iOS используется утилита, работающая на компьютере под управлением macOS под названием Console.
Для просмотра логов с Android используется утилита работающая на компьютере под управлением Windows под названием logcat.
Частично логирование в контексте Android было затронуто ранее в Уроке 1 «Настройка окружения, Hello World приложение и логирование».
В данной статье мы сосредоточимся на утилите Console.

Важно! Подразумевается, что вы имеете настроенную связку: компьютер под управлением macOS к которому подключено устройство с iOS. 

Исходные данные: на устройстве с iOS установлено приложение под названием TestLogging, которое имеет только две кнопки, при нажатии на которые отправляются сообщения в системный лог.
Код выглядит следующим образом:

uses
  System.SysUtils, FGX.Application, FGX.Dialogs, FGX.Log;

procedure TFormMain.fgButton1Tap(Sender: TObject);
begin
  TfgLog.Debug('Hello from TfgLog.Debug');
end;

procedure TFormMain.fgButton2Tap(Sender: TObject);
begin
  TfgLog.Info('Hello from TfgLog.Info');
end;

Теперь перейдем непосредственно к утилите сбора и просмотра логов.
Запустите утилиту Console которая находится в Launchpad -> Other.

Главное окно состоит из меню навигации в левой части (1), тулбара с органами управления вверху (2) и списка логов, который занимают остальную клиентскую область окна (3).

Теперь выбираем в меню навигации слева устройство из списка Devices с которого мы хотим получать логи. В нашем случае это устройство с именем IPhone.

Теперь запускаем сбор логов с помощью кнопки тулбара Start или кликнув по ссылке Start streaming находящейся в центре списка логов.

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

Самая полезная для нас информация находится в колонке Message - это непосредственно текстовое сообщение лога. Более удобно текстовое сообщение просматривать в окне детальной информации, которое можно открыть двойным кликом по строке списка логов, либо с помощью кнопки тулбара Info.

Теперь запустим наше тестовое приложение и последовательно нажмем обе кнопки.

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

Важно! Фильтрация осуществляется без учета регистра.

Есть несколько способов, как можно отобразить только те строки, которые относятся к нашему приложению. Самый простой вариант - отфильтровать по имени процесса. Вводим фразу TestLogging в окно Search и нажимаем клавишу Enter на клавиатуре. По-умолчанию создастся фильтр с типом Any и способом сравнения Containts. Теперь изменим тип фильтра с Any на Process, a Containts на Equal, что означает, что в списке логов останутся только те строки, текст которых в колоноке равен  TestLogging. 

На скриншоте видно, как строки переданные самой библиотекой FGX Native, так и те, которые были отправлены после нажатия на кнопки (отмечены стрелками). Теперь вы можете изучать собранную информацию просматривая сообщения. При необходимости вы можете сохранить выделенные строки в буфер обмена, либо передать их в другое приложение к помощью кнопки тулбара Share.

Логирование - мощный инструмент, который может пригодиться в самых трудных и запутанных ситуациях при поиске ошибок. 

Спасибо за внимание и удачной отладки!

Утилита располагается в каталоге "$(FGX)\Tools\Java2Delphi" и в ее состав входят:

1. Java2Delphi.exe - утилита.
2. config.template.json - Шаблон конфигурационного файла, в котором указаны правила формирования итоговых Delphi-модулей.
3. api-versions.android-28.xml - Файл с информацией об Android API 28 версии.
4. UsedGUID.txt - набор использованных GUID значений для Delphi интерфейсов.
5. run.bat - пакетный файл для запуска утилиты в любом месте.

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

Настройка

Управление утилитой идет при помощи конфигурационного json-файла, передаваемого через аргументы командной строки. Перед первым применением, необходимо:

1. Создать каталог в любом месте, где будут размещены все результаты генерации.

2. Скопировать файл "run.bat" в каталог (1).

3. Скопировать конфигурационный шаблон "config.template.json" в каталог (1) и назвать его "config.json" (название может быть любым).

4. Отредактировать базовые настройки Java окружения:

    "javap": "$(JAVA_HOME)\\bin\\javap.exe",
    "jar": "$(JAVA_HOME)\\bin\\jar.exe",

Java2Delphi использует две утилиты командной строки из Java SDK: "javap.exe" и "jar.exe". По умолчанию она использует переменную окружения $(JAVA_HOME). Если она у вас указана в Windows, то этот шаг можно пропустить. Если нет, то либо необходимо добавить ее с указанием местоположения Java JDK:

или напрямую указать пути к требуемым утилитам.

5. Указываем пути, куда будут помещены результаты генерации (опционально).

    "outputDir": ".\\Headers",
    "signatureOutputDir": ".\\Signatures",

• outputDir - каталог, куда будут помещены pas файлы с необходимыми обертками Java/Android Api.
• signatureOutputDir - вспомогательный каталог, куда будут помещены вспомогательные файлы с сигнатурами Java классов.

После выполнения первичной настройки файла конфигурации, приступим теперь к указанию, какие Java классы надо транслировать.

Правила генерации файлов

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

1. Jar-библиотеки, которые содержат необходимые Java классы.
2. Указать требуемые для перевода Java классы.
3. Указать, в какие Delphi модули разместить результирующие обертки.

1. Указываем нужные jar библиотеки.

Библиотеки указываются в секции jars:

"jars": [
        "E:\\Development\\Android\\platforms\\android-28\\android.jar"
    ],

По умолчанию, мы всегда подключаем jar библиотеку Android (по-этому не удаляйте ее, если хотите совместимости с Android API).
Вам необходимо откорректировать расположение данного файла с учетом вашей системы. 

2. Указываем требуемые для перевода Java классы.

Теперь мы должны сказать утилите в секции "classes", какие классы нас интересуют в этих библиотеках. Здесь необходимо использовать полное название Java типов с учетом названия пакета:

    "classes": [
        "java.lang.Object",
        "java.lang.CharSequence",
        "java.lang.String",
        "java.lang.Class",
        "java.lang.Boolean",
        "java.lang.Number",

        // Можно использовать * на конце пакета, чтобы выбрать все классы в данном пакете
        "android.provider.*",

        "android.view.animation.Animation",
        "android.view.animation.Animation.AnimationListener",
        "android.view.animation.Animation.Description",

        // и тд

По умолчанию шаблон включает в себя все классы из Android API, которые используются в FGX Native. Поэтому не удаляйте эти классы, если вы хотите получить заголовочные файлы, совместимые с уже существующими хедерами в FGX Native.

Добавьте сюда те, которые вас интересуют.

Поскольку в некоторых библиотеках могут быть 1000 классов. То обработка такого количества классов займет много времени. Помимо этого, вы получите гигантских размеров заголовочные файлы. Поэтому лучше добавлять только те классы, которые вам реально нужны для вызовов, а не все.

3. Указываем правила генерации Delphi модулей.

После того, как мы перечислили интересуемые нас Java классы, нам остается только указать, в какие Delphi модули их следует поместить. Это делается через "output":

"output": [
        {
            "name": "Android.Api.Text", // Название Делфи модуля Android.Api.Text.pas
            "uses": [ // Подключаемые Делфи модули в Android.Api.Text.pas
                "Android.Api.JavaTypes",
                "Android.Api.ActivityAndView"
            ],
            "classes": [ // Java классы, обертки над которыми будут добавлены в Android.Api.Text.pas
                "android.text.*"
            ],
            "exclude": [ // Опционально, можно исключить некоторые классы
                "android.text.method.*",
                "android.text.util.*",
                "android.text.ClipboardManager*"
            ]
        }
    ]

Генерация

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

Обратите внимание, что первый запуск занимает много времени, так как утилита генерирует сигнатуры Java классов (именно они используются для анализа структуры Java классов) и помещает их в каталог "signatureOutputDir". Однако, последующие запуски будут выполняться моментально, за счет того, что утилита не выполняет повторную генерацию сигнатур, если она уже есть. 

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

Разбор пропущенных классы/методов/полей

В процессе генерации утилита выполняет много сложной работы с анализом зависимостей, доступных типов и тд. Если какой-то из Java типов не указан в секции "classes", то утилита пропустит все его использования. При этом она сообщит об этом через лог.

Например: При генерации класса android.text.HTML были пропущены два метода fromHTML (они не попали в pas файлы), потому что не был указан тип android.text.Html$ImageGetter.

Skipped members of the Java type: android.text.Html
  Methods:
    - fromHtml(const AArg0: JString; const AArg1: Integer; const AArg2: JHtml_ImageGetter; const AArg3: JHtml_TagHandler): JSpanned; [android.text.Html$ImageGetter]
    - fromHtml(const AArg0: JString; const AArg1: JHtml_ImageGetter; const AArg2: JHtml_TagHandler): JSpanned; [android.text.Html$ImageGetter]

Если вам нужны эти методы, то необходимо в секцию classes добавить этот тип:

    "classes": [
        "android.text.Html.ImageGetter",

Обратите внимание, что в Java "$" - это разделитель для вложенных классов. Однако в конфигурационном файле вместо него надо использовать ".".

Мы выложили запись прошедшего 18 февраля вебинара по теме "Пробная сессия вопросов и ответов по FGX Native". Видео доступно на нашем YouTube канале.

На вебинаре обсуждались следующие темы:

1.  Android SDK/NDK;
2. Сервисы локации;
3. Асинхронная загрузка изображений в списках;
4. Планы на ближайшие релизы.

Как и обещал ранее, перед релизом 1.4.0.0 выкладываю инструкцию о миграции использования старого Android-Delphi моста на новый в 1.4.0.0. Это руководство актуально тем разработчикам, которые используют Android Api в своих проектах. В этой статье я рассмотрю только те аспекты в работе моста, которые изменились.

По большей части изменения были необходимы только в свете поддержки RAD Studio 10.4, в которой была полностью удалена поддержка модели памяти ARC.

1. Создание Java объекта:

Было:

var
  Intent: TJIntent;

Intent := TJIntent.Create;

Стало: 

var
  Intent: JIntent;

Intent := TJIntent.Create;

Все объявления переменных, атрибутов и тд должны быть теперь именованы без префикса "T". TJActivity -> JActivity.

2. Передача Java объектов через Java интерфейс:

Было:

// Декларация метода. Принимает атрибут интерфейсного типа CharSequence.
TJTextView.setError(const AArg0: JCharSequence);

// Java cтрока TJString реализует интерфейс JCharSequence. Поэтому передача идет напрямую (в старой версии моста).
View.setError(StringToJString(Control.Error));

Стало:

// Декларация метода. Принимает атрибут интерфейсного типа CharSequence.
TJTextView.setError(const AArg0: JCharSequence);

// Теперь обертка Java cтроки TJString НЕ реализует явно интерфейс JCharSequence. Поэтому необходима явная конвертация JString -> JCharSequence
View.setError(TJCharSequence.Wrap(StringToJString(Control.Error)));

// Или можно воспользоваться хелпером из FGX.Helpers.Android.pas
View.setError(StringToJCharSequence(Control.Error));

3. Работа с Java массивами:

При создании экземпляра Java массива (TJavaArray<T>) вся работа теперь осуществляется через интерфейс IJavaArray<T>.

Было:

var
  Points: TJavaArray<Single>;
 
Points := TJavaArray<Single>.Create(0);
FCanvas.drawLines(Points, FStroke);

Стало:

var
  Points: IJavaArray<Single>;
 
Points := TJavaArray<Single>.Create(0);
FCanvas.drawLines(Points, FStroke);

4. Работа с Java-листенерами:

Если вы реализовывали свои листенеры через наследование класса Java.Bridge.TJavaLocal, то в 1.4.0.0 листенеры теперь поддерживают счетчик ссылок через Delphi IInterface. Это значит, что при создании листенера, его необходимо сохранять в переменную/поле интерфейсного типа, а не объектного.

Было:

  TfgAndroidCameraStateListener = class(TJavaLocal, JCameraStateListener)
  private
    [Weak] FCamera: TfgAndroidCamera;
  public
    constructor Create(const ACamera: TfgAndroidCamera);
    { JCameraStateListener }
    procedure onClosed(const AArg0: JCameraDevice);
    procedure onDisconnected(const cameraDevice: JCameraDevice);
    procedure onError(const cameraDevice: JCameraDevice; const errorCode: Integer);
    procedure onOpened(const cameraDevice: JCameraDevice);
  end;

var
  FStateListener: TfgAndroidCameraStateListener

FStateListener := TfgAndroidCameraStateListener.Create(Self);
FStateCallback.setListener(FStateListener);

Стало:

  TfgAndroidCameraStateListener = class(TJavaLocal, JCameraStateListener)
  private
    [Weak] FCamera: TfgAndroidCamera;
  public
    constructor Create(const ACamera: TfgAndroidCamera);
    { JCameraStateListener }
    procedure onClosed(const AArg0: JCameraDevice);
    procedure onDisconnected(const cameraDevice: JCameraDevice);
    procedure onError(const cameraDevice: JCameraDevice; const errorCode: Integer);
    procedure onOpened(const cameraDevice: JCameraDevice);
  end;

var
  FStateListener: JCameraStateListener

FStateListener := TfgAndroidCameraStateListener.Create(Self);
FStateCallback.setListener(FStateListener);

В противном случае, экземпляр листенера FStateListener будет удален сразу же после вызова 

FStateCallback.setListener(FStateListener);

Что в свою очередь приведет к последующим падения приложения. Так как сработает механизм подсчета ссылок Delphi интерфейсов. 

5. Конвертация string <-> JString:

До RAD Studio 10.4 мобильные компиляторы поддерживали добавление операторов неявного преобразования. Это в свою очередь позволило нам реализовать автоматическую конвертацию "на лету" Delphi string <-> Java JString. В 10.4 эту возможность убрали вместе с ARC, так как неявное преобразование реализуется через ARC. Поэтому теперь нужно явно вызывать преобразование строк через StringToJString и JStringToString:

Было:

TjUri.parse('tel:+');

Стало:

uses
  FGX.Helpers.Android;

TJUri.parse(StringToJString('tel:+'))

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

Мы постоянно работаем над расширением возможностей и предоставляем новый функционал. Однако, с учетом молодости проекта FGX Native по нему не так много информации.

Эффективность использования зависит от ваших умений и навыков. А для развития этих умений и навыков нужны обучающие материалы ?‍?, примеры правильного использования.

Мы решили провести небольшой пробный эксперимент и для начала записать пару обучающих видео уроков по использованию FGX Native.

Рад представить вам первый, самый базовый урок для начинающих о начале разработки мобильных приложений с FGX Native и Delphi. В уроке рассматривается:

1. Настройка рабочего окружения;
2. Создание Hello World мобильного приложения;
3. Запись и чтение логов в FGX Native.

Следующий урок будет о системе выравнивания Flex в FGX Native. Рассмотрим типовые задачи и их решения. Сверстаем сложный макет приложения. Чтобы не пропустить, подписывайся на новый официальный канал FGX Native: https://www.youtube.com/channel/UCd818Et5Fi0Iy53YouBce3w 

Приятного обучения:

classes.dex - обязательный для android приложения файл, содержащий все используемые в приложении Java библиотеки.

Ранее конечное приложение собиралось с готовым classes.dex файлом поставляемым вместе с библиотекой FGX Native, что создавало для разработчиков некоторые проблемы при использовании сторонних jar библиотек. Процесс добавления был нетривиален и требовал глубокого погружения в документацию, процессы сборки и микширования classes.dex.

Механизм автоматической генерации уже используется в FMX проектах, однако, по ряду причин и ограничений, накладываемых IDE, он не мог быть задействован для FGX Native.

Мы пересмотрели пользовательский опыт и рады представить вам новый удобный диалог для управления jar библиотеками, используемыми в проекте.

Вызвать диалог можно двумя способами:

1. Через главное меню: Project -> FGX Android Libraries
2. Через контекстное меню панели Projects. Target Platforms -> Android (32/64 bits) -> Libraries -> Setup Android Libraries.

Всё, что необходимо для включения в ваше приложение сторонней jar библиотеки — это добавить её в разделе «Все модули» или «Пользовательские».

Для возврата списка библиотек к первоначальноиу состоянию воспользуйтесь кнопки «По-умолчанию».