Blog

All Blog Posts  |  Next Post  |  Previous Post

Coming up: style your components with FNC styles!

Bookmarks: 

Friday, June 05, 2020

Look and Feel

A major part of your application is the look and feel. It can take up a lot of resources and time to make your application stand out, make it attractive, a feast for the eyes. When eating dinner, you also want your plate to look nice, because it makes it more appealing, and yells: "Eat me!". Of course, your application needs to function properly, but don't we all want to have a nice looking user interface?

Coming around the corner are FNC styles, that will help you achieve a slick user interface!

FNC Styles

FNC Styles is designed to provide you with 2 ways to style your application.

  • Built-in styles
  • Custom styles
In the first version of FNC Styles the built-in styles will be: Dark, Light, Office 2019 Black, Office 2019 Gray and Office 2019 White.



Custom styles will be configurable through the style manager, based on the default or built-in styles.





The style manager (also available as a separate component), will provide you with an easy way to load styles at designtime & runtime, and the possibility to combine multiple individual component styles to one style, that you can apply to all your forms. At designtime and runtime, the built-in styles are available through a resource.



JSON based

The style mechanism is based on the persistence interfaces that already exist in FNC. It will generate a JSON that only contains the necessary information based on the components appearance properties. The detection happens automatically, but finetuning can be done with the IsAppearanceProperty virtual. Some components needs to save more information than others. Even custom components that you have designed will be styleable through the ITMSFNCPersistence interface, when inheriting from TTMSFNCCustomControl.

{
   "$type":"TTMSFNCCalendar",
   "Color":"#484848",
   "DateAppearance":{
      "$type":"TTMSFNCCalendarDateAppearance",
      "BadgeFill":{
         "$type":"TTMSFNCGraphicsFill",
         "Color":"#FF0000",
         "ColorMirror":"gcNull",
         "ColorMirrorTo":"gcNull",
         "ColorTo":"#808080",
         "Kind":1,
         "OnChanged":null,
         "Opacity":1,
         "Orientation":1,
         "Texture":"",
         "TextureMode":2
      },
      "BadgeFont":{
         "$type":"TTMSFNCGraphicsFont",
         "Color":"#FFFFFF",
         "Family":"Segoe UI",
         "Name":"Segoe UI",
         "OnChanged":null,
         "Size":10,
         "IsFMX":true,
         "Style":0
      },
      "BadgeStroke":{
         "$type":"TTMSFNCGraphicsStroke",
         "Color":"#FF0000",
         "Kind":1,
         "OnChanged":null,
         "Opacity":1,
         "Width":1
      },
      "DateAfterFill":{
         "$type":"TTMSFNCGraphicsFill",
         "Color":"#484848",
...

Create your own style!

When the new FNC style mechanism is released, it will allow you to use the built-in styles or create and apply a custom style to your application. Feel free to share the style you have created, we can even include it as a built-in style. Stay tuned, FNC Styles is around the corner and will be available real soon!

Pieter Scheldeman


Bookmarks: 

This blog post has received 7 comments.


1. Friday, June 05, 2020 at 10:33:53 AM

Can''t wait! :-)
Curious to see how that will integrate with Web Core (html pages)
I wish that I could use the FNC styling to make my WebCore application look pretty and then have that converted into the the html styling as I''m not a web designer.

Swart Johan


2. Friday, June 05, 2020 at 1:51:52 PM

This looks great. Would love to use this in an FNC mobile project we are currently working on.

Voutt Rob


3. Saturday, June 06, 2020 at 6:04:05 PM

Looks good. Starting a new project and will be using these. I assume these styles work in TMS Web as well if i use the FNC controls?

Michael Margerum


4. Saturday, June 06, 2020 at 7:08:06 PM

That is correct

Bruno Fierens


5. Monday, June 08, 2020 at 7:06:13 PM

Great new, thank you!

Sanford Robert


6. Wednesday, June 10, 2020 at 8:50:52 AM

Is it working together with FNC Ribbon themes ? Replacing them ?

Baudewyns Robert


7. Wednesday, June 10, 2020 at 8:53:45 AM

It is working together with the FNC Ribbon, it automatically sets the correct Theme, but it is not replacing the appearance. The Ribbon has styling of its own.

Pieter Scheldeman




Add a new comment:
Author:
Email:
  You will receive a confirmation mail with a link to validate your comment, so please use a valid email address.
 
Comment:
 
 

All fields are required.
 



All Blog Posts  |  Next Post  |  Previous Post