TMS Software. All-Access

FlexCel .NET, .NET5, Blazor and WebAssembly – Part 1

Introduction: Supporting .NET 5 We’ve just released FlexCel .NET 7.8, which adds support for .NET 5. Usually, “adding support” for a new version of a .NET framework is just recompiling the code, but in this case, as .NET 5 is the successor of .NET Core 3, not of .NET framework 4.8, things got a little more complicated. There were subtle errors generated from the switch from NLS in Windows to ICU (see https://docs.microsoft.com/en-us/dotnet/standard/globalization-localization/globalization-icu ), and there were issues with the switching of the graphics engine from GDI+ to SKIA. For this release we spent a lot of time optimizing the SKIA rendering, so it is now a little faster than GDI+. We added a way to switch back to GDI+ in Windows if you need to deal with WMF/EMF files or right-to-left languages (see https://doc.tmssoftware.com/flexcel/net/guides/net-core-guide.html ). We made a full review of all string comparisons in the code to ensure they work with ICU. But this is all just business as usual. For this post, we wanted to have a little fun. And so we decided to investigate what cool stuff we can do with .NET 5 and FlexCel. Generating a client-side app using Blazor and WebAssembly Even if still a work in progress, one of the hot new things in .NET 5 is the improvements in Blazor, and more specifically, Blazor WebAssembly. Blazor WebAssembly allows you to run a web app enterely on the browser, offline, in electron, and it even supports Progressive Web Applications It made sense then to start with a small WebAssembly app using FlexCel .NET. But before getting into that and getting the hopes too high, I’d like to mention two limitations currently in Blazor WebAssembly: Blazor doesn’t yet support AOT. This means that in order to compile to WebAssembly, Blazor currently has a .NET interpreter running in WebAssembly, and the interpreter runs .NET IL, not WebAssembly IL. FlexCel isn’t directly converted to WebAssembly, but it rather runs in the browser as .NET IL. And because of there is no “real” FlexCel WebAssembly yet, it is not currently feasible to call FlexCel WebAssembly from TMS WEB Core The graphics engine we use for cross-platform rendering,(SkiaSharp), doesn’t currently support Blazor WebAssembly, even if they are working on it. Not having SKIA means that you can’t use the FlexCel rendering engine in WebAssembly, so you currently can’t export an Excel file to PDF, SVG, or HTML in Blazor WebAssembly.Note that “Server Blazor”, which runs native .NET 5 code in the server, doesn’t have this limitation. Both limitations should go away relatively soon, but we wanted to be completely honest about the current state. So now, with that out of the way, let’s start. For this first example, we will create a Blazor WebAssembly “calculator” app that runs in the client and uses the FlexCel engine to calculate expressions This was the first part of a 2-part series. In this one, we investigated client-side Blazor. In the next part, we will play a little with server-side Blazor.

Read More

Black Friday 2020

And we are back with our best deals for Black Friday 2020!Buy one product and get a second same or lower priced product at 50% discount! (new licenses only) Enjoy this super deal this Friday, all day long! Purchase your first product and just contact our team at sales@tmssoftware.com for your coupon code for the second license. Don’t wait and take advantage now! Share your excitement:

Read More

TMS WEB Core embraces ever more powerful PWA support from Google Chrome

There is no doubt that Google is and remains the driving force behind the fast evolving web world. And with Microsoft having adopted the Google Chromium engine in its latest and new default Windows 10 operating system browser, it is clear that the browser gets ever more powerful with each release. While every Chrome update sees a lot of enhancements, the release 86 introduced perhaps another disruptive feature: the file system access API! Yes, you read this correct, file system access API or in other words, access to the local file system from a PWA (Progressive Web App)! Of course, Google took the necessary measures to look over security. I can imagine you wouldn’t want to be directed to some URL and the web application at this URL will suddenly start scanning your local hard drive. All local file access remains initiated by user interaction and user consent! User consent prompt to view files in a folder What the File System Access API actually provides is: open local text or binary files save to a local text or binary files use the operating system file dialog to pick a file use the operating system file dialog to save to a file get access to a folder and its files/subfolders use the operating system to select a folder associate file types with PWA apps Now, you will understand that as we read the news, we were eager to investigate integration capabilities in a TMS WEB Core PWA and reflect on bringing easy to use Pascal language wrapper classes to take advantage of this new functionality. So, in our labs, we created a support unit for local file handling : WEBLib.LocalFiles. In this unit, three classes are available: TTextFile, TBinaryFile and TFolder. Working with local text files TTextFile offers following public interface TTextFile = class(TObject) public procedure OpenFile; overload; procedure OpenFile(AOpenFile: TOpenTextFileProc); overload; procedure SaveFile; overload; procedure SaveFile(ASaveFile: TSaveFileProc); overload; procedure SaveAsFile; overload; procedure SaveAsFile(ASaveFile: TSaveFileProc); overload; property Text: string; property FileName: string; property OnFileOpen: TNotifyEvent; property OnFileSave: TNotifyEvent; end; As you can see there are overloads for the OpenFile, SaveFile and SaveAsFile methods. In one version of the methods, there is an anonymouse method that is called when the action on the file completed and the other versioni will signal completion via an event. To use the class to open a file, we can write: begin ATextFile := TTextFile.Create; ATextFile.OpenFile(procedure(AText: string) begin WebMemo1.Lines.Text := AText; end); end; If the text was modified in the memo control, it can be saved with following code working on the same instance of the TTextFile object: begin ATextFile.Text := WebMemo1.Lines.Text; ATextFile.SaveFile(procedure begin ShowMessage(‘File succesfully saved’); end); end; As you can see, it becomes extremely easy for Pascal developers to take advantage of the file system access API in the browser! Working with local binary files For binary files, a similar class TBinaryFile was created with the important different from the TTextFile that here the data read or to be saved is of the type TJSArrayBuffer. TJSArrayBuffer is the Object Pascal wrapper for the JavaScript ArrayBuffer which basically is an array of bytes. The interface of TBinaryFile is the same as TTextFile except that it exposes public property TBinaryFile.Data: TJSArrayBuffer. To demonstrate its use, we can open a local image file with the following code: var […]

Read More

Double vector graphics, double quality

uses AdvTypes; procedure TForm1.LoadSVG; begin Image1.Picture.LoadFromFile(‘nature.svg’); end; uses AdvPDFLib, Types; procedure TForm1.Button1Click(Sender: TObject); var p: TAdvPDFLib; begin p := TAdvPDFLib.Create; try p.BeginDocument(‘SVGToPDF.pdf’); p.NewPage; p.Graphics.DrawImageFromFile(‘nature.svg’, RectF(50, 50, p.PageWidth – 50, 500)); p.EndDocument(True); finally p.Free; end; end; When zooming in, you’ll notice that the quality is not affected because of the native vector graphics used inside the PDF document.

Read More

TMS WEB Core for Visual Studio Code v1.1 released

We are excited to announce the immediate availability of TMS WEB Core for Visual Studio Code v1.1 that now enables developing cross-platform Electron desktop apps and PWA’s. This is a new milestone in the development of RAD component Object Pascal language based web development. The key differentiators of TMS WEB Core for Visual Studio Code are: RAD component based development from the free Visual Studio Code IDE RAD designer using web technology, enabling live, wysiwyg design-time rendering Development directly from Windows, macOS and Linux desktop machine Rich eco system of web related development extensions for the IDE Modern IDE with multiview editing, direct high-DPI/retina support With TMS WEB Core for Visual Studio Code v1.1, we complete the three targets that TMS WEB Core offers. In the new v1.1, we introduce next to classic web client applications the Electron application target and PWA target. Electron The first new target is Electron applications. Electron is a framework that enables to create compiled applications for Windows, macOS and Linux using web technology for rendering and execution of the application. The Electron framework is fully cross platform and at application code level there is nothing to take care off in terms of different platforms. Note that it is thanks to the Electron framework that the hugely popular Visual Studio Code IDE runs on Windows, macOS and Linux directly (and recently also Raspberry Pi target was added recently). As Electron applications run as executables directly on the desktop operating system, this means that extra functionality such as direct local file access, access to all kinds of operating system dialogs (File Open, File Save), toast messages, taskbar notifications, drag & drop support and more … is available. For a TMS WEB Core developer, this is offered through Electron specific components. For direct local or network database access, there are also two dataset components for direct access to mySQL and PostgreSQL. PWA The other new target is Progressive web applications. PWA is perhaps the most promising direction for web client application development. A PWA is a responsive web application that can run offline and can be installed on mobile devices (iOS/Android) and also in desktop browsers like Chrome, Firefox, Edge Chromium. After install, your PWA can be started from an icon on the home screen as if it is a native cross platform application. It can run offline and when online, it will still update itself. So, as a developer there are zero concerns about deployment. With TMS WEB Core for Visual Studio Code v1.1, you simply choose a PWA type from the projects repository and it automatically generates all necessary files for creating a PWA. Everything available for classic web applications and that you learned about it is applicable for the PWA project type. Summary With v1.1, the TMS WEB Core target support is completed. As far as core framework is concerned and the target support, TMS WEB Core for Visual Studio Code is now on par with TMS WEB Core on Delphi. Best of all, the projects are 100% compatible, so Visual Studio Code developers can decide to start using Delphi and continue working on a project and vice versa. Or a Delphi developer on Windows can exchange projects with a colleague using Visual Studio Code on macOS, etc… Availability TMS WEB Core for Visual […]

Read More

A new consulting partner and representative for French speaking TMS/Delphi users : Thierry Laborde

The goal of our consulting partner network was from day one to have local experts speaking the same language and being in the same timezone available for consulting to Delphi developers using TMS components and tools. Since its inception, we work closely together with 5 partners in 5 different areas and speaking at least 5 different languages. We are proud to announce today our new consulting partner and representative for the french speaking TMS/Delphi community: Thierry Laborde! Thierry is no unknown in the Delphi world. Thierry has been a Delphi developer for more than 20 years, since Delphi 1 (and even previously on Pascal and Turbo Pascal) as well as a project leader in different French companies in many different software domains: Accounting, payroll, gambling casino, retail, access control, advertising, bank, health… But Thierry was obviously most visible to Delphi developers in France as technical manager of Embarcadero Developer tools in France at ArrowEcs Company (The Embarcadero distributor in France) for 6 years and later as Embarcadero Country Manager for France for less than 3 years. Thierry has been at Delphi roadshows all over France, gave numerous presentations, organised webinars and wrote blog articles. Thierry Laborde was Delphi Developer certified as well as Delphi Master Developer certified in 2011. What might be less known to Delphi developers and TMS component users, is that Thierry created the foundation of what became the TMS VCL WebGMaps product and Thierry collaborated on the TMS MultiTouch SDK project. It goes without saying that Thierry has a deep expertise not only in Delphi application development but also in component development. As such, we are confident that in his role as consulting partner and representative, Thierry will be able to assist French speaking developers with even the most challenging Delphi projects getting the most out of the TMS components or recommend the right components for the job. Without a doubt, these are exciting times for Delphi developers & TMS component and tools user in France. We are thrilled that the deep Delphi & TMS components expertise and skills from our long-time friend are available again for French speaking customers. Not only can French developers hire Thierry’s expertise, but Thierry will also facilitate that customer feedback, needs, request, … are communicated to the team to improve and extend our products. Reach out to Thierry via france@tmssoftware.com. At the same time, we would like to take the opportunity to mention that we still wish to extend our consulting partner network, foremost in the Asia area, Australia, Canada, South Africa. If you are Delphi developer with TMS component expertise and offering consulting services, get in touch and we will be happy to discuss how we can move forward.

Read More

More TMS WEB Core Tips & tricks

Today we want to bring to your attention two totally different TMS WEB Core features. These little tidbits that can bring your TMS WEB Core web client application from good to great. The first is about handling application termination and the second is about getting something more out of TWebStretchPanel. Application termination For long, handling web application termination was simple: it was not really handled. When there was a reason to handle it server side, software developers came up with the concept of sessions. In a nutshell, when a user first requests a HTML page from the server, a session is started and typically a session timer runs. If the users requests a page update or performs another request from the user, the session timer is reset. If the user does nothing or worse, closes the browser, the server timer runs and when it reaches a predefined time, for example 20 minutes, the session is considered closed and thus stopped. We have all experienced the consequences. You decide to go and grab a cup of coffee, meet a colleague in the coffee room, have an interesting talk that of course takes longer than expected and you return to your desk, want to continue using your web application and you are greeted with a session timeout and need to login again. In the world of modern single-page web client applications with stateless REST backend, this is a lot less likely to occur as it is way less likely to have a reason for server side session management. An easy way to look at it, is that the session state is now kept in the client and the web client application will just perform stateless HTTP(s) requests to a backend when data update or retrieval is needed. And still, even in this much more server resource friendly scenario, developers might have a reason to know when the user closes the web application to save something client or server side. To handle this, modern browsers expose the browser window “unload” and “onbeforeunload” JavaScript event. This event is triggered when the browser window is about to be closed or the user leaves the page via navigation. Other than just handling leaving the web client application, it can also be signalled to the user and a confirmation dialog shown to ask if the user really wants to leave. In TMS WEB Core, taking advantage of this is really simple. In your TMS WEB Core web client application, handle the main form’s OnBeforeUnload event. If you wish to show a confirmation dialog, return the confirmation message text via the parameter AMessage. Note that in Google Chrome, a confirmation message will be shown when the message is not empty but it will contain the standard Google text. For the reason, see: https://bugs.chromium.org/p/chromium/issues/detail?id=587940 Here is a code extract that shows the concept. A simple string variable will determine whether some action is needed before closing or not. This string s is empty by default but during application execution can be set (here via a button click). When this string is not empty, it is used to show a prompt when the user wants to close the application via the form.OnBeforeUnload event and in the form.Unload event it can be effectively handled to do a last action before unloading. […]

Read More

TMS FNC Planner Editing

Intro Since the first release, TMS FNC UI Pack has been constantly evolving. Version 3.2 added a lot of great new functionality and new components (https://tmssoftware.com/site/blog.asp?post=695). Today, we wanted to focus on a component that has been there since v1.0: TTMSFNCPlanner. The TTMSFNCPlanner is a scheduling component with various built-in time-axis options, i.e. a day, week, month, period, half-day period, timeline as well as custom time-axis mode where you can fully control the duration of each timeslot. The TTMSFNCPlanner supports single and multi resource views and can have the time-axis in horizontal or vertical orientation. Even when targeting mobile devices, the TTMSFNCPlanner will automatically use a touch-friendly approach. Today’s blog post focuses on a feature that is essential for an application that uses the maximum potential TTMSFNCPlanner has to offer: editing. Editing Editing is divided into 3 parts: Inplace editing Dialog editing Custom editing Inplace editing Inplace editing is enabled by default. Clicking in the planner item notes area will start the inplace editor. The default inplace editor is a TMemo, but can be configured to whatever inplace editor you want to use, with the OnGetInplaceEditor event. See the topic “Custom editing” below for an example. After the editor is started, text can be entered, and committed via the F2 key, or by clicking on another part of the planner. Cancelling is done via the Escape key. Changing the behavior of inplace editing can be done via one of the various properties under Interaction. Dialog editing Dialog editing can be enabled by changing the property Interaction.UpdateMode to pumDialog. When doing the same kind of interaction (selecting the item, clicking on the notes area), the dialog will be shown which can fully edit the item. Whereas inplace editing can only edit the notes, the dialog can edit title, notes, start & end time of the item. There is also support for a built-in recurrency editor dialog, which offers the same basic features as the default dialog, and extends this with recurrency options. This is typically used in combination with a dataset (see planner database demo included in the distribution). To use this dialog editor, you can drop an instance of TTMSFNCPlannerItemEditorRecurrency on the form, assign it to the ItemEditor property and click on the item to show the editor, as you would normally do after setting Interaction.UpdateMode to pumDialog. Custom editing For both of the above editing types, customization is possible. Let’s start with inplace editing. We want to create a custom editor that uses a TTMSFNCRichEditor and a TTMSFNCRichEditorFormatToolBar. We start by implementing a custom class wrapper that creates and holds a reference to a set of richeditor related classes for importing and exporting HTML as well as a toolbar and the richeditor itself. The planner item supports HTML and we need a way to convert the HTML coming from the item to the rich editor and vice versa. type TCustomInplaceEditor = class(TTMSFNCCustomControl) private FHTMLImport: TTMSFNCRichEditorHTMLIO; FRichEditor: TTMSFNCRichEditor; FRichEditorToolBar: TTMSFNCRichEditorFormatToolBar; FScrollBox: TScrollBox; public constructor Create(AOwner: TComponent); override; end; implementation { TCustomInplaceEditor } constructor TCustomInplaceEditor.Create(AOwner: TComponent); begin inherited; FScrollBox := TScrollBox.Create(Self); FScrollBox.Parent := Self; FScrollBox.Align := TAlignLayout.Client; FRichEditor := TTMSFNCRichEditor.Create(FScrollbox); FRichEditor.Parent := FScrollbox; FRichEditorToolBar := TTMSFNCRichEditorFormatToolBar.Create(FScrollbox); FRichEditorToolBar.RichEditor := FRichEditor; FRichEditorToolBar.Parent := FScrollbox; FRichEditor.Position.Y := FRichEditorToolBar.Height; FRichEditor.Width := FRichEditorToolBar.Width; FHTMLImport := TTMSFNCRichEditorHTMLIO.Create(Self); FHTMLImport.RichEditor := FRichEditor; end; To show the new inplace editor, […]

Read More

Use 100% of TAdvWebBrowser

TAdvWebBrowser/TTMSFNCWebBrowser TAdvWebBrowser or TTMSFNCWebBrowser are both the same components. The first one is a component that is available in TMS VCL UI Pack and the TTMSFNCWebBrowser is included in TMS FNC Core. This component can display web pages, HTML and load files such as PDF files. Both browsers also allow executing scripts and catch the result in a callback. Get started You will need to take some additional steps to get started with the TAdvWebBrowser. The component is based on the Microsoft Edge Chromium web browser, so first of all this should be installed. Luckily Edge Chromium is now the default browser that Windows is distributing with the Windows 10 updates. Another important remark is that you can use the normal version of Microsoft Edge and you don’t need to intall one of their specific channels. Another thing that you will need is the WebView2Loader DLL file. There is a 32-bit and 64-bit DLL, the use of one of these depends on the version of the application that you want to build. You can find these files in the ‘Edge Support’ folder which comes with the installation package. These need to be placed in the systems folder of your system. In case you are working on a 32-bit system, you will need to put the file in the System32 folder. If you are working on a 64-bit system the file needs to be in the SysWOW64 folder as Delphi is a 32-bit program. More information on the setup can be found here. Now you are ready to start working with the TAdvWebBrowser. TAdvWebBrowser built-in features To start with the TAdvWebBrowser it can be as easy as placing the component on the form and setting the URL property to the link that you want. If you want to give the user some more control, we’ve created a demo application, in which you can navigate via a TEdit and have buttons to go forward and backward. This is easily done with the following code: AdvWebBrowser.Navigate(AURL); AdvWebBrowser.goBack; AdvWebBrowser.goForward; With the OnNavigationComplete event you can check if the webbrowser changed to the desired page. In this code sample we will add the URL to a listbox and check if we can go back or forward between the web pages. procedure TForm.AdvWebBrowserNavigateComplete(Sender: TObject; var Params: TAdvCustomWebBrowserNavigateCompleteParams); begin ListBox1.Items.Add(Params.URL); Back.Enabled := AdvWebBrowser1.CanGoBack; Forward.Enabled := AdvWebBrowser1.CanGoForward; end; Some other things that you can do is set your own HTML code. AdvWebBrowser1.LoadHTML(MyHTML); Go to the next level You can get much more out of your TAdvWebBrowser with the use of some simple methods. With the ExecuteJavascript method, you can run the JavaScript code that you want in your browser. For example you can set the inner HTML of an object, in this case a paragraph. AdvWebBrowser.ExecuteJavascript(‘document.getElementById(“myParagraph”).innerHTML = “‘ + s + ‘”;’); DOM access is currently not possible in the TAdvWebBrowser itself, but you can retrieve the HTML text of your page via this function as well. And you can make it readable by parsing the retrieved text to JSON. In this case it is done in an anonymous callback method. AdvWebBrowser.ExecuteJavascript(‘function GetHTML(){return document.documentElement.innerHTML;} GetHTML();’, procedure(const AValue: string) begin memo.Lines.Text:= TJSONObject.ParseJSONValue(AValue).Value;; end ); With the use of this JavaScript method, you can get almost everything out of this control. TAdvWebBrowser also supports bridging between the client and the […]

Read More

TMS WEB Core for VSC 1.1 beta

We are getting closer to the next milestone of our TMS WEB Core for Visual Studio Code project. So, this is an ideal moment for letting TMS ALL-ACCESS users have access to the TMS WEB Core for Visual Studio Code v1.1 beta that we released today. New features v1.1 beta Support for creating PWA’s (Progressive Web Applications, i.e. installable and offline usable apps for iOS and Android mobile devices). Support for Electron cross platform desktop apps (Windows, macOS, Linux) In sync with the TMS WEB Core framework latest release v1.5.5.2 Lots of further polishing on IDE integration in Visual Studio Code. Roadmap Q4 2020/Q1 2021 The next big milestone after the v1.1 release will be v1.2 where the highlight will be installable extra components. At this moment, components not installed in the IDE can be used at runtime of course, but the focus of v1.2 will be to offer the capability to install the components on the tool palette and make the components usable on the form designer in the IDE. This huge work is already well underway. The entire TMS FNC components portfolio (TMS FNC UI Pack, TMS FNC Maps, TMS FNC Dashboard, TMS FNC Cloud, TMS FNC Blox) is in on development versions in our R&D team already working from the Visual Studio Code IDE as well. After the IDE infrastructure in the IDE is finished & polished, this will be the v1.2 release. Also for v1.2 we have project templates coming. Summary Now is the time to discover what TMS WEB Core for Visual Studio Code can do for you, Object Pascal and RAD component based software developer reaching out to create rich web client applications or create applications with a modern front-end based on web technology. Large number of included visual and non-visual components: With these components, a RAD approach allows you to build solutions fast. Visual data-binding: A data-binding mechanism similar to Delphi VCL data-binding enables to hook-up your client application via client datasets to data sent from a REST API based backend quickly. Use existing or custom HTML web templates: The Visual Studio Code IDE has built-in strong support for editing HTML/CSS and a vast array of extensions. This adds even more power to it. The visual designer shows the pages ”as is” using the templates. Integrate any existing JavaScript library: The underlying pas2js compiler for transpiling Object Pascal code to JavaScript code running in the browser facilitates programmatic access to any existing JavaScript library. This opens up the huge availability of all kinds of easily available web functionality to integrate. Debug using Object Pascal code: All modern debugging capabilities like breakpoints, watches, stepping in code, … can be done in the Object Pascal code base from the Visual Studio Code IDE. Project compatibility with Delphi. Create projects in Delphi and open & work further on these in Visual Studio Code and vice versa. Get in the front seat today This new beta is available for registered TMS ALL-ACCESS users. So our VIP users can already test the new features! Take a head start now and get TMS WEB Core for Visual Studio Code at our launch price starting from 295EUR for a single developer license or download and explore this new ground-breaking product using the trial version!

Read More