WEB

TMS Web Core and More with Andrew: Miletus Desktop Intro

Motivation If we’ve got an excellent web application development tool, why do we need desktop applications at all?  It’s a good question.  And the answer, quite often, is that we don’t.  This is what has made the web such an important platform, after all.  And also what makes products like Chrome notebooks as popular as they are.  You can accomplish quite a lot using just web applications, and for many people, it is now possible to get by exclusively with web applications alone.  Products like TMS WEB Core are making this easier all the time by being able to develop substantially better applications with access to more data and more systems than ever before.  And without question, web technologies have come quite a long way in a relatively short period of time.  However, there are still many situations that come up where the browser sandbox is too restrictive to accomplish certain tasks. And I’m sure we’re all well aware that the browser sandbox and its rules are in place for very good reasons.  So while web technologies will continue to evolve, there are some places it just isn’t going to be going anytime soon, and that’s where desktop apps come in.  Here are a few examples where a desktop application solution might win out over a web application solution. An application needs access to directly read and write to a local filesystem. Application data is not permitted to leave a location (IE, saving to ‘the cloud’ poses unacceptable security risks). An application needs access to hardware that does not have an equivalent (or performant enough) web interface. Access to the application needs to be more strictly controlled. Application changes need to be more strictly controlled (i.e., SOX, ISO9000-type stuff). Users work in an environment where web browsers aren’t well-supported. Users work in an environment where desktops are strictly locked down in terms of application access. An application needs access to OS-level functionality that a browser does not have access to. Desire to standardize the application interface (avoiding non-standard browser ‘chrome’ or plugins that might interfere). Granted, there are many kinds of complexity at work here, and no doubt there are just as many ways to address certain problems.  For example, a web application could be served up within a local network that has no external access at all, ensuring that data doesn’t leave that location.  And there’s even an evolving web standard for accessing serial ports.  Crazy, really.  But in any event, there may be solid reasons for having a desktop version of a web application (or even a mobile version beyond what can be accomplished with a PWA-compliant application).  Whatever the rationale, Miletus is here to help address it. Getting Started For our example application, we’re just going to carry on with the Leaflet example that we covered a couple of days ago, an almost minimalist interactive mapping web application.  It has been updated slightly to fix a few minor internal errors, to be more ‘responsive’ and resize to fit its container, and also to have a slightly improved geofence data entry interface, where you can cancel the entry, see the points as a polyline while you’re entering them, change the color of the geofence created, as well as delete geofences.  To get this all working, we start by creating a new TMS […]

Read More

Extend TMS WEB Core with JS Libraries with Andrew: Leaflet

There are so many useful JS libraries yet to explore that it can be a challenge to pick what to cover next.  But this time out, we’re going to have a look at a JS library suggested by blog reader Eddy Poullet, way back in April when this blog series first started.  The request?  Leaflet, which bills itself as ‘a JavaScript library for interactive maps.’  And who doesn’t like interactive maps? Easily one of the more useful applications to be found on any mobile device. And while there are a number of other ways to get interactive maps into your TMS WEB Core applications, this is a good example where it is nice to have a few choices available.  Motivation. Google Maps and Apple Maps tend to get most of the attention, as one of these is likely to be the default when it comes to using maps on any mobile device.  And these tend to be very well integrated into their respective devices, naturally, as they’re also responsible for their respective operating systems as well.  No surprise there.  Desktop apps, and websites specifically, tend to be more commonly configured to use Google Maps or perhaps MapQuest or less commonly other providers, and far less frequently Apple Maps.  Perhaps that will change over time as developers integrate Apple Maps into their websites.  Perhaps we’ll cover that another time. But that’s historically been one of the troubles of interactive maps – jumping through hoops to get at the data.  Whether it is an API key or a developer account or some kind of license or an unhelpful rate limit.   Leaflet offers a bit of a different approach in that there’s nothing to do to get started in terms of API keys or developer account registration.  Just load up a JS library and be immediately productive. Getting Started. As has become custom, we’ll start with a new TMS WEB Core project, using the Bootstrap template, to begin with.  And then add in the necessary links to the Leaflet JavaScript and CSS files. In the project, add a TWebHTMLDiv to the form and set its Name and ElementID to ‘divMap’ just so we can reference it.  To immediately see it in action, it just needs to be initialized.  This can be done directly from within WebFormCreate like this, taken directly from the excellent documentation in their Quick Start Guide. procedure TForm1.WebFormCreate(Sender: TObject); begin asm var map = L.map(‘divMap’).setView([51.505, -0.09], 13); var tiles = L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, { maxZoom: 19, attribution: ‘© OpenStreetMap’ }).addTo(map); end; end; Doesn’t get much simpler than that.  Using the new TWebCSSClass component in combination with Bootstrap, we can add in some rounded corners here and there and immediately get a pretty reasonable interactive map that supports zooming in/out and panning around.  Leaflet up and running The interface that is rendered uses pure HTML/CSS so it is possible to change the look of things like the zoom in/out controls or other elements. The content (the map itself) consists of a collection of image tiles.  Can’t do much with those directly in HTML/CSS.  But there are a lot of things that can be done with what is being generated inside the tiles.  And speaking of tiles, while everything so far is pretty quick and easy, there are some considerations that come with the set of tiles.  In […]

Read More

Announcing FlexCel 7.15 with experimental Lazarus support

And today we are delivering it. Experimental support (official support is coming once FPC gets anonymous methods in trunk), but usable and working fine. While the polls were 70% in favor of supporting Lazarus, we understand it is still a small number of people needing it. But we also know that those who need it, really need it. And also, if we third-parties don’t support Lazarus, less people is going to use it, giving less incentive to make third party components, and the cycle continues. So we are going for it, and we will try to keep it working as long as supporting it isn’t an unreasonable effort. At the moment, we think it is completely feasible to keep Lazarus support along with the Delphi support. To get started, get FlexCel for Lazarus from our website, and read the Lazarus guide.

Read More

Extend TMS WEB Core with JS Libraries with Andrew: Image Sliders

With our Tabulator miniseries out of the way, we’re back to check out other interesting and useful JavaScript libraries that we can use in our TMS WEB Core projects. This time out, we’re going to have a look at image sliders, sometimes referred to as image carousels.  There’s a TWebImageSlider included directly in TMS WEB Core that’s ready to go, based on the very capable Swiper.  But we’ll also have a look at the popular Bootstrap Carousel, the venerable Slick Carousel, and the ultra-modern Glide.  Each has its own default look, but they can all be customized in various ways.  Some have dependencies to be mindful of.  But they’re all well-tested and reliable, and any of them would make a solid addition to your project. Motivation. Whether you need some kind of image slider in your project is usually self-evident. But sliders don’t have to be used just for image content. A slider could be used instead of a combo box, displaying a set of cards to select from, where the user can cycle through different options. Or as an alternative to traditional menus.  Or even to display notifications. Plenty of non-image possibilities. But no matter the type of content being displayed, a slider can have a big overall impact on a project.  So finding a slider with the right mix of presentation and interaction options is important. If your project is already using Bootstrap or jQuery, then perhaps Bootstrap Carousel or Slick Carousel would be a natural fit, respectively.  Or perhaps there’s a key feature in one of these sliders that with catch your attention and be important enough to your project to warrant including a dependency that wasn’t previously needed. As always, nothing but choices here, so let’s have a look. The Setup. For our examples, we’re going to use a set of 10 images of different sizes, just to make it easier to see what is going on. Generally, things work more smoothly and look considerably nicer when the images are all the same size, but that’s often not an option.  The intent though is to find a slider that can be added to our Actorious project to display sets of photos of People, Movies, or TV Shows. Which will typically be all the same size, conveniently.  All the sliders we’ll be looking at today have no problems displaying content of different sizes, even if we have to lean on them a little to get them to cooperate. The sample images are stored in an img folder in the example project, and a link to that can be found at the end of this post. All the sliders use URLs to reference the images, via tags, naturally, so not hard to include these. With the contents of the img folder added to our project, the images are automatically copied to either the Debug or Release folders as needed, and can just be referenced via an img/filename.png link or URL. TWebImageSlider and Swiper. The obvious first choice for a TMS WEB Core project is to use the readily available TWebImageSlider component.  Let’s add this component to a new project and set the size to be 900×300, just as a set size for our examples. Then, add the sample images via the ImageURLs property in the Delphi property inspector. Without doing anything else, we get the following slider, fully […]

Read More

New TMS WEB Core v2.0 browser API support

It’s not a secret that the browser API supports ever more machine hardware related features, making it slowly but surely a cross-platform operating system on its own.  As it is also always a goal of TMS WEB Core to make it Object Pascal developers ultra easy to take advantage of everything the browser offers, we added in TMS WEB Core v2.0 classes and a new component to take advantage of 2 new interesting browser APIs. The multi-screen API and the speech recognition API. Multi-screen API The multi-screen API allows the developer to detect from a web application, how many screens are connected to a device, retrieve the characteristics of the screens and control the placement of browser windows on these multiple screens connected to the machine.You can find the w3 spec for the multi-screen API here and a more informative article about its use https://web.dev/multi-screen-window-placement/. As we added Object Pascal classes to retrieve information from and manage these multi-screen configurations, we also created a demo that you can find in the TMS WEB Core demos folder under DemoBasicsMultiscreen and wrote a blog article about it. Now today, our chief evangelist Dr. Holger Flick also discusses it in his new video. Speech recognition API Create voice command driven web applications or write a dictaphone application that now automatically captures your spoken information as text, … it now all belongs to commonly available functionality when you use web technology. The browser speech recognition API is now available in Chrome, Edge and Safari. In TMS WEB Core v2.0, this is exposed as a non-visual component with events triggered returning spoken words as text or with a command collection the component can listen to and trigger events when the commands are spoken. In this video, Holger also explains the speech recognition API and the demo in more detail so you can get started using it in your applications easily.  Miletus Note that these new web technologies are also available when you create a Miletus based native cross platform application with TMS WEB Core. Miletus applications are web technology based applications that run as native cross platform applications for Windows, macOS and Linux and also have direct access to even more operating system resources such as the file system, local databases, operating system dialogs and more. Learn more about the amazing Miletus technology in this blog article with video.

Read More

Change the look & feel of your chart empowered application with a few clicks!

TMS FNC Chart had a lot of customization options in terms of appearance and overall look & feel, and with a lot of property settings the result was achievable yet time consuming. In v2.0 we went the extra mile and bundled all your highly appreciated feedback into a very exciting new feature: “Global Appearance”. “Global Appearance” is a feature that allows you to customize your component with only a few lines of code, or a few clicks at designtime. Changing the overall look & feel of the chart can now be done in a couple of seconds! Global appearance is a bundle of the following settings and customization options: Monochrome color scheme Excel color scheme Custom/Extendable color list Global font color, name & size Various descendant class types for nicer finetuning To find out more about “Global Appearance”, I invite you to look at this video below. Feedback is important! The above result is based on feedback, your feedback. Sending us suggestions for new features, shortcomings & ideas to improve our products overall are always appreciated. We analyze the feedback and see what is feasible and in which time frame. Then we go ahead and assign a team of experienced developers to the task, which always results in the best possible implementation. Have some ideas? don’t hesitate to contact us and/or leave a comment below.

Read More

TMS WEB Core and More with Andrew: PWA

Welcome to our new TMS Blog Series, TMS WEB Core and More with Andrew.  In this bi-weekly series, we’ll be looking at many aspects of developing TMS WEB Core projects, including packaging options with PWA, Miletus and Electron.  We’ll look at the support available for deploying projects on various platforms, including in particular Raspberry Pi.  And we’ll be looking at a few development environments where TMS WEB Core can be used, including Visual Studio Code. The other blog series, Extending TMS WEB Core with JS Libraries with Andrew, will return to its regular weekly cadence now that we’ve gotten through the Tabulator miniseries, continuing with taking a stroll through the Slick Carousel JS library next week. To start off this new series, we’re going to have a look at creating PWAs – Progressive Web Apps. We’ll have a look at what they are and what they aren’t.  We’ll create one using the existing TMS WEB Core project template.  And we’ll convert our ongoing Actorious project into a PWA.  We’ll also have a look at some challenges with PWAs, particularly deploying updates, and have a look at some other tools that can help us out along the way. So What’s a PWA? Briefly, PWAs are essentially just your typical modern website designed with HTML, CSS, and JavaScript, much like what we’re already creating with our TMS WEB Core projects. The thinking behind PWA, in part, is that apps should try to support as many devices as possible in order to reach the largest numbers of users.  And to degrade gracefully on devices that lack the latest standards, while offering the best experiences possible when device support is available.  Some of the same thinking behind responsive web design. In practical terms, there are a few reasons why having your app upgraded to function as a PWA may be of interest to you. Some App Stores allow PWAs directly, rather than native apps.  Notably, this isn’t necessarily the case for Apple’s App Store.  Some have made it through using various PWA app-builder-type tools, so it is conceivably possible, but not really their thing. And then there’s Microsoft, who might very well add your PWA app to their App Store without even telling you.  Strange times! PWA apps include functionality that makes it possible for them to work offline to some degree.  Whether this makes sense for your project naturally depends on the kinds of data your app is dealing with.  Storing reference information is a good use of this kind of function, and perhaps collecting data while not connected may also be feasible. Because PWA apps contain additional information about themselves, it is also often possible for the app to appear as a regular app in desktop environments, and as pseudo-apps in mobile devices, even without App Store support.  Some of this you can just do separately anyway, but as a PWA app this support becomes an integral part of the project. So what does it mean then, technically, for a website to qualify as a PWA app?  There are usually three basic qualifications listed.  In practice, though, you’ll want to use something like Google Chrome’s Lighthouse app (part of its built-in developer tools) to analyze your app.  It will let you know if you’ve come up short.  We’ll have a look at […]

Read More

More new TMS WEB Core v2.0 features

Today we focus on two more new framework features in the new TMS WEB Core v2.0 release. It concerns the support for the different material icons types and the new component for dealing with CSS classes at design-time, TWebCSSClass. Material icons types Google Material icons is a library consolidating over 2500 glyphs for use in web applications. For some time, Google material icons offers different types of its icons. These types are: baseline, outlined, two-tone, rounded and sharp. TMS WEB Core controls offering direct support to use such Material Icons with the property MaterialGlyph now also feature the MaterialGlyphType property for selecting one of these 5 types.  Manipulate CSS classes at design-time The TWebCSSClass is a non-visual component that gives design-time (but obviously also run-time) access to a wide range of CSS class properties. You can drop the component on the form, see all available CSS properties in the Object Inspector, change these, st the TWebCSSClass.CSSClassName property and then set this CSSClassName value to the control’s various Element*ClassName properties to have the CSS style applied to the control.  A video is better than thousand words Watch the new video our colleague Dr. Holger Flick to show you everything in detail how you can take advantage of these new TMS WEB Core v2.0 features!  And start exploring TMS WEB Core v2.0! Experience for yourself how fast you can start building your web client application front-end with TMS WEB Core and the typical Delphi RAD component based development. Download the free & fully-function trial version now. Hesitating about the back-end server that fits best with TMS WEB Core? Explore TMS XData, our flag-ship robust and high performance REST API server building library!

Read More

TMS BIZ Update: What’s new in XData, Aurelius and Sparkle

We’re happy to announce the release of new versions of TMS Aurelius (5.9), TMS XData (5.6) and TMS Sparkle (3.20) There are very interesting new features in those releases, and also some upcoming changes in the TMS Business product line, which will now be named “TMS BIZ”.  In case you are curious, you can check the new released features in the what’s new section of the product documentation: TMS XData 5.6 what’s new. TMS Aurelius 5.9 what’s new. TMS Sparkle 3.20 what’s new. We are then inviting you for the webinar TMS BIZ Update: What’s new in XData, Aurelius and Sparkle, to happen on July, 21st, 3:00 PM UTC Time. You will learn in details about the new features (in action) and the new TMS BIZ editions. REGISTER for the TMS BIZ Update: What’s new in XData, Aurelius and Sparkle webinar now!

Read More

Extend TMS WEB Core with JS Libraries with Andrew: Tabulator Part 1: Introduction

So far, we’ve covered some hugely important and popular JavaScript libraries, like jQuery, Bootstrap and FontAwesome.  We’ve also explored other very important but somewhat lesser-known JavaScript libraries, like Luxon and CodeMirror.  And also some considerably smaller and less widely used JavaScript libraries like Interact.js, BigText.js and Showdown.js. Today we’re going to introduce what has quickly become my favorite JavaScript library, Tabulator, which accurately describes itself as “Easy to use, simple to code, fully featured, interactive JavaScript tables.”  Over the next handful of posts we’ll go into far more detail about how to make the most of it in your TMS WEB Core projects. Why Tabulator? Tabulator is neither wildly popular (yet!) nor particularly obscure. And it has perhaps the misfortune of falling into a hugely popular category of JavaScript libraries – defined with terms like grids or tables. If you were to do a Google search for a new JavaScript grid control, you might run through 10 or 20 before Tabulator even comes up on the list. On the other hand, if you search for a JavaScript ‘data grid’ on GitHub, it might come up second or third. But as with any popular JavaScript library category, there are plenty of criteria you can use to filter out which ones might be the best candidates for your projects. When I’m looking for something, these are the kinds of things I typically consider. Price per user or per developer, licensing terms, and so on? Any development activity in the past year?  Does the developer respond to questions? Are there dependencies?  Like jQuery or other JavaScript environments like React or Angular. How good/complete is the documentation?  Is there plenty of example code available? Style vs. substance and needs vs. wants.  Does it just look pretty or is it actually useful? When the dust settles, you might well reach the same conclusion I have, and give Tabulator a try. But even if you find another control that is more suited to your needs, or perhaps you’re already quite happily using another control, there’s still a lot of interesting ground to cover (and some fun examples) when it comes to using any of these kinds of controls in a TMS WEB Core project.  Motivation. The need for a grid-like control in a modern web application is usually self-evident. Displaying data for the user to see in tabular form, along with maybe some options to filter or sort that data in ways that are easy and convenient, is either something you need in your project, or something you don’t. A better question for our purposes might be what the motivation is for a Delphi developer to use a new and potentially unfamiliar JS library.  Particularly when it comes to providing functionality that we might already have decades of experience with, using popular, reliable, capable, and easy-to-use Delphi VCL components of various flavors. Naturally, this need arises when moving to a different environment – the web – where our preferred set of controls may not be as readily available.  At the same time, this shift to the web also brings with it opportunities to change how these kinds of applications are developed, for better and for worse.    TDataSet vs. The Web. When we covered all those JSON examples (see Part 1 and Part 2), one of […]

Read More