Quantcast
Channel: TMS Software
Viewing all 1006 articles
Browse latest View live

Nurturing the next generation of Delphi enthusiasts

$
0
0



In the past couple of years, I not only realized how crucially important it is to nuture new generations of Delphi enthousiasts but I also learned myself how much I personally enjoy sharing my passion for Delphi with students.

The magic moment is that when students experience themselves that awesome projects can be done with Delphi and that the software development process can be fun and intuitive. The blink in the eyes of a student seeing the virtually unlimited possibilities of software development is so incredibly gratifying. Then I'm confident that the passion that drove myself the past 30 or so years will continue to live on.

So, this year we had again the pleasure to work with an intern. Albeit this year it was complicated due to Covid-19 and being forced to close the office and do all work from home. But this didn't stop our intern Luc Levez from doing a great job. Within the period of the internship, Luc Levez familiarized with Delphi and in particular with TMS WEB Core in Delphi with no prior knowledge of Delphi or Object Pascal. But that was not all. Luc also familiarized with ESP32 devices he had never used before. And it doesn't end there. Add to that the for Luc unknown territory of Bluetooth communications. Wireless communication always remains a kind of magic.

Luc worked together with us to produce an as seamless, easy and intuitive to use component for doing communications with a Bluetooth device from a TMS WEB Core web client application. This will be available in the upcoming TMS WEB Core v1.4 Ravenna. Yes, you run the application in a browser, connect to a device in the reach of the machine where the web application is running on and you can start exchanging data with the Bluetooth device. In the project of Luc, we have setup this Bluetooth communication with an ESP32 device. This permits the freedom to control via this ESP32 whatever we want.

Next week Luc will publish a full article with technical details but for the weekend, you can already enjoy this video Luc created.



Many thanks Luc for such a great time collaborating even in far from ideal circumstances in these challenging times.

As you can see, internships are exciting at tmssoftware.com, even in covid19 times. If you are a student and want to experience this adventure here during your internship, get in touch with our team!


TMS WEB Core v1.4 Ravenna released

$
0
0


We are thrilled to announce the release of TMS WEB Core v1.4! The new version not only introduces a record number of improvements, amazing new features but also supports the latest and greatest Delphi 10.4 Sydney. The new version v1.4 is available free for all active registered TMS WEB Core or TMS ALL-ACCESS users

TMS WEB Core v1.4 represents multiple months of hard work from our team, some parts have been over 6 months in development.
Here is a summary of what you can discover in the TMS WEB Core v1.4:

  • New TWebBluetooth Non-visual component offering seamless access to Bluetooth devices from web applications
  • New TWebImageSlider UI control to make presenting catalogs with pictures fast and easy
  • New TWebContinuousScroll UI control to bring fast loading and load-as-you-scroll lists
  • New TWebElementActionList to facilitate binding Pascal code to HTML template elements
  • New TWebRadServerClientDataset offering a codeless interface to data from Embarcadero RAD server
  • New TWebDreamFactoryClientDataSet making consuming data via DreamFactory REST APIs a breeze
  • New TWebFaunaDBClientDataSet letting you bind cloud data in web client applications code-less
  • New Electron 8 support allowing you to take advantage of the newest stable Electron framework for building cross platform desktop applications
  • New TWebSignatureCapture allowing to capture touch based signature writing as image in web applications
  • New TWebPayPal migrated to the newest PayPal JavaScript SDK
  • New demos for TWebListControl, TWebElementActionList, HTML templates, TWebBluetooth, PDF streaming, TWebSignatureCapture, various DB backends
  • New latest stable release pas2js 1.4.24 compiler & RTL support added
  • New TBitmap load from URL, file, cache with anonymous method added
  • New TWebHttpRequest anonymous methods for handling asynchronous requests in a different way
Other than these new features added, literally hundreds of smaller improvements have been done and several issues fixed. A lot of the smaller improvements are a direct result of the simultaneous work done to make the TMS WEB Core framework work as seamless as possible with the live designer in the upcoming TMS WEB Core for Visual Studio Code.

The documentation was expanded and totals over 440 pages now. The number of included demos is now just under 100 (not counting the Lazarus converted demos also included). So, there is a lot to learn about this newest TMS WEB Core release. In the coming days and weeks we will highlight many of the new capabilities in more details. For today we have a video of what we personally consider one of the nicest new components: TWebElementActionList. This is not to be confused with a Delphi action list but offers an easy way to write Object Pascal code that interacts with HTML elements of all kinds in HTML templates used together with the TMS WEB Core web client application.

TMS WEB Core v1.4: TWebElementActionList



In addition, to learn all about TMS WEB Core, following additional resources are available:

  • Online training courses for TMS WEB Core
  • Book: TMS WEB Core: Web Application Development with Delphi



    TMS WEB Core v1.4 for Delphi/Lazarus is available standalone now and is also part of TMS ALL-ACCESS. Do you have already one or more TMS product licenses and are interested to get on board for TMS ALL-ACCESS, our no-nonsense formula for access to our full current and future toolset, priority support and access to betas, contact our sales: sales@tmssoftware.com for a best possible upgrade offer.

  • Access Bluetooth devices from your TMS WEB Core v1.4 Ravenna web apps

    $
    0
    0


    TMS WEB Core v1.4 is released and one of the many exciting new components added is the TWebBluetooth component to make it seamless to access Bluetooth devices from your web applications. At this moment, all modern web browsers except Safari, offer the web Bluetooth API for this. We can only hope that Apple will soon follow this trend.

    With more than 4 billion Bluetooth devices produced in 2019, including all current smartphones, tablets, laptops, TV’s, and speakers on the market, Bluetooth has truly started a revolution. By 2023, up to 90% of all Bluetooth devices will have Bluetooth Low Energy (BLE) capability. With that in mind TMS Software is providing you with the tools to embrace this exciting technology and run with it.

    The TWebBluetooth component and supporting classes allows for quick and easy development of all your Bluetooth Low Energy applications, bringing device functionality straight to the browser. To get up and running, just add the WEBLib.Bluetooth library to your TMS Webcore project under uses and you will gain access to the following features:

    TBluetooth component: Used to create an instance of a Bluetooth Device. It contains methods for filtering which devices you wish to connect to.

    Device class: It contains methods for establishing and maintaining a connection to, or disconnecting from the GATT server. It also contains methods allowing access to and discovery of services on a device.

    Service class: It can be seen as a container for characteristics. The service class contains methods allowing access to and discovery of its characteristics.

    Characteristic class: This is the main component of any BLE device. Reading and writing to these characteristics gives you control over a device. Our Characteristic class contains options for reading, writing and notifying data of all different data types/data streams to and from a Characteristic. Characteristics also contain methods for accessing and discovering its descriptors.

    Descriptor class: Descriptors contain information about their characteristics. The Descriptor class has methods for reading and writing to descriptors.

    To demonstrate how easy our tools are to use, I have configured an ESP-32 with a BME-280 temperature, humidity and pressure sensor. The ESP-32 is a microcontroller with onboard Bluetooth functionality. Using the BLE Server library with the Arduino IDE, I created a service with 4 characteristics. The first characteristic will be used to store and retrieve an integer value. The second is configured to control the onboard LED, allowing us to turn it on and off. The final two characteristics are set to retrieve temperature and humidity readings.


    Getting started

    In our TMS WebCore project we must first declare the components we will be using:
     Public
      { Public declarations }
      bt: TBluetooth;
      MyDevice: TBluetoothDevice;
      MyService: TBluetoothService;
      IntCharacteristic: TBluetoothCharacteristic;
      LedCharacteristic: TBluetoothCharacteristic;
      TemperatureCharacteristic: TBluetoothCharacteristic;
      HumidityCharacteristic: TBluetoothCharacteristic;
    

    Each Bluetooth service, characteristic or descriptor has an UUID, this is the address used to access it.

    const
      MyServiceUuid = '4c652180-1201-4fdf-b853-36bac4cced0a';
      IntUuid = 'fa67024c-78d6-11ea-bc55-0242ac130003';
      LedUuid = 'fa66fffe-78d6-11ea-bc55-0242ac130003';
      TemperatureUuid = '14f3ff86-95b8-11ea-bb37-0242ac130002';
      HumidityUuid = '14f4038c-95b8-11ea-bb37-0242ac130002';
      UserDescUuid = '0x2901';
      DeviceName = 'Custom_ESP32';


    Setting up BLE

    I used anonymous methods when retrieving my device, service and characteristics. Anonymous methods are useful in this scenario as they allow us to chain up all our procedures needed during setup. This makes getting a device up and running much more efficient.
    An instance of TBluetooth called bt is created. We must now add our intended services to the bt.FilterService list. This is a built-in security feature within Web Bluetooth. Failing to do so will deny us access to them. The name of the device we want to access specifically can also be configured with bt.DeviceName.
    The rest of the code below connects us to the GATT server, creates our device, creates the service we will be using and finally creates our characteristics. The characteristics we created receive ‘On’ methods, these will be used to control our device - more on this later.

    procedure TForm7.WebButton1Click(Sender: TObject);
    begin
      bt := TBluetooth.Create;
      bt.FilterService.Add(MyServiceUuid);
      bt.DeviceName := 'Custom_ESP32';
      bt.GetDevice(
        procedure
        begin
          bt.Device.Connect(
          procedure
          begin
            bt.Device.GetService(myServiceUuid,
            procedure(AService: TBluetoothService)
            begin
              AService.GetCharacteristic(IntUuid,
              procedure(AChar: TBluetoothCharacteristic)
              begin
                IntCharacteristic := AChar;
              end);
    
              AService.GetCharacteristic(LedUuid,
              procedure(AChar: TBluetoothCharacteristic)
              begin
                LedCharacteristic := AChar;
                LedCharacteristic.Read(
                procedure(AValue: integer)
                begin
                  ReadLedCharacteristic(Self, AValue);
                end);
              end);
    
              AService.GetCharacteristic(TemperatureUuid,
              procedure(AChar: TBluetoothCharacteristic)
              begin
                TempCharacteristic := AChar;
                TempCharacteristic.OnNotifyDouble:= NotifyTempCharacteristic;
              end);
    
              AService.GetCharacteristic(HumidityUuid,
              procedure(AChar: TBluetoothCharacteristic)
              begin
                HumCharacteristic := AChar;
                HumCharacteristic.OnNotifyDouble:= NotifyHumCharacteristic;
              end);
    
              EnableButtons;
            end);
          end);
        end);
    end;
    Note: Humidity has been shortened to Hum and Temperature to temp to fit the format.

    Pairing the Device

    Once these steps have been taken, pressing the “Start BLE” button will display a pop up with a list of connectable devices. In our case the Custom_ESP32 has shown up. Selecting it and clicking pair will form a connection with our device.


    Reading data

    We can read the data stored within our intCharacteristic by using the Read method. When we press the ReadValue button, intCharacteristic.Read is called. This retrieves the integer stored within our intCharacteristic as AValue. We can then cast AValue to a string and display this in our WebLabel on the form.

    procedure TForm7.WebButton4Click(Sender: TObject);
    begin
      intCharacteristic.Read(
      procedure(AValue: integer)
      begin
        WebLabelReadValue.Caption:= IntToStr(AValue);
      end);
    end;
    

    Writing data

    We can change the data stored within our characteristics by writing to them. This is as simple as calling a Write method on our characteristic. In this case I am using WriteInt to write an integer value into IntCharcateristic.

    procedure TForm7.WebButton5Click(Sender: TObject);
    begin
      IntCharacteristic.WriteInt(StrtoInt(WebEdit1.Text));
      ShowMessage('Wrote value of ' + WebEdit1.Text + ' to device');
    end;


    Expanding this concept to real world devices

    Reading and writing numbers to and from a device probably isn’t the most exciting thing you’ve ever witnessed. But doing so provides us with the functionality we need to interact with real world devices. The write function we just applied to our IntCharacteristic can also be used for turning on and off a LED.

    • LedCharacteristic.WriteInt(1); to turn on the LED.
    • LedCharacteristic.WriteInt(0); to turn off the LED.

    But don’t think of the LED as just a LED, this could be lights, heating, a fan, a water pump or any other device you wish to control, once again, straight from any device with browser capability.

    Realtime sensor readings

    Since the TemperatureCharacteristic and HumidityCharacteristic were given the notify option when I programmed them on the ESP-32, we can now use the notify methods in our Webcore project. First, we bind one of the ‘OnNotify’ procedures to the characteristic we wish to use. In this case, we will be retrieving a double, so we opt for the OnNotifyDouble method.

    AService.GetCharacteristic(TemperatureUuid,
    procedure(AChar: TBluetoothCharacteristic)
    begin
      TemperatureChar:= AChar;
      TempCharacteristic.OnNotifyDouble:= NotifyTempCharacteristic;
    end);
    

    By adding the StartNotify method to the temperature characteristic we can start the readings. TemperatureCharacteristic.StartNotify;
    To stop the readings, we just need to call the StopNotify method, it really is that simple! TemperatureCharacteristic.StopNotify;

    Summary

    This concludes our overview of the TMS WEB Core v1.4 new Bluetooth support.

    • Code once, run everywhere for wireless interaction with real world devices in the browser.
    • Effortless implementation, allowing you to turn on/off devices, change their settings or enable communication between different devices using the Read, Write and Notify methods.
    • Quick and easy development of Web Bluetooth projects, all within the Object Pascal language.

    Included in the TMS WEB Core v1.4 distribution is a demo that uses the Texas Instruments Sensor tag.



    This way you can easily start experimenting with Bluetooth from web applications without getting your hands dirty assembling an ESP32 with I2C sensors on a breadboard and dabbling in C code (for now) with Arduino to program the ESP32.

    TMS WEB Core v1.4 for Delphi/Lazarus is available standalone now and is also part of TMS ALL-ACCESS. The Bluetooth support will also be available in the upcoming TMS WEB Core for Visual Studio Code!
    Do you have already one or more TMS product licenses and are interested to get on board for TMS ALL-ACCESS, our no-nonsense formula for access to our full current and future toolset, priority support and access to betas, contact our sales: sales@tmssoftware.com for a best possible upgrade offer.

    Article written by Luc Levez

    New UI controls in TMS WEB Core v1.4 Ravenna

    $
    0
    0



    TMS WEB Core v1.4 Ravenna has new features and improvements on all levels. There are many RTL improvements like different new type helpers, the TStringBuilder and lots more, there is Bluetooth device connectivity, there are several new options for using data back-end APIs like Embarcadero RAD server, FaunaDB, DreamFactory, there is enhanced HTML template binding with the TWebElementActionList, there are many IDE integration improvements like hierarchical folder import to facilitate HTML template usage and of course, there are also improvements on UI controls and also new UI controls!

    Today, our colleague chief evangelist Dr. Holger Flick prepared videos showing you the new TWebImageSlider and the new TWebContinuousScroll.

    TWebContinuousScroll

    Whenever there is a scenario where a list of information to be displayed to a user is very large, a convenient pattern is to show in the UI the initial first number of items filling the screen and only fetch more items as the user scrolls through the list. The advantage here clearly is that the page comes up very fast, will never load more items than the user wants to see and fetches extra items only as the user scrolls through the list. We have encapsulated all this functionality into a single new easy to use component TWebContinuousScroll. How it can be used is explained in this video or you can explore it directly in a demo application. Be sure to also try out this demo on a smartphone as the control is obviously also designed for use in responsive web applications.



    TWebImageSlider

    Very often, one wants to present a selection of pictures of a product, a person, a house, a car to users in a web application. This is then typically done with a list of picture thumbnails one can click to view the large image or means to scroll trough the list of pictures. For this often used pattern, we created a new UI control TWebImageSlider that makes offering this UI as easy as filling a TStringList with URLs of images to be displayed. Dr. Holger Flick explains all in more detail with his newest video or try out the new component with our live demo.



    Don't stay behind, discover TMS WEB Core v1.4 now!

    Active registered users of TMS WEB Core get the new version v1.4 free. Login on our website and download the newest release. Not yet a TMS WEB Core user? Signup for a fully functional trial version of TMS WEB Core now also supporting the newest Delphi 10.4 Sydney.

    Excited about all the hot technology we offer for Delphi & C++Builder developers, get your VIP seat with TMS ALL-ACCESS, our no-nonsense subscription to our entire product offerings, priority support and access to betas (such as the upcoming TMS WEB Core for Visual Studio Code!



    Coming up: style your components with FNC styles!

    $
    0
    0

    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!

    tmssoftware.com and FaunaDB announce partnership to work on cloud database backed applications

    $
    0
    0

    We are excited to announce that tmssoftware.com & FaunaDB entered a partnership and as a first result, TMS WEB Core v1.4 features out-of-box support for FaunaDB.

    TMS WEB Core focuses on high productivity RAD component-based web client application development for Object Pascal developers and FaunaDB focuses on effortless serverless data access. Together, this offers a powerful combination for creating fast, secure web applications backed by the data correctness, capacity, redundancy, latency, and availability of FaunaDB.



    Now, creating a web application dealing with user data is nothing more than creating an account at FaunaDB, creating a new database with data collections you want, define your queries and get an API key.

    In the TMS WEB Core web client application, drop a TWebFaunaDBClientDataSet on the form, specify the CollectionName (table name), ClientKey (API-key) & persisted DB fields. Activate this dataset and all DB-aware UI controls connected via a TWebDataSource to this TWebFaunaDBClientDataSet will work directly on the FaunaDB data.



    TMS WEB Core in Embarcadero RAD Studio, using the TWebFaunaDBClientDataSet dataset for a seamless connection to data on FaunaDB

    The TWebFaunaDBClientDataSet has been designed to also work seamlessly in multi-user/multi-account scenarios. Therefore, at TWebFaunaDBClientDataSet level, a UserCollectionName can be set and a user login and signup function is integrated at dataset level.

    It is clear that the combination of web front-end development with TMS WEB Core with data in the backend managed by the serverless FaunaDB service offers an unparalleled combination to develop and deliver secure, reliable, high performant web-based applications fast.

    Our chief evangelist Dr. Holger Flick explains all in detail in a special video about this:



    You can now explore this first result of our partnership by downloading TMS WEB Core v1.4 from https://www.tmssoftware.com/site/tmswebcore.asp and create a FaunaDB account at https://www.faunadb.com.

    Bruno Fierens
    CEO
    tmssoftware.com
    sales@tmssoftware.com
    Joe Volat
    PR
    FaunaDB
    press@fauna.com


    Real-time video communication from TMS WEB Core apps

    $
    0
    0

      

    As software developers having worked from home during the covid-19 lockdown, chances are you will have communicated with colleagues or customers over the web and shared audio, video, desktop... all from the browser. And to do this, no software installation was needed and it works on any Windows PC, macOS Apple device or Linux computer with a modern browser. The wonderful technology behind this is WebRTC (Web Real-Time Communication) and is an open-source protocol specification/protocol controlled by the World Wide Web Consortium (W3C).

    WebRTC is usable on one side via the WebRTC API meanwhile available in any current popular browser and on the other side WebRTC servers.

    During the covid-19 lockdown, Michael Van Canneyt, one of the two masterminds behind the pas2js compiler and RTL, was tasked to write a web application for real-time video communication. For his project, the web application could make use of existing free to use WebRTC servers Jitsi or OpenTok.

    As Jitsi and Tokbox offer both JavaScript libraries for WebRTC communication with their servers from a web application, Michael wrote the necessary Object Pascal classes for consuming these WebRTC libraries from a TMS WEB Core web client application. Michael Van Canneyt was so impressed with these libraries, that he re-created and extended these classes for inclusion in pas2js so the open-source community could enjoy them and also wrote two demos for the TMS WEB Core framework using these classes and showcasing the integration of real-time video communication from a TMS WEB Core application.


    Demo running with 3 attendees in a room and cameras of two attendees pointing to each other's screen

    You can explore the Jitsi demo here:

    https://download.tmssoftware.com/tmsweb/demos/jitsi/

    You can explore the Opentok demo here:

    https://download.tmssoftware.com/tmsweb/demos/opentok/

    Note that for Opentok you need to register for an OpenTok API key, Session ID and Token from Tokbox. After getting this information from a test account, you can use OpenTok free.

    The full source code of both demos can be downloaded here. You need the latest version of TMS WEB Core v1.4 Ravenna for this. You will notice that these demos are HTML template based. That means that the layout of the page is done with HTML/CSS (Bootstrap) and bound to TMS WEB Core web controls via which all UI logic is provided. The nice thing is that you can not only explore these projects via your Delphi IDE, but if you are a TMS ALL-ACCESS user, you can now also open and run these demos from our beta version of TMS WEB Core for Visual Studio Code on Windows, macOS or Linux.

    It clear that web technology and TMS WEB Core exposing this in an easy RAD component based way to Object Pascal developers is fascinating. Let us hear your thoughts and comments or other challenges for web based applications you would want to see covered here!

    FNC Styles are here!

    $
    0
    0

    Intro

    After the first announcement a week ago, and a lot more tweaks and improvements we are proud to announce the first release of FNC Styles! FNC Styles is currently available for the TMS FNC UI Pack (v3.1) only. The core styling mechanism is implemented in TMS FNC Core (v2.3) and will be further pushed through other FNC components such as the TMS FNC Dashboard Pack in the future. FNC Styles targets 6 styles.
    • Default
    • Dark
    • Light
    • Office 2019 White
    • Office 2019 Black
    • Office 2019 Gray


    Getting Started

    Designtime
    To start styling the FNC components, drop a TMS FNC UI Pack component on the form, right-click the component and select the Style->Manager option from the context-menu.



    This will prompt you with a dialog that initially shows the built-in styles. Built-in styles are stored in the TMSFNCStylesResources.res file, separately available.



    Click on a style to select it and click on the “Apply” button to apply the style to each component on the form. You can also load your own style file by clicking on the “Open” button. The built-in styles are combined style files containing styles from multiple components. The corresponding style files for the built-in styles are included in the Styles subfolder in TMS FNC Core. When right-clicking on the component, you can save your own style to a style file. This separate component style can be loaded and managed via the style manager. Please note that individual component styles for the built-in styles are not available separately.
    Runtime
    To start with runtime loading, add {$R 'TMSFNCStylesResources.res'} to your application first, so built-in styles are available. To load a style at runtime there are several options. When you have a style file, you can either load it via [Component].LoadSettingsFromFile, or via the TTMSFNCStylesManager. The TTMSFNCStylesManager instance also allows you to load files from a resource (via the StyleResource property), from a file (LoadStyleFromFile), a stream (LoadStyleFromStream), or plain text (LoadStyleFromText). The format for loading the resource through LoadFromResource or the StyleResource property can be found in the manager. The built-in style has the format TTMSFNCStyle_[StyleName].style, with [StyleName] being the actual style name of the file and can be loaded by using the code below:
    implementation
    
    {$R 'TMSFNCStylesResources.res'}
    
    TMSFNCStylesManager1.LoadStyleFromResource(‘TTMSFNCStyle_FNC_Dark’);
    Or
    TMSFNCStylesManager.StyleResource := ‘FNC_Dark’;

    JSON Formatting

    The style mechanism is based on the persistence interfaces that already exist in FNC. It will generate 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 need 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",
    ...

    WEB Support

    In WEB, styles are also supported. At designtime, the same methods can be used as you would apply in VCL or FMX. At runtime, there is no LoadStyleFromResource available as TMS WEB Core does not support resources, but there is a LoadStyleFromURL available in the TTMSFNCStylesManager that allows you to load the styles from an URL. You can copy the style files that are necessary for your application from the Styles sub folder in the source folder, available after installation. Alternatively, you can also use the WebFilePicker component to select a file and load it as a style. Below is a sample that demonstrates both techniques.
    procedure TForm1.WebButton1Click(Sender: TObject);
    begin
    WebFilePicker1.Files[0].GetFileAsText;
    end;
    procedure TForm1.WebButton2Click(Sender: TObject);
    begin
    TMSFNCStylesManager1.LoadStyleFromURL('http://localhost:8888/Project1/TTMSFNCStyle_FNC_Dar
    k.style');
    end;
    procedure TForm1.WebFilePicker1GetFileAsText(Sender: TObject;
    AFileIndex: Integer; AText: string);
    begin
    TMSFNCStylesManager1.LoadStyleFromText(AText);
    end;

    Create your own style!

    When inheriting from TTMSFNCCustomControl, the SaveSettingsToFile (coming from the ITMSFNCPersistence interface) is available to allow you to save the appearance properties to a style file. The base implementation is automatically detecting appearance properties, but additional properties can be added by overriding the IsAppearanceProperty function when you are applying FNC Styles to your own component. Through the TTMSFNCStylesManager, styles can be combined to a single style file that can then be loaded again. Create your own style and don't be afraid to share. It might end up as a built-in style in the future!


    Free component for making screen captures in TMS WEB Core applications

    $
    0
    0


    Sometimes it might be interesting to capture the content of the browser window, or parts of the browser window, as an image and send it back to a server or service. This can be a handy utility especially for customer support when wanting to see what is on the user browser when something is happening. This is at first sight not trivial to do though. The browser window is rendered from the DOM and consists typically of a collection of HTML elements. So, how could we convert this DOM of HTML elements to an image?

    Fortunately the world-wide web development offerings are so incredibly rich that also for this particular need a nice JavaScript library exists. The handy JavaScript library for this case is html2canvas, an open source library for this particular task.

    The documentation of html2canvas isn't extensive but specifies the essence of what we need:

    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas)
    });
    To start using this library, add the following library to your project HTML file

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript"></script>

    As you can see, a capture is performed on the HTML element returned by document.querySelector("#capture") and returned as a HTML CANVAS element. With this, we still do not have an image though.

    That's why we did a little bit more effort to create a TMS WEB Core Pascal wrapper class for this that offers 6 methods:
     
      TScreenCaptureToCanvasProc = reference to procedure(ACanvas: TJSElement);
      TScreenCaptureToDataURLProc = reference to procedure(ADataURL: string);
    
      TWebScreenCapture = class(TComponent)
      public
        procedure CaptureElementToCanvasElement(AElement: TJSElement; Proc: TScreenCaptureToCanvasProc);
        procedure CaptureScreenToCanvasElement(Proc: TScreenCaptureToCanvasProc);
    
        procedure CaptureElementToDataURL(AElement: TJSElement; Proc: TScreenCaptureToDataURLProc );
        procedure CaptureScreenToDataURL(Proc: TScreenCaptureToDataURLProc);
    
        procedure CaptureElementToImageFile(AElement: TJSElement;AFileName: string; AType:TImageType);
        procedure CaptureScreenToImageFile(AFileName: string; AType:TImageType);
      end;
    

    These methods are quite straightforward to understand.

    There are the first 2 method to capture the browser window or a particular HTML element and return its rendered content as a HTML CANVAS element.

    To capture the screen into a HTML CANVAS element, the Pascal code becomes:
     
    var
      sc: TWebScreenCapture;
    begin
      sc := TWebScreenCapture.Create(Self);
    
      sc.CaptureScreenToCanvasElement(
        procedure(ACanvas: TJSELement)
        begin
          document.body.appendChild(ACanvas);
        end
      );
    end;
    

    As you can see, an anonymous method is used that is being called when the rendering to CANVAS is ready and it returns this CANVAS element.

    The second methods capture the content as data URL. A data URL can be set as URL for a HTML IMG element for example to make it visible. It is basically base64 encoded image data. This image data could for example also be used to send the capture back to a server.

    To capture the screen this way, we can write code to show this data URL in a memo control:
     
    var
      sc: TWebScreenCapture;
    begin
      sc := TWebScreenCapture.Create(Self);
    
      sc.CaptureScreenToDataURL(
        procedure(ADataURL: string)
        begin
          WebMemo1.Lines.Add(ADataURL);
        end
      );
    

    Finally, the last 2 methods allow to perform the capture and then save the captured image to a file that can be saved on the local file system. These methods have two additional parameters, the filename that is proposed for the image file download and the image type.

    To save to a PNG file for example, the code now becomes:
     
    var
      sc: TWebScreenCapture;
    begin
      sc := TWebScreenCapture.Create(Self);
      sc.CaptureScreenToImageFile('webcorescreen', TImageType.itPNG);
    end;
    

    To make it even more convenient, we created a non-visual component that you can drop on the form and call the methods you wish to use when you want. A very nice feature in TMS WEB Core is that you can add an attribute of the type JSLibReference to a TMS WEB Core Pascal class to specify the dependencies on JavaScript libraries. In the case of this screen capture component, this is specified via:
      [ComponentPlatforms(TMSWebPlatform)]
      [JSLibReference('https://html2canvas.hertzen.com/dist/html2canvas.min.js')]
      TWebScreenCapture = class(TScreenCapture);

    The first attribute here specifies that this component is available on the tool palette whenever a TMS WEB Core web form is opened in the designer.

    You can download this component free for use with TMS WEB Core v1.4 Ravenna here. To install, open, compile & install the package from the "Component Library Source" folder. This will install the design-time TWebScreenCapture component.

    For use at runtime, make sure that the file from the "Core Source" folder WEBLib.ScreenCapture.pas is in your TMS WEB Core specific library path that you can set via IDE Tools, Options, TMS Web, Library path. Don't stay behind, discover TMS WEB Core v1.4 now!

    Active registered users of TMS WEB Core get the new version v1.4 free. Login on our website and download the newest release. Not yet a TMS WEB Core user? Signup for a fully functional trial version of TMS WEB Core now also supporting the newest Delphi 10.4 Sydney.

    Excited about all the hot technology we offer for Delphi & C++Builder developers, get your VIP seat with TMS ALL-ACCESS, our no-nonsense subscription to our entire product offerings, priority support and access to betas (such as the upcoming TMS WEB Core for Visual Studio Code!



    My Products: The new V2 BETA is available now

    $
    0
    0

    The My Products page is one of the most important parts of the TMS Software website for our customers. This is the place to download the latest version of all purchased products and review the license details. Over the past weeks this page has been improved a lot with a more compact view, quick and easy access to the downloads and several filtering options.

    We are excited to make the V2 BETA available to all customers!

    What's new and improved?




    1 Live search

    Especially TMS ALL-ACCESS customers have a long list of products.
    With the live search you can start typing the name of a product and the list will be filtered instantly.

    2 Toggle details

    License details are important and can be enabled instantly, but most of the time you just want to get to the download without the clutter.

    3 Active licenses

    By default only products for which an active license is available are displayed.
    Optionally, expired licenses can be displayed as well.

    4 Live filter by category

    Select only the specific categories of products you want to see and the list is filtered instantly.

    5 Compact display with color coding

    A compact view of the product name, version and release date with a link to the version history.
    Also the color coding for TMS products has become an important part of our corporate identity and from now on this is also part of the My Products page.

    6 Quick and easy access to the downloads

    Just one click away from downloading the latest version of a product.

    Start using it now!

    The My Products V2 BETA is now available for all customers. Make sure you are logged in!

    TMS WEB Core partner program launched

    $
    0
    0



    We're thrilled to launch from today the TMS WEB Core partner program. The TMS WEB Core partner program is created to let everyone participate, benefit from additional TMS WEB Core components and to offer exposure to individual developers and companies to make other TMS WEB Core developers aware of the extra tools and components created for TMS WEB Core.

    Explore

    Visit the TMS WEB Core partner program page where we have for this launch already 5 offerings:
    • 40+ Smart HTML elements wrapper components
    • Screen capture component
    • Froala Editor wrapper component
    • Vaadin mobile friendly UI control wrapper components
    • Components for real-time video communication with Jitsi and OpenTok WebRTC services

    Why a partner program?

    The world of web development is vast and rapidly evolving. There is literally an abundance of interesting code available for web application development. From various exciting UI components to JavaScript libraries offering complex functionality such as AI libraries and so much more. As Delphi RAD developers we have come to expect that taking advantage of such functionality should only be a component away. And that is exactly the reason and purpose why we have created the TMS WEB Core partner program. It allows you to contribute to the TMS WEB Core ecosystem, be it with open-source component wrappers for web functionality, commercial components or any other tools that helps TMS WEB Core developer being more productive. Of course, our team also plans to regularly contribute components that will be open-source and expose specific functionality for use in TMS WEB Core web applications that we do not consider part of core framework functionality. To launch the program we already bundle several open-source components we developed for TMS WEB Core with today also an extra library of vaadin web component wrappers added especially for this launch. Extra advantage: when paying a little bit attention to how a component is designed, the same code will be usable not only from TMS WEB Core for Delphi but also from TMS WEB Core for Lazarus or soon TMS WEB Core for Visual Studio Code.

    Getting started

    Get ready and learn all about custom component development for TMS WEB Core. A great starting resource to explore how to do this are these interesting blog articles: https://www.tmssoftware.com/site/blog.asp?post=449 and also https://www.tmssoftware.com/site/blog.asp?post=491

    When you created your first components, follow the 3 steps to be included in the TMS WEB Core partner program:



    Benefits

    Expose your work and knowledge about Delphi and TMS WEB Core component development to others via the TMS WEB Core partner program. If you decide to make your work commercially available, we'll be happy to publish it on the partner page as well. Recognized contributors to the TMS WEB Core partner program get a free TMS WEB Core license.

    Start developing today

    Download the latest TMS WEB Core for Delphi and Lazarus v1.4.2 release and get started. The trial version is not time-limited, so you can take your time to explore the wonderful world of web development. Get in touch with the team in case you look for technical help and advice. We are eager to see what fantastic web functionality you will integrate in TMS WEB Core!


    Wrapper pack for Vaadin UI Components

    $
    0
    0


    A while ago we created an import tool to minimize the workload of importing web components into TMS WEB Core. We wanted to extend the capabilities of this import tool and adjust it as much as possible so it can handle a wider range of web component sets. If you take a look around the countless available libraries, you'll notice that many of the web components share the same functionality, so we wanted to pick something that stands out.

    Our next target was the Vaadin UI Components. It is developed by Vaadin and the component pack is available through HTML and Java. It has free and open-source elements and apart from the different look and feel it also introduces some new components, such as Login and its overlay variant.



    Another advantage is that many of the elements behave differently on smaller screens, making them a great candidate for mobile development. Below you can see the difference between the Date Picker and Tabs components on a bigger desktop and smaller mobile browser.



    The online documentation is available for each component here under the "Free & open source components" section.

    You can go ahead explore a selection of these components in our demo, and make sure to check it out on mobile devices too! We made this wrapper pack available for free as part of our new TMS WEB Core partner program, and you can download it from here.

    To install, open, compile & install the package from the "Component Library Source" folder. This will install the design-time components.
    For use at runtime, make sure that the "Core Source" folder is in your TMS WEB Core specific library path that you can set via IDE Tools, Options, TMS Web, Library path.

    Webinar: Building web applications with TMS WEB Core

    $
    0
    0



    On June 23, 2020 TMS software and Barnsten organized a webinar: "Building web applications with TMS WEB Core : standard UI, HTML templates, FNC"

    In this webinar, Bruno Fierens gave an overview of the different ways one can use to build user interfaces for web applications with TMS WEB Core.

    1. VCL-like user interfaces with use of a few controls to achieve responsive design.
    2. Introduction of the use of HTML templates with binding to TMS WEB Core client UI control logic from Delphi with the Object Pascal language.
    3. The use of the FNC framework UI controls as another way to build web client applications from Delphi.

    In case you missed the webinar, the replay is available on our Youtube channel.




    Discover more:

    There is so much to tell about TMS WEB Core, so we kindly invite you to visit our landing page: http://web.tmssoftware.com where more information is provided, including online demos, video tutorials and more.

    We're sure you'll be excited to get started exploring the new features of TMS WEB Core v1.4 Ravenna. Explore the awesome features and don't forget to vote and share your experience with us in the comments section below.

    TMS Forum becomes TMS Support Center

    $
    0
    0

    Support is an essential part of software development. Not only to get you up to speed if you are struggling with getting to know a new product but also if there is a problem with a product in an existing application. It is important to get good quality support when you need it.

    Here at tmssoftware.com, we pride ourselves in providing the best possible support for our customers. We are constantly working on improving our support channels and one of those channels is getting a major overhaul today.

    Introducing the TMS Support Center

    The new TMS Support Center will replace the TMS Forum from today and includes a whole lot of new features and technical improvements.

    TMS Support Center

    Features

    Structure

    The new TMS Support Center is structured in the same way as the tmssoftware.com website. On the main page a list of categories/frameworks is displayed along with an overview of the latest topics. Pick a category to display a list of products belonging to that category. Pick a product to consult previous posts about that product or create a new topic.

    Access

    Access to the TMS Support Center is free. However, to make sure providing support remains manageable and fast, posting questions is only allowed for customers with an active license for a specific product.

    By letting all active registered users take part, anyone using the same product is encouraged to join the discussion and provide their own insights, experiences, or even solutions.

    Search

    Making search quick and easy is important. This enables you to find out if a particular question has been answered before and get a previously suggested solution right away without needing to wait for an answer.

    All data from the TMS Forum has been migrated to the new TMS Support Center. As such the TMS Support Center also acts as a giant searchable archive from day 1.

    Uploads

    Sometimes words alone just aren't enough. Add images and files to your question with ease.

    Mobile friendly

    Want to access the TMS Support Center while away from your desktop? No worries, the site is fully compatible with mobile browsers.

    Conclusion

    The TMS Support Center will allow us to keep providing you with the best possible support more efficiently than ever. Now and in the future!

    What is FNC?

    $
    0
    0

    What is FNC?

    Since day 1, FNC stands for Framework Neutral Components. This means that the components can be used cross-framework and cross-platform. Below is an overview which frameworks and platforms (operating systems/browsers) are supported.

    TMS FNC Components can be simultaneously used on these frameworks:


    TMS FNC Components can be simultaneously used on these operating systems/browsers:


    TMS FNC Controls can be simultaneously used on these IDE's:



    FNC logo (re-)design

    To bundle this into a single logo that is consistent throughout our product range and website design we thought about the color gray to match the Neutral keyword in what FNC stands for. After a couple of brainstorm sessions we came up with the logo that would represent FNC in documentation, blog posts, demos, product pages, newsletters and many more.



    Up until now, we always thought that the FNC logo would reflect what FNC was, and even with intensive campaigns around FNC and the FNC logo, trying to get customers to get to know FNC, there was always a slumbering thought that the logo didn't feel right and didn't represent what it should stand for. After all these years, it still remains a mystery for some and therefore we decided to redesign the logo and starting from today, we'll adopt the following design.



    With this new logo we feel confident that this will represent FNC in a better way as it was with the old logo. In the coming days/weeks, the new design will be distributed throughout our FNC products as well as used in various social media items, documentations and installers.


    TMS ALL-ACCESS: Get 2 books free now!

    $
    0
    0

    TMS ALL-ACCESS is your power toolkit to tackle any software development task today and in the future!

    Discover our wide range of software development tools and get your books: TMS WEB Core: Web Application Development with Delphi and TMS Software Hands-on with Delphi: Cross-platform Multi-tiered Database Applications: Web and Desktop Clients, REST/JSON Server, and Reporting for FREE and with free shipping to your home!

    For new licenses only and valid until July 31, 2020!


    My benefits as an TMS ALL-ACCESS user:

    • No nonsense license to our entire product portfolio
    • Receive all new components, products free added to your toolbox automatically
    • Access to product betas
    • Huge savings compared to purchasing separate products
    • Includes free updates and support during your registration period
    • Support for the latest editions of Delphi and C++Builder is available
    • Enjoy the priority support services of our team
    • A renewal after 1 year is offered at 70% discount from new license price 1695 EUR

    Tools and components included in TMS ALL-ACCESS for:

    • 1st class VCL Windows applications.
    • 1st class cross-platform FMX applications (Windows, macOS, iOS, Android).
    • 1st class backend REST server applications (Windows, macOS, Linux).
    • 1st class REPORTING to XLS, XLSX, PDF, HTML.
    • 1st class modern web apps, progressive web apps, Electron cross-platform apps (Windows, macOS, iOS, Android, Linux, Web).


    Purchase your TMS ALL-ACCESS license today and get the following TMS software books for FREE!

    Get in-depth product knowledge and learn how to get more productive at writing better software and start your web project right away with:


    Author

    Since 1996, Dr. Holger Flick has been using Delphi as his primary development platform and has been an active member of the community.
    In 2019, Holger established his new company FlixEngineering LLC. The company focuses on consulting, training and software development using object-oriented programming languages like Delphi, C#, Swift, and Objective-C. Holger is part of the TMS Software family providing his expertise as Evangelist and QA Engineer.

    New addition to the TMS Academic program

    $
    0
    0



    As announced a few months ago, we want to make our contribution to the Delphi community and most importantly to the aspiring future Delphi developer and hereby encouraging next generations of enthusiast Delphi developers.
    In February we announced TMS VCL UI Pack as our first product in the TMS Academic Program.
    With the Delphi Community Edition students already have an extremely powerful tool in their hands and we want to enrich this with offering our most popular products also free to students with the TMS Academic Program.

    Today, we launch our second academic license in the TMS Academic Program and this is the TMS FNC UI Pack.
    FNC is our power bundle that offers you a set of powerful & feature-rich UI controls that you can use in Delphi's VCL framework, TMS WEB Core framework and cross-platform FMX framework. It includes a wide range of UI controls to create Win32, Win64, macOS, iOS, Android and web applications with a single codebase and a single learning curve.
    This academic license can be used with the brand new Delphi 10.4, just like the TMS VCL UI Pack Academic! Note though that the professional version of TMS FNC UI pack is still needed if you want to use it with the Lazarus IDE.

    Supported frameworks:


    Supported operating systems/browsers:


    Suppoprted IDE's:




    Visit the landing page and discover more about our TMS Academic Program.

    Getting started :

    1. Register for a free TMS FNC UI Pack Academic license with a school or university email address

    2. Receive your credentials to login on our website via your student email address

    3. Login and download your free TMS FNC UI Pack Academic installer

    4. Install the product for the Delphi Community Edition

    5. Enjoy being part of the TMS family with full access to our website, TMS support center, product updates for 1 year and develop great Delphi VCL applications

    Get started with TMS software today and secure your place for the future in the Delphi world!


    Did you Know… FNC logo redesign

    We noticed that after all these years, it still remains a mystery for some, what FNC stands for! Therefore we decided to redesign the logo! Recently we have adopted the following design.



    With this new logo we feel confident that this will represent FNC in a better way!

    EKON 24 conference

    $
    0
    0

    Bruno Fierens, CTO of TMS software will be present at EKON 24.

    EKON is a Delphi conference with speakers from all over Europe and the USA.
    Meet and greet world's leading Delphi experts, thinkers and practitioners. Learn about the new Delphi innovations, Cross platforms, Frameworks, Tools, Web and Cloud technologies and much more!

    Among the many Delphi topics brought by various speakers, Bruno Fierens from TMS software will bring following presentations at EKON24

    1. Communicating with devices from a web applications with Bluetooth
      This session explains and shows what modern browsers offer for supporting Bluetooth communication from web applications. It demonstrates how the browser Bluetooth support can be encapsulated in a Pascal class with which connecting to and transferring data to and from Bluetooth devices becomes easy. A sample web application is created with Delphi that can access a Bluetooth sensor device and read its sensor data.

    2. Leveraging mapping services in Delphi VCL, FMX and web applications
      Several mapping services offer not only geographical visualization but also routing, directions, location information and more. Among these services are Google Maps, Openstreet Maps, Bing, Here, MapBox, TomTom, ... Each of these services have specific advantages and disadvantages in terms of features and cost of using the service. With a proper architecture, it is not only possible to switch the mapping service with one line of code but also to combine services from different service providers in a single Delphi VCL,FMX or web application. This way, a calculated direction from Google Maps could be displayed on a map rendered by Openstreet Maps or the different direction calculation results from different providers could be easily compared against each other on a single map. This is demonstrated in the session for multiple platforms, multiple frameworks with a single code-base.

    If the current pandemic allows, the conference will be held in Düsseldorf on November 2-4, 2020.

    Register today for your Early Bird tickets.

    FNC Maps Hands-on video

    $
    0
    0

    We prepared something special for your summer weekend or #staycation, a 90 minutes hands-on video about the new TMS FNC Mapping product!

    Our chief evangelist Dr. Holger Flick guides you step by step using Delphi 10.4 Sydney with FireDAC to deal with a 3.5 million records database to show information in various ways on the TMS FNC Mapping components, the new mapping component from TMS software that you can use in VCL, FMX, LCL and WEB applications and where you can switch with one property among 7 mapping service providers.
    At the same time, this hands-on video is also teaser for an upcoming new book in the hands-on series (See our previous blog for info about the first hands-on book)

    In this hands-on video, you will learn:

    • Introduction to database and fields
    • Adding indexes for performance
    • Introduction to FireDAC connections with FireDAC explorer
    • Specific SQLite related topics are discussed
    • Using queries with macros and parameters
    • Adding properties for query values
    • Providing a combo box with direct binding to the database
    • Creating coordinates and bounds
    • Visualization using markers and clusters
    • Adding rectangles
    • Focusing on specific areas of the map




    The first book can be purchased from Amazon:



    Share with us in the comment section below what you want to see covered in books 3, 4, 5 ...

    TMS WEB Core v1.5 is around the corner

    $
    0
    0

    Our team has continued to work around the clock to move TMS WEB Core to the next level. And after version v1.4 Ravenna, the next level will be v1.5 Rimini (RIM-in-ee).

    TMS WEB Core Delphi Rimini

    For those who have followed TMS WEB Core from the beginning at v1.0 Brescia know by now that each new version is named after a city along the famous Mille Miglia race, more precisely, the race of 1955. For those interested in the history, you can read about it here. But I assume that most of you are just interested in what TMS WEB Core v1.5 will bring.

    Well, our team has worked on all fronts. That is:

    • Delphi IDE integration
    • UI controls
    • PWA support
    • Electron support
    In a nutshell, the development experience improves for creating regular web client applications, PWA installable mobile device applications and Electron cross platform desktop applications. Let’s go over each of the major improvements one by one:

    1. Live preview


    As you might know, the form designer in the Delphi IDE (and also the Lazarus IDE) is based on the VCL (LCL) framework. This means that at design-time, the controls on the form designer are rendered as VCL/LCL controls. While the designer is fast, familiar, and flexible, it is still a different way of rendering it than a real web browser-based rendering. Our team came up with an ingenious technique to show a live preview of a form in a web browser while working in the IDE:

    • 1. Make a change to a control's property,
    • 2. add a new control on the form or change something in the layout and
    • 3. press Ctrl-S.
    This triggers the live preview browser window to automatically update. The trick here is that live, a single form project consisting of this form in the designer is compiled live and shown in the web browser. Evidently, also when you use HTML templates, the live preview takes this into account and gives you a real preview of this form.

    TMS WEB Core Delphi live preview

    2. HTML template import


    Over the last couple of versions, we have already made it significantly easier to work with forms using an HTML template. This means, a form where the layout is controlled by HTML/CSS and where you can use existing website templates for the design of your forms. Previously, you needed to know what HTML elements to bind in order to link HTML elements to UI controls in the designer. Then you had to drop these UI controls on the form designer and perform the binding manually using the ElementID property. Reflecting over this, it is clear that the majority of this work can be automated, and this is exactly what we have done in version v1.5 Rimini. Now, all you need to do is add the HTML for your form to the form's HTML file and choose "HTML Sync" from the form's context menu. This will parse the HTML, and it will create an appropriate UI control on the form designer and bind it to the HTML element. When you change the template later, for example, add more HTML elements, you can do the "HTML Sync" again and the added corresponding UI controls will be added to the form designer. We have a fixed mapping for specific HTML elements to UI controls as well as steered sync by specifying the UI control’s class name as the attribute for the HTML element.

    TMS WEB Core Delphi HTML import

    3. Automatic operating system theme adoption


    Meanwhile, all major desktop and mobile operating systems have introduced the concept of a light and dark themes to accommodate the typical preference of dark themes for young computer users and light themes for older computer users. Naturally, there is a tendency that young computer users will come to expect that a web application adopts a dark theme and vice versa for older users. Meanwhile, browsers offer capabilities of detecting whether the operating system where the browser runs is configured for a dark theme or light theme. And so, a TMS WEB Core application can automatically run using a dark theme or a light theme depending on these settings. Of course, this feature is optional, and it can be used in an automatic way or you can add application level code for switching to your desired theme in a customized way.

    TMS WEB Core Delphi OS theme

    4. Access to the share sheet of mobile devices


    Mobile device users have become used to sharing information with other applications. We put pictures of one app into another or share a URL from one app using another social media app: All with the help of the share sheet concept on mobile devices. With the introduction of the TWebShare component, it is now possible on iOS and Android devices to share a text, link, or file with another app of choice via a share sheet.

    TMS WEB Core Delphi share sheet

    5. Unobtrusive notifications using Bootstrap toast messages


    Just like Windows 10 has the concept of notifications, it is possible to add unobtrusive notifications to web applications. Bootstrap 4 offers nice rendering techniques for these notifications, also named toasts in Bootstrap terminology. With the TWebToast component, it is made easier than ever to add such a notification system to your web applications. Basically, you determine the position where notifications will appear and just add the toast body text and title to a collection of toasts that the component then manages to display on the screen. In a nutshell, toast notifications in web applications are only a RAD component away.

    TMS WEB Core Delphi Bootstrap toast notifications

    6. Direct local database access for Electron desktop applications


    Till now, database access in an Electron desktop application had to be done in pretty much the same way as a regular web application, i.e. via a backend REST server (e.g. TMS XData). Although there is a nice advantage to this that the backend can be shared between a web client and an Electron desktop client, in many cases this is an undesirable overhead. With the introduction of two TDataset components, it is now possible to directly connect to a MySQL and a PostgreSQL database. So, in pretty much the same way as a VCL or FireMonkey desktop application, you can now connect to a MySQL or PostgreSQL database from a TMS WEB Core Electron cross platform desktop application.

    mySQLPostgreSQL



    7. Sentry service-based application JavaScript error and Object Pascal exception logging


    Sentry is a cloud service for logging information for JavaScript errors in web applications. This is interesting for developers as it offers detailed information, a call stack, and browser/machine info when an error happens in a web application. This way, you can get insight into unexpected behavior for your applications that typically end-users could not have given. We have extended this concept to Object Pascal exception logging. So, think of Sentry as the Eurekalog or madExcept for TMS WEB Core Web Applications.

    TMS WEB Core Delphi Sentry logging

    8. TWebComboBox with csDropDown style


    Formerly, the TWebComboBox featured only csDropDownList style due to the obvious limitations of the underlying HTML elements. Now, we have overcome this limitation and the csDropDown style is now also available.

    9. New grid.SaveToCSV() method


    It is possible to call grid.SaveToCSV(AFileName: string) and the content of the grid will be offered as a download in CSV file format. This is of course also the case for a TWebDBGrid. This means, exporting database information to CSV is now a piece of cake.

    10. Tons of smaller component improvements


    Again, we have learned a lot from user feedback and our own experience building web client apps that have led to improvements throughout the framework. These improvements can be seen on many levels: layouting, HTML element binding, database binding, VCL compatibility, ... and much more.

    It is clear our team is very enthusiast about the upcoming TMS WEB Core v1.5 Rimini release. With every new release, we have enjoyed producing web client applications with TMS WEB Core even more and we are excited when we hear users share the same enthusiasm.

    TMS WEB Core v1.5 Rimini will be in your hands early August. If you are a TMS ALL-ACCESS user and interested in a beta, please contact us with the information about what Delphi version you use. As a side note, this v1.5 feature set for web application development (excluding PWA or Electron applications) is also what will be available in the upcoming TMS WEB Core for Visual Studio Code.

    Viewing all 1006 articles
    Browse latest View live


    <script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>