Customer use case: bringing an FMX app to the web with TMS WEB Core
After years of marketing a Delphi Windows/macOS version of my Star Analyzer program, I found that many clients wanted a web-based program which would run on any device, especially a tablet. They also wanted their data stored in the cloud so that several people could use the program at the same time. The macOS version produced by Delphi was often plagued with macOS incompatibilities, and neither version would run on a tablet. So I decided to take the leap to the web. Another deciding factor was the library of 85 Object Pascal code files that I developed over the years for use with all my programs. I definitely did not want to rewrite my library from scratch. I am rather fond of it. My Star Analyzer program included another 100 Object Pascal code files which all use my library files. So far I have not needed to write a single line of JavaScript or HTML code, and about 80% my existing Delphi code works nicely with the WEB Core components. Some of 20% of new code I had to write was relatively straight forward, and some was a bit tricky. I’ll talk about the tricky parts a bit later in in this Blog. Converting my existing FMX forms to TMS WEB Core As we all know, the components on the forms talk to your code through their event handlers. Theoretically then all I would have to do is create new forms, drop FNC and WEB Core components on the new forms, and use hook them up to most of my existing code. Not too much work, or so I thought, but it turns out it was not quite that simple. If you look at Star Analyzer for the web you’ll see that it is built around tab controls. Click Data Entry and Data Analysis button and you’ll find there are 15 tab controls on the main form and 18 tab controls on the tabs on the main form. The original program was built around one large and complicated main form that held all the components for all 33 tabs, but the program worked nicely, and was easy to code and trouble shoot. In converting my program to WEB Core, I first duplicated this tab structure using the TTMSFNCPageControl. The new layout looked just like the old layout, and was easy to work with in programming, but it would not compile. It turns out that you can’t compile a program with thousands of components and 33 tabs on one main form. It chokes the compiler. Using Hosted Forms to reduce the complexity of browser pages The solution was to use a TTMSFNCTabSet (which has no pages, just tabs) and to use a hosted form as shown in the TMSDemosWebBasicsFormhosting demo provide by TMS. The text and number of tabs on the main TabSet are changed in code, and the controls that used to be on the tabs are now on a Hosted Form. In the image below the area outside the red box is the main form, while the area inside the red box shows one of the 23 different Hosted Forms. The advantage of Hosted Forms is that each web browser page has a small number of components and on it. This Case statement below shows how the hosted forms […]
