Responsive design is a hot topic in web development. For those not familiar with the term "Responsive design", this means that the layout of the GUI can adapt to the form factor of the screen where the GUI is used. As it became common that web pages are visited from desktop computers, smartphones, tables, smart TV's, ... the need to develop web apps in such way that the best possible user experience is offered on each of these screen form factors led to the techniques labeled "Responsive design". The most adopted strategy for web applications is to use media queries that control CSS characteristics to change with screen width. Clearly, this requires careful and often time consuming setup of the media queries and CSS. 

Not only web applications need to run nicely on an ever growing range of screen form factors. This is also applicable to Delphi Firemonkey cross-platform applications that can be deployed on desktop computers, smartphones and tablets. It might be even desirable to have a different form layout if an application is running on a mobile device in portrait or in landscape. And it does not stop there. Also classic Delphi VCL Windows applications can benefit from responsive design, optimizing the UX when the app is running in a small window versus full-screen for example.

While there are meanwhile in Delphi several approaches and helper components like TFlowLayout, TGridLayout, TScaledLayout etc.. that can already help considerably, it remains a tedious job to setup everything right for different screen form factors. We can of course also always resort to programmatically change the GUI layout depending on the screen sizes retrieved but also that is a tedious & time-consuming job.

Also in our component offerings, we have over the years created UI controls with responsive design characteristics, like the TTMSFNCResponsiveList for example or the TWebResponsiveGrid & TWebResponsiveGridPanel in TMS WEB Core. 

We have been researching techniques to bring RAD-style visual and productive techniques to Delphi for a long time all with the goal to make the job less tedious & less time-consuming. Today, we want to reveal for the first time in public what has been brewing in our labs for months. It is the experience to develop several form layouts on top of the same GUI logic directly from the Delphi IDE form-designer. And with designing different form layouts, we mean the full freedom to exactly define the entire UI for as many screen form factors you want to accommodate your app to. This freedom means also that it is not only UI control sizes and positions that can be controlled, but literally every aspect of the control, like having a caption or not, the number of columns in a grid etc... can be controlled.

A non-visual component TTMSFNCResponsiveManager  dropped on the form will manage each state of the form in the designer as well as at run-time. Add a state that is tied to a certain form width & height to the TTMSFNCResponsiveManager  and start defining the layout of your form. Then add another state to it for a different form width & height and change the layout to make it best fit on this new state and go on for as many states as you want. When you run the app, you do not need to do anything. The TTMSFNCResponsiveManager  will dynamically alter your form layout according to the state your form's width & height fits to. 

Delphi developers familiar with FNC will have realized right-away that given this is FNC-technology, the TTMSFNCResponsiveManager  can be used in VCL Windows applications, FireMonkey cross-platform applications as well as TMS WEB Core web client applications.  So, wherever you want to introduce a visual and no-code solution to optimize your form layouts for form factor, you can use the TTMSFNCResponsiveManager . Note that TTMSFNCResponsiveManager  works with any UI control on your forms! Whether these are standard VCL or FMX controls, TMS UI controls or UI controls from other 3rd party component developers, TTMSFNCResponsiveManager  is smart enough to handle these.

TTMSFNCResponsiveManager  has been conceived to not only allow different GUIs in relationship to different form sizes. Different states can also be selected based on different constraints. Imagine a form layout that needs to be different for users working with your application with admin privileges versus 'normal' users, also this can be visually designed as two different states and depending on the user level, the correct state, and thus correct form layout can be chosen. Or one state could be for the GUI in the English language and another state of the GUI in the German language etc...