Dimensional Data

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.