UI related questions

Hello guys,

first of all let me tell you how great product you’ve built. I love how simple yet clean the produced code is. However during assessing the features and risks for one of my upcoming projects I came across several questions:

  1. I want to create quite complex UI component that will look like a user x day matrix where each user will have several slots available for each day. The whole component will display slots for all users and one work week. Think of it as a assignment of tasks for days for whole team. I want to drag & drop those task from table of existing tasks. Before I will buy license for the Studio, I want to build that component to see what the obstacles might be. Could you point me how to do it. I’ve never found documentation on drag & drop nor have I found complex components with complex data structures.

  2. I know that Cuba Platform supports deep linking. Is there a simple way how to allow users to open links from menu (or basically anywhere) in a new browser tab? If I want to disable tabs in Cuba and want to handle tabs in my browsers, it’s very painful. It doesn’t support middle click for opening in a new window which goes against some people’s workflow.

  3. While testing the platform on mobile devices I found out that there are graphical glitches on iPad while scrolling through tables and displaying filters. It’s in your demos and it doesn’t look alright. Maybe something you should look into.

  4. Are you planning to move towards more responsive design in one of the upcoming releases? If so, when?

Thank you for your answers

Hi Radek,

Thank you for your encouraging words and good questions.

  1. The first question forced me to publish an example project created by my colleague some time ago: https://github.com/cuba-platform/sample-drag-drop (available also in Studio samples). The project illustrates how to employ drag-n-drop capabilities of Vaadin components in CUBA web client. You can also look at the following advanced examples: http://apps-johndevs.rhcloud.com/dragdroplayouts. They are based on the DragDropLayouts Vaadin add-on which is integrated into the platform so you can use it in your web module right away.

  2. As for opening links, you can use Frame.showWebPage() method available in any screen controller, or the showWebPage() method of WindowManager. To open a link directly from the main menu, register a Runnable class in your screens.xml and refer to it from the main menu. In the run() method, obtain a reference to WindowManager as follows:

                .showWebPage(appUrl + "/open?screen=sec$User.browse", ParamsMap.of("target", "_blank"));
  1. We have improved support for tablets in the last platform version (6.2), but you are right - there are still some issues. We are going to revisit the problem later this year.

  2. Yes, we are working on it in two different directions:

  • First, in the standard UI (based on Vaadin), you will be able to define multiple layouts for one screen, and the platform will select one at runtime depending on the current display parameters. This is not truly responsive design because it will not re-render the screen upon the change of orientation, but it will be easy for developers because everything can be done in Generic UI and no CSS programming is required. This feature is planned for release 6.3 in September.
  • Second, we have started working on a different JavaScript-based web client, which will be responsive and mobile-friendly from the start. It will require JavaScript and CSS programming, but we will try to implement advanced scaffolding and provide a framework to simplify development and make the entry barrier as low as possible. Unfortunately, I cannot give you any timeframe for this feature at the moment.