Delphi with HTML/CSS interface

Question

I want to develop a delphi application with an HTML/CSS graphical user interface, not necessarily running from within a web browser. I want to do this do create a richer graphical user interface with animations etc. and break away from normal VCL components / Windows look. Any suggestions?

Solution 1

In one of my applications I have an an embedded browser and I have implemented the IDocHostUIHandler interface. This allows me to expose a COM object via the "GetExternal" method. I simply have a COM object that exposes methods and properties of my application which makes them available to the web pages hosted inside the embedded browser.

So the script in my web pages has lines like "external.DoSomething()" and "i=external.GetThisValue()". So, for example, behind button onclick events you can run a method of your application (implement in the main form, in the COM object itself, or whatever you like).

This site has lots of info on embedding a browser in your Delphi app: http://www.delphidabbler.com/articles?article=22

It can certainly be cumbersome to implement a lot of this stuff and in many cases there are probably better options. But for my specific purpose I am able to offer a "home page" which can easily be modified to change its layout, look and even expose more (or less) functionality as required by myself or my users.

Solution 2

HTML and CSS won't deliver animations or a Rich User Interface to your feet. Far from it in fact. Quite the opposite. You will need to invest in a toolkit to provide that sort of functionality and almost certainly involve JavaScript. And even if you don't want your eventual application hosted in a web browser, your application will itself have to host a web browser to render your HTML/CSS/JavaScript UI, and you will then have a much more difficult job of connecting your GUI to your application logic (unless you do actually embrace a web application architecture).

Delphi (or any Windows application development language for that matter) gets you much, much further down the road towards a more simply, effectively and quickly implemented Rich User Interface than HTML or CSS.

If you don't like the look and feel of the standard Delphi controls (which in essence is what you are saying) there are numerous alternative libraries available.

Also bear in mind however that when someone uses a Windows application they expect it to look and behave a certain way to a large extent. Using fancy, web based paradigm's in a desktop application simply for the sake of it is likely to confuse and frustrate users if taken too far.

I'm all for user interfaces breaking with convention where it leads to a more intuitive user interface, but simply being "prettier" does not necessarily lead in that direction and is just as misguided as dogmatically adhering to convention.

Solution 3

If you want a Delphi program with a better-looking interface, HTML is really not what you're looking for. What you really need are better-looking VCL controls.

Take a look at TMS Smooth Controls, for example. If you're on Delphi 2009 or 2010, you can get it as a free download here. That's one of many component libraries that can bring a slicker user interface to your program.

Solution 4

HTML / CSS offers some nice features which are (not yet?) available in Delphi and the VCL. They are also a good starting point for client/server programming, separating the user interface and the business logic is a key factor here.

One popular library for Delphi is the extpascal project:

ExtPascal is an Object Pascal (Delphi, FreePascal/Lazarus) wrapper/binding for Ext JS, a complete GUI Ajax framework, made in JavaScript, for Rich Internet Application (RIA) development. ExtPascal lets you use Ext JS from Object Pascal commands issued by the server. It brings the structure and strict syntax of the Object Pascal for programming the web browser. ExtPascal will wrap Draw2d into future releases.

Some demos are online here and here.

p.s. and I really like the HTML / CSS support for element and font sizes in relative units (for exampe percent). Combined with browser zoom in / zoom out and WCAG, user interface ergonomy can not be much better.

Solution 5

HTML Option 1

If you relly want to use HTML+CSS(+JavaScript) to build a GUI, you can have a look at HTML Applications, a very fascinating concept from Microsoft. HTML Applications, .hta files, have been supported from Windows ME, if I remember correctly, and they are still supported on Windows 7.

You could create an HTML Application (i.e. an HTA file), and by so doing, creating a GUI using only HTML, CSS, and JavaScript. When the user double-clicks the HTA file, it will open like a program, but the GUI is entirely based on HTML; in fact, the entire Window is an Internet Explorer window in disguise.

And now comes the important part: you could create non-GUI Delphi applications (i.e., Delphi applications that are not console applications, but that have no forms either), and start them via hyperlinks (or JavaScript) from within your HTA GUI. (Well, it is probably better to create one such Delphi application, and use command-line arguments (ParamStrs) to communicate the desired action.)

Just an idea...

HTML Option 2

Alternatively, you could create a normal Delphi GUI application, but fill the entire main form with a TWebBrowser (a IE control), using Align := alClient. Then you could either load static HTML pages (stored in the Program Files folder or on the Internet), or you could use Delphi to dynamically create HTML pages to show. I think it is possible to intercept links from the control, so that you could respond to links using Delphi code.

What about OpenGL?

If you want to "break away" from the normal Windows look and feel, then I would recommend you to create your GUI using OpenGL. It is very easy to make a Delphi application with OpenGL (as long as you are familiar with OpenGL) - just add "OpenGL" to your uses list.

View more solutions