Dimensional Data

It’s been over a year now since the first release of TMS WEB Core. Meanwhile many developers have started first experimenting and then building new web technology based applications with the standalone version of TMS WEB Core and additional tools like TMS XData that are all included in TMS ALL-ACCESS. Some developers combined this with our FNC cross-platform components and have created extraordinary projects! We were especially pleased to see this month that the well-known and respected German magazine on web development: “web & mobile developer” features an article on TMS WEB Core.This is especially encouraging as it spreads the word about TMS WEB Core and more importantly the Delphi IDE to a wide community of software developers. Let’s hope it gets noticed and might convince developers to explore RAD component based web development in the Delphi world! Here is a short summery of the article: TMS WEB Core v1.6.1.0 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.

Async? What’s that? Maybe you have already heard about the two concepts of synchronous and asynchronous processing of code statements. I give you an example. Let’s have a look at a “normal” Delphi application and the following lines of code: procedure MyProc(); var lResponse : string; begin lResponse := ExecuteServerRequest; lResponse := ‘Response: ‘ + lResponse; Writeln(lResponse); end; I think you know this type of application (maybe a VCL or FMX app) and of course line 6 is executed after receiving the servers response. This behavior is called synchronous because the computer performs the written code line by line. If you write the same type of code in JavaScript things are working differently. Let me explain why. First of all pure JavaScript is single-threaded. Due to that fact it only has the possibility to perform your code line by line, so to say JS code is executed synchronously. But this only applies to JS and not for browser api calls. Imagine, if you perform an http request as I did in the example above, you call functions from the browser api. At this point the JS engine can continue with the next statement (next line of code) and the browser performs his task in the background. As soon as he is ready he gives you a callback. This is due to the fact that a website always has to react e.g. for resizing. If this would not be possible you would see an hourglass when connecting to a webserver (which lasts a bit) and your whole web app would be frozen. I think you know the well known Blue circle of death from windows. The reason in JS style So what to do if you want to connect to a webserver? The thing is that you have to wait for the response until you can continue your code. In JS the answer is splitted to three statements: async, await and promises. The concept behind this is that the promise which executes your code (e.g. pulling a webserver), has two callback functions. One is called if everything was successful and the other handles possible errors. Maybe it is better to give you a tiny example in JS: … let lPromise = new Promise( function(ASuccess, AFailed){ setTimeout ( function(){ ASuccess(“Waited 2 seconds”) ; }, 2000); }); … I created a promises which performs setTimeout() to wait for 2 seconds and then he calls the success function. The next step is that you can mark a function as async so that it returns a promise and no longer maybe a string. This … async function MyAsyncFunction(){ return “Hello World!” ; } … is the same as … async function MyAsyncFunction(){ return new Promise( function(ASuccess, AFailed){ ASuccess(“Hello World!”); }); } … I know this is hard to understand but please keep in mind that this is just another way to return a promise but it is much more legible. Calling this function with the await keyword makes sure that your code waits for the success callback function of the returned promise and calculates the result of this function which can be the response of the server. Think of the lPromise from above which simply waits 2 seconds. If I would run the following lines of code console.log(“Before calling”); let lPromise = new … console.log(await […]

Our VCL component TAdvStringGrid is one of our components with the longest history. It served thousand and thousands of software developers on planet Earth and we are incredibly thankful for an not oversee-able amount of ideas from users that went into the grid during all these years. There is so much power packed into TAdvStringGrid that it becomes a challenge to know and unlock all its power. Hence this new series “Grid Goodies“. And that is not all, our colleague & chief evangelist Holger Flick has some more things up in his sleeves to help you getting the most out of our VCL grids. But I don’t want to reveal more about this upcoming surprise at this time. Let’s bring two extremely easy to use yet powerful features of TAdvStringGrid. Smart clipboard The grid has numerous settings to fine-tune the exact behavior for clipboard handling you want to have. One lesser known feature is the built-in smart clipboard handling. This is enabled by setting grid.Navigation.AllowSmartClipboard = true. What this means is that when you copy a range of cells values to the clipboard with grid.CopySelectionToClipboard and you paste this range into a cell range with a different size, it will try to perform in a smart way what you expect on the different range of cells where you paste, like for example automatic number or date increments. This isn’t limited to performing copy & paste, it can also be enabled for when you select a range of cells and resize it with the mouse. This is enabled with grid.SelectionResizer = true. Of course, for this to work, the grid must be enabled for editing and cell range selection. We decided to make it ultra easy to enable all this functionality by setting one public property instead of going over all different properties involved here, and that is: grid.SpreadSheet := true; When this is enabled, this becomes possible without any code except the button OnClick handlers calling grid.CopySelectionToClipboard / grid.PasteSelectionFromClipboard: Easy highlighting The second goodie we want to reveal is highlighting matching text in the grid. Although the grid has built-in filtering, various built-in search functionality, on the fly highlighting of matching values can be that convenient feature you are looking for. And it cannot be easier to use. All you need to do is call: grid.Hilight(FixedCells, CaseSensitive, YourText); So, for this example, all we did was attach an OnChange event handler for the edit control and call from there: procedure TForm1.Edit1Change(Sender: TObject); begin AdvStringGrid1.HilightInGrid(false,false,Edit1.Text); end; Oh, one small extra setting was done! We changed the highlight color from the standard blue to yellow background and red text with: AdvStringGrid1.HighlightColor := clYellow; AdvStringGrid1.HighlightTextColor := clRed; Let us know what your favorite grid feature is or what other interesting little goodie you discovered recently and we will be happy to share it here in a follow up #GRIDGOODIES.

After we released TMS WEB Core v1.6 Pesaro for Delphi & Lazarus on earlier in January this year, we are pleased to inform that the release of TMS WEB Core for Visual Studio Code is now here as well. This brings the framework and language support on par with the versions for Delphi or Lazarus. Focus on new language features Among the major new capabilities of the pas2js compiler are: Generics Attributes Class constructors Resource strings Async procedure decorator Await support JavaScript promises support Resource file support So, the long awaited support for generics (that comes with the accompanying RTL unit generics.collection) and attribute support will allow that nearly all of your existing Delphi code can move over to TMS WEB Core for creating web applications. On the other side, the new support for async procedures, for promises and for await, will mean that you can use modern web paradigms for handling asynchronous functions easier. These features async, promise and await are direct equivalents to the existing JavaScript functionality and do not exist for native Delphi application development. Updating is easy Updating to the new TMS WEB Core for Visual Studio Code v1.2 is easy. Either you obtained TMS WEB Core for Visual Studio Code from the Microsoft marketplace and the IDE will handle the update automatically for you or you can download the latest version from our website. Either way, you will need to reactivate either your trial or full registered version credentials. What’s next? We have been working a long time on v1.2 but in parallel we have already made significant advances for the next release v1.3. The new version will bring component package support. So, from the IDE, you will be able to install additional component packages including creating your own custom component packages. When this is in place, your array of available components at design-time will rise significantly as our full range of TMS FNC Components will become readily available from TMS WEB Core for Visual Studio Code as well. For now, this use was limited to using the classes via runtime code. Get started now If you didn’t get your feet wet already with RAD component based Object Pascal based web client development, now is the time to enter this fast moving & fascinating world. The sheer amount of new possibilities and territories is staggering. You cannot only develop no-deployment cross platform rich web client applications, but also offline usable and installable PWA’s for use on mobile devices bypassing Apple or Google stores. Or you can use the Electron framework to create cross-platform desktop applications for Windows, macOS and Linux with a modern and fresh looking HTML/Web based GUI. And with Visual Studio Code, you can do all this directly from your favorite operating system: Windows, macOS or Linux. Learn here about the new generics support: Get the TMS WEB Core for Visual Studio Code v1.2 trial or use TMS WEB Core for Visual Studio Code v1.2 as part of the TMS ALL-ACCESS subscription, the no-nonsense subscription to our entire product portfolio coupled with priority technical support services.

New year, new ideas. So, I’m happy to kick off with one of the many new ideas we have, which is the Freebie Friday! Freebie Friday is simple. We share a useful code snippet that might be handy in your projects. We present it, you copy and paste it and you use it in your applications where you see use for it. Freebie Friday free source code snippets are the result of our daily work, writing components, offering support & consulting for customers … Over time, a huge collection of useful code builds up and instead of letting this collect dust, we cheer up your Friday, just before the weekend and present it here. This first freebie is two routines that enable you to capture a control as image. The first that might come up is, why write a routine for this, a control offers control.PaintTo() and we can just use that to have the control paint to a canvas and save that to a file. In theory yes, in practice, sadly this doesn’t work well with many controls. So, therefore these two routines that do work with any VCL control and as a bonus, it works with a VCL form as well, so you can capture entire forms to a bitmap or image. Here we go, here is the code: interface uses Classes, Windows, Messages, Graphics, JPEG, Controls, Types, Forms; procedure CaptureControl(AControl: TControl; ABitmap: TBitmap); procedure CaptureControlToJpeg(AControl: TControl; AFileName: string; AQuality: integer = 70); implementation uses Winapi.DwmApi, SysUtils; procedure CaptureControl(AControl: TControl; ABitmap: TBitmap); var LDesktopDC: HDC; LRect: TRect; LDWMRect: TRect; LPt: TPoint; begin LPt := AControl.ClientToScreen(Point(0,0)); LRect := Rect(LPt.X, LPt.Y, LPt.X + AControl.Width, LPt.Y + AControl.Height); if (AControl is TWinControl) and (AControl as TWinControl).HandleAllocated then begin GetWindowRect((AControl as TWinControl).Handle, LRect); end; if (AControl is TCustomForm) and (AControl as TCustomForm).HandleAllocated then begin GetWindowRect((AControl as TCustomForm).Handle, LRect); if (Win32MajorVersion >= 6) and DwmCompositionEnabled then begin if (DwmGetWindowAttribute((AControl as TCustomForm).Handle, DWMWA_EXTENDED_FRAME_BOUNDS, @LDWMRect, SizeOf(LDWMRect)) = S_OK) then begin LRect := LDWMRect; end; end; end; LDesktopDC := GetWindowDC(GetDesktopWindow); try ABitmap.PixelFormat := pf24bit; ABitmap.Height := LRect.Bottom – LRect.Top; ABitmap.Width := LRect.Right – LRect.Left; BitBlt(ABitmap.Canvas.Handle, 0, 0, ABitmap.Width, ABitmap.Height, LDesktopDC, LRect.Left, LRect.Top, SRCCOPY); finally ReleaseDC(GetDesktopWindow, LDesktopDC); end; end; procedure CaptureControlToJpeg(AControl: TControl; AFileName: string; AQuality: integer = 70); var LJpeg: TJpegImage; LBmp: TBitmap; begin LBmp := TBitmap.Create; try CaptureControl(AControl, LBmp); LJpeg := TJpegImage.Create; try LJpeg.Assign(LBmp); LJpeg.CompressionQuality := AQuality; LJpeg.SaveToFile(AFileName); finally LJpeg.Free; end; finally LBmp.Free; end; end; To use these routines, you can do this with: begin // capture a control to JPEG file setting JPEG quality to 90 CaptureControlToJpeg(mycontrol, ‘mycontrol.jpg’, 90); // capture a form (Self) to JPEG file setting JPEG quality to 50 CaptureControlToJpeg(Self, ‘myform.jpg’, 50); end; To capture a control to bitmap, use: var LBmp: TBitmap; begin LBmp := TBitmap.Create; try CaptureControl(mycontrol, LBmp); // do what you want with the bitmap here finally LBmp.Free; end; end; Enjoy and have a good weekend!

We look forward to connect with you at the upcoming webinar! Learn about the new features in the latest release v1.6 Pesaro in the upcoming webinar organized by Barnsten. Webinar: Develop Web Clients from the Delphi IDE TMS WEB Core is based on compiling Delphi UI code to JavaScript and creating this way what that Delphi developers are used to. A TMS WEB Core application can contain multiple forms. These multiple forms will be hosted in a JavaScript application a web browser user can navigate to via a single page URL. Any modern HTML5 compliant browser can run TMS WEB Core web client applications. This includes Chrome, Safari, Edge, Firefox, Firefox Developer Edition, Opera. Our CTO Bruno Fierens will take a tour around TMS WEB Core and the exciting new capabilities v1.6 brings and how to use this in a productive way to develop web client applications. Register now for the webinar to ensure your seat. This will be an interactive webinar. You can ask your questions during or after the webinar. Is a FREE online event, organized by Barnsten Netherlands, on Janaury 26th, 2021. Learn more Visit barnsten.com, register and participate.

Intro 2021 is just started and with only a few weeks into the new year we are proud to present you the TMS FNC Cloud Pack 1.3 update which brings a new set of services, big improvements to existing services as well as a new design time authentication dialog and last but not least: service wrappers. Below is an overview of what you can expect when installing the TMS FNC Cloud Pack 1.3 update. New services When installing the update you get access to the following new services: Service wrappers The update also brings 3 new service wrapper components: TTMSFNCCloudLogger: wrapper around cloud logging services: Sentry, Exceptionless and Rollbar TTMSFNCCloudStorageServices: wrapper around all cloud storage services TTMSFNCCloudTranslation: wrapper around translation services: Microsoft Translator, Google Translate and IBM Watson Translator Improvements Improvements are made in various areas: Response headers accessible in TTMSFNCCloudBaseRequestResult Download attachments in Microsoft Outlook Mail & Google GMail Dropbox upgraded to version v2 Google Drive upgraded to version v3 MoveFile and MoveFileToRoot for all cloud storage services Designtime helper After installing update 1.3 you’ll notice the Authentication property has an option to popup an authentication helper dialog. This dialog will allow you to fill in your client-id, secret and/or API key (depending on the service), authenticate and save the result on your machine. This depends on the PersistTokens settings. When opening the form again, the settings can be restored by opening the authentication dialog again and clicking authenticate button. Additionally, when you are unsure on how to obtain a client-id, secret or API key, there are 2 buttons that will help you with that. The “Help” button will take you to this page, which is a general overview for all supported services and step-by-step instructions on how to register your application and obtain the necessary information for authentication, and a “Create Client ID/API Key” button that will immediately take you to the page where you can (after successful login) generate a Client ID and/or API key. Demos This update also brings 3 new demos, demonstrating the wrapper capabilities for the storage, logger and translation services. Stay tuned for the next release which will add more demos and add more services as well as improve existing ones.

The New Year 2021 is still fresh and there is already a major update for TMS VCL UI Pack. As always, our updates focus on bringing the latest improvements and adding features to make your VCL Windows desktop applications built with Delphi & C++Builder shine. In this new version v10.5 we bring several new UI features: Emoji support in HTML engine For some time now, support for the use of emoticons is built-in standard in the Windows operating system. In the Windows operating system this is handled via a multi-color Truetype font Segoe UI Emoji. Regular Windows GDI API based controls (which most standard VCL controls are) cannot use multi-color Truetype fonts. To take advantage of this, for native applications, at minimum the Direct2D API needs to be used. We did the work for you, our HTML engine was updated with the capability to render multi-color Truetype fonts and with this the ability to render emoticons specified via HTML. The HTML standard prescribes a whole range of values for the various emoticons that exist. You can check the list here. In a nutshell, if you write in HTML 😜 I will display 😜 it will render as: 😜 I will display 😜 So, now you can add Emoji decimal values in your HTML used for our VCL components that can render it. This includes labels, listbox, combobox, grid, navigation controls, panels and so much more. New TAdvEmoticonPickerDropDown Offering an easy to use UI with which you can select such emoticon. The TAdvEmoticonPickerDropDown can directly return the HTML code for the selected emoticon via AdvEmoticonPickerDropDown.EmoticonHTML: string property. This new TAdvEmoticonPickerDropDown is used in the design-time HTML string property editor for controls that are enabled with HTML rendering. New web-style form input control validation In web forms, we are used to validation with clear indication on input controls where a value was not entered or was entered incorrect. In VCL Windows desktop applications, this is less common but it can add value to the user experience. While it is possible to do this all manually with showing extra labels with info on why an input entry is incorrect, we have created an easy to use concept for displaying validation feedback to users. This consists on one side of a centralized component (or multiple components) that hold the settings for the validation tooltip and in the TMS input controls like TAdvEdit, TAdvComboBox, TAdvSpinEdit, TAdvDateTimePicker, … and all their descendent classes there is the method control.ShowValidation() / control.HideValidation() added to easily show and hide a certain validation text. For standard VCL controls or other 3rd party controls, the generic method ShowValidator(Control, Text, ValidatorSettings) or HideValidator(Control) are provided. Combining this, you can easily create validation screens like in this example: Input control balloon hints Another helper for guiding users to make correct form entries, is via a balloon hint. We have also extended our input controls like TAdvEdit, TAdvComboBox, TAdvSpinEdit, TAdvEditBtn, … and their descendent classes with ShowBalloon() / HideBalloon() methods. With these methods you can give clues to users when he is not entering correct values as the user leaves the control or while typing. It offers 4 types : neutral, information, error or warning types. Get started TMS VCL UI Pack v10.5 is a free update for all active TMS VCL UI Pack, […]

We are pleased to share two more tips for using TMS WEB Core v1.6 Pesaro. The first tip is for how you could implement on the fly filtering on a TWebResponsiveGrid. The second tips concerns the dynamic creation and use of a TFrame. Let’s dive into the first tip right-away with showing filtering for the TWebResponsiveGrid. Filtering in a responsive grid TWebResponsiveGrid is a grid UI control that is responsive. This means that the number of columns will depend on the available window width in the browser. In this sample, we configured the TWebResponsiveGrid that about 200 pixels width is needed for a grid item and that the number of columns as such, will depend on how many items of width 200px fit in the browser window width. Each item of the TWebResponsiveGrid consists of a small snippet of HTML filled with data from a JSON HTTP GET request response. This JSON contains an array of JSON objects with information about cars. One such item is for example: { “Brand”: “BMW”, “Model”: “Z8”, “Hp”: 400, “Max speed”: 250, “City”: “Munchen”, “Country”: “Germany”, “Type”: “cabrio”, “Picture”: “bmw1.jpg”, “Year”: 2000, “Price”: 95000, “Cylinders”: 8 } The HTML template for the item is set to: ‘(%Brand%) (%Model%)(%Country%) Year:(%Year%)Price:(%Price%)€’; As you can see, it will fetch Brand, Model, Country, Year, Picture and Price from the JSON. When the JSON is loaded, all car items become visible in the responsive grid. Now comes the code to filter which car items will be visible. We will let the filter apply in this case on the car brand and car model. That means that when a value typed in the filter matches either brand or model, the item will be displayed. The code to perform this filtering becomes: var i: integer; f,s,a: string; begin if edFilter.Text = ” then begin for I := 0 to carlist.Items.Count – 1 do carlist.Items[i].Visible := true; end else begin f := Uppercase(edFilter.Text); for i := 0 to carlist.Items.Count – 1 do begin s := carlist.Items[i].JSONElementValue[‘Brand’]; a := carlist.Items[i].JSONElementValue[‘Model’]; s := Uppercase(s); a := Uppercase(a); carlist.Items[i].Visible := (pos(f, s) > 0) or (pos(f, a) > 0); end; end; end; As you can see, we extract the car brand and model via the JSON object attached to the item and when there is a match, the item is visible otherwise not. When the filter changes, we first set all items as visible again, ensuring that any previous filtering operation is undone. That’s it. There is nothing more to it. The display work is all handled automatically by the TWebResponsiveGrid. Dynamically creating, using and destroying a frame In TMS WEB Core, you can use a TFrame just like you can in a Delphi VCL Windows application. You add your UI controls + UI control logic to the frame and you can use this frame on other forms in the VCL application. In TMS WEB Core, the concept is exactly the same. Here we created a frame with a common UI pattern: two listbox where items can be moved from left listbox to right listbox and vice versa. This UI and its code is added to a frame. Now, to use this frame, we just need to add the unit of the frame to the uses list and the following code will from a single […]