Creating a control similar to OneNote that works like your WISYWIG screen designer

Dear support,
in our application we want to include a control that should give the user the possiblility to enter data in a way similar to OneNote, i.e. in a less structured way.

The way we want to do this is by providing a control where the user can drag other controls onto it, like:

  • (Rich) Text Area where the user can enter text
  • Table (with predifined entries) that the user can use as a check list
  • Image are
  • File area
  • etc…

The way it should work is similar to your cuba studio WISYWIG editor: The user can drag & drop our controls from a panel to the main area.

As I have not made custom controls yet, I have some questions:

  1. As your documentation mentions, your WISYWIG editor is based on the Vaadin Drag&Drop layout. If we would do the same approach, do we have to integrate the Vaadin layout as a plugin first (as described in 5.8.7.1. Using a Third-party Vaadin Component) and then create our control as (described in 5.8.7.4. Creating a GWT component), using the plugin as a our layout?

  2. When using the approach from 5.8.7.4., is it possible to use components from the Vaadin standard libaray there, or can you only use the standard GWT components?

  3. Do you have a sample project that is similar to your WISIWYG editor? If not, would it be possible that create a sample for us as part of an incident?

Thank you
Bernd

Hi Bernd,

  1. Yes, we use Vaadin DragDropLayouts add-on from Vaadin Addon directory and you can add the necessary dependency from Studio. Then you will be able to create your composite component based on DDAbsoluteLayout from DragDropLayouts.
  2. You can use standard Vaadin components right now without integration. Just use approach from here: [url=https://doc.cuba-platform.com/manual-6.1/webComponentsHelper.html]https://doc.cuba-platform.com/manual-6.1/webComponentsHelper.html[/url] or here [url=https://doc.cuba-platform.com/manual-6.1/companions.html]https://doc.cuba-platform.com/manual-6.1/companions.html[/url]
  3. For now, we don't have a sample project with WYSIWYG editor since UI editor is strongly tied to Studio and extracting editor as component is a very difficult task.

Let me clarify your question:

  1. Do you want to create something like sticky notes panel with different types of content or a fluent text editor like JavaScript WYSIWYG editors: [url=https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors]https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors[/url]?
  2. Do you really need to write text everywhere as OneNote does or it can be widgets with resizing and drag-and-drop ?
  3. In what format do you want to store and process content of such an editor?

Thank you very much for your reply. Tomorrow we have a meeting where we discuss these issues and I will answer the three clarification questions.
Today I tried to integrate the DragDropLayouts and wanted to play around with the samples they provided. The integration of the plugin worked fine, but I have problems running the sample code. I tried to integrate the sample from here the same way that you integrated the stepper plugin.

My problem is that I can’t see the second (drop) panel. Also, the headlines of the panels are not shown. I added a sample project to clarify the issue. Thanks!

I could not upload the sample project. Here is my code.
Editor:


public class AuditEdit extends AbstractEditor<Audit> {

    @Inject
    private ComponentsFactory componentsFactory;
    @Inject
    private BoxLayout ratingBox;

    @Override
    public void init(Map<String, Object> params) {

        com.vaadin.ui.Layout box = (Layout) WebComponentsHelper.unwrap(ratingBox);

        HorizontalLayout layout = new HorizontalLayout();
        layout.setSizeFull();
        layout.setMargin(true);
        layout.setSpacing(true);

        DDPanel panel1 = new DDPanel("Source");
        panel1.setWidth("200px");
        panel1.setHeight("200px");
        panel1.setDragMode(LayoutDragMode.CLONE);
        panel1.setDropHandler(new DefaultPanelDropHandler());
        layout.addComponent(panel1);
        Button content = new Button("Drag me!");
        content.setSizeFull();
        panel1.setContent(content);
        DDPanel panel2 = new DDPanel("Destination");
        panel2.setWidth("200px");
        panel2.setHeight("200px");
        panel2.setDragMode(LayoutDragMode.CLONE);
        panel2.setDropHandler(new DefaultPanelDropHandler());

        layout.addComponent(panel2);

        box.addComponent(layout);
     }
}

XML:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        caption="msg://editCaption"
        class="com.company.dragdroplayouts.web.audit.AuditEdit"
        datasource="auditDs"
        focusComponent="fieldGroup"
        messagesPack="com.company.dragdroplayouts.web.audit">
    <dsContext>
        <datasource id="auditDs"
                    class="com.company.dragdroplayouts.entity.Audit"
                    view="_local"/>
    </dsContext>
    <layout expand="windowActions"
            spacing="true">
        <fieldGroup id="fieldGroup"
                    datasource="auditDs">
            <column width="200px">
                <field id="name"/>
                <field id="rating" custom="true"/>
            </column>
        </fieldGroup>
        <hbox id="ratingBox" spacing="true" width="100%" height="500px">
            <label value="Rating" align="MIDDLE_LEFT"/>
        </hbox>
        <frame id="windowActions"
               screen="editWindowActions"/>
    </layout>
</window>

I also tried this example where I could see all controls, but I could not drag&drop:


    @Override
    public void init(Map<String, Object> params) {

        com.vaadin.ui.Layout box = (Layout) WebComponentsHelper.unwrap(ratingBox);

        final DDAbsoluteLayout layout = new DDAbsoluteLayout();
        layout.setId("layout");
        layout.setSizeFull();

        // Enable dragging components
        layout.setDragMode(LayoutDragMode.CLONE);

        // Enable dropping components
        layout.setDropHandler(new DefaultAbsoluteLayoutDropHandler());
        // Add some components
        Label lbl = new Label("This is an Absolute layout, you can freely drag the components around");
        layout.addComponent(lbl);
        Button btn = new Button("Button 1", new Button.ClickListener() {
            public void buttonClick(Button.ClickEvent event) {
                Notification.show("Click!");
            }
        });
        btn.setId("button");
        layout.addComponent(btn, "left:50px; top:50px");
        Link link = new Link("A link to Vaadin", new ExternalResource("http://www.vaadin.com"));
        layout.addComponent(link, "left:200px; top:100px");

        box.addComponent(layout);
   }

Hi Benrd,

It seems that there is an issue in Studio and it does not include widgetset reference DragDropLayoutsWidgetSet to AppWidgetSet.gwt.xml (in web-toolkit module).
You can add it to your AppWidgetSet.gwt.xml manually:


<inherits name="fi.jasoft.dragdroplayouts.DragDropLayoutsWidgetSet"></inherits>

I’ve checked your samples and it works, so you can try it in my sample project I’ve attached.

We will fix issue with component widgetset in the next Studio release.

dd-sample.zip (18.1K)

Hi Yuriy,

I thought I did enter the widget name in the corresponding field in the studio when creating a new UI component. But maybe I forgot it. Anyhow, it was not in the AppWidgetSet.gwt.xml and after entering it it works fine. Thank you!

Regarding your questions:
Do you want to create something like sticky notes panel with different types of content or a fluent text editor like JavaScript WYSIWYG editors: https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors?
We want something like a sticky notes panel, but (probably) limited to adding controls vertically.
So basically a Vertical Layout where you can drag controls in, one of the controls being a Text editor (to enter notes), other controls being a place to drop files, or a grid with predefined entries where the user can select check boxes (check list).

Do you really need to write text everywhere as OneNote does or it can be widgets with resizing and drag-and-drop ?
No, not everywhere. Only in the widgets that the user dropped to the main panel. Regarding resizing this is currently in discussion, but the first easy implementation would be that the widgets that are dropped are automatically sized to max horizontal size and can be resized by the user vertically in order to provide more space.

In what format do you want to store and process content of such an editor?
I imagine the user contet of the different widgets being encapsulated by classes that derive from our main widget class, lets say MyWidget.
This base class stores the layout information (position or maybe just horizontal index, size) of the widget. The classes that derive store the content, e.g. text or a file.

The business class that displays the OneNote-Like base layout widget would have a one-to-many relationship with the MyWidget class, so the MyWidget class would contain the foreign key of the business class.

Hi Bernd,
Glad to hear that the sample worked.
How do you want to proceed with this further? Will you continue the development yourself, or do you envisage any further help from us on this component?