Jump to content

Yaroslav Brovin

Administrators
 View Profile  See their activity

  • Posts

    2,584

  • Joined

  • Last visited

  • Days Won

    652

 Content Type 

Blog Entries posted by Yaroslav Brovin

  1. Yaroslav Brovin
    В процессе реализации уже существующих компонентов библиотеки FGX Native для iOS мы иногда сталкиваемся с тем, что для полноценной кроссплатформенной разработки приложений текущего функционала компонентов уже не хватает. Например, в панели TfgNavigationBar (iOS) для кнопки навигации часто иконку дополняют текстом, в то время, как в андроиде текст никто не добавляет. Однако, речь в этой новости пойдет не об этом компоненте, а об обычной кнопке TfgButton.
    С виду кнопка - один из самых простых компонентов. Однако, на практике, это довольно сложный компонент, если брать во внимание большое разнообразие в мире кнопок разных стилей и видов. Было много причин, почему кнопка TfgButton в библиотеке довольно ограничена в своих возможностях. Главная из них - это как сделать действительно удобный набор настроек, который угодил бы большинству и при этом был бы прост и гибок в настройке. 
    Рад поделиться, что в процессе реализации iOS и изучения Material Design,  мы пришли к удобному на наш взгляд набору настроек кнопки. 
    Стили
    Теперь кнопка может иметь один из трёх базовых стилей:

    Text - обычная текстовая кнопка, без рамки, с возможностью привязать иконку. Этот тип предназначен для третьестепенных действий. Outlined - это плоская Text кнопка с окантовкой. Этот же тип используется для второстепенных действий. Contained - это Outlined кнопка + заливка области. Естественно, каждый вид кнопки должен иметь свой индивидуальный набор настроек. И желательно, чтобы инспектор объектов отображал только актуальные для данного стиля настройки. Так, например, если используется Text кнопка, то для нее должны быть доступны настройки рамки и заполнения.
    Поэтому теперь каждый стиль кнопки динамически подгружает свой набор настроек. Выбор стиля выполняется в инспекторе объектов в новом свойстве Appearance:

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

    Настройки элементов
    Стоит отметить, что теперь можно отдельно управлять отображением каждого элемента кнопки:
    Текст Иконка Рамка Наполнение Таким образом, теперь для иконки можно отдельно указать оттенок прямо на уровне компонента. Это особенно удобно в случаях, когда вы используете одну и ту же иконку в разных местах с разными оттенками. Если ранее для решения подобной задачи было необходимо делать копии одной и той же иконки и менять ей оттенок в дизайнере ресурсов, то сейчас достаточно установить свойство Appearance.Icon.TintColorName равным "Theme\Text\Icon" (к примеру).

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

    При этом, кнопка с Contained стилем умеет автоматически подбирать цвета текста и иконки на основании цвета фона (если вы не указали свои цветовые предпочтения явно?

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

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

    Изменения API
    Переименованы свойства ImageName -> IconName, ImageLocation -> Appearnace.Icon.Location, так как на наш взгляд иконка - это небольшой графический элемент, который преимущественно отображается на кнопке. При этом мы оставили обратную совместимость, так что при запуске старого проекта, старое значение из свойства ImageName и ImageLocation будет автоматически прочитано. Свойства TextSettings и TextShadow теперь находятся в группе настроек Appearance.Text. Они так же будут успешно восстановлены для старых проектов. Старые типы кнопок TfgButonKind.Raised и Flat теперь не будут поддерживаться и при открытии проекта автоматически будут сконвертированы в Contained и Text стили. P.S. Всем хороших выходных и успешного кодирования ?
  3. Yaroslav Brovin
    Всем доброго дня!
    У нас есть много хороших новостей на конец уходящего лета ?.
    Во-первых. Мы практически полностью разработали новые компоненты под iOS TfgNavigationBar, TfgListMenu, TfgDatePicker, TfgTimePicker, TfgTimeEdit, TfgDateEdit, TfgCheckBox, TfgRadioButton, TfgPageControl, TfgTrackBar, TfgRectangle, TfgLine, TfgSvgPath и тд. Закончили с TfgCollectionView и реализовали полноценную поддержку стилей, "Drag & Drop" и "Pull To Refresh".
    reordering.mp4.1e0e3a9268a4c8a4cb40e3a8b75d6b03.mp4 pull-to-refresh.mp4.87c902179beda7dacf55c9f028c06423.mp4
    Во-вторых. Мы реализовали полноценную TfgCanvas для iOS с поддержкой градиентов, разных кистей и отрисовкой на битмапах.
    В-третьих. Мы улучшили поддержку TfgPath. И теперь мы полностью поддерживаем весь стандарт доступных path команд w3c.
    В-четвертых. Реализовали диалоги и пикеры для выбора даты и времени.
    В-пятых. Реализовали TfgForm.OnSafeAreaChanged и добавили возможность получать состояние приложение напрямую у TfgApplication.State.
    В-шестых. Запустили FGX Native Global Demo и большая часть экранов уже открывается и успешно работает.
     
    Всем хорошего окончания этих выходных!
  4. Yaroslav Brovin
    Сложно представить мобильное приложение без графических ресурсов. Поиск иконок зачастую становится довольно сложной и не тривиальной задачей, особенно с условием необходимости найти иконки в разных масштабах, чтобы они четко выглядели на любых устройствах клиентов. 
    Мы подумали, что можем помочь вам с этим и сэкономить время, которое вы можете потратить на что-то более важное. Теперь вы сможете в пару кликов добавить современные иконки в ваше приложение через дизайнер ресурсов FGX Native.


    Около 1000 вариантов уникальных иконок доступно вам в 4 различных размерах (18х18, 24х24, 36х36 и 48х48). Каждая иконка поддерживает 5 варианта скейлов (1.0, 1.5, 2.0, 3.0 и 4.0) для каждого базового размера и специально разработана с учетом Материал дизайна для Андроид приложений.
    В будущем наборы иконок будут расширяться и появляться новые.
    Возможность появится в 1.1.6.0. Не пропусти!

  5. Yaroslav Brovin

    Улучшения TfgToast

    By Yaroslav Brovin,


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

    В FGX Native данное уведомление представлено классом FGX.Toasts.TfgToast, позволяющим его отобразить на экране. В релизе 1.9.2.0 мы реализовали тосты для iOS, а так же выполнили ряд улучшений в архитектуре управления TfgToast, сделав ее такой же единообразной, как и в диалогах, пикерах и других сервисах.
    Новая архитектура
    Теперь вся работа по созданию TfgToast отведена фабрике TfgToastFactory. Через нее можно, как создать экземпляр уведомления для ручной настройки, так и просто отобразить уведомление.
    Быстро отобразить уведомление можно теперь так:
    TfgToastFactory.Show('Hello world!'); Было:
    TfgToast.Show('Hello world!'); Если вы хотите по какой-то причине вручную управлять уведомлением, вы можете его создать через метод:
    Toast := TfgToastFactory.CreateToast; Было:
    Toast := TfgToast.Create('Hello world!'); Однако, в этом случае, уничтожение уведомление лежит на ваших плечах.
    Обратная совместимость
    Мы временно оставили старые методы по отображению тостов. Однако, рекомендуем вам, по возможности перейти на новый вариант использования тостов через TfgToastFactory. Поскольку старый способы могли вводить разработчиков в заблуждение, так как метод TfgToast.Create совпадает по смыслу с конструктором, однако, им не является.
  6. Yaroslav Brovin
    Добрый день, уважаемые разработчики.
    В этой статье мы поговорим о поддержке темной темы в FGX Native приложении, о том, как ее добавить, как сделать автоматическое переключение и о том, что добавлено в 1.15.3.0 в этой области.

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

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

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

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

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

    Если у кнопок и у меток вы можете поменять цвет шрифта, то с самим барабаном возникают вопросы, так как 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.
    Результат работы представлен ниже:
    video_2023-02-08_00-03-12.mp4 video_2023-02-09_22-47-34.mp4
    Планы на будущее
    В будущем мы будем стараться упростить этот процесс, чтобы темная тема на стороне FGX Native создавалась автоматически, если разработчик не использует темы в своем приложении, и она автоматически переключалась при смене системной темы.
  7. Yaroslav Brovin
    В ближайшие дни выйдет новый релиз библиотеки FGX Native 1.9.3.0, главной новинкой которой будет утилита командной строки для генерации заголовочных файлов Delphi для использования Java API /Android API. 
    Утилита располагается в каталоге "$(FGX)\Tools\Java2Delphi" и в ее состав входят:
    Java2Delphi.exe - утилита. config.template.json - Шаблон конфигурационного файла, в котором указаны правила формирования итоговых Delphi-модулей. api-versions.android-28.xml - Файл с информацией об Android API 28 версии. UsedGUID.txt - набор использованных GUID значений для Delphi интерфейсов. run.bat - пакетный файл для запуска утилиты в любом месте. Перед первым применением необходимо выполнить настройку утилиты.
    Настройка
    Управление утилитой идет при помощи конфигурационного json-файла, передаваемого через аргументы командной строки. Перед первым применением, необходимо:
    1. Создать каталог в любом месте, где будут размещены все результаты генерации.
    2. Скопировать файл "run.bat" в каталог (1).
    3. Скопировать конфигурационный шаблон "config.template.json" в каталог (1) и назвать его "config.json" (название может быть любым).
    4. Отредактировать базовые настройки Java окружения:
    "javap": "$(JAVA_HOME)\\bin\\javap.exe", "jar": "$(JAVA_HOME)\\bin\\jar.exe", Java2Delphi использует две утилиты командной строки из Java SDK: "javap.exe" и "jar.exe". По умолчанию она использует переменную окружения $(JAVA_HOME). Если она у вас указана в Windows, то этот шаг можно пропустить. Если нет, то либо необходимо добавить ее с указанием местоположения Java JDK:

    или напрямую указать пути к требуемым утилитам.
    5. Указываем пути, куда будут помещены результаты генерации (опционально).
    "outputDir": ".\\Headers", "signatureOutputDir": ".\\Signatures", outputDir - каталог, куда будут помещены pas файлы с необходимыми обертками Java/Android Api. signatureOutputDir - вспомогательный каталог, куда будут помещены вспомогательные файлы с сигнатурами Java классов. После выполнения первичной настройки файла конфигурации, приступим теперь к указанию, какие Java классы надо транслировать.
    Правила генерации файлов
    Для того, чтобы сгенерировать заголовочные файлы необходимо указать:
    Jar-библиотеки, которые содержат необходимые Java классы. Указать требуемые для перевода Java классы. Указать, в какие Delphi модули разместить результирующие обертки. 1. Указываем нужные jar библиотеки.
    Библиотеки указываются в секции jars:
    "jars": [ "E:\\Development\\Android\\platforms\\android-28\\android.jar" ], По умолчанию, мы всегда подключаем jar библиотеку Android (по-этому не удаляйте ее, если хотите совместимости с Android API).
    Вам необходимо откорректировать расположение данного файла с учетом вашей системы. 
    2. Указываем требуемые для перевода Java классы.
    Теперь мы должны сказать утилите в секции "classes", какие классы нас интересуют в этих библиотеках. Здесь необходимо использовать полное название Java типов с учетом названия пакета:
    "classes": [ "java.lang.Object", "java.lang.CharSequence", "java.lang.String", "java.lang.Class", "java.lang.Boolean", "java.lang.Number", // Можно использовать * на конце пакета, чтобы выбрать все классы в данном пакете "android.provider.*", "android.view.animation.Animation", "android.view.animation.Animation.AnimationListener", "android.view.animation.Animation.Description", // и тд По умолчанию шаблон включает в себя все классы из Android API, которые используются в FGX Native. Поэтому не удаляйте эти классы, если вы хотите получить заголовочные файлы, совместимые с уже существующими хедерами в FGX Native.
    Добавьте сюда те, которые вас интересуют.
    Поскольку в некоторых библиотеках могут быть 1000 классов. То обработка такого количества классов займет много времени. Помимо этого, вы получите гигантских размеров заголовочные файлы. Поэтому лучше добавлять только те классы, которые вам реально нужны для вызовов, а не все.
    3. Указываем правила генерации Delphi модулей.
    После того, как мы перечислили интересуемые нас Java классы, нам остается только указать, в какие Delphi модули их следует поместить. Это делается через "output":
    "output": [ { "name": "Android.Api.Text", // Название Делфи модуля Android.Api.Text.pas "uses": [ // Подключаемые Делфи модули в Android.Api.Text.pas "Android.Api.JavaTypes", "Android.Api.ActivityAndView" ], "classes": [ // Java классы, обертки над которыми будут добавлены в Android.Api.Text.pas "android.text.*" ], "exclude": [ // Опционально, можно исключить некоторые классы "android.text.method.*", "android.text.util.*", "android.text.ClipboardManager*" ] } ] Генерация
    Поздравляю, теперь вы можете запустить утилиту и наблюдать, как она трудится формируя заголовочные файлы по вашим правилам.

    Обратите внимание, что первый запуск занимает много времени, так как утилита генерирует сигнатуры Java классов (именно они используются для анализа структуры Java классов) и помещает их в каталог "signatureOutputDir". Однако, последующие запуски будут выполняться моментально, за счет того, что утилита не выполняет повторную генерацию сигнатур, если она уже есть. 
    Не удаляйте файлы сигнатур, они помогут ускорить повторную генерацию заголовочных файлов.
    Разбор пропущенных классы/методов/полей
    В процессе генерации утилита выполняет много сложной работы с анализом зависимостей, доступных типов и тд. Если какой-то из Java типов не указан в секции "classes", то утилита пропустит все его использования. При этом она сообщит об этом через лог.
    Например: При генерации класса android.text.HTML были пропущены два метода fromHTML (они не попали в pas файлы), потому что не был указан тип android.text.Html$ImageGetter.
    Skipped members of the Java type: android.text.Html Methods: - fromHtml(const AArg0: JString; const AArg1: Integer; const AArg2: JHtml_ImageGetter; const AArg3: JHtml_TagHandler): JSpanned; [android.text.Html$ImageGetter] - fromHtml(const AArg0: JString; const AArg1: JHtml_ImageGetter; const AArg2: JHtml_TagHandler): JSpanned; [android.text.Html$ImageGetter] Если вам нужны эти методы, то необходимо в секцию classes добавить этот тип:
    "classes": [ "android.text.Html.ImageGetter", Обратите внимание, что в Java "$" - это разделитель для вложенных классов. Однако в конфигурационном файле вместо него надо использовать ".".
×
×
  • Create New...