DEV Community

Matti Vesa
Matti Vesa

Posted on • Updated on

Unide and start.vaadin.com

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:

Settings page with proper package and app layout class values

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.

TestDesign added the list of tabs

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!

Top comments (0)