Extend TMS WEB Core with JS Libraries with Andrew: FlatPickr (part 2)
Last time out, we looked at how to incorporate FlatPickr into a TMS WEB Core project. We had taken what might be considered the manual approach. A link to a CDN or other source for the library is added to the Project.html file, and then a little JavaScript code is used to manually link the library’s code to an element that has been placed on a TWebForm. This works quite well, and is typically how I use this and many other JS libraries in my projects. But there is another way that might be more inline with how Delphi is used much of the time – by using components. So in this post, we’ll revisit the same JS library, but we’ll walk through how to create a component that will appear on the Delphi IDE’s Component Palette. From there, we will be able to add FlatPickr controls to any TWebForm or wherever we need the component to appear, just as easily as we do with a TWebLabel or a TWebEdit. And we’ll be able to adjust many of the options that we want to pass to FlatPickr by setting properties in the Delphi IDE Object Inspector. Motivation. Beyond just making it easier to use FlatPickr in a TMS WEB Core application, the idea of this post is to get a handle on how to create a Delphi package that can include many such controls. As we make our way through more JS Libraries and their controls in the posts to come, we’ll hopefully be able to upgrade this package with those new controls as well, and maybe even toss in some others along the way. This package can then be installed by anyone working on TMS WEB Core projects and thus get easier access to all the JS Libraries we’re covering in one simple step. Note that if you’re using a JS Library in a one-off kind of situation, the work needed to create a component wrapper is likely to be substantially more work than the manual approach. But there is the potential to save time and effort in (at least) the following scenarios. When you want to use many instances of a component, perhaps in multiple forms. When you want to use the same component in multiple projects. When you don’t want to have to meddle with JavaScript or the nuances of the underlying JS Library. When you want to create something to be used with others, saving them time and effort. By having these kinds of controls in Delphi, you can simply work away as you normally would without even really having to know that you’re using a JavaScript library. Creating a Package. But before we run off creating components, the first thing we’re going to do is create a package to hold these kinds of components. Right out of the gate, we’ve got a few things to cover. Writing TMS WEB Core applications in Delphi means that we’re using the Delphi IDE to do part of the work, and then transpiling our code using pas2js behind the scenes to produce the final code that runs in a browser. But the Delphi IDE doesn’t know all that much about JavaScript or HTML or CSS or things like that – it is a Delphi environment, after all. And once […]
