Visual Form Design
Like all coding agents, CodeBot can edit your code, recompile your app, etc. If you want to see what changes it's making, you can see the diffs that it displays in the Chat view, which show added, deleted, and modified lines of code.
But what about something core to Delphi -- forms, and visually designing your UIs?
CodeBot has a feature that, at the time CodeBot was announced and still possibly today, was unique to coding AIs: it can also edit your forms, including frames and data modules, with visual changes displayed while the form designer is open.
That is:
-
With the form designer open, you will see changes appear live, as you do when code changes are made with the code editor open
-
In the chat view, where it displays textual diffs for code, CodeBot also displays a visual diff: the change to the UI in visual form.
This works for both VCL and FMX.
Editing in the Designer
CodeBot can make changes to your form, frame, or data module, including adding and removing controls, adding and removing non-visual components, setting properties, creating event handlers, and other changes you would normally expect.
Developers make these changes inside the form designer. If you have a form/frame/data module open and displayed in the form designer, such as if you have been making changes to it yourself, CodeBot's changes will also be present with the form designer remaining open.
Not only is this very Delphi-style at its core, but it allows collaborative work where working with CodeBot does not break your flow: you can see it work in the same way you work.
It is also about correctness. Delphi forms are not just source text; they are designer-managed objects, and some mistakes only show up when you run the app and use the form. CodeBot's form editing is designed around making valid designer changes, with the form designer open, and showing you the result visually as well as textually.
Visual Diff
CodeBot shows what edits it is making, and this includes visual form design:
This animates old to new. You can click the 'Before' or 'After' text to play the diff again. You can also grab the drag handle and move it to compare the before and after.
The visual diff only appears when CodeBot makes an actually visible change to your UI. Many changes to components, whether properties or event handlers, do not make a visible change in the designer. In that situation, you can always see the change in the DFM or FMX which is diffed as text, the same way code is.
Both VCL and FireMonkey are shown with visual diffs.
Where a change is 'onscreen but not visible', such as having a tabbed page control but the visual changes are not on the frontmost visible tab, CodeBot should still render the change.
Currently, the diff is shown for the greatest scope, not each individual change. If CodeBot makes changes to multiple pages in a page control, it will render the page control itself, not the contents of both pages. Let us know if you'd like this in future.
High DPI
CodeBot designs all VCL forms at 100% scaling. This is the most correct and safe way to design a VCL form. (FMX can be designed at any scale and CodeBot works with FMX forms at any scale.) This is because, other than known values like Width, Top, etc, in a custom control any property can be DPI-dependent (let's say the margin between an icon and text.) The only way to safely set properties is to do them at the only canonical scale, 100%.
When working in the form designer, this means CodeBot will set the form designer to 100% scaling.