This repository contains the complete source code for a Delphi package consisting of components designed for use within TMS WEB Core projects. These components are wrappers (mostly) for popular JavaScript libraries. The first such component, a wrapper for FlatPickr, was first published along with the TMS Software Blog post that relates to it, on May 17, 2022.
Installation
- For the Design-Time Package, follow these steps.
- Download the repository ZIP and unzip into your usual Delphi Projects folder.
- Navigate to the Design-Time folder and load the JSExtend project.
- Using the Project Manager window, right-clcik on JSExtend.bpl and select 'Install'.
- You should see a message that components have been installed.
- For the Run-Time files, there are (at least) two options.
- The individual Run-Time files can be added to your project directly OR
- Go to the Delphi Tools/Options... menu, and then under TMS WEB / Options / Library Path, add the Run-Time folder.
- Add the JS and CSS CDN links to your Project.html file. There aren't any dependencies here, so if you only need one particular JS library, you can include only that set of links. For example:
<!-- Flatpickr -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/flatpickr.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/flatpickr.min.css" rel="stylesheet"/>
<!-- Luxon -->
<script src="https://cdn.jsdelivr.net/npm/luxon@latest/build/global/luxon.min.js"></script>
Once installed, you should be able to find the Delphi IDE components at the bottom of the Delphi Component Palette (in the JSExtend Group) when editing a TMS WEB Core TWebForm. Drop the component onto the form and then set the Object Insepctor properties as desired, and the control should appear once the project is run. There's not much to see directly in the IDE, as these kinds of controls are rendered entirely in HTML and CSS, using JavaScript, so the Delphi IDE is unable to render anything of much use here.
Documentation Additional information about how to use each of the JSExtend elements can be found on these pages.
As with any modern web application, other JavaScript libraries/dependencies have been used in this project. Most of the time, this is handled via a CDN link (usually JSDelivr) in the Project.html file. In some cases, for performance or other reasons, they may be included directly.
- TMS WEB Core - This is a TMS WEB Core project, after all
- Flatpickr - For handling Date/Time UI
- Luxon - For handling date/time conversions
-----------------------------------------------------------------------------------
Language files blank comment code
-----------------------------------------------------------------------------------
Pascal 2 50 105 365
Markdown 4 52 0 140
XML 2 0 0 30
YAML 2 4 8 15
Windows Resource File 1 0 0 1
-----------------------------------------------------------------------------------
SUM: 11 106 113 551
-----------------------------------------------------------------------------------
If you find this work interesting, helpful, or valuable, or that it has saved you time, money, or both, please consider directly supporting these efforts financially via GitHub Sponsors or donating via Buy Me a Pizza. Also, check out these other GitHub Repositories that may interest you.