In Part 1 of this series, we explored a simple demonstration of a web application running with Delphi code inside a WebBroker application, and using HTMX as a kind of middle-man.
In this article we are going to further improve the demo, by making it look modern and up-to-date with just a few changes. If you haven’t read the prior article, I highly recommend you to do so, because you will need the knowledge and code of Part 1.
Table of Contents
Improvements
This is how our demo looked like. Perhaps a bit bland, right? For demonstrational purposes this was okay, but we want to take this to the next level. Since we are now fully on the web, we are not limited in any way when it comes to styles. By having our Delphi logic inside a web server, our logic and the web page itself are entirely separated, which makes the styling even easier.
In order to make this application more visually appealing, we could use some simple CSS. But, if you are from the Delphi world, it is understandable if you are not particularly familiar with CSS. This is why we are going to use PicoCSS, which is a minimal CSS framework and uses a fully semantic approach, which means there is no additional knowledge of HTML or CSS required.
Step 1: HTML
First we will add a few tweaks to the HTML code in the index.html file. The logic will remain the same, that’s why we are going to keep the GET and POST requests in the HTMX code.
Let’s start with the label on top and the “Click me” button below. We are going to wrap the label and the button in a container, and since HTML and Delphi perfectly support Unicode characters, we can use emoticons (just for the fun of it). Our code looks like this:
[crayon-673f3aebc8dac462479571/]As you can see, nearly nothing has changed compared to the prior code snippet, but this will significantly improve the design.
Let’s continue with the other controls below, which was a form with an edit control and an edit button within it. Again, we will wrap our code in a few containers and use emoticons, and we will do all this inside the container from above.
[crayon-673f3aebc8db5987550659/]Now there are more changes. Without going into too much detail about the HTML, we added a horizontal line below the “Click me” button and wrapped our entire form in an <article> container. Then we added another small header label and wrapped our edit control and “Edit” button in another container. As you may have noticed the “Edit” button is not a button anymore, but another <input> tag. This was done again for styling purposes, since PicoCSS will acknowledge the input of the type “submit” as a button right next to the edit control.
Step 2: Adding PicoCSS
Adding PicoCSS to our project is a very simple task. All we have to do is to add it as a stylesheet to our HTML file and we are ready to go.
[crayon-673f3aebc8db7891244426/]Now compile and run the web server and you should see a major improvement in design. It should look like this:
You should see that it might look visually appealing but editing the edit control after clicking “Edit” is not working properly. This is because we haven’t updated the HTML constants in our Delphi code yet.
Step 3: Cleaning up the Delphi code
Until now, we had our entire HTML code in the index.html file and had two extra constants including HTML code in the GET and POST request. For larger projects, it might be handy to put all of the HTML code as multi-line string constants in a single unit, which includes nothing more than those constants.
The most significant upside of this is to decrease the mix between the Delphi and HTML code, also because HTML can be long at times and will make your Delphi code untidy if you just use it in constants in your procedures. This way it will also be much easier for your web designers to work together with the Delphi developers. Another reason why this approach might be better is that you can abolish the index.html file, so that you can have your entire web application in a single binary file, without additional resources.So, let’s create a unit HTMLTemplates.pas and put the entire index.html contents and the two constants in this file:
[crayon-673f3aebc8db8366259476/]As you can see in the cSubmit and cEdit constants, we slightly changed their values according to our new code from Step 1. Compile and run the server, and everything should be working properly now, with a beautiful design.
Conclusion
What we have learned from these additions to the demo is that a small amount of effort is enough to create a visually appealing user interface, while also keeping the division of Delphi and the web. This again shows us how powerful this approach can be when it’s used in the right situations. It will be especially useful when it is applied to existing web and Delphi applications, because it is that easy to have Delphi logic in a web application, with relatively small amounts of effort and a good division of Delphi and HTML, which enables companies to have their Delphi and web design teams to work in parallel.
If you’re as excited about this approach as we are, stay tuned for more blog posts!
Article written by Elias Kassebaum.