Being a part of the Tools team at Vaadin I often get interesting ideas that I want to try out outside the usual stream of product development. Here are some that I've done between July 2019 and July 2020.
Sketch Mode is a tool for free-form drawing of UIs. In this hack I integrated it into Vaadin Designer. The video shows how a layout can be sketched rather quickly.
Designer Components is an idea based on Sketch Mode where there are UI components and also "action" components that produce code. Each component has a custom editor for it, which allows great flexibility beyond the usual tree-and-attributes approach. The example shows how a trivial REST application can be created using Designer Components.
Designer Components is a minimal visual designer that is user extensible. In the video you a small app is created that loads HN article headlines trough REST. No programming required. Try it yourself mjvesa.github.io/dc-editor Sources github.com/mjvesa/dc youtu.be/Az23rdNdJQc09:45 AM - 30 Aug 2019
Sketch Mode was eventually integrated into Unide, a side project GUI builder application I've made. I also made it run using Electron, as is demonstrated in the following video.
While considering the various configurations of flex box layouts, it dawned on me that one could draw some boxes in some configuration and then use plain old brute force to see what flex box settings would produce the closest result. The algorithm is trivial and slow, but fast enough and the results are reasonable.
By using Brute to perform the layout duties in Sketch Mode it became possible to produce decent flex box layouts just by drawing them.
Going forward towards the goal of drawing layouts and getting a fully working flexbox layout with #Vaadin components. With the help of Brute, even more complex layouts can be created. Needs more precision and having a live preview of the drawn components would be a cool addition.13:44 PM - 08 Nov 2019
The free form drawing capabilities of Sketch Mode can be used to implement exporters for other free form things. With the
addition of rectangles for layout and defining tags for each component, one could get working Vaadin applications out of Figma designs.
Turn you #Figma designs into #Vaadin layouts automatically with the Designs to Layouts plugin. Only a few components are supported right now, but a Vaadin 14 project in plain #Java can already be exported. Sources and info at github.com/mjvesa/dtl Pre-alpha quality warning ;)08:56 AM - 22 Nov 2019
Another application of Sketch Mode is synthesis of layouts from hand drawn pictures of UIs. Together with rectangle detection and some additional heuristics, it becomes possible to take a picture of the drawing using a phone and create a preview of the UI on that same phone.
What does it take to create your first @Vaadin UI? How about a phone, a pen and a piece of paper? Here's Napkin, an experiment in creation of Vaadin UIs from sketches. Try it out yourself mjvesa.github.io/napkin-app/ and see the source as usual github.com/mjvesa/napkin #WebComponents21:10 PM - 19 Dec 2019
After making Unide run in Electron, it was not too complicated to do the same with VSCode.
Released Unide 0.3.1, a free visual designer for #Vaadin and Vaadin Components, with support for Vaadin TypeScript views, VSCode extension and other fixes and improvements. More about the release here dev.to/mjvesa/unide-0… and Code at github.com/mjvesa/unide-s… #WebComponents16:02 PM - 06 Jan 2020
With the data model from Unide it became possible to make a version of Vaadin Designer that runs on the web independently. This resulted in an excellent vehicle for further experimentation.
Having access to the #Vaadin Designer source means I can do fun hacks like this one: Designer running on the web without any installation required. Only capable of editing a single design. No saving or loading, and no text nodes, but allows setting properties and attributes.10:50 AM - 21 Jan 2020
A short hack where the image used to show the size, border, padding and marging of an element could be used to edit those values by dragging with the mouse.
Lastly, there's a generalization of visual design by connecting pixels in the generated image to code via a trace buffer that records the position of the component instance that produced each pixel. Const expressions can be used to define editable points in the code which is a generalization of the concept of element properties.
Lately I've been moving away from visual editors for GUIs and using the experience from developing such things for making more demoscene oriented stuff. The result is a general visual editor thingy where the model is a Lisp-like esoteric language youtube.com/watch?v=VgMtsU…21:32 PM - 23 Mar 2020
One of the first things to come out of the previous standalone Vaadin Designer was the ability to generate Java from Designs using code from Unide.
Here's a quick evening hack: take some #HTML and turn it into #Vaadin #Java code. Also shows a preview of what you've been typing. Maybe one could convert designs from Vaadin Designer to Java with this ;) Try it yourself mjvesa.github.io/design2java/ youtube.com/watch?v=nS-_CU…19:47 PM - 16 Apr 2020
An advanced version of the above allows modifying the Java code and importing it back into the design in real time.
The coolest hack to date with the standalone Vaadin Designer: a version of Vaadin Designer running in Electron that can be used to modify a live Vaadin application. Any component in view can be switched into edit mode
and modified. Switching back into normal mode shows the modified design in the application as usual. This could eventually allow creating a navigable prototype of an application by running it, starting the designer application
and then adding views to it as the application is navigated.
Here's an experiment done using Vaadin Designer: in place editing of a running #Vaadin Application. See modifications work with real data after saving. The example uses Polymer and #WebComponents. #LitElement should also be possible. youtu.be/uhNceNAjshA07:25 AM - 06 May 2020
While I previously made some statements about the difficulty of writing a visual design application for LitElement vs P3 and other template based systems, a method came to mind that makes writing such editors only slightly more complex.
One potential future place where a GUI builder could be found is the Chrome dev tools. I wrote an initial prototype of the concept, and it seems promising.
In the future I will be working more on Unide. Future features will include CRUD generation from Java beans.
Here's something that's coming into Unide soon: the ability to take a Java bean and generate a CRUD view from it. Currently the @Vaadin UI is generated, but I'm planning to write some trivial in-memory backend code generation as well. In plain #Java ofc youtube.com/watch?v=GOmpn7…11:02 AM - 08 Jul 2020
And Sketch Mode improvements, like a better preview while sketching