I think you are doing your customers a great disservice by not learning about web development.
Win32 is bedrock, the web is quicksand. Look at "HTTPS everywhere" and "you don't need FTP any more", which did little in terms of actual security, but broke almost everything in some small way.
The web doesn't value legacy. It's a petulant 22 year old, that thinks it knows everything, and does stuff deliberately against the advice of those with more experience.
Is the web as stable as Win32? No, of course it's not. But a page with 150 inputs isn't anything that requires cutting-edge web technologies. It'll work just as well today as it'll work in 5 years.
Sticking a bunch of inputs in a HTML page is indeed not complex, but it has to look decent (labels and corresponding inputs line up vertically etc) and be functional (ie with sensible tab order etc).
To get a sense of what we've got in Delphi, here's a demo video[1] illustrating making a simple input box. This is a "entry level" demo, but it's representative (though we don't use the runtime customization).
I'd really appreciate input on something which could allow us similar decent looking UI with similar effort on the web.
Like, note how "Last Name" lines up with "Product ID" below, even though they're in different groups. Things like that.
How do you handle the transition at 2:04 where "Last Name" is moved from its own row to sharing a row with "First Name"? Keep in mind I might want to add a third element in that row afterwards.
IIRC with tables you'd have to modify the column spans of all the other rows which is way too much effort. How does it work with the CSS grid layout?
This is pretty simple with CSS grid -- literally takes a couple of seconds. I am a fan of Delphi, and used it myself in the late 90s, but I think you just might just give it more credit due to familiarity.
There are benefits to a web-app these days, due to the onerous requirements and demands of different operating systems and platforms.
Fair enough. I've tried searching for these things but it's very hard to find good resources. So far I've not found a way to do this with similar ease, but from this thread it seems it might be possible after all.
Some concrete examples or resources would be much appreciated.
> There are benefits to a web-app these days
Sure, I definitely see the positive sides of a web application, especially for our smaller customers.
Ok. I am not sure of your current front-end experience level, so I will give pointers as if you are not experienced with CSS grid, forgive me if this is incorrect.
The key CSS items in this case would be:
display: grid;
... which will allow for CSS grid layout, and then for the particular item you discussed, the following two CSS values would do the trick.
grid-template-areas .... for the layout container itself in a pseudo-visual way, and grid-area for the items to be laid out.
Here[1] is a simple example, but if you are a visual-type person would get the idea across.
[1]https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...
The demo at the top of the page is interactive and you can see how easy it is to move around items. Of course these items would already be styled themselves to maintain label positioning and alignment so simply moving the letters in the grid-template-areas value would be sufficient to completely change the layout.
This does not let you drag and drop as in your demo, but it is equally fast and gives instant visual feedback in the browser.
As a side note, I morn daily the continuing loss of desktop applications, which is where I cut my teeth in development. But the explosion of platforms and continued aggression from OS manufactures in the name of "safety" is basically forcing the hands of people to move to web apps. I agree that, in general, they are not as snappy or as light-weight as a well-designed desktop application (a "real" one, not an electron app), but if you know what you are doing you can get close and get all the benefits that do come with web apps.
And, from someone that has done both desktop and web app development, web apps can be laid out very quickly if you have experience. I almost can not think of a single-page (non-animated) application that I can't layout in a single day. This is especially true if you are using an existing UI framework or you have built-up one of your own over time. The time-consuming parts tend to be testing on multiple platforms/screen-sizes for compatibility (iOS being the worst) and the business logic.
Let me know if that is not the type of info you were looking for, and I will be happy to point you in a direction to get the info you are looking for.
Will definitely take another stab using this. I'm assuming the grids compose, so I can work on one group (say name-address set) and it'll be well behaved when added into a larger layout grid.
The WYSIWYG drag and drop is nice, but if the results are predictable enough a manual "edit-and-run" cycle should suffice.
> Of course these items would already be styled themselves to maintain label positioning and alignment
So I guess this is the only thing I'd still be struggling with. Concretely, consider a grid layout like this:
a b
c c
d e
I'll have to see if it's easier with the grid layout.
Yes. That will work as expected.
>Here the labels and inputs in a and d, as well as b and e, should automatically line up vertically, including if say b's label changes due to a dynamic event.
This is where not rolling your own UI elements are faster. They will have been tested and any serious problems would have been addressed. But, even if you do roll your own, you can expect to be able to line up labels and fields both vertically and horizontally, even if the labels dynamically change (although watch for line wrapping if that is a possibility).
But, generally, your idea would work. I typically use flexbox unless I have a reason to use grid. For example if the entire flow of a page design changes between desktop and mobile, I normally use grid or if I need things consistently centered both vertically and horizontally, I use grid.
For laying out form UI elements, there are tons of examples that you can easily find online to fit the look and feel you are looking for.
If you have not settled on a stack yet, Svelte and Solid will offer the snappiness you are used to with desktop apps (due to no duplicate/virtual DOM). The drawback being that plugin elements are more readily available for more popular frameworks like React, however imho the plugins for Svelte or Solid tend to be better written.