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 integration into Vaadin Designer
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
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
Unide in Electron
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.
Flex box with Brute force
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.
Do you have trouble creating flexbox layouts? I did, but then I met Brute. Brute makes layouts for me, maybe Brute can make them for you too? Try at mjvesa.github.io/brute/ and see some source at github.com/mjvesa/brute #CSS #JavaScript #Flexbox04:25 AM - 16 Oct 2019
Brute and Sketch Mode
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
Exporting Vaadin projects from Figma designs
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
Drawing UIs on napkins
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
Unide in VSCode
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
Standalone Vaadin Designer
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
Simple element size editing
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.
Graphics programming and visual editing
A bit more esoteric stuff: a Lisp-like language that is compiled into JavaScript. Using some ideas from Sketch Mode it is possible to write Lisp using B-expressions (B for Box) in a more visual manner. Also, just like the Designer Components above, each B-expression can contain more complicated editors such as the height map painter shown in the video below.
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
Exporting Java from Vaadin Designer
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
And back
An advanced version of the above allows modifying the Java code and importing it back into the design in real time.
Just dropping this here: a strange version of Vaadin Designer that produces plain java as you design, and that java code can also be edited and the changes are reflected back to the design. #Java #Vaadin youtube.com/watch?v=QVh7s0…04:12 AM - 20 Apr 2020
In place editing of a live Vaadin application
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
Full support for visual design of LitElement components?
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.
I take that back. It is completely possible to edit LitElement templates in a visual designer with this one weird trick ;) youtu.be/U_xoqRs1kds09:43 AM - 22 May 2020
A GUI builder in dev tools
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.
I'm working on embedding a GUI builder into Chrome dev tools. The grand idea is to eventually be able to visually edit a live #Vaadin application. youtube.com/watch?v=V6Hnq2…04:20 AM - 29 May 2020
Upcoming things
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
Working on some improvements for Sketch Mode in Unide. In the future it will be possible to see a live preview of the @Vaadin UI as it is being sketched. youtube.com/watch?v=OkR4Lr…09:56 AM - 21 Jul 2020
And others
These are only some of the things I've hacked together during the last year. Check my twitter at @mjvesa and youtube for all the things not mentioned here with more to come!
Top comments (0)