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

Предварительно мы разработали полное руководство по темам:

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

Внимание: В данном релизе 1.19.0.0 введены изменения, которые ломают совместимость проектов этой версии со старыми версиями. Поэтому переход на 1.19.0.0 является необратимым. Перед тем, как открыть ваш проект необходимо ОБЯЗАТЕЛЬНО сделать резервную копию на случай необходимости временного возврата к предыдущим версиям.

Новый ресурс - тема

Не смотря на то, что есть несколько статей о том, как настраивать темы и как их использовать, концепция темы не была до конца закончена. Связано это прежде всего было с тем, что как таковой сущности "тема" в FGX Native не существовало до 1.19.0.0. Это создавало внутренние трудности в реализации FGX Native и требовало использовать не всегда очевидные подходы в определении, что есть тема в FGX Native.

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

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

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

(1) Сгенерировать тему (по старому способу). Контекстное меню дерева ресурсов -> "Сгенерировать тему".

(2) Добавить пустую тему. Все ресурсы темы вы должны добавить самостоятельно по вашему усмотрению. Контекстное меню дерева ресурсов -> "Добавить тему".

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

(3) Сконвертировать каталог с ресурсами в тему. Контекстное меню дерева ресурсов -> "Конвертировать в тему".

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

Доступ к темам

На уровне TfgAssetsManager добавлен новый метод, позволяющий получить список тем:

/// <summary>Возвращает названия всех доступных тем.</summary>
function GetThemesNames: TArray<TfgThemeName>;

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

Теперь тема может быть применена на уровне приложения без необходимости указывать ее на уровне каждой формы. Для этого добавлено новое свойство 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>
/// <remarks>
///   Если приложение не поддерживает темную тему (Темная тема не включена в настроках проекта), то вид темы
///   будет всегда <c>Light</c>.
/// </remarks>
property ThemeKind: TfgThemeKind read FThemeKind write SetThemeKind;

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

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

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

Использование файла Assets.Consts

Начиная с 1.19.0.0 изменена логика генерации файла констант с именами ресурсов.

1. В этом релизе мы провели унификацию названий полей.

   1. R.Fonts -> R.Font

   2. R.Images -> R.Image

   3. R.LottieAnimations -> R.LottieAnimation

   4. R.Files -> R.&File

Так же теперь R.Theme не возвращает ресурсы текущей темы. За это отвечает новое поле R.CurrentTheme, которое возвращает имя ресурса темы в зависимости от теущей темы приложения. Таким образом, вам больше не нужно вручную динамически формировать имя ресурса в зависимости от светлой или темной темы.

R.Theme теперь выдает доступ ко всем темам приложения.

    TfgCurrentTheme = record
      /// <summary>Identifiers with current theme colors assets.</summary>
      class var Color: TfgThemeColors;
    end;

    TfgThemes = record
      class var ThemeDark: TfgThemeThemeDark;
      class var ThemeLight: TfgThemeThemeLight;
    end;    

    /// <summary>Identifiers with current theme assets.</summary>
    class var CurrentTheme: TfgCurrentTheme;

    /// <summary>Identifiers with themes names.</summary>
    class var Theme: TfgThemes;

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

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

1. Адаптированное имя под текущую тему. Если вы хотите, чтобы при смены темы, используемый ресурс так же брался из новой темы, то в качестве разделителя названия темы и ресурса нужно использовать ":".
   Например: "Themes\Light\Green:Background".

2. Фиксированное имя. Если вы не хотите изменения названия ресурса темы при смене темы, то используйте старый способ указания имени "Themes\Light\Green\Background".

Миграция

Важно: Перед выполнением миграции вашего проекта ОБЯЗАТЕЛЬНО сделать резервную копию проекта, чтобы в случае чего можно было откатиться обратно.

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

Мастер:

1. Распознает все свойства (из библиотеки), связанные с ресурсами.

2. Извлекает текущее значение имени ресурса.

3. Для DFM/XFM файлов форм и фреймов проверяет имя ресурса на предмет принадлежности темы - вхождение слова "Theme" (без учета регистра). Если у вас в названии темы не фигурирует слово "Theme", пожалуйста, сообщите в комментариях под этой статьёй.

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

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

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

Адаптация DFM/XFM файлов

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

Допускаем, что какие-то варианты могут быть не учтены, поэтому, важно делать резервные копии. По умолчанию мы создаем копию затрагиваемых оригинальных файлов и добавляем окончание ".backup". Если вы уверены в предложенных изменения, вы можете отключить резервные копии файлов через снятия галки чекбокса в футере окна.

Адаптация PAS файлов

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

Вот несколько советов, которые вам помогут:

1. Если вы используете константы из файла Assets.Consts.R, то в этом релизе мы провели унификацию названий полей. Если вы используете программный доступ к этим ресурсам, переименуйте их согласно схеме выше.

   1. R.Fonts -> R.Font

   2. R.Images -> R.Image

   3. R.LottieAnimations -> R.LottieAnimation

   4. R.Files -> R.&File

2. Изменена логика использования R.Theme. Теперь она содержит не ресурсы текущей темы, а все темы приложения, с возможностью получить доступ к ресурсам каждой темы. Если вы используете в проекта R.Theme, вам необходимо его заменить на R.CurrentTheme.

Важно: Адаптацию pas файлов нужно выполнить самостоятельно.

TfgControl.UpdateTheme

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

В новой версии 1.19.0.0 этого метода больше нет, так как теперь адаптация применения темы выполняется библиотекой самостоятельно. Поэтому вам НЕ ТРЕБУЕТСЯ больше вызывать этот метод. Поэтому удалите использование этого метода из вашего проекта.

Дизайнер формы

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

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

1. Темная и светлая темы были добавлены в дизайнере ресурсов

2. Темная и светлая темы были указаны в настройках проекта.

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

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

Если ресурс применяется из темы, то в его имени используется ":", как разделитель названия темы и ресурса внутри него.

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

(1) Теперь при выделении компонента, отображается его имя и размер. А при перетаскивании имя теперь не выводится.

Если вы нехотите, чтобы выводился размер или название. Вы можете отключить это поведение в общих настройках среды: Tools -> Options -> Third Party -> Form Designer

(2) Добавлена возможность быстрого переключения формы в текстовый режим. Теперь при нажатии на кнопку "Как текст", дизайнер переключиться на режим отображения текста формы.

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

Заключение

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

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

Работа с состоянием канвы

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

Напомню, что при работе с канвой TfgCanvas разработчик постоянно меняет ее параметры (настройки кисти, матрицы трансформации и т.д.). Поэтому, очень удобно иметь контрольные точки при отрисовке, к которым можно сбросить состояние канвы, чтобы не устанавливать все настройки заново. Для этих целей используются методы SaveState / RestoreState. Метод SaveState возвращал объект состояния, который в дальнейшем нужно было передавать в парный метод RestoreState для восстановления состояния. В новой версии, объект состояния больше не нужно использовать.

Было:

var
  State: IFGXSaveState;

State := ACanvas.SaveState;
try
  // Задаем параметры отрисовки
  // Выполняем отрисовку  
finally 
  ACanvas.RestoreState(State);
end;

Стало:

ACanvas.SaveState;
try
  // Задаем параметры отрисовки
  // Выполняем отрисовку  
finally 
  ACanvas.RestoreState;
end;

Теперь при вызове SaveState, канва автоматически сохраняет состояние во внутренний стек, а при вызове RestoreState извлекает его из стека и восстанавливает.

Зачем?

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

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

{ State 1 }
ACanvas.SaveState; // Save State 1
{ State 2 }    
try
  // Задаем параметры отрисовки
  // Выполняем отрисовку  
  ACanvas.SaveState; // Save State 2
  try
    // Другая вложенная отрисовка
  finally 
    ACanvas.RestoreState; // Rollback to State 2
  end;
finally 
  ACanvas.RestoreState; // Rollback to State 1
end;

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

Обрезание по пути

Одна из самых интересных графических возможностей - это ограничение области отрисовки на канве произвольной фигурой или путем. Накладывание ограничения выполняется при помощи нового метода TfgCanvas.ClipPath.

    /// <summary>
    ///   Выполняет накладывание области отсечения будущих команд отрисовки. Чтобы отменить наложенную область ограничения
    ///   необходимо использовать методы <c>SaveState</c> / <c>RestoreState</c>. Перед наложение области сохранить состояние
    ///   канвы, а после завершения работы - восстановить.
    /// </summary>
    procedure ClipPath(const APath: TfgPath);

Рассмотрим пример, где мы хотим нарисовать два овала красного и синего цветов. Красный обрезать по вписанному овалу в область отрисовки, а синий - не обрезать.

Тогда код по отрисовке будет выглядить так:

procedure TFormMain.fgPaintBoxPaint(Sender: TObject; const ACanvas: TfgCanvas);
var
  CirclePath: TfgPath;
begin
  // Сохраняем состояние, чтобы в будущем убрать область отсечения
  ACanvas.SaveState;
  CirclePath := TfgPath.Create(nil);
  try
    // Формируем область отсечения в виде эллипса, вписанного в область отрисовки.
    CirclePath.AddArc(fgPaintBox.LocalBounds, 0, 360)
              .ClosePath;
    ACanvas.ClipPath(CirclePath);

    // Рисуем красный круг, он будет обрезан 
    ACanvas.Fill.Kind := TfgBrushKind.Solid;
    ACanvas.Fill.Color := TAlphaColorRec.Red;
    ACanvas.FillCircle(TPointF.Create(0, fgPaintBox.Height / 2), fgPaintBox.Height / 2);
  finally
    CirclePath.Free;
  end;
  // Сбрасываем область отсечения
  ACanvas.RestoreState;
  
  // Рисуем синий круг без ограничений
  ACanvas.Fill.Color := TAlphaColorRec.Blue;
  ACanvas.FillCircle(TPointF.Create(fgPaintBox.Width, fgPaintBox.Height / 2), fgPaintBox.Height / 2);

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

У нас есть изображение, которое мы хотим вывести в круглом варианте и декорировать белым кольцом. Код может выглядить следующим образом. Фотография находится в менеджере ресурсов.

procedure TFormMain.fgPaintBox1Paint(Sender: TObject; const ACanvas: TfgCanvas);
var
  PhotoBitmap: TfgBitmap;
  FramePath: TfgPath;
  FrameBounds: TRectF;
begin
  // Извлекаем изображение
  if not TfgAssetsManager.Current.TryGetBitmap(R.Bitmap.PHOTO, PhotoBitmap) then
    Exit;

  ACanvas.SaveState;
  try
    // Формируем круглую форму рамки и рисуем битмап
    FramePath := TfgPath.Create(nil);
    try
      FrameBounds := fgPaintBox1.LocalBounds;
      FramePath.AddArc(FrameBounds, 0, 360)
              .ClosePath;
      ACanvas.ClipPath(FramePath);
      ACanvas.DrawBitmap(PhotoBitmap, FrameBounds);
    finally
      FramePath.Free;
    end;
  finally
    ACanvas.RestoreState;
  end;

  // Декорируем белым кольцом
  ACanvas.Stroke.Thickness := 10;
  ACanvas.Stroke.Color := TAlphaColorRec.White;
  ACanvas.DrawCircle(FrameBounds.CenterPoint, FrameBounds.Width / 2 - 10);
end;

Заполнение пути

Есть как минимум два способа заливки кривых фигур по пути TfgPath. По умолчанию, в FGX Native использовался способ заливки правой фигуры. Теперь же вы можете выбирать способ заливки и указывать его через свойство TfgCanvas.FillPathRule. Помимо этого, теперь это свойство так же доступно в компоненте TfgSvgPath.

Детали о двух способах заливки доступны здесь.

Внимание: Данная настройка пока не поддерживается в дизайнере, так как не поддерживается на уровне FMX, которая используется для реализации в дизайнере.

Штрихи кисти

Теперь вы можете использовать свои варианты штрихов при отрисовки кривых. На уровне кисти TfgStrokeBrush доступен новый вид линии - Dash = Custom. Параметры штриха задаются через новый метод TfgStrokeBrush.SetCustomDash.

procedure TfgStrokeBrush.SetCustomDash(const ADash: TDashArray; const AOffset: Single);

• ADash - это массив парных значений. Первое - это длина штриха, второе - длина пробела.

SVG

В этом релизе расширена поддержка параметров SVG, а именно добавлена поддержка следующих атрибутов: stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, fill-rule.

Редактор градиента

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

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

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

2. Менять тип градиента - линейный или радиальный

3. Менять направление градиента при помощи точек на правой панели просмотра градиента.

4. Сбросить параметры градиента до значений по умолчанию.

Итог

В следующей статье нас ждет обзор новой функции перетаскивания компонентов Drag & Drop.

Если вас интересует, сколько пользователей используют ваше приложение, как часто, как именно и т.д., то вы можете использовать аналитику приложения от Firebase Google Analytics. Эта возможность была добавлена в 1.18.5.0. 

Начиная с версии 1.18.9.0, мы добавили поддержку сбора аналитик так же и от сервиса Yandex AppMetrica. Ранее мы выкладывали инструкции, как это можно сделать самостоятельно, отдельно настраивать приложение, отдельно использовать разное API для отправки метрик. Однако, мы полностью интегрировали эту поддержку и теперь ей так же легко воспользоваться, как и Firebase Google Analytics. Но, обо всем по порядку.

Регистрация приложения в Yandex AppMetrica

1. Регистрируемся на сервисе, если не сделали этого ранее: https://appmetrica.yandex.ru/

1. Создаем новый проект в учетной записи AppMetrica и даем ему название:

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

Теперь переходим к настройкам вашего проекта, путем перехода в пункт меню Settings -> Main (Настройки -> Главные) в левой панели.

Если нам необходимо связать наш проект с iOS приложением. Среди большого числа настроек нас интересует вкладка "Основное" -> "Universal Link". Нам необходимо заполнить поля Bundle ID и App Prefix на основании данных вашего iOS приложения, зарегистрированного в портале Apple Developer.

• AppPrefix - это уникальный префикс, выданный Apple при участии в программе iOS разработчиков. Он же добавляется к названию пакета iOS приложения, тем самым формируя уникальное название приложения. Его можно найти в личном кабинете Apple на вкладке Membership:
  
• Bundle ID - это идентификатор пакета вашего FGX Native приложения. Если приложение уже зарегистрировано, то вы можете найти название пакета на сайте Apple в разделе Identifiers. 
  

После того, как вы указали все данные, необходимо включить "Использовать Universal Link" - это специальная технология, которая призвана обезопасить передачу статистики с устройств пользователя на сервера Yandex.

Чтобы закончить настройку, необходимо включить поддержку Universal Link на стороне профиля разработчика Apple. Для этого необходимо открыть настройки приложения в консоли Apple и включить поддержку "Associated Domains".

Теперь ваш профиль приложения сконфигурирован для приема статистики с вашего приложения. Переходим к подключению Yandex AppMetrica к FGX Native приложению. 

Подключение и настройка Yandex AppMetrica в FGX Native приложении

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

1. Переходим в настройки приложения Project -> FGX Options... -> Services (Сервисы) -> Yandex AppMetrica 

Для всех требуемых конфигураций Android 32-bits / Android 64-bits / iOS Device 64-bit включаем поддержку сервиса (Enabled - 1) и указываем API ключ (2).

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

2. Бросаем на главную форму или дата модуль, который создается при запуске приложения, новый компонент TfgAppMetricaAnalytics. Через него же можно будет отправлять пользовательские события.

После чего все готово и можно запускать приложение.

Как посмотреть статистику

Чтобы посмотреть аналитику, нужно перейти в личный кабинет Yandex AppMetrica: https://appmetrica.yandex.ru/overview и уже на главной странице можно будет увидеть информацию о количестве установок вашего приложения, аудитории, падениях приложения и т.д.

Важно: первые отчеты в AppMetrica появляются с небольшой задержкой, а не в режиме реального времени. Если приложение запустилось без видимых ошибок, то подождите пару минут появления метрик на портале https://appmetrica.yandex.ru/application

В разделе Technologies/Технологии будут доступны интересные технические отчеты о версиях SDK, приложениях, размерах экранов, типах устройств и многое другое.

Отслеживание экранов приложения и отправка пользовательских метрик

В интеграции сервиса у нас встроены две дополнительные возможности:

1. Это отслеживания открытых форм/экранов вашего приложения.

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

Типичный пример отслеживания открытия формы, может выглядеть так:

procedure TFormMain.fgFormShow(Sender: TObject);
begin
  fgAppMetricaAnalytics1.SetCurrentScreen(Name, ClassName);
end;

После запуска приложения, в личном кабинете AppMetrica на вкладке Reports / Отчеты -> Events / События можно наблюдать названия открытых экранов:

2. Для отправки своего события на сервер, можно воспользоваться методом LogEvent. Доступно две версии этого метода: простой и с параметрами:

    /// <summary>
    ///   Отправляет на сервер AppMetrica событие с именем <c>AName</c>, параметрами c именами <c>AKeys</c> и значениями
    ///   <c>AValues</c>.
    /// </summary>
    procedure LogEvent(const AName: string; const AKeys: TArray<string>; const AValues: array of const); overload;

    /// <summary>Отправляет на сервер AppMetrica событие с именем <c>AName</c>.</summary>
    procedure LogEvent(const AName: string); overload;

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

LogEvent('Положили в корзину', ['product_id', 'product_name', price], [1423, 'Sony PlayStation 5', 60000]);

Решение возможных проблем

Приложение падает на старте

Если приложение при запуске падает, то скорее всего, вы:

1. либо не указали API ключ
2. или же указали некорректный ключ
3. либо не включили сервис в настройках проекта

Еще раз проверьте, что все пункты выше выполнены. Так же, при таком падении, можно узнать причину падения в логе устройства, что на iOS, что и на Android.

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

Quote

Отдельно хочу отметить, что при использовании в приложении компонента TFDConnection с драйвером SQLite (TFDConnection.DriverName=SQLite), по умолчанию устанавливается режим статической привязки движка SQLite. Что в свою очередь, после интеграции YandexAppMetrica, приводит к падению 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.

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

Заключение

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

Близится к своему завершению 2024 год, и, не смотря на то, что пришло время подводить итоги и готовиться к праздникам, мы ни на секунду не прекращаем развитие и усовершенствование библиотеки FGX Native. Финальным в этом году станет релиз под номером 1.18.8.0, который будет содержать не только исправления ошибок, но и привнесёт ряд новых приятных возможностей. Одной из таких возможностей станет новый сервис биометрической аутентификации. 

Что такое биометрическая аутентификация

В последние годы биометрическая аутентификация на смартфонах стала неотъемлемой частью повседневной жизни. Эта технология позволяет пользователям разблокировать устройства и авторизоваться в приложениях, используя уникальные физические характеристики, такие как отпечаток пальца, лицо или даже радужная оболочка глаза. Биометрическая идентификация заменяет или дополняет традиционные пароли и PIN-коды, делая процесс аутентификации быстрее и удобнее. 
Преимущества биометрической аутентификации

1. Удобство: Биометрические методы позволяют разблокировать телефон или войти в приложение быстрее, чем вводить пароль.
2. Повышенная безопасность: Физические характеристики сложно подделать или украсть, что делает биометрию надежнее традиционных паролей.
3. Персонализированный доступ: Биометрическая аутентификация позволяет настроить телефон так, чтобы только владелец мог получить к нему доступ.

Пример работы биометрической аутентификации в приложении

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

Компонент TfgBiometricAuthentication

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

Настройки

Title  - основной текст, объясняющий для чего именно осуществляется запрос аутентификации. Старайтесь не указывать имя приложения, потому что, как правило, оно будет отображено самой ОС.
Fallback.Kind - Тип резервного действия на случай, если биометрическая аутентификация завершается неудачей. Возможны следующие варианты:

• Passcode - Использовать ключ (пароль, PIN-код, графический ключ).
• Action - Пользовательское действие.
• None - Не использовать резервное действие.

Fallback.Action - Этот текст будет отображен на кнопке, если в качестве резервного действия выбрано пользовательское действие.
Subtitle - Подзаголовок. Актуально только для Android.
Description - Описание. Актуально только для Android. 

Методы

Authenticate - Запуск асинхронного процесса биометрической аутентификации с учётом выбранных настроек. Функция возвращает булево значение в зависимости от успешности запуска процесса аутентификации. Чтобы узнать причину неудачного запуска вы можете проанализировать состояние AInfo.State в перегруженной версии метода.  Результат процесса аутентификации будет передан в одном из событий компонента.
GetBiometricInformation - Получение информации о состоянии и типе биометрической аутентификации. При запросе передается флаг AAllowUsePasscode, который будет учитывать
планируете ли вы разрешать использовать ключ (пароль, PIN-код, графический ключ) в качестве резервного способа аутентификации. Результат возвращается в виде записи TfgBiometricInfo.
TfgBiometricInfo.Kind - Тип биометрической аутентификации, доступной на устройстве:

• TouchID - Биометрическая аутентификация по отпечатку пальца.
• FaceID - Биометрическая аутентификация по лицу.
• Iris - Биометрическая аутентификация по радужной оболочке глаза.

TfgBiometricInfo.State - Текущее состояние биометрической аутентификации, доступной на устройстве. 

• Error - При определении состояния произошла ошибка.
• Supported - Биометрическая аутентификация поддерживается на устройстве.
• Unsupported - Биометрическая аутентификация не поддерживается на устройстве.
• NotEnrolled - Пользователь не настроил биометрическую аутентификацию.
• Unavailable - Биометрическая аутентификация недоступна в данный момент.
• Locked - Биометрическая аутентификация заблокирована (например превышено количество попыток).

Важно: в случае, если вас интересует только биометрическая аутентификация и вы не планируете разрешать использовать ключ в качестве резервного варианта, устанавливайте параметр AAllowUsePasscode = False. В противном случае при ненастроенной биометрической аутентификации и наличии ключа вы получите State = Supported, что может создать впечатление доступности биометрической аутентификации.

События

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

Использование биометрической аутентификации без компонента

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

class function TfgBiometricAuthenticationFactory.CreateBiometricAuthentication: IFGXBiometricAuthentication;
var
  LService: IFGXBiometricAuthenticationService;
begin
  if not TfgPlatformServicesManager.RequestService(IFGXBiometricAuthenticationService, LService) then
    raise EfgPlatformService.CreateFmt(SServiceIsNotSupported, ['IFGXBiometricAuthenticationService']);

  Result := LService.CreateBiometricAuthentication;
end;

Интерфейс IFGXBiometricAuthentication  реализует Fluent interface, что позволяет удобно настраивать аутентификацию и запускать её.

TfgBiometricAuthenticationFactory.CreateBiometricAuthentication
    .SetFallbackAsPasscode;
    .SetSubtitle('Subtitle')
    .SetDescription('Description')
    .Execute(BiometricAuthenticationResul, 'Title');

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

Настройки проекта

Есть некоторые отличия в настройках проекта между Android и iOS.
Для Android необходимо поставить галочку Enabled, чтобы при сборке проекта добавилась необходимая библиотека-зависимость.
Для iOS необходимо описать причину, почему вашему приложению необходим доступ к биометрической аутентификации. Данный текст будет показан пользователю при первой попытке приложения использовать биометрическую аутентификацию.

Минимально поддерживамые версии

Android: Android 6 (API level 23)
iOS: iOS 8.0

Заключение

Для того, чтобы лучше ознакомиться с возможностями нового сервиса мы подготовили демо пример "Authentication - Biometric\BiometricAuthentication.dproj", который дополнит коллекцию примеров, входящих в дистрибутив библиотеки FGX Native.

Спасибо за внимание и с наступающими вас новогодними праздниками!

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

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

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

Именно по этой причине в этом релизе 1.18.0.0 нас ждет новое окно настроек проекта.

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

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

Анимированная заставка Android

Первым главным нововведением нового окна настроек являются анимированные заставки для Android 12+. 

• https://developer.android.com/develop/ui/views/launch/splash-screen

Начиная с Android 12+ структура заставок изменилась и теперь появилась возможность использовать современные анимированные заставки. Раньше была статья, которая описывала детально ручные правки, которые можно было внести 

Сейчас достаточно включить опцию и настроить внешний вид заставки. Описание параметров смотрите в официальной документации Андроида.

Eсли ваше приложение запускается на устройствах с Android 12+ будет использоваться анимированная заставка, на старых версиях Android, будет использоваться статическая заставка.

Добавлен новый пример: "Android Api" -> "Анимированная заставка"

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

Google Maps

Было: Раньше ключ карты указывался в стандартном окне настроек проекта в разделе VersionInfo. Помимо этого необходимо было включить поддержку карт в разделе "Entitlements List" -> "Maps Service".

Стало: Теперь включение сервиса карт и API ключ указываются в разделе "Сервисы" -> "Google Maps".

Что нужно сделать: Дополнительных действий не требуется. При открытии проекта в этой версии ключ будет автоматически перенесен. Однако, после этого ключ надо менять только в новом окне настроек.

Facebook Login

Было: Раньше при использовании "Facebook Login" необходимо было вручную вносить настройки Facebook Login в файлы "strings.xml" и "info.plist.TemplateiOS.xml". Так же требовалось вручную добавлять зависимость на Android библиотеку и править Android манифест.

Стало: Достаточно включить сервис в новых настройках "Сервисы" -> "Аутентификация" -> "Facebook Login" и указать требуемые параметры.

Что нужно сделать: Если вы уже используете Facebook Login, то вы либо можете оставить все, как есть. Либо же перейти на новую настройку. Для этого нужно откатить все изменения сделанные в статьях:

• Сервисы аутентификации. Аутентификация с помощью Facebook Login (Android)
• Сервисы аутентификации. Аутентификация с помощью Facebook Login (iOS).

И выполнить включение и ввод настроек в новом окне.

VK Login

Было: Раньше при использовании "VK Login" необходимо было вручную вносить настройки в файл "info.plist.TemplateiOS.xml".

Стало: Достаточно включить сервис в новых настройках "Сервисы" -> "Аутентификация" -> "VK Login" и указать требуемые параметры.

Что нужно сделать: Если вы уже используете VK Login, то вы либо можете оставить все, как есть, либо же перейти на новую настройку. Для этого нужно откатить все изменения сделанные в статьях:

• Сервисы аутентификации. Аутентификация с помощью VK Login (iOS)

И выполнить включение и ввод настроек в новом окне.

Заключение

В следующих релизах мы будем переносить значимые параметры - такие как настройки Push-уведомлений, реклама, аналитика и тд.

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

Перейдем непосредственно к настройке приложения.

1. Добавить библиотеку-зависимость Facebook SDK в настройках проекта с помощью диалога Project -> FGX Android Libraries -> Добавить библиотеку-зависимость.

com.facebook.android:facebook-login:16.2.0

(на момент написания статьи (03/09/2023) актуальная версия SDK 16.2.0)

2. Создаем текстовый файл в папке проекта с именем strings.xml, в который добавляем константы, взятые из настроек приложения на сервере.

<resources>
    <string name="app_name">APP-NAME</string>
    <string name="facebook_app_id">APP-ID</string>
    <string name="fb_login_protocol_scheme">fb1234</string>
    <string name="facebook_client_token">CLIENT-TOKEN</string>
</resources>

где APP-ID - App ID из шага 8a
CLIENT-TOKEN - Client token из шага 8b
APP-NAME - имя приложения

3. Добавляем файл strings.xml в деплой приложения (Project -> Deployment) для обеих платформ Android32/64. Remote path должен быть res\values\.

4. Вносим изменения в шаблон манифеста AndroidManifest.template.xml сразу после плейсхолдера <%fgx-activities%> и до основной activity

        ...
        <%fgx-activities%>

          
        <!--begin insertion-->  
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
        <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>

        <activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                    "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />
            
        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
        <!--end insertion-->    
          
        <activity android:name="com.embarcadero.firemonkey.FMXNativeActivity"
        ....

Внимание! Из-за ошибки в Facebook Login SDK пока недоступно получение дополнительных данных таких как email, имя и т.д. На данный момент в случае успешной аутентификации сервис возвращает только основной токен.

Мы следим за исправлением этой ошибки и сообщим вам, как только это произойдет.

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

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

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

Для того, чтобы воспользоваться методами необходимо подключить модуль "FGX.Bitmap.Helpers" в секцию uses. 

Кадрирование - Crop

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

Предлагается два метода:

1. CreateCropped - создает новый экземпляр битмапа, не изменяя исходный
2. Crop - модифицирует исходный экземпляр битмапа.

/// <summary>
///   Создает новое изображение сформированное из указанной области. <c>ARegion</c> - физические координаты области.
/// </summary>
function CreateCropped(const ARegion: TRect): TfgBitmap;

/// <summary>Выполняет вырезание указанной области изображения. <c>ARegion</c> - физические координаты области.</summary>
/// <remarks>
///   <para>
///     Если координаты области <c>ARegion</c> выходят за пределы физического размера изоюбражения, то они отсекаются
///     по размеру изображения.
///   </para>
///   <para>
///     Если результирующая область имеет нулевой размер, то текущий битмап принимает нулевой размер.
///   </para>
/// </remarks>
procedure Crop(const ARegion: TRect);

Повороты - Rotate

Методы поворота позволяют повернуть изображение на углы (90 - 180 - 270) градусов.

Предлагается два метода:

1. CreateRotated - создает новый экземпляр битмапа, не изменяя исходный
2. Rotate - модифицирует исходный экземпляр битмапа и выполняет поворот.

/// <summary>Созадет новое изоюражение и поворачивает его на указанный угол.</summary>
function CreateRotated(const AAngle: TfgRotation): TfgBitmap;

/// <summary>Поворачивает изображение на указанный угол.</summary>
procedure Rotate(const AAngle: TfgRotation);

Отражение - Flip

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

/// <summary>Симметричное отражение изображения по горизонтальной оси.</summary>
procedure FlipHorizontal;

/// <summary>Симметричное отражение изображения по вертикальной оси.</summary>
procedure FlipVertical;

Создание превью - Thumbnail

Очень часто требуется получить из исходного битмапа большого размера превью ограниченного размера. Для этого мы предлагаем метод:

/// <summary>
///   Создает миниатюрное изображение, которое может использовать в виде превью. Изображение вписывается в
///   указанный размер с сохранение пропорций и центрируется.
/// </summary>
/// <remarks>Если передается нулевой размер, то метод поднимает исключение.</remarks>
function CreateThumbnail(const ASize: TSize): TfgBitmap;

Перекрашивание - Tint

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

Предлагается два метода:

1. CreateTinted - создает новый экземпляр битмапа, не изменяя исходный
2. ApplyTintColor - модифицирует исходный экземпляр битмапа и выполняет поворот.

/// <summary>Создает новое изображение и применяет указанный оттенок.</summary>
function CreateTinted(const ATintColor: TAlphaColor): TfgBitmap;

/// <summary>Задает оттенок изображения. Операция не отменяемая.</summary>
procedure ApplyTintColor(const ATintColor: TAlphaColor);

Мета информация EXIF

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

uses  
  FGX.Exif;
  
var 
  Properties: TfgExifProperties;
  
  if TfgExif.TryLoad(AFileName, Properties) then
  begin
    // Properties.Rotation;
    // Properties.Rotation.ToRotation - возвращает TfgRotation, который можно передать в метод TfgBitmap.Rotate.
  end;

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

Уверены данные нововведения позволят вам сократить ваш код.

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

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

Компонент представляет собой слой, который можно наложить поверх редактируемого объекта. Например, TfgImage.  Для удобства расположения, можно воспользоваться якорями FlexBox - свойство RelativePosition.

При помощи точек выделения можно интерактивным путем расширить регион. А получить или указать его координаты можно при помощи свойства TfgRegionPicker.Region. При интерактивном изменении области вызывается событие OnChanged. 

При первом отображении компонента можно отцентрировать регион при помощи свойства RegionOptions.DefaultPlacement. 

Настройки внешнего вида

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

1. Точки выделения (Appearance.Grip). Здесь можно поменять размер точек и параметры кистей заливки и контура.
   
2. Регион (Appearance.Region). Здесь можно поменять параметры отрисовки пунктирной рамки области выделения.
3. Затемнение вне региона (ContentShading). По умолчанию все, что вне области выделения затемняется. Это настраивается этим свойством. Можно указать базовый цвет затемнения и ее прозрачность.
   

Кадрирование

В релизе 1.16.0.0 добавлены новые метод, позволяющие легко выполнить базовые преобразования. К одному из таких методов относится кадрирование битмапа по области TfgBitmap.CreateCropped (Чтобы воспользоваться методом нужно подключить модуль FGX.Bitmap.Helpers). Ниже представлен пример кода, выполняющий кадрирование изображения на основании координат региона, полученных от TfgRegionPicker. Пример доступен в разделе "Компоненты" -> "TfgRegionPicker" -> "Обрезание фотографии":

procedure TFormMain.btnCropTap(Sender: TObject);
var
  Region: TRectF;
  AssetBitmap: TfgAssetBitmapSet;
  Bitmap: TfgBitmap;
  CroppedBitmap: TfgBitmap;
  CroppedRect: TRectF;
  Scale: Single;
  DestRect: TRectF;
begin
  Region := rpCropRegion.Region.ToRectF;
  if TfgAssetsManager.Current.Find<TfgAssetBitmapSet>(R.Bitmap.PHOTO, AssetBitmap) and AssetBitmap.FindBitmap(Bitmap) then
  begin
    // Вычисляем область вывода битмапа в контроле.
    DestRect := TRectF.Create(FBitmap.Bounds).FitInto(pbOriginal.Bounds, Scale);
    
    // Корректируем положение региона.
    Region.Offset(-DestRect.TopLeft);
    
    // Масштабируем область согласно физическому размеру битмапа.
    CroppedRect.TopLeft := Region.TopLeft * Scale;
    CroppedRect.BottomRight := Region.BottomRight * Scale;
    
    // Кадрируем исходный битмап
    CroppedBitmap := Bitmap.CreateCropped(CroppedRect.Truncate);
    TfgAssetsManager.Current.AddBitmap('Cropped Image', CroppedBitmap);
  end;
end;

Результат работы представлен на видео ниже:

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

Спешим порадовать вас главным нововведением 1.15.5.0 - это поддержка векторных изображений SVG.

Добавление и использование

В новой версии добавлен новый тип ресурсов - SVG изображение. В него вы можете загрузить SVG файл в дизайнере ресурсов для дальнейшего использования в компонентах. Добавление SVG изображения доступно в дизайнере ресурсов: Project -> FGX Assets Manager.

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

Особенности реализации

Как выяснилось в ходе разработки, iOS и Android не поддерживают SVG изображения. Вместо этого, они конвертируют SVG файлы в Android Studio / XCode в свой внутренний промежуточный формат, которыйв свою очередь уже используется для формирования растровых изображений. 

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

Генерация 

При необходимости вы можете сформировать экземпляр растрового изображения TfgBitmap по SVG изображению любого размера. Для этого вам нужно запросить ресурс у TfgAssetsManager. При этом вы отвечаете за удаление экземпляра TfgBitmap:

uses
  FGX.Canvas, FGX.Canvas.Types, FGX.Assets, FGX.Assets.SVG;

var
  Asset: TfgAssetSVG;
  Bitmap: TfgBitmap;
begin
  if TfgAssetsManager.Current.Find<TfgAssetSVG>('SVG asset name', Asset) then
  begin
    Bitmap := Asset.CreateBitmap(TSizeF.Create(100, 20));
    try
      // Works with bitmap.
    finally
      Bitmap.Free;
    end;
  end;
end;

Ограничения

1. Неполноценная поддержка спецификации SVG. Мы проверили наш SVG парсер на иконках разных поставщиков от MaterialDesign, Microsoft Visual Studio Icons и до Icons 8. Однако, стандарт SVG довольно большой и написать за такое короткое время полноценный парсер задача довольно непростая. Несмотря на это, мы хотели бы, чтобы вы делились с нами SVG файлами, которые не могут прочитаться и отобразиться корректно. Это поможет нам оперативнее расширять парсер в тех направлениях, которые нужны для отображения массовых SVG изображений. 

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

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

Это означает, что теоретически изображение может отобразиться, но оно может отображаться не корректно.

2. Отображение превью svg иконки в дизайнере ассетов не говорит о поддержке SVG файла. Для отображения SVG изображений в IDE мы используем Skia4Delphi. Однако, практика показала, что иногда SVG иконки, которые мы отображаем успешно на устройствах, не отображаются корректно в Skia4Delphi.

Например, отображение иконки в Runtime через FGX Native:

В то же время, Skia4Delphi (дизайнер IDE) просто показывает черный квадрат:

Поэтому вам необходимо временно проверять корректно отображения SVG иконки именно на основании Runtime. Несмотря на то, что мы можем формировать SVG изображения и в дизайнере тоже нашим средство, мы пока используем Skia4Delphi, чтобы была возможность сравнить, как иконки должны отображаться корректно (парсер SVG должен по идее поддерживать больше функций). Спустя время, как только наш парсер будет поддерживать все ваши иконки, мы заменим в дизайнере рендер SVG иконок в дизайнере на наш.

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

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

Когда и кому это может понадобиться?

На первый взгляд стандартные поставщики карт имеют полноценный, законченный функционал и не требуют вмешательства со стороны программиста. Но, как это зачастую бывает в реальной жизни, есть нюансы. Что, если вам нужно единообразие карт на обоих платформах iOS и Android (напоминаем, кто каждая ОС имеет своего поставщика карт/тайлов)? Если вам нужен оффлайн доступ к картам? Если вы разрабатываете игру и вам нужно нарисовать необычный ландшафт? Так же вам может понадобиться выбор локального поставщика карт, который имеет лучшую детализацию для конкретной местности, в которой планируется использовать приложение. И это далеко неполный список, когда собственный провайдер тайлов может быть полезен.

Что такое тайлы? Модель тайлов

Тайлы — это подготовленные заранее изображения части карты из которых, как в пазле, строится полная карта. Каждый тайл имеет три основных характеристики: координата по оси X, координата  по оси Y, а так же зум, к которому принадлежит данный тайл. 
Чтобы понять, что означают эти характеристики в контексте карты, нужно разобраться с моделью тайлов. 
Как было сказано ранее, карта строится из прямоугольных кусков и, в первую очередь, загружаются только те тайлы, которые видимы на текущем экране, а не вся карта целиком. Данный подход позволяет как оптимизировать расходы трафика (т. к. чаще всего речь идет об онлайн поставщиках карт), так и ускорить загрузку видимой части карты в целом.
Карта имеет координатную сетку и зум. От уровня зума зависит разрешение координатной сетки. Чем выше зум, тем больше координатная сетка и тем выше детализация карты.
По этой ссылке можно наглядно увидеть зависимость разрешения карты от зума. 

Где взять тайлы?

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

Используем провайдеры тайлов в FGX Native

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

Готовые провайдеры тайлов
На момент публикации статьи в поставке библиотеки есть только один готовый компонент-провайдер  TfgOSMMapTileProvider, который, как не сложно догадаться из названия, предоставляет доступ к тайлам сервиса OpenStreetMap. Не исключено, что со временем список готовых провайдеров будет пополняться новыми сервисами.
Использование: бросить на форму компонент TfgOSMMapTileProvider, в инспекторе объектов связать свойство TfgMap.TileProvider и компонент TfgOSMMapTileProvider.

Универсальные пользовательские провайдеры тайлов
Универсальные провайдеры дают большую гибкость по сравнению с готовыми провайдерами за счет того, что разработчик сам отвечает за предоставление тайлов. В библиотеке такие провайдеры  представлены компонентом TfgMapTileProvider. 
Использование: 
1) Прежде всего необходимо задать свойство TfgEventMapTileProvider.TileSize, которое отвечает за размер отдаваемых провайдером тайлов в пикселях.
Внимание: Смена размера тайла после задействования провайдера приведет к сбросу кэша тайлов карты и повторной загрузке карты.
2) Задать событие  TfgEventMapTileProvider.OnGetTile, в котором должен возвращаться графический тайл в виде интерфейса IFGXMapTile.
Внимание: Событие  OnGetTile вызывается асинхронно из вторичных (не UI потоков). Реализация события должна быть потокобезопасной.

Размер тайла всегда должен содержать актуальное, согласованное с реальным размером тайла значение. Если вам по какой-то причине нужно перенастроить провайдер — сначала отлинкуйте его от карты, настройте и потом прилинкуйте заново.
Типичный пример реализации события: 

function TFormMain.fgMapTileProvider1GetTile(Sender: TObject; const X, Y,
  Z: Integer; const AScale: Single): IFGXMapTile;
begin
  Result := TfgMapTileSource.CreateFromUrl(Format('https://stamen-tiles.a.ssl.fastly.net/watercolor/%d/%d/%d.png', [Z, X, Y]));
end;

В примере выше используется класс-хэлпер TfgDefaultMapTile , который реализует требуемый для результата события интерфейс IFGXMapTile.
Класс TfgDefaultMapTile содержит несколько конструкторов, каждый из которых отвечает за загрузку данных тайла тем или иным способом:

    constructor CreateFromBitmap(const ABitmap: TfgBitmap);
    constructor CreateFromFileName(const AFileName: string);
    constructor CreateFromStream(const AStream: TStream);
    constructor CreateFromUrl(const AUrl: string);

Собственная реализация провайдеров тайлов

Если же ни один из двух вышеперечисленных способов вам не подходит и нужен максимальный контроль над процессом — вам поможет собственная реализация провайдера тайлов и самих тайлов.
Реализация провайдеров строится на базе двух интерфейсов IFGXMapTileProvider и IFGXMapTile.
IFGXMapTile
За представление тайла в библиотеке FGX Native отвечает интерфейс  IFGXMapTile. Он имеет два свойства: сырые данные, содержащие изображение тайла в любом поддерживаемом графическом формате (обычно png) и размер данных в байтах.

  IFGXMapTile = interface
    ['{77F3C69D-6C83-4CAB-8A8C-6ED483B28275}']
    function GetData: Pointer;
    function GetSize: Integer;
    property Data: Pointer read GetData;
    property Size: Integer read GetSize;
  end;

IFGXMapTileProvider
Провайдер тайлов реализуется с помощью интерфейса IFGXMapTileProvider.
GetTileSize - возвращает общий для всех тайлов размер тайла в пикселях.
GetTile - возвращает тайл для указанных координат. Метод должен быть потокобезопасным.
AddObserver, RemoveObserver — подписка на уведомления/отписка от уведомлений. Реализация должна уведомлять всех заинтересованных наблюдателей об изменении размера тайла и разрушении провайдера. 

  IFGXMapTileProvider = interface
    ['{AE2174DA-7362-4566-A307-6164E31635F1}']
    function GetTileSize: TSize;
    function GetTile(const X, Y, Z: Integer; const AScale: Single): IFGXMapTile;
    procedure AddObserver(const AObserver: IFGXMapTileProviderObserver);
    procedure RemoveObserver(const AObserver: IFGXMapTileProviderObserver);
  end;

Использование: 
1) Реализовать интерфейс IFGXMapTileProvider.
2) По желанию реализовать интерфейс IFGXMapTile.
Данный тип провайдера идеально подойдет для реализации собственного кэша тайлов, оффлайн доступа к картам и тд, те там где нужна исключительная гибкость и полный контроль над процессом.

На этом знакомство с механизмом провайдеров тайлов подходит к концу. 

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

В этой статье мы поговорим о поддержке темной темы в FGX Native приложении, о том, как ее добавить, как сделать автоматическое переключение и о том, что добавлено в 1.15.3.0 в этой области.

Введение

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

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

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

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

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

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

1. Не все нативные компоненты предоставляют настройки, при помощи которых можно полностью подстроить отображение компонента под темную тему.
2. Нет возможности выполнить автоматическое переключение темы на основании системной темы.

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

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

Темная тема на уровне системы

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

iOS

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

Если разработчик не готов или не хочет использовать темную тему, то он явно указывает в настройках проекта UIUserInterfaceStyle = light. В этом случае, iOS рисует родные компоненты в светлой теме и игнорирует темную тему.  Мы используем этот режим в FGX Native, так как у нас не было полноценной поддержки темной темы. Поэтому все приложения FGX Native содержат этот флаг:

Android

Поддержка темной темы в Android более сложная. Она чем-то похожа на iOS, за исключением того, что некоторые производители Android устройств добавляют "свою" поддержку темной темы для старых версий. Например MIUI. В этом случае, производитель автоматом принудительно пытается применить темную тему и вычислить цвета на основании текущих (сделать их автоматический реверс). В результате кто-то из вас мог столкнуться с некорректным отображением приложения. Чтобы избежать этого мы принудительно отключаем все подобные попытки при помощи специального атрибута в стиле андроид приложения  

<!-- MIUI automatically recolors UI in dark mode, it uses emulation mode. -->
<item name="android:forceDarkAllowed">false</item>

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

    <!-- Basic theme for all Android versions -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light">

Как добавить темную тему в FGX Native?

Добавление темной темы состоит из нескольких шагов:

1. Разрешаем FGX Native приложению автоматически использовать темную системную тему (Важно! FGX Native приложения не включают темную тему по умолчанию, поэтому требуется делать этот шаг).

• iOS: Удаляем ключ UIUserInterfaceStyle из настроек проекта: Project -> Options -> Version Info (для iOS конфигураций)
• Android: Меняем базовую тему в файле styles.xml (расположен в корне вашего приложения) cо значения "Theme.AppCompat.Light" на "Theme.MaterialComponents.DayNight"   

      <style name="BaseAppTheme" parent="Theme.MaterialComponents.DayNight">

Эти правки позволят приложению автоматически менять отрисовки нативных компонентов при смене системной темы.

2. Добавляем светлую/темную темы в FGX Native через дизайнер ресурсов при помощи генератора тем:

3. Отлавливаем изменение системной темы и применяем к форме тему из ресурсов. Для этого используем новое событие TfgForm.OnSystemAppearanceChanged, которое содержит параметры текущей системной темы и которое вызывается каждый раз при смене системной темы. 

procedure TFormMain.fgFormSystemThemeChanged(Sender: TObject; const AAppearance: TfgSystemAppearance);
begin
  case AAppearance.ThemeKind of
    TfgSystemThemeKind.Dark:
      ThemeName := 'Theme Dark';
    TfgSystemThemeKind.Light:
      ThemeName := 'Theme Light';
  end;
end;

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

Если по каким-то соображениям, вы хотите узнать параметры системной темы, вы можете это сделать при помощи нового свойства FGX.SystemInfo.TfgSystemInfo.Appearance.

Результат работы представлен ниже:

Планы на будущее

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

Начиная с FGX Native 1.15.3.0, появится новый компонент для сборка аналитики использования вашего приложения TfgFirebaseAnalytics.

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

1. Какую форму пользователи открывают чаще всего.
2. Какие версии вашего приложения успешно запускаются.
3. Сколько пользователей первый раз запустили приложение.
4. Какие покупки чаще всего делают в вашем приложении.
5. С какими компонентами чаще всего взаимодействуют. 
6. И многое другое.

Подробности о Firebase Analytics: https://firebase.google.com/docs/analytics?authuser=0

Настройка использования

Чтобы использовать новый компонент, необходимо выполнить общую регистрацию FGX Native приложения в Firebase консоли (Шаги такие же, как регистрация приложения для использования Push-уведомлений): 

• Настройка Firebase для iOS.
• Настройка Firebase для Android.

Дополнительно для Android нужно вручную добавить зависимость на библиотеку "com.google.firebase:firebase-analytics:21.2.0"

https://forum.fgx-native.com/blogs/entry/56-интеграция-android-библиотек-просто-и-быстро-с-11520/

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

Отправка событий

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

Как только вы размещаете его в приложении, так сразу компонент начинает автоматический сбор базовых событий в вашем iOS/Android приложении, такие как:

• Определение первого запуска приложения
• Статистику использования разных версий вашего приложения.
• Сбор сессий использования. 
• И тд.

Такие события доступны в консоли Firebase в разделе Analytics -> Realtime.

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

Каждое событие, происходящее в вашем приложении, характеризуется:

• Name - имя. Строковый код события. Firebase предлагает готовые коды событий. С ними можно познакомиться на этой странице. Вы можете использовать, как готовые коды, так и свои собственные.
  Например: событие select_content предназначено для информирования о том, что пользователь выбрал важный для вас контент (нажал на кнопку, открыл форму и тд).
• Parameters - параметры в формате - название параметра - значение. Каждое событие может сопровождаться соответствующими параметрами. Firebase описывает связанные с событиями параметрами, которые вы можете отправить.
  Например, событие select_content сопровождается двумя параметрами: content_type и item_id (документация)

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

/// <summary>
///   Отправляет на сервер Firebase событие с именем <c>AName</c>, параметрами c именами <c>AKeys</c> и значениями
///   <c>AValues</c>.
/// </summary>
procedure LogEvent(const AName: string; const AKeys: TArray<string>; const AValues: array of const); overload;

/// <summary>Отправляет на сервер Firebase событие с именем <c>AName</c>.</summary>
procedure LogEvent(const AName: string); overload;

Чтобы узнать, что пользователь нажал на кнопку покупки в вашем приложении, необходимо добавить в обработчик вызов метода LogEvent:

procedure TFormMain.fgButtonBuyTap(Sender: TObject);
begin
  fbAnalytics.LogEvent('select_content', ['content_type', 'item_id'], ['Button', 'Buy subscription']);
end;

Определение открытых экранов/форм

Помимо отправки любых событий, компонент TfgFirebaseAnalytics позволяет отправлять информацию о том, какие формы/экраны открывает пользователь. Чтобы воспользоваться данной возможностью, необходимо в момент отображения формы передавать на сервер Firebase информацию о текущей форме.

/// <summary>
///   Задает текущее название экрана, которое определяет текущий визуальный контекст в вашем приложении.
///   Это помогает определить области в вашем приложении, где пользователи проводят свое время и как они
///   взаимодействуют с вашим приложением.
/// </summary>
procedure SetCurrentScreen(const AScreenName: string; const AScreenClassName: string);

Для удобства отслеживания, когда форма появляется на переднем плане, в FGX Native 1.15.3.0 для формы TfgForm добавлены два новых события:

/// <summary>Вызывается, когда форма выходит на передний план на экране.</summary>
/// <remarks>Не вызывается для встроенных форм-фреймов.</remarks>
property OnActivate: TNotifyEvent read FOnActivate write FOnActivate;

/// <summary>Вызывается, когда форма уходит с переднего плана на экране.</summary>
/// <remarks>Не вызывается для встроенных форм-фреймов.</remarks>
property OnDeactivate: TNotifyEvent read FOnDeactivate write FOnDeactivate;

Именно их мы рекомендуем использовать для указания текущего экрана в Firebase Analytics.

Например, код по отображению главной формы может выглядеть так:

procedure TFormMain.fgFormActivate(Sender: TObject);
begin
  Shared.fbAnalytics.SetCurrentScreen('Main form', ClassName);
end;

Первым параметром указывание название экрана, вторым - класс. 

Общие настройки

Помимо главной задачи отправления статистики в Firebase Analyitcs, вы можете выполнять базовые настройки компонента:

/// <summary>
///   Удаляет все аналитические данные для этого приложения с устройства и сбрасывает идентификатор экземпляра приложения.
/// </summary>
procedure ResetAnalyticsData;

/// <summary>
///   Включен ли сбор аналитики для этого приложения на данном устройстве. Этот параметр сохраняется во всех сеансах
///   приложения. По умолчанию он включен.
/// </summary>
property Enabled: Boolean read FEnabled write SetEnabled default DefaultEnabled;

/// <summary>Уникальный идентификатор текущего пользователя.</summary>
property UserId: string read FUserId write SetUserId;

/// <summary>Задает продолжительность бездействия, которая завершает текущий сеанс.</summary>
property SessionTimeoutDuration: Integer read FSessionTimeoutDuration write SetSessionTimeoutDuration default DefaultSessionTimeoutDuration;

С остальными подробности использования вы можете ознакомиться в официальной документации Firebase:  https://firebase.google.com/docs/analytics?authuser=0

Спасибо

Вот мы и подошли к главной ключевой новинке версии FGX Native 1.15.0.0, а именно речь пойдет о новой системе сборки для Android приложений 🔥. Долгое время мы шли к этому решению и уверены, что данная система сборки является ключевым нововведением для всех будущих релизов FGX Native. Это огромный шаг и потенциал для мобильной разработки на Delphi.

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

Что не так со стандартной системой сборки Delphi для Android приложений?

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

1. Поддержка сторонних Android-библиотек

Это самая важная часть для FGX Native. Мы используем различные сторонние Android библиотеки - Firebase, AdMob, Visio и прочие. Все эти библиотеки в свою очередь используют другие библиотеки, и тд т тп. Каждая библиотека - это не только код, но и ресурсы, изменения необходимые для Android манифеста и тд. Соотвественно, для полноценной поддержки сторонних Android-библиотек требуется не только внедрить исполняемый код, но и так же поставить все ресурсы и слить правки в Android манифесте.

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

Более подробно проблема поддержки Android-библиотек описана в статье про миграцию на AndroidX.

2. Скорость

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

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

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

1. Первый столбец содержит время старта (без отладки) проекта с нуля. До этого проект не собирался и нет никаких промежуточных результатов сборки.
2. Второй столбец указывает время старта (без отладки) проекта после внесения изменения в проект: изменили исходный код и тд.
3. Третий столбец отвечает за повторный старт (без отладки) приложения без внесения изменений .    

Из этой таблицы хорошо видно, что в среднем на сборку с запуском уходит ~1 минута. Обычный сценарий использования: внес изменений в коде, собрал, запустил, поймал ошибку, опять внес изменений и тд. Грубо говоря, в среднем 60 запусков в день приложения (без отладки) может занимать 1 час рабочего времени! С отладкой цифры становятся еще более угрожающими. Тратится драгоценное время на ожидание, вместо того, чтобы потратить его с пользой.

3. Технологическое отставание от требований Google

Стоит отметить, что Google активно развивает сборку Android приложений, каждый раз выдвигая всё новые и новые требования к полученному приложению:

• Был APK, на его смену пришел более умный AAB.
• Новые требования к версии используемых библиотек. Если используемая библиотека старая, то приложение не может быть загружено в маркет или же просто не работать на свежих версиях Android.

Поскольку Delphi самостоятельно реализует систему сборки, то получается состояние вечной гонки, в которой Delphi, к сожалению, всегда в роли догоняющего. Поэтому, как только Google/Apple меняют структуру пакета приложения, вам приходится ждать обновлений Delphi, которые изменят встроенную систему сборки в соответствии с новыми требованиями. С учётом частоты выхода новых версий Delphi это может вылиться в длительное ожидание, а иногда и финансовые затраты, необходимые для приобретения новой версии.

Что нам дает новая система сборки

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

1. Поддержка Android-библиотек

Полноценная поддержка всех Android-библиотек. Теперь перед Delphi разработчиком не будет практических никаких ограничений для использования сторонних библиотек. Мы предлагаем полный цикл интеграции любого стороннего решения в FGX Native приложения под Android:

1. Вы находите интересуемое решение на Java для Android
2. Вы добавляете Java библиотеку в FGX Native проект
3. Вы генерируете заголовочные файлы для Java библиотеки на языке Delphi при помощи нашей утилиты Java2Delphi.

В будущем появится автоматическое скачивания всех зависимостей. Так что вам даже не придется искать файл библиотеки, достаточно будет указать имя библиотеки и её версию. Остальное на себя возьмет FGX Native.

2. Скорость

После внедрения новой системы сборки, мы попросили наших клиентов, повторно протестировать сборку их проектов. Все результаты сведены в таблицу ниже. Из нее наглядно видно, что в целом сборка и запуск  проектов стал быстрее от 2 до 5 раз 🔥(кроме старта с нуля, что обуславливается долгой сборкой главной so-библиотеки приложения, которая целиком и полностью зависит от компилятора и линкера).

Давайте разберем результаты подробнее.

Старт после изменений

Данный замер является самым часто используемым. Вы вносите изменения в проект и запускаете приложение для тестирования и отладки. Практически - это основной сценарий работы разработчика. В целом прирост скорости составляет от 2 до 5 раз на тестируемой выборке проектов 🚀. Важно отметить, что при этом новая система сборки проделывает гораздо большую работу по сравнению со стандартной, даже если брать в расчёт только внедрение дополнительных ресурсов от используемых библиотеки. Количество ресурсов может исчисляться сотнями, и, если добавлять их все через Deployment Manager, то разница в результатах будет еще больше (не в пользу стандартной системы сборки). 

Повторный старт

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

В этом случае показатели скорости просто ошеломительные. Прирост составляет в ~5 раз на текущей выборке и практически он является постоянной. Если в стандартной системе сборке повторный запуск зависит от количества ресурсов и размера приложения, то для FGX Native это постоянная величина.

Старт с нуля

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

3. Технологическое отставание от требований Google

Мы не "изобретаем велосипед" в сборке Android приложений, а берем проверенное официальное решение от Google, которое поддерживается Google. А это значит:

1. Соответствование всем новым требованиям со стороны Google
2. Легкое/моментальное обновление системы сборки до последней версии, без необходимости обновления Delphi

Использование

Первая сборка

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

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

При первой сборке FGX Native проекта начиная с 1.15.0.0 в корне проекта автоматически будет создана директория ".android-build". Этот каталог содержит всё необходимое для сборки вашего проекта. Его не нужно добавлять в систему контроля версии, он может быть большого размера, так как там сохраняются промежуточные результаты сборки, при необходимости его можно удалять. Все файлы внутри данной директории являются автогенерируемыми, поэтому не пытайтесь вносить ручные правки, они будут проигнорированы. 

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

Ошибки сборки

Если в результате сборки появляется ошибка, то подробную информацию можно найти на нижней вкладке "Output", а не в "Build", как раньше.

Например, все ошибки упаковки на панели "Build" будут сводиться к такой.

Подробности можно найти на вкладке "Output". По тексту ошибки становится ясно, что в проекте используется TargetApiVersion ниже 33.

Требования

1. Для успешной сборки требуется свежая версия Java JDK (не ниже 18). Можно использовать ту, что идет в поставке с Delphi.
2. Требуется наличие интернета для первой сборки приложения, так как при ней скачиваются необходимые компоненты сборки.
3. Теперь все FGX Native под Android используют TargetAPILevel = 33. Мы полностью перешли на использование последней версии Android. Поэтому понижать версию теперь нельзя.

Когда планируется релиз?

Поскольку релиз 1.15.0.0 является очень крупным и затрагивает критические важные моменты, мы хотим быть уверены, что он не испортит ваши проекты. Поэтому внедрение будет происходить постепенно. На первом этапе мы отдали некоторым нашим клиентам сборку на предварительное тестирования на больших проектах, получили обратную связь и устраняем найденные недочеты.  Далее на этой неделе мы планируем выпустить экспериментальную версию 1.15.0.0 для широкого круга пользователей. По сути - это полноценная версия и вы сможете опробовать её для перехода на Android 13, сравнить скорость сборки и тд. Однако, если вы столкнетесь с какими-то серьезными проблемами для вашего проекта, вы всегда сможете откатиться на стабильную версию 1.14.6.0. На текущий момент, практически все большие собранные проекты на 1.15.0.0 успешно запускаются и работают.

Если при тестировании вы столкнетесь с проблемами, просьба сообщить нам о них, и мы постараемся их оперативно поправить.

Всем спасибо за внимание и хорошей продуктивной недели!

Ускорение запуска FGX Native приложения на Android

Одним из важных изменений в области работы Java-Delphi мосту - является ускорение запуска FGX Native приложения на Android. До 1.15.0.0 холодный старт пустого приложения мог занимать пару секунд. В 1.15.0.0 мы реализовали отложенную инициализацию Java оберток, в результате чего это позволило нам ускорить старт пустого приложения до ~2-х раз.

Улучшения в Java2Delphi

Поддержка AAR

В новой версии Java2Delphi теперь можно использовать AAR библиотеки. Для этого их нужно указать в конфигурационном файле в ветке "aars".

    "aars": [
        "$(FGX)\\Libs\\Android\\fgx.admob.aar"
    ],

Deprecated/Introduced для полей

Android API меняется от версии к версии. Какие-то типы объявляются устаревшими, какие-то удаленными, а какие-то новыми. Глядя на заголовочный файл тяжело понять, какой метод в какой версии Android доступен. Ранее мы вносили специальные пометки в заголовочные файлы для методов. В этом релизе мы  генерируем аналогичные пометки их и для полей. Так что, теперь можно открыв заголовочный файл, сразу понять в какой версии был добавлен тот или иной элемент, а когда он помечен, как устаревший.

    function isConvex: Boolean; deprecated 'Deprecated in 30';
    function addWhitelistedRestrictedPermission(const AArg0: JString; const AArg1: JString; const AArg2: Integer): Boolean; // Introduced in 29';
    { constants }
    property colorMode: Integer read _GetColorMode write _SetColorMode; // Introduced in 26';
    

Умная генерация параметров при зависимостях

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

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

Например:

Мы выделяем все типы, связанные с анимацией в модуль Android.Api.Animations. Эти типы используют JView, который объявлен в  "Android.Api.ActivityAndView". Часть типов анимации используются в классе Android.Api.ActivityAndView.JView. Так геттер getAnimation должен вернуть объект JAnimation. Однако, данный тип, объявлен в Android.Api.Animations.

JView = interface(JObject)
  // 
  function getAnimation: JAnimation;
  //
end;

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

JView = interface(JObject)
  // 
  function getAnimation: JObject {JAnimation};
  //
end;

Чтобы при использовании получить объект JAnimation, достаточно написать такой код:

var
  Animation: JAnimation;

Animation := TJAnimation.Wrap(View.getAnimation);

Сегодня мы хотим рассказать про переход Android части библиотеки FGX Native на AndroidX. О том, что это, зачем это нужно и как это влияет на разработчиков мы поговорим в этой статье.

Что такое AndroidX?

Среди всех проблем Android - наверное, главной для разработчика является проблема адаптации мобильного приложения под все версии Android. Очень часто, в старых версиях Android просто невозможно реализовать тот или иной функционал, потому что операционная система не предоставляет для этого API. С выпуском новых версий, постепенно Google добавляет пропущенное API. Однако, при использовании такового, вы не можете запустить такое приложение на старых версиях Android, потому что оно просто упадет из-за отсутствия нужного API. Поэтому разработчикам нужно иногда писать по две реализации одного и того же функционала на разном API.

Для того, чтобы это решить, Google стала выпускать набор библиотек, которые содержат универсальное API, работающее на всех версиях Android. Такая библиотека раньше называлась Android Google Support Library, а затем Google объявила ее устаревшей и заменил ее на новую AndroidX.

AndroidX - Это набор библиотек от Google, в которых они расширяют стандартные скудные возможности Android и дают широкий набор нового функционала, доступный среди всех версий Android. Она включает в себя большое число разных библиотеки, начиная от реализации базовых компонентов Android OS, продолжая облегченной работой с камерой и заканчивая продвинутыми компонентами Material Design. 

До версии FGX Native 1.15.0.0 используется "Android Google Support Library".

Зачем переходить на AndroidX?

Главная необходимость заключается в том, что многие другие современные сторонние библиотеки Android уже используют AndroidX. Например, Firebase, AdMob, Google Maps и тд. А это значит, что если мы хотим добавить новый функционал в TfgMap из свежих версий GoogleMap или добавить возможность отправки push-уведомления с картинкой из Firebase, то мы не сможем это сделать, пока не перейдем на AndroidX.

Помимо внутренних потребностей для развития FGX Native на Android платформе нужно не забывать, что разработчик с FGX Native может использовать сторонние jar библиотеки, сгенерировать для них заголовочные файлы при помощи Java2Delphi утилиты (входит в поставку FGX Native) и использовать в вашем приложении вами любимый язык Delphi. Будь-то "Яндекс.AppMetrica" или WebRTC компоненты или UI компоненты, рисующие графики, FGX Native позволяет это сделать. Однако, опять же многие новые свежие версии сторонних Android библиотек уже используют AndroidX. А это значит, что их нельзя использовать, пока нет поддержки AndroidX.

Почему переход на AndroidX не был выполнен ранее?

Как уже было сказано ранее FGX Native до 1.15.0.0 использует "Android Google Support Library". И эта библиотека считается официально устаревшей с Июля 2017. Так почему же, мы до сих пор используем устаревшую версию?

Перед тем, как ответить на этот вопрос, познакомимся, что технически означает "добавление Android библиотеки в приложение". Упрощенно, FGX Native Android приложение состоит из четырех частей:

1. "SO-Библиотека" с нативным кодом вашего приложения. Это именно то, что получается в результате компиляции ваших форм, модулей и тд.
2. "classes.dex" - Это байт код, который является стартовым для любого Android приложения. Именно эта часть загружает делфи библиотеку и передает ей управление.
3. "Набор ресурсов" - иконки приложения, заставки, графические ресурсы, ассеты, шрифты, ресурсы локализации и тд, все то, что доступно для вашего приложения.
4. "Манифест приложения" - это по сути описание содержимого вашего приложения, что оно может делать, а что нет. Именно он является определяющим файлом на предмет выдачи прав доступа, запуска других приложений и тд.

Все это упаковывается и на выходе вы получаете пакет приложения APK или более сложный формат AAB.

Android библиотека по сути имеет практически такое же содержание, как и Android приложение. Оно так же может иметь в своем составе нативные библиотеки, наборы ресурсов, манифест или же байт-код в jar-библиотеке.

Поэтому чтобы добавить Android-библиотеку в приложение, необходимо все, что есть в библиотеке добавить в приложение. И выполнить хитрые манипуляции по совмещению данных из разных библиотеки (сливание манифестов, компиляция ресурсов, слияние байт кода в один classes.dex.

Ресурсы, манифесты

Так вот причина задержки в переходе на AndroidX кроется в механизме поддержки Android библиотек на уровне RAD Studio/Delphi. Добавление сторонних jar библиотек всегда было частью системы сборки Delphi, в которой мы увы не можем менять со стороны. Поддержка Android библиотек в Delphi ограничивается только добавлением байт кода в итоговый classes.dex. А это значит, что Delphi не умела и до сих пор не умеет сливать манифесты, добавлять  и компилировать ресурсы, внедрять so-библиотеки автоматически и тд. Поэтому круг использования сторонних Android библиотек в Delphi довольно узкий - это библиотеки, которые не используют ресурсы и по части не работают с UI. Как вы понимаете, таких библиотек в мире Android довольно мало. Потому что даже обычная не UI библиотека выделяет строковые ресурсы в "набор ресурсов" для возможности локализации разработчиком.

Поэтому, чтобы выполнить миграцию на AndroidX нужно вначале реализовать полноценную поддержку Android-библиотек в Delphi. Поскольку это часть системы сборки Delphi, у нас нет возможностей для внесения изменений в не наш код. Осложняется еще и тем, что Delphi Deployment Manager заточен только на FMX и не любит никаких отклонений от "нормы" FireMonkey приложения. Поэтому IDE всячески пытается удалить, изменить, обновить элементы "Deployment Manager" и сводит практически на нет любые кастомизации.

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

К сожалению, за прошедшие 5 лет выпуска Delphi больших изменений в области деплоя и сборки для Android не было. Главным изменением можно считать добавление поддержки MultiDex в Delphi 11.

MultiDex и Delphi 11

Если на пальцах объяснить, что такое MultiDex, то когда байт код из разных Android библиотек сливается в classes.dex, то может возникнуть ситуация, что все не влезает в один файл (ограничение накладывается на общее количество типов, методов и т.п., которое может поместиться в одном файле. Это связано с архитектурой выполнения байт кода в Android). Когда все не помещается в один файл, то остальное помещается в следующий файл classes2.dex и так далее, пока все не будет раскинуто по файлам. В этом случае apk содержит ни один classes.dex, а не сколько. И именно поддержка этого добавлена в Delphi 11. 

По умолчанию, и FireMonkey и FGX Native приложение помещается в один classes.dex. Другими словами, прямой необходимости в поддержки MultiDex не требуется. Однако, чем больше сторонних Android библиотек вы используете, тем быстрее растет classes.dex и тем проще выйти за пределы SingleDex и перейти в MultiDex. 

AndroidX вводит большое число зависимых библиотек, поэтому добавление AndroidX также автоматически добавляет необходимость использовать MultiDex. И если в Delphi 11, такая поддержка есть. То пользователям старых версий Delphi делать в этом случае уже нечего. Поскольку мы считаем, что разработчики не должны быть сильно привязаны к версии IDE при использовании нашего продукта, мы не могли и не можем отказаться от поддержки старых Delphi до 11 версии.

Delphi 11 и FireMonkey поддерживает же AndroidX, в чем секрет?

"Delphi 11 официально же использует AndroidX" - значит ли это, что проблем никаких нет? На самом деле, поддержка заканчивается только на уровне интеграции байт-кода в приложение. О чем я упомянул в предыдущем разделе. Это значит, что Delphi просто внедряет исполняемый байт код в приложение и так же не поставляет никакие ресурсы в FMX приложение. Как это отражается на приложении. Как только выполнение вашего приложения попробует обратиться к несуществующим ресурсам, то в этот момент оно может либо упасть, либо работать некорректно. Так же FMX содержит не весь AndroidX, а только минимально-необходимый набор библиотек. По большей части FMX минимально использует Android API, поэтому вы можете не наблюдать проблем с отсутствующими ресурсами. Однако, как только вы сделаете шаг в сторону и захотите расширить возможности добавлением Android-библиотеки, то вы поймете, что все использование ограничено и приложение не будет работать.

Почему теперь переход на AndroidX стал возможен?

Возможно, Embarcadero в будущем добавит полноценную поддержку Android-библиотек. Но пока ее нет, нам ничего не остается, как заменить систему сборки Android приложений на другую и добавить полноценную поддержку использования Android-библиотек. Последнее время мы плотно занимались этой работой. В результате чего мы полностью перешли с системы сборки Android приложения в Delphi на другую с полноценной поддержкой Android-библиотек. Данную поддержку вы увидите в обновлении 1.15.0.0. Подробности перехода на новую систему сборки будут рассказаны в следующей статье. Однако, новая сборка помимо полноценной поддержки Android-библиотек так же значительно ускоряет запуск приложения на устройстве (даже при условии деплоя ресурсов) и дает эти возможности на любой версии Delphi. Это значит, что клиенты любых поддерживаемых версий Delphi, не зависимо от IDE получат все возможности по сборке приложений, включая MultiDex и добавление Android-библиотеки.  

Что дает нам AndroidX?

Android 13 и новее

Переход на последнюю версию AndroidX дает нам полноценную поддержки последних версий Android. Начиная с версии FGX Native 1.15.0.0 все приложения будут нацелены на Android 13 (Api Level = 33). Все заголовочные файлы так же будут обновлены до Android 13. Старые заголовочные с классами "Support Library" будут удалены.

Material Components

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

Firebase

Поддержка последней версии Firebase, работающая на всех поддерживаемых версиях Андроида без проблем. Возможность передавать изображение в push-сообщениях.

Сканер штрихкодов

Обновленная реализация сканера штрихкодов, которая работает быстрее, стабильнее и лучше.

Карты GoogleMap

Поддержка свежих версий карт.

Реклама AdMob

Использование последних версий площадки по размещению рекламы.

Прочее

Обновление Yandex.AppMetrica, Google SignIn, Billing, InAppPurchase и тд.

Что делать, если я не все понял в этой статье?

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

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

Новый релиз 1.14.5.0 посвящен полноценной поддержке RAD Studio 11.2 и новой платформе iOS Simulator ARM 64-bit. Помимо этого, мы немного улучшили средства просмотра Андроид логов и компонент TfgButton.

iOS Simulator ARM 64-bit

В этой версии добавлена поддержка iOS Simulator ARM 64-bit. Теперь вы можете запускать ваши FGX Native приложения на симуляторе. Однако, помните, что данный симулятор работает только на процессорах Apple. Так же компоненты авторизации через Facebook Login не поддерживаются в данный момент на симуляторе.

Улучшения Android Log Viewer

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

Внутренние отступы TfgButton

Помимо поддержки 11.2 добавлена возможность менять стандартные внутренние отступы у кнопки TfgButton. Иногда требуется убрать отступы, чтобы расширить область отображения надписи и иконки. Теперь это можно сделать при помощи свойства TfgButton.Appearance.ContentPadding.

RAD Studio 11.2 

Новая версия RAD Studio 11.2 сломала обратную совместимость некоторых пакетов дизайнера с 11.0 и 11.1. В результате чего версия 1.14.4.0 не работает на 11.2, а 1.14.4.1 не работает на 11.1. В этом релизе мы поставляем две версии дизайнера: отдельно для 11.0-11.1 и 11.2. При установке необходимо выбрать интересующую вас версию.

Спасибо за внимание, 
Ваша команда FGX Native

FlexBox дизайнер

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

Переработанный дизайнер ресурсов

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

Автоматическое удаление "лишних" ресурсов

В старой версии дизайнера при добавлении ресурса цвета создавалось 5 одинаковых ресурсов цвета для каждого типа устройств (Universal, Phone, NormalTablet, LargeTablet, ExtraLargeTablet). Однако, как показала практика,  пользователи используют на всех устройствах один и тот же цвет. Поэтому генерация одинаковых цветов нецелесообразна и с точки зрения дублирования, и с точки зрения скорости загрузки приложения и поиска ресурсов. В связи с этим, теперь дизайнер автоматически определяет дубликаты и удаляет их.

Было:

Стало:

Генерация изображений

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

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

Яркость изображения

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

Импорт изображений

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

Стандартизация редактирования ресурсов.

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

Умное отображение цвета

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

Отображение превью

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

Улучшения в TfgButton

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

Многопоточный режим TfgPickerPhoto

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

  TfgPickerPhotoFactory.PickPhotosFromLibrary(btnTakePhotoFromLibrary,
    procedure(const AFileNames: TfgPhotoFiles)
    begin
      LoadImages(AFileNames);
    end,
    procedure(const AProgress: Single)
    begin
      ShowProgress(AProgress);
    end);

Поддержка Android 12

Добавлена поддержка Android 12. Для корректной публикации приложений в "Google Play Market", необходимо обновить манифест Android приложения. При открытии старого приложения, IDE предложит обновить манифест автоматически. Если вы вносили ручные правки в шаблон манифеста приложения, то перед обновлением манифеста сделайте его копию и затем заново внесите ваши правки. 

Если по каким-то причинам среда не предложила обновить манифест (если вы ранее отказались от обновления шаблона), то вы можете это сделать вручную. Для этого необходимо добавить атрибут `android:exported="true"` в узел `activity`.

Delphi 11 Update 2

Добавлена поддержка Delphi 11 Update 2. Из-за критических изменений на стороне IDE, перестали собираться приложения FGX Native из-за нарушения целостности в Deployment Manager. Данный релиз устраняет эту проблему.

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

В этом анонсе мы хотим познакомить вас с теми нововведениями, которые появятся в версии 1.14.0.0.

Лицензии и коды активации

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

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

После ввода кода активации на сервере происходит привязка вашей лицензии к текущему компьютеру (необходимо наличие активного подключения к сети Интернет), библиотека получает индивидуальный лицензионный файл, который сохраняется на компьютере и однозначно подтверждает ваше право на использование библиотеки. После активации вы можете продолжать пользоваться продуктом как обычно. Информацию о статусе активации и сроке бесплатных обновлений вы можете найти в окне о Delphi: "Help" -> "About Embarcadero RAD Studio".

Важные сведения, связанные с активацией библиотеки:

• Допускается 3 (три) активации библиотеки на разных физических машинах, исходя из усредненной схемы использования: домашний, рабочий компьютеры и одна активация на случай смены физических комплектующих вашего компьютера. Однако, если по каким-то объективным причинам у вас будет потребность в дополнительных активациях, вы всегда можете связаться с нами любым удобным для вас способом. Не используйте активацию на чужих/ненужных компьютерах.
• Активацию необходимо производить каждый раз после установки новой версии библиотеки. При этом каждая активация библиотеки на одной и той же машине не считается за отдельную активацию.
• При обновлении продукта или приобретении новой подписки, вам будет выслан новый код активации, который действует на новый срок. При этом старый код продолжает действовать для старых версий библиотеки, как и ранее.

Увеличенные сроки действия подписки 

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

Идентификация через сервис Google Sign in

Мы продолжаем пополнять поддержку новых сервисов идентификации клиентов. В версии 1.14.0.0 предлагаем новый компонент TfgGoogleSignInAuthenticationClient для идентификации клиента через сервис "Google Sign in". На текущий момент компонент реализован для Android платформы.

TfgCollectionView и ручное выделение 

TfgCollectionView поддерживает разные режимы выделения элементов. Ранее при выделении элемента происходило визуальное отображение заднего фона всего элемента, согласно настройкам цвета SelectionColorName/SelectionColor. Однако, если вы используете в качестве элементов TfgCardPanel или другие виды контейнеров, то часто нужно выполнять изменение цвета не всего элемента, а только вложенного контейнера:

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

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

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

• AItem - обертка для работы с элементом.
• AIsSelected - признак состояния выделения элемента.
• AInitiator - Кто инициатор обновления выделения элемента. Если вы хотите добавить анимации в процесс выделения элемента, то ориентируйтесь на этот флаг. Если пользователь нажимает на элемент, то в этом параметре будет значение "User", в противном случае "Control".

Типичный код ручного выделения может выглядеть так:

procedure TFormMain.fgCollectionView1UpdateItemSelectionAppearance(Sender: TObject; const AItem: TfgItemWrapper; const AIsSelected: Boolean; const AInitiator: TfgItemSelectionInitiator);
var
  BackgroundPanel: TfgCardPanel;
  PrimaryLabel: TfgLabel;
begin
  // Извлекаем ссылку на фон и текстовую метку в элементе
  BackgroundPanel := AItem.GetControlByLookupName<TfgCardPanel>('background');
  PrimaryLabel := AItem.GetControlByLookupName<TfgLabel>('primary');
  
  // Определяем параметры цвета выделения фона панели и цвета текста.
  if AIsSelected then
  begin
    BackgroundPanel.BackgroundColorName := R.Theme.Color.PRIMARY_LIGHT_PRIMARY;
    PrimaryLabel.ColorName := R.Theme.Color.ON_PRIMARY_TEXT;
  end
  else
  begin
    BackgroundPanel.BackgroundColorName := '';
    PrimaryLabel.ColorName := '';
  end;
 
  // Опционально, можно выполнить любую анимацию
  if AInitiator = TfgItemSelectionInitiator.User then
    BackgroundPanel.Shake;
end;

Добавлен новый демонстрационный пример: "Компоненты" -> "TfgCollectionView" -> "Ручное отображение выделения".

TfgControlEnumerators

Теперь доступны два энумератора по обходу дерева компонентов с возможностью управлять обходом. Оба энумератора доступы в классе TfgControlEnumerators.

• TfgControlEnumerators.Enum - Корень -> First..Last child
• TfgControlEnumerators.ReverseEnum - Корень -> Last..First child

Например, обход по всем TfgEdit может выглядеть так:

TfgControlEnumerators.Enum(Form,
  procedure (const AChild: TfgControl; var AAction: TfgEnumControlsAction)
  begin
    if AChild is TfgEdit then
      TfgLog.Debug(AChild.ToString);
  end);

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

TfgControlEnumerators.Enum(Form,
  procedure (const AChild: TfgControl; var AAction: TfgEnumControlsAction)
  begin
    if AChild is TfgEdit then
    begin
      TfgLog.Debug('Edit: ' + AChild.ToString);
      AAction := TfgEnumControlsAction.Stop;
    end
    else
      AAction := TfgEnumControlsAction.Continue;
  end);

Через параметр AAction анонимной функции можно передать дальнейшее направление действия по обходу компонентов:

• Continue - Перейти к следующему компоненту;
• Discard - Перейти к соседнему компоненту;
• Stop - Остановить обход.

Маленькие приятности

Теперь компоненты из групп "FGX: Standard" и "FGX: Layout" имеют свои оригинальные иконки, которые позволяют проще находить нужные компоненты в палитре компонентов.

В последнем релизе 1.13.4.0 мы уже анонсировали добавление сервисов идентификации пользователя в сторонних сервисах. Сервисы идентификации позволяют получить информацию о пользователе используя его учетную запись в других сервисах, таких как GoogleId, AppleID, Facebook, VKontakte и тд. В релизе 1.13.4.0 мы разработали низкоуровневую кроссплатформенную архитектуру сервисов идентификации, которая позволяет нам и вам добавлять реализации любых сервисов идентификации пользователя. Первым таким сервисом стала реализация AppleID (TfgAppleIdAuthenticationClient). На подходе Facebook и другие сервисы. Детально о том, как установить и использовать разработанные компоненты мы поговорим в отдельных статьях.

В этой статье нам хотелось бы поделиться одним очень мощным и полезным новым компонентом, которые позволит легко оживить ваше приложение и добавить в него сложные анимации. Речь пойдет о поддержке анимации Airbnb Lottie (https://airbnb.io/lottie)

Немного о Lottie

Lottie - это библиотека с открытым кодом от компании Airbnb для проигрывания анимации, созданной в приложении Adobe After Effects.

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

Анимация представляет собой текстовый файл в формате JSON, в котором содержится описание построения векторного изображения с анимацией. Благодаря чему, файл анимация весит очень мало при этом не теряя в качестве. 

В библиотеку добавлен новый компонент TfgLottieImage, который позволяет отобразить Lottie анимацию.

Как использовать?

1. Для начала надо раздобыть файл анимации. Можно поискать готовые анимации от дизайнеров на ресурсе https://lottiefiles.com/ .

Помимо этого ресурса, есть еще и другие. Например, ресурс по встраиванию анимированных иконок: https://lordicon.com/ 

После выбора интересуемой анимации, скачиваем анимацию в формате Lottie JSON. Например, такая анимация ракеты весит всего 25 КБ:

2. После этого добавляем этот файл анимации в дизайнер ресурсов FGX Native. Добавлен новый тип ресурса "Lottie Анимация":

После создания нового ресурса, загружаем скаченный ранее файл. В результате чего дизайнер отобразит вам ваш файл анимации. Укажите ресурсу понятное имя, например "Animations\Red Rocket".

Разместив на форме новый компонент TfgLottieImage, укажите ресурс анимации через свойство AnimationName. 

Это все, что требуется, чтобы запустить ракету в космос. Запустив приложение на Android или iOS вы увидите летящую ракету.

Демонстрационный пример

В поставку включен новый демо-пример "Компоненты" -> "TfgLottieImage" -> "Проигрыватель Lottie анимации".

Настройки 

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

• ImageMode - Режим отображения изображения (растянуть, вписать, заполнить).
• Loop - нужно ли запускать анимацию по кругу.
• Speed - коэффициент скорости. Например: 2 - проигрывать анимацию в два раза быстрее, 0.5 - в два раза медленнее.
• Duration - длительность анимации в мсек (без учета Speed).

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

• Play - начать воспроизведение с начала
• Stop - остановить (Progress сбрасывается на начало).
• Pause - приостановить
• Resume - продолжить с текущего места.
• Progress - установить текущее место воспроизведения. Коэффициент из диапазона [0..1], где 0 - это начало, 1 - конец.

Итоги

Уверены, данная новинка найдет свое применение в ваших проектах и добавит им изюминки. 

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

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

GooglePay - TfgGooglePayClient 

Первая новинка - это новый компонент TfgGooglePayClient оплаты покупок в вашем приложении через платежную систему GooglePay.

Настройка 

Для того, чтобы добавить возможность оплаты покупок в вашем приложении, вам необходимо выполнить первичную настройку на стороне Google - https://developers.google.com/pay/api/web/guides/setup?hl=ru

В результате этой настройки вы получите идентификатор продавца Google - MerchantId.

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

Для того, чтобы иметь возможность использовать GooglePay в FGX Native приложении, необходимо добавить в манифест Android приложения следующие строчки в любое место внутрь тега <application>:

 1. Версию GooglePlay сервисов. ТОЛЬКО, если вы не используете "Firebase PushNotification", Maps или AdMob.

<meta-data android:name="com.google.android.gms.version" android:value="12451000" />

2. Включить доступ приложения к кошельку:

<meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />

3. Указать идентификатор продавца в свойстве "TfgGooglePayClient.MerchantName", полученный на предыдущем шаге.

Проверка возможности оплаты через GooglePay

GooglePay может быть недоступен на устройстве пользователя, поэтому, перед инициированием процесса оплаты, необходимо узнать текущий статус. Это можно сделать через асинхронный метод "TfgGooglePayClient.IsReadyToPayAsync":

uses
  FGX.Payments.GooglePay.Types;

if gpClient.IsSupported then
  gpClient.IsReadyToPayAsync(False, procedure (const AStatus: TfgGooglePayStatus)
    begin
      // Отображаем/Скрываем кнопку оплаты через GooglePay
      btnPay.Visible := AStatus = TfgGooglePayStatus.Available;
    end);

Оплата через GooglePay

Для инициации оплаты необходимо заполнить информацию о проводимой транзакции и воспользоваться асинхронным методом оплаты "TfgGooglePayClient.PayAsync". Минимально необходимая информация в транзакции - это код валюты и цена.

procedure TFormMain.btnPayTap(Sender: TObject);
var
  TransactionInfo: TfgTransactionInfo;
begin
  TransactionInfo := TfgTransactionInfo.Create;
  try
    { Информация о покупке }

    TransactionInfo.SetCurrencyCode('RUB')
                   .SetTotalPrice(100.12);

    gpClient.PayAsync(TransactionInfo);
  finally
    TransactionInfo.Free;
  end;
end;

Описание полей транзакции, смотрите в исходном коде или на сайте GooglePay.

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

1. "OnPaymentError" - в ходе оплаты произошла ошибка.
2. "OnPaymentComplete" - пользователь выполнил оплату, токен для проведения оплаты передается в параметрах события.
3. "OnPaymentCancelled" - пользователь отменил оплату.

Если платеж прошел успешно, то в событии OnPaymentComplete будет передан JSON ответ, из которого вы можете извлечь необходимую информацию согласно документации:

procedure TFormMain.gpClientPaymentComplete(Sender: TObject; const AResponse: TJSONValue);
begin
  mLog.Lines.Add(Format('Completed: AResponse="%s"', [AResponse.Format]));
end;

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

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

Диагностика и отладка

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

Все свойства компонента полностью соответствуют оберткам в документации Google Pay. Компонент формирует JSON запрос, который отправляется в нативное API. Вы можете проверить корректность формирования JSON запроса через лог. Для этого необходимо включить расширенное логирование в вашем приложении:

TfgLog.MinimumLevel := TfgLogLevel.Trace;

Полезные ссылки:

• Руководство по использованию бренда GooglePay.
• Советы UX по интеграции GooglePay.
• Чек лист по настройке GooglePay.
• Диагностика проблем.

TfgApplicationEvents

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

constructor TFormMain.Create(AOwner: TComponent);
begin
  inherited;
  TMessageManager.DefaultManager.SubscribeToMessage(TfgActivityResultMessage, ActivityResultHandler);
  TMessageManager.DefaultManager.SubscribeToMessage(TfgActivityNewIntentMessage, ActivityNewIntentHandler);
end;

destructor TFormMain.Destroy;
begin
  TMessageManager.DefaultManager.Unsubscribe(TfgActivityNewIntentMessage, ActivityNewIntentHandler);
  TMessageManager.DefaultManager.Unsubscribe(TfgActivityResultMessage, ActivityResultHandler);
  inherited;
end;

procedure TFormMain.ActivityNewIntentHandler(const Sender: TObject; const M: TMessage);
var
  Message: TfgActivityNewIntentMessage;
begin
  TfgAssert.IsClass(M, TfgActivityNewIntentMessage);

  Message := TfgActivityNewIntentMessage(M);
  TfgToast.Show(Format('Получен новый интент: intent=%s', [JStringToString(Message.Value.toString)]));
end;

procedure TFormMain.ActivityResultHandler(const Sender: TObject; const M: TMessage);
var
  Message: TfgActivityResultMessage;
begin
  TfgAssert.IsClass(M, TfgActivityResultMessage);

  Message := TfgActivityResultMessage(M);

  // Intent is available in Message.Data
  TfgToast.Show(Format('Получен результат из другого приложения: requestCode=%d, resultCode=%d', [Message.RequestCode, Message.ResultCode]));
end;

Сейчас же мы добавили два новых события "TfgApplicationEvents.OnActivityResult" и "TfgApplicationEvents.OnActivityNewIntent", которые позволяют значительно сократить код и сконцентрироваться только на реализации. 

procedure TFormMain.fgApplicationEvents1ActivityNewIntent(Sender: TObject; const AIntent: TfgAndroidIntent);
begin
{$IFDEF ANDROID}
  TfgToast.Show(Format('Получен новый интент: intent=%s', [JStringToString(AIntent.toString)]));
{$ENDIF}
end;

procedure TFormMain.fgApplicationEvents1ActivityResult(Sender: TObject; const ARequestCode, AResultCode: Integer;
  const AIntent: TfgAndroidIntent);
begin
{$IFDEF ANDROID}
  TfgToast.Show(Format('Получен результат из другого приложения: requestCode=%d, resultCode=%d', [ARequestCode, AResultCode]));
{$ENDIF}
end;

TfgCollectionView

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

Теперь мы предлагаем вам самостоятельно решить, как должно работать выделение при помощи новых событий  "TfgCollectionView.OnItemCanSelect" и "TfgCollectionView.OnItemCanDeselect". Данные события вызываются непосредственно до момента установки или снятия выделения и позволяют отменить действие при помощи передаваемого параметра AAllow.

Так же мы исправили ряд ошибок выделения на платформе iOS, так что теперь процесс выделения работает одинаково на всех платформах.

ВАЖНО! Теперь по умолчанию компонент позволяет сбросить выделение элемента в режиме SingleSelect. 

Заключении

Желаем вам свершения всего задуманного, интересных проектов и амбициозных целей!

Спасибо, что вы с нами!

В ближайшее время выйдет релиз FGX Native 1.13.0.0 с полноценной поддержкой Delphi 11. Обо всех нововведениях по порядку.

Delphi 11

Начиная с версии 1.13.0.0 мы включили поддержку Delphi 11. В то же время, мы исключили поддержку 10.3 из инсталлятора на основании результатов голосования:

Мы переработали все формы дизайнера и добавили полноценную поддержку HiDPI.

Дизайнер форм

Добавлен новый режим позволяющий отключать пунктирную рамку компонентов.

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

Обновления TfgDatePicker и TfgTimePicker

В этом релизе мы добавили несколько небольших улучшений этих компонентов. Теперь вы можете указать формат ввода времени: 12 или 24 часовой формат. За это отвечает новое свойство TfgTimePicker.Is24HoursMode = (LocaleDependent, True, False). Теперь при старте компонента на платформе Android он по умолчанию выбирает часовой формат на основании текущей локали устройства.

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

Так же, теперь вы можете отдельно указывать задний фон для этих компонентов при помощи свойства BackgroundName.

Очень часто при разработке мобильных приложений разработчики сталкиваются с одними и теми же задачами. Большинство решений, которые есть в интернете, ориентированы под FMX. Однако, зачастую из-за зависимостей в RTL на FMX Java код, эти решения нельзя просто добавить в FGX Native как есть и использовать.

Поэтому мы решили по мере возможностей предлагать вам решения этих задач в виде расширений для FGX Native. Расширение будет включать необходимую обвязку/компоненты для FGX Native для сторонних OpenSource проектов. Первым таким расширением будет реализация нового компонента генерации штрихкода TfgBarcode на основе библиотеки Zint (https://www.zint.org.uk/).

Отображение штрихкодов

Новый пакет расширения FMXNative.Extension.Zint включен в поставку 1.11.8.0. Пакет содержит новый компонент TfgBarcode, поддерживающий отображение огромного числа типов штрихкодов. 

Свойство Symbology позволяет выбрать тип отображаемого штрихкода. Через свойство Data указываются кодируемые данные. А через группу свойств Appearance вы можете настроить визуальное отображение штрихкода.

Новое правило именования пакетов FGX Native

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

• FGXNative.Core <- fgx
• FGXNative.Design <- fgx_design
• FGXNative.Registration <-fgx_reg
• FGXNative.Extension.Translator <- FGXTranslatorD
• FGXNative.Externals <- fgx_externals

Так же, если вы используется наш компонент локализации, необходимо:

• После установки новой версии библиотеки запустить среду
• Среда отобразит ошибку при загрузке пакета FGXTranslatorD. Необходимо отвечать Yes во всех диалогах про этот пакет.
• Затем открыть список компонентов среды: "Components" -> "Install Packages..."
• В списке найти строчку, соответствующую FGXTranslatorD и удалить ее при помощи кнопки "Remove".
• Данный компонент мы теперь регистрируем автоматически при установке FGX Native.

Календарь под iOS

В новой версии так же появится реализация компонента TfgCalendar для iOS. iOS не имеет родной реализации календаря. Поэтому мы с нуля реализуем данный компонент.

Заключение

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

• Ссылку на стороннюю библиотеку с наличием исходных кодов/OpenSource. Без доступа к исходным кодам мы не сможем выполнить адаптацию под FGX Native.
• Описание для чего данный компонент нужен.
• Если кто-то из участников уже озвучил в комментариях нужный вам компонент, просьба отметить такое сообщение реакцией (лайком).

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

Общие сведения.

Для просмотра логов под Android используется утилита командной строки logcat. Вы можете использовать ее как напрямую, управляя через параметры командной строки, так и воспользоваться Android Studio в которой есть одноименное окно logcat.
Второй вариант предпочтительней, т. к. имеет графический интерфейс, но, естественно, он требует установки самой Android Studio.
Итак, новая утилита FGX Android Log Viewer (далее логвьювер) призвана упростить просмотр логов за счет удобной интеграции в IDE, графического интерфейса и гибкой системы фильтрации.

Внешний вид.

Запустить логвьювер можно из меню Project -> FGX Android Log Viewer.

1. Левую горизонтальную часть окна занимает тулбар с основными органами управления, такими как: запуск/остановка захвата логов, очистка списка, экспорт и тд.
2. Верхний тулбар содержит выбор активного устройства, выбор приложения, для которого будут собираться логи (либо для всех приложений) и быстрый фильтр.
3. Основную часть окна занимает список логов, представленный в виде таблицы.
4. Внизу располагается статус бар, отображающий количество элементов списка, в тч отфильтрованных, а так же, текущий статус захвата логов.
5. Опциональное окно детальной информации о событии.

Логвьювер поддерживает докинг форм, следовательно может быть как плавающим окном, так и быть закреплен в любом удобном для вас месте в IDE.

Отправка сообщений в лог.

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

Теперь создадим тестовое приложение, запустим его и отправим несколько записей в лог.
Для этого воспользуемся кодом из предыдущей статьи:

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;

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

1. Изначально собирать сообщения только от нашего приложения, выбрав его перед захватом лога в верхнем тулбаре (в этом случае количество попадаемых в лог сообщений значительно сократится, но так можно пропустить важные сообщения, в т.ч. падения, от самой Android и/или её компонентов)
2. Воспользоваться фильтрацией, которая представлена в логвьювере в двух вариантах: быстром и расширенном.

Воспользуемся вариантом 2.

Варианты фильтрации списка событий.

Окно быстрой фильтрации находится в правой части верхнего тулбара (вариант по-умолчанию):

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

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

Каждое окно ввода "привязано" к одноименному столбцу списка. В итоговую выборку попадут события, которые соответствуют всем заполненным окнам фильтра (AND).

Просмотр событий.

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

Альтернативный вариант - поиск по Process Id (PID), который можно узнать из окна IDE Events (в нашем случае 25505)

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

Либо вы можете отфильтровать список непосредственно по части отправленной записи:

Состав и количество фильтров огранивается только вашей фантазией.

Надеемся, что вам понравится опыт работы с новым средством просмотра логов FGX Android Log Viewer. 

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

Еще одним нововведением в релизе 1.11.2.0, помимо TfgPopup, является работа с пикселями ("сырыми данными") TfgBitmap. Доступ к пикселям открывает практически неограниченные возможности для обработки и анализа изображений. Так же в новом релизе будет добавлена возможность поворота изображения.

Воможность работы с пикселями TfgBitmap.

Общие сведения.

Обращение к сырым данным возможно только между парными вызовами TfgBitmap.MapData и TfgBitmap.UnmapData, которые могут быть знакомы пользователям FMX. Однако, важным отличием от FMX, является отсутствие уровня доступа (только чтение/только запись/чтение и запись). Это сделано с целью ускорения доступа, т. к. работа осуществляется непосредственно с данными нативного изображения без создания промежуточного буфера.

В результате вызова TfgBitmap.MapData вы получаете интерфейс IFGXBitmapData (более подробно рассмотрен ниже), который предоставляет доступ к пикселям изображения.

Важно! Актуальность объекта IFGXBitmapData гарантирована только между вызовами TfgBitmap.MapData и TfgBitmap.UnmapData, т.к. используется "натуральный" интерфейс без подсчета ссылок.

Важно! Во время доступа к сырым данным операции по изменению TfgBitmap запрещены (например загрузка из различных источников, изменение размера, масштаба, поворота и тд).

Типичный пример работы с сырыми данными изображения:

var
  LBitmapData: IFGXBitmapData;
begin  
  if LBitmap.MapData(LBitmapData) then
    try
      // Работа с пикселями изображения.
    finally
      LBitmap.UnmapData;
    end;
end;

Важно! Всегда проверяйте результат выполнения TfgBitmap.MapData во избежание непредвиденных последствий. Повторный вызов TfgBitmap.MapData для уже спроецированных данных вернет ложь.

Интерфейс IFGXBitmapData.

Интерфейс IFGXBitmapData предоставляет информацию об изображении (Info, Width, Height), а так же позволяет манипулировать пикселями изображения (RawData, Scanlines, Pixels, Colors).

Информация о битмапе TfgBitmapInfo:

1. BitsPerPixel — количество бит на один пиксель изображения. К примеру, для одного из самых распространенных вариантов ARGB, этот параметр будет равен 32-ум битам.
2. BytesPerRow — количество байт на одну строку изображения. Обычно это Width * BitsPerPixel, но, в случае применения выравнивания для ускорения доступа к данным, значение может быть иным.
3. PixelFormat — формат пикселя изображения. В отличии от фиксированного формата ARGB присущего стандартному типу TAlphaColor, нативные изображения могут иметь различный состав и порядок следования цветовых компонентов. Возможные комбинации этих параметров отражает тип  TfgBitmapPixelFormat.

   TfgBitmapPixelFormat = (Unknown, Alpha, Gray, ARGB, RGBA, RGB, RGB24);

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

Интерфейс IFGXBitmapData содержит несколько вариантов доступа к самим данным, которые отличаются по степени абстракции:

1. RawData — самый низкий уровень. Возвращает указатель на начало данных. Размер данных можно узнать из свойства RawDataSize.
2. Scanlines — указатель на переданную в аргументе строку. Размер данных строки в байтах можно получить из Info.BytesPerRow, количество пикселей в строке — Width.
3. Pixels — указатель на пиксель. В аргументах передаются координаты пикселя. Размер пикселя в битах можно получить из Info.BitsPerPixel.
4. Colors — цвет пикселя в стандартном формате TAlphaColor. В аргументах передаются координаты пикселя.

Как правило, для достижения максимальной скорости при последовательном сканировании пикселей изображения, вместо индексного доступа (Pixels, Colors) используют инкрементный перебор начиная с некой точки отсчёта (начало изображения RawData, начало определенной строки Scanlines[Y], определенный пиксель Pixelsх[X, Y]) . В этом случае вы получаете указатель, вместо привычного TAlphaColor.  Для преобразования данных по указателю в тип TAlphaColor вам могут пригодиться готовые варианты для конвератции, которые находятся в хэлпере TAlphaColorHelper из модуля FGX.Types.Color.

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

constructor Create(const APixel: PByte; const APixelFormat: TfgBitmapPixelFormat; const AIsAlphaPremultiplied: Boolean); overload;

Для обратной операции подойдет метод:

/// <summary>Записывает текущий цвет по адресу <c>APixel</c> с учетом опций <c>APixelFormat</c> и <c>AIsAlphaPremultiplied</c>.</summary>
procedure ToPixel(const APixel: PByte; const APixelFormat: TfgBitmapPixelFormat; const AIsAlphaPremultiplied: Boolean);

Реальный пример работы с сырыми данными.

Ниже приведен кусок кода из нового демонстрационного примера "Графика" -> "TfgBitmap - работа с "сырыми" данными" в котором изображение преобразуется из цветного в оттенки серого.

uses
  FGX.Types.Color, FGX.Canvas.Types, FGX.Canvas.Types, FGX.Assets, FGX.Assets.BitmapSet;

procedure TFormMain.fgButton1Tap(Sender: TObject);
var
  LBitmapSet: TfgAssetBitmapSet;
  LBitmap: TfgBitmap;
  LBitmapData: IFGXBitmapData;
  I, J: Integer;
begin
  if not TfgAssetsManager.Current.Find<TfgAssetBitmapSet>('Image', LBitmapSet) then
    Exit;
  LBitmap := LBitmapSet.GetBitmap;
  if LBitmap.MapData(TfgBitmapDataAccessMode.ReadWrite, LBitmapData) then
    try
      for J := 0 to LBitmap.Height - 1 do
        for I := 0 to LBitmap.Width - 1 do
          LBitmapData.Colors[I, J] := LBitmapData.Colors[I, J].ToGrayscale;
    finally
      LBitmap.UnmapData;
    end;
  fgPaintBox1.Invalidate;
end;

Повороты изображения.

Благодаря добавлению работы с сырыми данными появилась возможность с легкостью вращать изображения.

Поворот осуществляется с помощью метода TfgBitmap.Rotate:

/// <summary>Поворачивает изображение на указанный угол.</summary>
procedure Rotate(const AAngle: TfgRotation);

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

TfgRotation = (Rotation0 = 0, Rotation90 = 90, Rotation180 = 180, Rotation270 = 270);

Поворот осуществляется по часовой стрелке.

Благодарим за внимание и приятного коддинга 🙂.

В ближайшем релизе 1.11.2.0 всех нас ждет появление поддержки выпадающих окон TfgPopup. Если вам необходимо отобразить содержимое в виде выпадающего окна, то эта возможность непременно вам пригодится.

Создание

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

• Отключить полноэкранный режим формы TfgForm.FullScreen = False.
• Опционально сделать фон прозрачным через TfgForm.Transparent = True .

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

Чтобы создать выпадающее окно нужно обязательно иметь содержимое, которое вы планируете показать в этом выпадающем окне. Создание выполняется через фабрику FGX.Popup.TfgPopupFactory, как и тосты, пикеры, диалоги и тд.

var
  FPopup: TfgPopup;
  FPopupContent: TFrameList;

FPopupContent := TFrameList.Create(nil);
FPopup := TfgPopupFactory.CreatePopup(FPopupContent);

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

FPopup := TfgPopupFactory.CreatePopup(FPopupContent, False);

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

FPopup.Size := TSizeF.Create(fgButton1.Width, 200);

Отображение

Для отображения выпадающего окна существует два одноименных метода TfgPopup.DropDown, оба которых привязывают отображение окна к указанному компоненту.

    /// <summary>
    ///   Открывает выпадающее окно, прикрепленное к указанному компоненту <c>AAnchor</c> со смещением <c>AOffset</c>.
    /// </summary>
    procedure DropDown(const AAnchor: TfgControl; const AOffset: TPointF); overload; virtual; abstract;

    /// <summary>Открывает выпадающее окно, прикрепленное к указанному компоненту <c>AAnchor</c>.</summary>
    procedure DropDown(const AAnchor: TfgControl); overload;

FPopup.DropDown(fgButton1);

Если вам необходимо выполнить отображение выпадающего окна со смещением, то вы можете передать это смещение вторым параметром:

FPopup.DropDown(fgButton1, TPointF.Create(0, 8));

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

Для закрытия окна используйте метод Close.

    /// <summary>Закрывает выпадающее окно.</summary>
    procedure Close; virtual; abstract;

Настройка внешнего вида

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

/// <summary>Прозрачное выпадающее окно или нет?</summary>
property IsTransparent: Boolean read FIsTransparent write SetIsTransparent;

Если вы используете в своих приложениях темы, то вы можете использовать темы и для содержимого выпадающего окна. Для этого необходимо указать название темы в свойстве TfgPopup.ThemeName. Таким образом можно добавить поддержку темной темы и детальнее настроить внешний вид попапов.

/// <summary>Название темы, используемой для содержимого выпадающего окна.</summary>
property ThemeName: TfgThemeName read FThemeName write SetThemeName;

 

События

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

    /// <summary>Вызывается, когда выпадающее окно отображается на экране.</summary>
    property OnOpened: TNotifyEvent read FOnOpened write FOnOpened;

    /// <summary>Вызывается, когда выпадающее окно отображается на экране.</summary>
    property OnOpenedCallback: TfgCallback read FOnOpenedCallback write FOnOpenedCallback;

    /// <summary>Вызывается, когда выпадающее окно скрывается с экрана.</summary>
    property OnClosed: TNotifyEvent read FOnClosed write FOnClosed;

    /// <summary>Вызывается, когда выпадающее окно скрывается с экрана.</summary>
    property OnClosedCallback: TfgCallback read FOnClosedCallback write FOnClosedCallback;