DEV Community: Matti Vesa

Twelve months of UI hacks

Matti Vesa — Wed, 22 Jul 2020 15:33:00 +0000

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.

Matti Vesa

@mjvesa

Some time ago a quick integration of sketch mode into #vaadin designer was done. At least one could create the basic element tree rather quickly. Would it be useful?

12:41 PM - 29 Aug 2019

2 0

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.

Matti Vesa

@mjvesa

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/Az23rdNdJQc

09:45 AM - 30 Aug 2019

0 5

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.

Matti Vesa

@mjvesa

Next up for Unide: running locally using Electron. This will eventually enable one to use Unide to create #Java views for existing #Vaadin projects. Check the video to see that the PoC phase is done and working.

05:26 AM - 17 Sep 2019

1 2

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.

Matti Vesa

@mjvesa

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 #Flexbox

04:25 AM - 16 Oct 2019

3 19

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.

Matti Vesa

@mjvesa

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

1 6

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.

Matti Vesa

@mjvesa

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

2 8

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.

Matti Vesa

@mjvesa

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 #WebComponents

21:10 PM - 19 Dec 2019

42 101

Unide in VSCode

After making Unide run in Electron, it was not too complicated to do the same with VSCode.

Matti Vesa

@mjvesa

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… #WebComponents

16:02 PM - 06 Jan 2020

5 15

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.

Matti Vesa

@mjvesa

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

2 8

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.

Matti Vesa

@mjvesa

Wouldn't it make sense if the usual margin-border-padding-size box model thing could be used to modify those properties? Here's a quick evening hack prototyping just that. #CSS

17:43 PM - 12 Feb 2020

0 5

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.

Matti Vesa

@mjvesa

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

0 1

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.

Matti Vesa

@mjvesa

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

3 9

And back

An advanced version of the above allows modifying the Java code and importing it back into the design in real time.

Matti Vesa

@mjvesa

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

0 1

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.

Matti Vesa

@mjvesa

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/uhNceNAjshA

07:25 AM - 06 May 2020

4 9

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.

Matti Vesa

@mjvesa

I take that back. It is completely possible to edit LitElement templates in a visual designer with this one weird trick ;) youtu.be/U_xoqRs1kds

09:43 AM - 22 May 2020

0 2

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.

Matti Vesa

@mjvesa

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

0 4

Upcoming things

In the future I will be working more on Unide. Future features will include CRUD generation from Java beans.

Matti Vesa

@mjvesa

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

0 4

And Sketch Mode improvements, like a better preview while sketching

Matti Vesa

@mjvesa

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

0 2

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!

Unide and start.vaadin.com

Matti Vesa — Sat, 04 Jul 2020 21:00:36 +0000

The service at start.vaadin.com (SVC) is an excellent way to start working on a project. You can add different views, choose what type they are, modify the overall theme and finally download a zipped project you can start hacking away with.

While there is a java+html choice for editing with Vaadin Designer, some developers would probably like to start adding new views written in traditional server side Java and also enjoy the simplicity that a visual design application brings.

With Unide that is possible using version 0.5.0 onwards. It will not be possible to edit the views that are produced by the service, but new views can be added all the same. And they will be in good'ol plain Java

How to do it

Projects from SVC use App Layout to provide the UI structure and navigation. We need to provide the class that is the main layout using App Layout. That can be done in settings in Unide. Click on the settings buttons and check the "Use App Layout" checkbox. Then type in the fully qualified name of the MainView class in your exported project to the adjacent text field. For example, with default settings that would be com.example.application.views.main.MainView. At the same time you can set the package where Unide will write the exported views and related aux classes. com.example.application.views.unide could be one choice, if we assume the default package structure. Here the above settings are applied in the settings page:

Finally save your changes by clicking save. The next step is to add a new view to the project. Saving the view exports it and we can proceed adding it to the application. Find the MainView.java file in your IDE of choice and in it navigate to the getAvailableTabs method. Observe how tabs have been added, assuming any views were included when downloading a project from SVC. Add the view just exported in a similar manner. In the image below TestDesign is added to the available views.

Naturally the class needs to be imported into MainView to make it available. Once these two steps have been completed the project can be run. The added view should be available in the list of views.

Some things are missing

While adding views is possible, there are limitations. For example, currently the theme from the project is not applied in Unide. That might be the subject of a future article or something that needs to be fixed in Unide. I am also very interested in any other missing features or limitations that come to mind. Creating an issue in the Unide repository here is a good way to get the issue fixed.

Thanks for reading, see you in the next one!

Unide 0.3.1 Released

Matti Vesa — Mon, 06 Jan 2020 15:58:51 +0000

Two of the most interesting features for 0.3.1 are exporter for the new Vaadin TypeScript target and a releasing as VSCode extension.

0.3.0 was quickly followed by 0.3.1 due to a small error I didn't notice before releasing.

Note that this is a pre-alpha release and is only for the brave and patient to try out.

How to get started

Unide can be used online, or one can export a project and use Unide to edit it locally. Navigate to Unide and export a project from there. Vaadin Java is currently best supported and is the default target. Unzip the exported project somewhere. From here you have two choices: either install Unide in VSCode trough the marketplace, or install unide with npm install -g unide. Unide can the be invoked in a terminal at the root of your exported project.

Vaadin TypeScript

The new Vaadin TypeScript target is an upcoming feature in Vaadin that allows writing views purely at the frontend. 0.3.1 contains support for it in the form of an exporter. Better support for local editing will come later.

Visual Studio Code

VSCode has progressed into a useful platform for writing Java applications. Unide can be installed into VSCode as an extension and views can be produced in pure Java on the server side. As with the Electron version, saving a view will export the view as Java.

For each such Java file there is an auxilliary file that has access to the design and can be used to attach listeners and other logic to the design. The Aux file will not be overwritten when the design is saved.

Other improvements and fixes

Brute has been integrated into Sketch Mode. Brute is a tiny library that finds the corresponding flexbox CSS properties when given a configuration of absolutely positioned rectangles. That means a div can be used where vaadin-vertical-layout and vaadin-horizontal-laout were previously necessary.

DnD has had some issues with the drop marker being stuck when the DnD operation did not end in a drop. For example, if the drop happens outside the paper area that contains the edited view, the red marker is stuck and no DnD in the area it covers is possible. That has been fixed in this version.

Nested components did not work properly. The insertion of the tree has been fixed and a nested Shadow DOM is created for them so that styles should work properly as well.

What's coming in 0.4.0

The aim of 0.4.0 is to improve the usability of Unide for visual design during development. To facilitate that, I will start working on an example project for the Java target at first, continuing to cover other targets over time.

Also, each minor version from now on will provide improvements for some particular target. For 0.4.0 there are multiple: Java, Vaadin TypeScript, LitElement and Vanilla JS. After that I will pick frameworks in descending order by popularity in the State of JS 2019 survey. That means 0.5.0 will most likely contain proper support for React: exporting React projects and working on existing projects locally as is possible with the Java target now.