Dimensional Data

So far in this blog series, we’ve covered JS libraries that included Helpers, Tools, and Assets.  This time out, we’re going to dig into the first of many JS libraries that feature some sort of Control – a component or widget or element of some kind that can extend your TMS WEB Core project beyond what the standard components offer.  Our first control describes itself as “a lightweight and powerful datetime picker” and indeed it is!  It’s called FlatPickr and in this first part, we’ll cover how to get it up and running in your TMS WEB Core projects, with a few examples to show off its key features.  In part two, we’ll take a different approach by creating a TFlatPickr component that can then be added to the Delphi IDE Palette, making it even easier to use in your projects. Motivation TMS WEB Core comes with a datetime picker of course, the TWebDateTimePicker component.  And if you’re a fan of FNC components, there are the TTMSFNCDatePicker and TTMSFNCDateTimePicker components. And if you’re hunting around the Delphi IDE Palette, you’ll also run across a jQuery-based component called TWebJQXDateTimeInput. So plenty of options right off the bat.  But it would be hard to think of another class of component where people (like me!) have very strongly-held opinions on how they should look and work, and what kinds of options they absolutely need to have.  And that’s before we even get to the whole epic tale of date and time formats, something we’ll also be covering very shortly when we get to Luxon.  Also, datetime pickers hide away a surprising amount of complexity for something that, on the surface, appears to be very simple.  When it comes to choosing a datetime picker, here are some of the considerations that I have in mind. I would consider these to be “minimum requirements” rather than “nice-to-haves” for my projects. Your projects may have an entirely different set of priorities of course.  What is perhaps most important is that the same datetime picker component is used throughout a project, where possible. Week Numbers.  I work with many clients from the agriculture industry where week numbers are used all the time, probably more often than dates, in fact. Variations.  Sometimes it makes sense to display a full month calendar on the page. Maybe even two months.  Sometimes it is a drop-down.  Sometimes there’s also a time.  Sometimes there’s only a time.  Being able to use the same control in different variations helps with providing a consistent user experience and results in fewer headaches as a developer. Restrictions.  Having a start/end range for selectable dates is important, but it is often necessary to be able to provide a list of available dates to the component, and for the component to make it clear to the user which dates are available to be selected.  Selections.  The flexibility to be able to select an individual date, multiple dates, or a range is important, but making it simple is just as important. Themes.  The component has to fit in visually with the rest of the project.  My projects typically use CSS for theme work, so bonus points if it can be themed easily with CSS. But at the very list it should provide some options for the ubiquitous light and […]

For the rest of this document, we’re going to be doing triple the work – showing the JavaScript version (JS), the TMS WEB Core wrapper version (WC), and the Delphi version (PAS) of each scenario, presented as a block of code suitable for inclusion (and tested!) within a TMS WEB Core project, which supports all three of these seamlessly.  If you were working on a part of a project that used only Delphi VCL code, you could use just the PAS code equally well there.  Or if you were working on a part of a project that used pure JavaScript, then the JS code within the asm … end blocks would work just as well in that environment.  We’ll even cover a little bit about moving between these three environments.   To begin with, we’ll need to know how to define variables to reference JSON objects. We’ll also need to know how to supply JSON to them (sometimes referred to as serialization), and how to see what they contain (de serialization). For the sake of simplicity, we’re going to show our work using console.log() which works in both Delphi and JavaScript in our TMS WEB Core environment. Simply substitute with ShowMessage or some other equivalent debugging output if you’re working in any other environment.   But why do we have to define variables at all?  Well, one of the key differences between JavaScript and Delphi is how data types are managed.  Delphi is a strongly-typed language meaning that, at nearly every step, the data type assigned to a variable is known, usually in advance of its being used.  And these data types tend to be rather specific in nature.  A JSON Object is not necessarily interchangable with a JSON Array, for example.  JavaScript, on the other hand, is a weakly-typed (some might even say non-typed) language.  Data types are sort of an afterthought and you can write all kinds of code without having to think about what kind of data is flowing through it.   There are significant trade-offs to both approaches.  JSON is also very closely tied to the JavaScript language itself, and some aspects of the JavaScript language that have evolved over the years have led to significant improvements in using JSON in that environment. The overall result is that the JS code we’ll be showing tends to be very short, sometimes a little cryptic, but often very efficient.  The Delphi equivalents often have to do a little more work to achieve the same thing, but not always less efficiently, as we shall see. Using JS code in TMS WEB Core just involves wrapping it in an asm … block.  We’re not using any other libraries or supporting code to do our work here. The WC variations similarly will work without anything special in terms of the TMS WEB Core environment.  The classes we’ll be using are there by default, collectively referred to as the TJS* classes.  For Delphi though, we do need the extra little step of adding WEBlib.JSON to the uses clause of our project (or Form, etc.).  This brings in the TJSON* classes that we’ll be using. Here then is our sample WebButtonClick procedure that we’ll use in nearly every example that follows.  It will start with whatever JS, WC or PAS variables we need and then contain […]

20 : Relative Performance. I’ve often heard that while it is possible to use the TJSONObject variant of these approaches (the PAS code we’ve been working so diligently on), it is preferable instead to use the WC variant as it will be better performing.  We’ll put that to the test here in a bit of a contrived example.  Often, readability and re-usability of code is more important than straight-up performance, particularly for difficult code that isn’t executed frequently. But at the same time, situations certainly do come up where a bit of code is executed frequently in a tight loop, and squeezing out every bit of performance is important. procedure TForm1.WebButton1Click(Sender: TObject); var   WC_Object: TJSObject;   PAS_Object: TJSONObject;   ElapsedTime: TDateTime;   i: Integer;   Count: Integer; begin   ElapsedTime := Now;   // JS Create 1,000,000 Objects   asm     var JS_Object = {};     for (var i = 0; i

In previous articles in this series, we’ve covered some big JS libraries like Bootstrap and FontAwesome.  But there’s another important JS library out there.  It can be found lurking under approximately 75% of all websites globally.  It first arrived on the scene more than 15 years ago.  And it is likely to be with us for the foreseeable future, even though its use has started to decline. I’m talking of course about jQuery.  But while you can use Bootstrap and FontAwesome in your TMS WEB Core projects without needing to resort to JavaScript coding, the same cannot really be said for jQuery.  At its core, jQuery can be thought of as a kind of extension of sorts to the JavaScript language.  Their motto is Write Less, Do More. We’ll be taking a look at where jQuery might find a good fit in TMS WEB Core projects, and also some of the unexpected challenges that might arise. Good jQuery First, the briefest of histories.  jQuery first surfaced around 2006.  It was a time when writing JavaScript code meant that you had to be very much aware of the target browser that would be running your code.  Standards of the day were tenuous at best.  And as the saying goes, the great thing about standards is that there are so many to choose from. jQuery offered developers a consistent approach to writing JavaScript (an API, essentially) which meant that you could write code using jQuery that would then work across many browsers.  So naturally it rose quickly in popularity.  In fact, it became so popular, particularly among new developers, that it has been said that some developers struggle to write actual Vanilla JavaScript (aka JavaScript that doesn’t make use of any frameworks like jQuery). Not surprising given how easy it has been to use jQuery when compared to the Vanilla JS equivalents of even just a few years ago.    jQuery has also evolved over the years to keep up with current web trends, and perhaps has even helped drive to some degree the adoption of new browser technologies. Even if some of those technologies ultimately end up removing the need for jQuery in the first place.  Progress, all the same.  And given the almost ubiquitous presence of jQuery, many (previously, most) JS libraries have been built on top of it, further ensuring it has a long life ahead of it.  Last time out, we looked at BigText, one such JS library, with jQuery as its only dependency.  Bootstrap 4 was also dependent on jQuery, but this was removed for Bootstrap 5.  Removing jQuery as a dependency seems to be a bit of a trend of late, perhaps ironically at the same time that many JS libraries are increasingly being released with variants that are specifically tailored to other (competing) JS frameworks.  Less Good jQuery Being around for such a long time, and being actively improved all the while, naturally a good deal of bloat is destined to be part of the mix, as would be the case in any software product.  For some projects, this will be the largest JS library in the project, dwarfing all others and negatively impacting the overall performance of the resulting web application.  While I don’t doubt that this can be a real problem, we also […]

 Are you keeping up with our latest developments? We know it is hard to keep up with our latest developments, it is going super fast! Best way to stay updated? Of course TMS ALL-ACCESS! To give our customers access to all our latest developments we have created our no-nonsense subscription TMS ALL-ACCESS! Because we want our customers to be able to use all our products with no restrictions or limitations. And when we say ALL we really mean ALL our products we offer now and also all new products we’ll release in the year of the subscription. Moreover, our all-access users are the first to receive the previews and betas of our non-released products! A quick recap In the first quarter of 2022, we already released 3 new products: Get full access with:  Easy plan: All current and new products for 1 price! Easy renewal: Yearly renewal only for 520 EUR! Easy install: all products accessible via TMS Subscription Manager tool Easy support: Full online support center access to all areas Easy up-to-date: Early access to product betas Easy learning: Access to TMS WEB Academy Pleasant user experience Use the TMS Subscription Manager with a single login to get instant access to all products in your TMS ALL-ACCESS subscription. TMS Subscription Manager categorizes the products per technology : VCL, WEB, FMX, BIZ, FNC, DEV, .NET, IntraWeb and LCL. Per product, you get a description, link to the product webpage, info on latest available version and release date, info on your last download version and download date and info on your last product install version and date. You can mark specific TMS products as your favorite products. It allows you to start multiple downloads. Behind the scenes, TMS Subscription Manager keeps a backup of any product versions you have downloaded. Right-click on the downloaded version number cell per product and from the context menu you can see all available versions (if there are any) and activate another version for install. The TMS Subscription Manager keeps you always informed about the validity of your subscription and will guide you to the renewal order upon expiry. From the TMS Subscription Manager there is a comprehensive list of links to interact with us, via email, social media, forums, RSS, Youtube videos … Did you know… … that the renewal price after 1 year is at 70% discount from the new license price, i.e. currently just 520 EUR ?!  So, once you are a TMS ALL-ACCESS subscriber, you’re covered the next years for just this fraction of the price. We wish to offer fair prices to ALL our customers at ANY time! We believe the customer should be able to purchase at an attractive and correct price on the day the customers wants to make the purchase and not the day we want this.  So what are you waiting for? Contact sales for special upgrading pricing for existing customers of other products. Requests are looked at case by case and a best possible offer is made. 

Last week we did a blog on visualizing your own data structure, which showed the capabilities of virtual data, and the little code required to get up and running. Today’s blog is demonstrating how to interact with the chart. When the data is loaded, how do we zoom in, out? How can we get more details about a specific point in the data? Panning Panning is enabled by default, you can pan left to right on the X-Axis. To enable/disable panning, you can use the InteractionOptions.Panning property. Panning is done by moving the finger/mouse from right to left, or left to right. By default, the chart is showing the full range of points, starting at point 1. Dragging from left to right will show points before the zero valuepoint on the chart Dragging from right to left will show points after the last visible  The chart can be reset by using the following code TMSFNCChart1.BeginUpdate; for I := 0 to TMSFNCChart1.Series.Count – 1 do TMSFNCChart1.Series[I].AutoXRange := arEnabled; TMSFNCChart1.EndUpdate; Zooming Zooming in / out is also enabled by default, on the x-range, which means that you can zoom/scale horizontally. This can be done by holding the CTRL key on the keyboard, dragging the mouse / finger left & right or by doing a pinch gesture on iOS/Android. Below are 2 screenshots of the chart in action whilst zooming in and out   The chart can be reset in the same way as with panning. The property to support scale interaction is located under InteractionOptions.ScaleMode which can be set to smHorizontal (default), smVertical (y-values scaling) or smNone. Point Detection The chart exposes a series of events that are triggered when clicking on a point, bar, slice or an item in the legend. For this sample, we want to click on a bar, visualize the value and change the color. The code to do this is shown below. procedure TForm1.TMSFNCBarChart1SerieBarClick(Sender: TObject; APoint: TTMSFNCChartPoint); begin APoint.Color := gcOrange; ShowMessage(‘The point clicked has a value of ‘ + APoint.YValue.ToString); end; v2.0 Our team is working hard on the next version which will include a significant amount of new features and improvements related to data import, look & feel and out of the box experience. Stay tuned for more! Want to explore the capabilities of TMS FNC Chart, go ahead and download it from our product page.

TMS iCL is our Delphi iOS component library. The components are in fact wrappers around the iOS operating system level defined controls and are usable from a FireMonkey form. As iCL controls wrap iOS operating system controls, the entire look & feel as well as feature set of the iCL control is defined by what the iOS control offers. It is rendered by the iOS operating system.Another advantage is the performance, the control remains extremely fast and responsive, irrespective of the number of items or the complexity of what is displayed. Both iCL controls and FNC or Firemonkey controls can be used together on the same form. Update 4.0.0.0 In this update we added four new components, replaced some deprecated components by Apple and updated our demo’s to work out of the box on Delphi 11. Application Shortcuts On a device that supports 3D Touch, a user invokes the quick action by pressing the app’s icon on the Home screen and then selecting the quick action’s title. The TMSFMXNativeAppShortcuts component has a list of shortcut items which will trigger an event when the item was selected to open the application. Speech Recognition Two components were introduced for speech recognition. TMSFMXNativeSpeechRecognition to retrieve the text from the spoken input or from an audio file. And the TMSFMXNativeSpeechCommandRecognition, which will execute an event when the required text has been recognized by the component. Sheet Controller TMSFMXNativeUIViewSheetController lets you present a view as a sheet on top. The height can be set and there is the possibility to show or hide a grabber. Replacing deprecated components TMSFMXNativeUIViewPopOverController replaces UIPopoverController as the UIPopoverController is deprecated by Apple. TMSFMXNativeUIViewPopOverController now inherits from the UIViewController. TMSFMXNativeWIWebView replaces UIWebView. It is a new component, but has all of the same procedures and properties as TMSFMXNativeUIWebView. This will make it easy to update your application. And the demos were updated to work out of the box on Delphi 11 and with iOS 14+. More information on TMS iCL.

In April, we did a blog on how to retrieve Google Analytics results, and display them in a TMS FNC Chart instance. The data, coming from the request, was displayed in a points collection. Did you know that you can also map your own data structure? TMS FNC Chart is designed to easily integrate your own data with a couple of lines of code. This blog will cover this, but first, let’s take a look at a general introduction video on what TMS FNC Chart has to offer.  Introduction Data mapping For the purpose of this sample, we take our CARS.csv file, shipped with a couple of our FNC demos. The file contains a list of cars, with useful info such as the power, cylinder capacity and price. First of all, we load our csv data in a TTMSFNCGrid. TMSFNCGrid1.IOOffset := Point(1,1); TMSFNCGrid1.LoadFromCSV(‘CARS.CSV’); TMSFNCGrid1.SortData(1, sdAscending); TMSFNCGrid1.Cells[1,0] := ‘Brand’; TMSFNCGrid1.Cells[2,0] := ‘Type’; TMSFNCGrid1.Cells[3,0] := ‘CC’; TMSFNCGrid1.Cells[4,0] := ‘Hp’; TMSFNCGrid1.Cells[5,0] := ‘Cyl’; TMSFNCGrid1.Cells[6,0] := ‘Kw’; TMSFNCGrid1.Cells[7,0] := ‘Price’; TMSFNCGrid1.Cells[8,0] := ‘Country’; Next, we want to visualize the price for each car in a bar chart. First, we add a new series, and set the type. var s: TTMSFNCChartSerie; begin TMSFNCChart1.Series.Clear; s := TMSFNCChart1.Series.Add; s.ChartType := ctBar; s.XValues.Angle := 90; end; To visualize the data in the chart, we can loop through the rows in the grid, and manually add a point for each row, pointing to the data. But there is an easier way. To load data in the chart, mapping directly on the grid data, we begin by implementing the OnGetNumberOfPoints event. procedure TForm1.TMSFNCChart1GetNumberOfPoints(Sender: TObject; ASerie: TTMSFNCChartSerie; var ANumberOfPoints: Integer); begin ANumberOfPoints := TMSFNCGrid1.RowCount – 1; end; The data is requested for each index between 0 & ANumberOfPoints through the OnGetPoint event. In this event, we can map the index on the series data. procedure TForm1.TMSFNCChart1GetPoint(Sender: TObject; ASerie: TTMSFNCChartSerie; AIndex: Integer; var APoint: TTMSFNCChartPointVirtual); var v: Integer; begin v := 0; if TryStrToInt(TMSFNCGrid1.Cells[7, AIndex + 1], v) then APoint.YValue := v; APoint.XValueText := TMSFNCGrid1.Cells[1, AIndex + 1] + ‘ ‘ + TMSFNCGrid1.Cells[2, AIndex + 1]; end; As you can see, a couple of lines of code immediately gives you a first impression of your data. Further customizations can be done, but the chart will map on the data, even if it refreshes the next time your app starts. CSV is a small sample and of course, the data delivered to TMS FNC Chart can be of any source type. v2.0 Our team is working hard on the next version which will include a significant amount of new features and improvements related to data import, look & feel and out of the box experience. Stay tuned for more! Want to explore the capabilities of TMS FNC Chart, go ahead and download it from our product page.

Developing in Delphi sometime presents a frustrating work-flow, experts allow us to alter some behaviors and Deputy targets the one that I disagree with the most, prompt for overwrite. This post will focus on the developers daily tasks and introduce Deputy, a part of RunTime ToolKit, and explain integration of Marshal and Caddie. Introducing Deputy Deputy, an IDE expert, remediates orphaned processes to avoid the prompt for overwrite. By default the IDE does not check before running a compile, it runs a few seconds of precompile then prompts that it can not overwrite the target. This expert watches before that compile starts and clears out the old process before the compile starts. See it in action: Availability: Deputy is available in GetIt for Delphi 11, 10.4 and 10.3. RunTime ToolKit integration Deputy provides the ability to download and launch Caddie, as well as the Marshal demos for VCL and FMX. Future releases will integrate specific items from Caddie and Marshal to make the experience more seamless. Marshal Highlights Marshal, an instrumentation SDK, enables runtime inspection of VCL and FMX applications via inspectors that are assigned by class type. Marshal provides navigation of your applications forms, datamodules and components. Marshal is built with the FNC UI Pack. Explore how easy it is to inspect your application with Marshal.  Explore your components with Object Plus, an integration of the FNC Object Inspector that captures the detail of your changes along with before and after screen shots. TDatasets get an extended analysis by attaching an FNC Grid with an export to csv. FireDAC connections get the ability to run adhoc SQL. Caddie is the offline analysis and organization component of RunTime ToolKit. Inspection generates a lot of data and Caddie gives you the ability to review a runtime session at a later date. Additional image analysis is executed as part of session collection to provide more visual clues on before and after images. Summary Deputy connects the circle of processes that RunTime ToolKit is tailored to provide for you as the developer. Making your tasks easier via inspection, data collection and analysis is the focus of RunTime ToolKit. Learn more here  Request for Feedback Your comments are essential for improving these tools and I am listening for feedback.  Please leave a comment below, contact me via email ( web@swiftexpat.com ) , open an issue on GitHub (https://github.com/SwiftExpat/Deputy ), or reach out on Delphi Praxis. Neil Laskowski 

In the last two outings, we covered some big JS libraries.  Bootstrap and FontAwesome are wildly popular and with good reason. And getting started using them in your TMS WEB Core project couldn’t be simpler.  This time out, we’re going to explore a pair of much smaller JS libraries. And we’ll have to get a little more hands-on using JavaScript in our code to best take advantage of them.  Fortunately, there are plenty of code examples to draw from.  First, we’ll look at Interact.js which is used to add the ability to drag and resize HTML elements on the page.  And then we’ll pair this with BigText.js which is used to automatically scale text within an element to match its size.    Motivation Using standard HTML and CSS, it is possible to create elements on a page that can be resized simply by using the CSS resize property.  It takes values of none, horizontal, vertical, and both.  And it works as expected, adding the familiar small diagonal lines to the bottom-right corner of the element, indicating that it can be resized. It even respects standard CSS properties like min-width, max-width, min-height, max-height to limit how far the element can be resized.  But that’s about the extent of the feature.  And as developers, we’d like to have a few more options available. Styling options.  You get the diagonal lines in the corner.  And that’s exactly all that you get. There’s not even an HTML element for it. It’s just ‘there’, wherever it decides ‘there’ is. Aspect Ratio.  While it is possible to force elements to have an aspect ratio, it isn’t necessarily the easiest thing to do.  There’s a new aspect-ratio CSS property that may help simplify this if you happen to know that your visitors use a browser that supports it, but that’s often not the case. UI.  What if you want to start your resize from a different corner?  Or an edge? Not happening with the standard CSS resize. Event Handling. If your app needs to know about the change (perhaps to save the new size for later), then you have to dig into more obscure JS functionality involving Observers to get this to work. Not so fun. Dragging. The CSS resize property allows only for resizing.  Not really anything readily available to deal with dragging elements. Fortunately, Interact.js addresses all of these areas quite readily.  And, once setup, you can add drag and resize functionality to any of your elements simply by adding CSS classes to them!  Once you’ve got an element that is resizable, the next challenge is how to deal with its contents.  Often, it doesn’t matter – longer bits of text or other elements can be set to wrap automatically, and this is likely what will happen by default anyway.  And even the dimensions of the elements contained within or alongside the recently dragged and/or resized element can be set to automatically resize or flow in different directions, based on almost any kind of arrangement you can envision.  Sometimes, though, it would be better if the text itself could be automatically scaled to fit the new dimensions. This is where the Event Handling aspect is important, as knowing when the element has been resized can then trigger this scaling function.  While it is not a […]