Jump to content
Yaroslav Brovin

[Новости] Небольшие нововведения в 1.5.0.0

Recommended Posts

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

1. Отступы для TfgLabel

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

image.pngimage.png  

Раньше такая задача решалась при помощи двух компонентов:

  1. Контейнер TfgLayout с требуемыми отступами для текста и с фоном BackgroundName в виде 9-path изображения.
  2. Метка TfgLabel, куда непосредственно выводится текст.

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

image.png

2. Оттенок для кнопки TfgButton

Теперь для кнопки TfgButton добавлены новые свойства TintColor и TintColorName, позволяющие перекрасить системный цвет кнопки.

image.png

3. Android AlarmManager

Мы добавили небольшой пример по использованию Java кода из  FGX Native приложения. Новый демонстрационный пример показывает, как сделать на языке Java свой BroadcastReceiver и использовать его в связке с FGX Native приложением. Данный пример пригодится разработчикам, которым необходимо более тесная интеграция с Android API.

4. Автосайз

iOS

Так же мы с нуля реализовали TfgDrawerLayout для iOS.

  • Like 11
  • Thanks 1

Share this post


Link to post
Share on other sites

Шикарно) скажите есть возможность добавить к компоненту TfgButton скругление краёв?! 

Share this post


Link to post
Share on other sites

Для скругления TfgButton можно использовать Маску из FGX Assets Manager.

Т.е. заходим в FGX Assets Manager, создаём маску, задаём радиус скругления и оттенок, сохраняем. В кнопке указываем маску в свойстве BackgroudName.

2020-09-18-14-39-08.gif

 

  • Like 1

Share this post


Link to post
Share on other sites
1 час назад, Andrey Efimov сказал:

Для скругления TfgButton можно использовать Маску из FGX Assets Manager.

Т.е. заходим в FGX Assets Manager, создаём маску, задаём радиус скругления и оттенок, сохраняем. В кнопке указываем маску в свойстве BackgroudName.

2020-09-18-14-39-08.gif

 

Так то можно и кнопку перекрасить через BackgroundName...

Share this post


Link to post
Share on other sites
4 минуты назад, r3h0soft сказал:

Так то можно и кнопку перекрасить через BackgroundName...

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

  • Like 1

Share this post


Link to post
Share on other sites
On 9/18/2020 at 9:40 AM, r3h0soft said:

Шикарно) скажите есть возможность добавить к компоненту TfgButton скругление краёв?! 

Позже обязательно добавим. Вообще, есть намерение сделать три типа кнопок со всеми настройками, как в MaterialDesign: https://material.io/components/buttons

  • Like 3

Share this post


Link to post
Share on other sites

В этом релизе еще добавили:

5. Иконка в TfgEdit

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

image.png

6. Внутренние отступы в TfgEdit

Аналогично TfgLabel, теперь у поля ввода так же можно менять внутренние отступы TfgEdit.ContentPadding.

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

image.png

7. Межбуквенный интервал

У TfgLabel появилось новое свойство LetterSpacing, позволяющее изменить межбуквенный интервал. Значение указывается в dp. Свойство не поддерживается пока в дизайнере IDE.

Используя это свойство, можно теперь точнее следовать руководству Material Design по типографике: https://material.io/design/typography/the-type-system.html

image.png

  • Like 7

Share this post


Link to post
Share on other sites
В 20.09.2020 в 22:27, Yaroslav Brovin сказал:

6. Внутренние отступы в TfgEdit

Аналогично TfgLabel, теперь у поля ввода так же можно менять внутренние отступы TfgEdit.ContentPadding.

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

image.png

 

Ярослав, можно про размещение дополнительных компонентов в TfgEdit подробнее?

Поле ввода не является контейнером

Share this post


Link to post
Share on other sites
12 минут назад, Roman сказал:

Поле ввода не является контейнером

Я так понимаю через PositionMode=Absolute. Например, кидаешь на layout tfgedit как Relative с FlexGrow=1 у на этот же layout кидаешь tfgbutton как absolute и RelativePostion выставляешь привязку к правому краю

  • Like 1

Share this post


Link to post
Share on other sites
2 часа назад, Игорь Мелентьев сказал:

Я так понимаю через PositionMode=Absolute. Например, кидаешь на layout tfgedit как Relative с FlexGrow=1 у на этот же layout кидаешь tfgbutton как absolute и RelativePostion выставляешь привязку к правому краю

Игорь, спасибо за комментарий!

Это вариант как раз самый очевидный :) В этом случае, можно даже оба компонента на Layout выравнять по Flex, указав у обоих PositionMode=Relative (Button выставить после Edit).

Но для чего тогда играть с отступами контента в Edit? 

Думаю, Ярослав что-то другое имел ввиду )))

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Yaroslav Brovin
      Всем доброго дня,
      При разработке кросс-платформенного приложения важной базовой составляющей является определение размеров компонентов. С одной стороны нет ничего проще, чем задать желаемый размер любому компоненту библиотеки FGX Native или задать правило выравнивания компонентов при помощи FlexBox. Однако, кросс-платформенная разработка накладывает определенные трудности в этом подходе. А именно зачастую размер компонентов зависит не только от других компонентов, но и от содержимого. И если с первым отлично справляется FlexBox, то со вторым в FGX Native нужно использовать метод для расчета размеров компонентов TfgControl.MeasureSize, и будем честны, это было временное решение.
      Мы всегда стараемся сделать библиотеку FGX Native удобной для использования, чтобы разработчик мог концентрироваться в коде на бизнес логике своего приложения, а не программной "настройке" UI. Одним из грядущих улучшений будет поддержка автоматического расчета размеров компонентов. Мы внедрили на нижнем уровне поддержку Autosize. Теперь на уровне появится новое свойство TfgControl.Autosize, которое отвечает за то, что именно нужно автоматически посчитать: ширину, высоту или обе величины. Если в ходе выравнивания компонента система понимает, что компонент имеет фиксированный размер, то в этом случае компонент может автоматически его рассчитать. Так например задание Autosize = [Height] для TfgTraсkBar автоматически посчитает нужную высоту компонента, а вот указание Autosize = [Width] для этого компонента ни на что не повлияет. 

      Не смотря на то, что сам механизм внедрен на нижнем уровне, реально это свойство в ближайшем релизе будет доступно только для нескольких компонентов: TfgSwitch, TfgTrackBar, TfgNavigationBar и возможно TfgLabel. Если с TfgSwitch и TfgTrackBar в целом понятно,  то вот на счет TfgNavigationBar  стоит отдельно отметить, что теперь этот компонент умеет в автоматическом режиме расчета высоты учитывать отступы у формы SafeArea и наличие заголовка и подзаголовка. И если раньше необходимо было программно отслеживать изменения отступов области SafeArea в TfgForm.OnSafeAreaChanged и на основании значений отступов вычислять руками высоту панели навигации, то сейчас все это будет происходить автоматически.



      Данное нововведение особенно актуально в свете предстоящего появления iOS. Так как в iOS используются другие шрифты, размеры текста и размеры компонентов. И чтобы сделать действительно универсальное приложение без этой функциональности будет очень сложно.
      Всем хорошей рабочей недели!
    • By Yaroslav Brovin
      Всем доброго дня!
      У нас есть много хороших новостей на конец уходящего лета 🌞.
      Во-первых. Мы практически полностью разработали новые компоненты под iOS TfgNavigationBar, TfgListMenu, TfgDatePicker, TfgTimePicker, TfgTimeEdit, TfgDateEdit, TfgCheckBox, TfgRadioButton, TfgPageControl, TfgTrackBar, TfgRectangle, TfgLine, TfgSvgPath и тд. Закончили с TfgCollectionView и реализовали полноценную поддержку стилей, "Drag & Drop" и "Pull To Refresh".
      reordering.mp4 pull-to-refresh.mp4
      Во-вторых. Мы реализовали полноценную TfgCanvas для iOS с поддержкой градиентов, разных кистей и отрисовкой на битмапах.
      В-третьих. Мы улучшили поддержку TfgPath. И теперь мы полностью поддерживаем весь стандарт доступных path команд w3c.
      В-четвертых. Реализовали диалоги и пикеры для выбора даты и времени.
      В-пятых. Реализовали TfgForm.OnSafeAreaChanged и добавили возможность получать состояние приложение напрямую у TfgApplication.State.
      В-шестых. Запустили FGX Native Global Demo и большая часть экранов уже открывается и успешно работает.
                    
      Всем хорошего окончания этих выходных!
    • By Yaroslav Brovin
      Всем хорошей пятницы,
      Немного новостей с полей разработки iOS ?. Мы продолжаем активно работать над реализацией iOS части библиотеки FGX Native и хотим поделиться с вами текущим статусом ?.
      1. Полностью реализованы новые компоненты
      TfgScrollBox, TfgVerticalScrollBox, TfgHorizontalScrollBox, TfgCardPanel, TfgSwitch, TfgTimer
      CardPanel-Demo.mp4
      2. Частично реализована поддержка TfgBitmap
      Реализованы базовые операции с TfgBitmap: 
      Создание. Работа со скейлом Чтение из разных источников. Сохранение. 3. Добавлена поддержка ресурсов
      Научили iOS приложение работать с нашими ресурсами. Теперь app пакет содержит ресурсы FGX Native приложения.
      4. Реализованы вспомогательные сервисы
      Реализована часть служебных сервисов (IFGXLocaleService, IFGXApplicationInfoService, IFGXScreenService) используемых, в том или ином виде в существующих компонентах и вспомогательных классах.
      5. Частично реализован TfgCollectionView
      Реализована базовая функциональность списка. Создание элементов. Поддержка стилей. Связывание данных.  
      CollectionView.mp4 collectionView-3.mp4
      6. Частичная реализация TfgImage
      Реализованы все методы отображения изображений, кроме маски.
      7. Реализация диалогов
      Реализованы диалоговые окна TfgDialogs для отображения сообщений и диалогов с кнопками.
      8. Добавлены новые хедеры для iOS 13.
      Транслированы и добавлены свои собственные хедеры для iOS API.
    • By Yaroslav Brovin
      Подпишись на канал обновлений в три клика и не пропусти новый релиз! 

       
    • By Viktor Akselrod
      В обновлении 1.1.6.0 процесс сборки android приложения претерпел незаметное на первый взгляд, но очень важное для пользователей изменение, а именно,  добавлена автоматическая генерация файла classes.dex.
      classes.dex - обязательный для android приложения файл, содержащий все используемые в приложении Java библиотеки. Ранее конечное приложение собиралось с готовым classes.dex файлом поставляемым вместе с библиотекой FGX Native, что создавало для разработчиков некоторые проблемы при использовании сторонних jar библиотек. Процесс добавления был нетривиален и требовал глубокого погружения в документацию, процессы сборки и микширования classes.dex.
      Механизм автоматической генерации уже используется в FMX проектах, однако, по ряду причин и ограничений, накладываемых IDE, он не мог быть задействован для FGX Native.
      Мы пересмотрели пользовательский опыт и рады представить вам новый удобный диалог для управления jar библиотеками, используемыми в проекте.
      Вызвать диалог можно двумя способами:
      Через главное меню: Project -> FGX Android Libraries Через контекстное меню панели Projects. Target Platforms -> Android (32/64 bits) -> Libraries -> Setup Android Libraries.
       
      Всё, что необходимо для включения в ваше приложение сторонней jar библиотеки — это добавить её в разделе «Все модули» или «Пользовательские».
      Для возврата списка библиотек к первоначальноиу состоянию воспользуйтесь кнопки «По-умолчанию».
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...