0

Serialize/Deserialize a form

asked 2021-07-27 19:03:57 +0800

pavelEW gravatar image pavelEW
55 4

Hello,

I have a form with drag and drop feature, so users can customize it. Something like this:

<div sclass="col-lg-12 col-md-12 col-sm-12" droppable="true" onDrop="@command('move', self = self, dragged = event.dragged)">
    <div sclass="col-lg-4 col-md-4 col-sm-4" draggable="true" droppable="true" onDrop="@command('move', self = self, dragged = event.dragged)">
        <apply template="textbox" .../>
    </div>
    <div sclass="col-lg-4 col-md-4 col-sm-4" draggable="true" droppable="true" onDrop="@command('move', self = self, dragged = event.dragged)">
        <apply template="combobox" .../>
    </div>
    <div sclass="col-lg-4 col-md-4 col-sm-4" draggable="true" droppable="true" onDrop="@command('move', self = self, dragged = event.dragged)">
        <apply template="textbox" .../>
    </div>
</div>
<div sclass="col-lg-12 col-md-12 col-sm-12" droppable="true" onDrop="@command('move', self = self, dragged = event.dragged)">
    <div sclass="col-lg-4 col-md-4 col-sm-4" draggable="true" droppable="true" onDrop="@command('move', self = self, dragged = event.dragged)">
        <apply template="textbox" .../>
    </div>
    <div sclass="col-lg-4 col-md-4 col-sm-4" draggable="true" droppable="true" onDrop="@command('move', self = self, dragged = event.dragged)">
        <apply template="combobox" .../>
    </div>
    <div sclass="col-lg-4 col-md-4 col-sm-4" draggable="true" droppable="true" onDrop="@command('move', self = self, dragged = event.dragged)">
       <apply template="textbox" .../>
    </div>
</div>

Is there any option to serialize it when user clicks 'save' and deserialize the saved version when user opens it once again? Serialized form will be stored in DB.

Thanks in advance!

delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted
1

answered 2021-07-28 11:47:33 +0800

cor3000 gravatar image cor3000
6280 2 7

updated 2021-07-28 11:49:01 +0800

There is no such option (necessary) to serialize the components directly (technically they are serializable it just doesn't make sense to serialize the components with all their properties into a DB).

Instead you could leverage the MVVM pattern and render/update the UI based on the raw data you want to persist - then it's just a standard case of serializing data.

E.g. you can create your own objects to represent Rows and Columns

class MyColumn {
  String templateName;
  MyRow row;
  ...
}
class MyRow {
  ListModelList<MyColumn> columns;
  ...
}
ListModelList<MyRow> myrows;

Then you can render the templates dynamically based on your model objects:

<forEach items="@init(vm.rows)" var="row">
    <div sclass="col-lg-12 col-md-12 col-sm-12" 
         droppable="true"
         onDrop="@command('move', row =r ow, dragged = event.dragged)">  ​
        ​<forEach items="@init(row.columns) var="column">
            ​<div sclass="col-lg-4 col-md-4 col-sm-4" 
                 draggable="true" droppable="true" 
                 onDrop="@command('move', column = column, dragged = event.dragged.attributes.column)">
                <custom-attribute column="${column}"/>
                ​<apply template="@init(column.templateName)" .../>
            ​</div>
        </forEach>
    ​</div>
​</forEach>

Your move command will then only operate on your data object, and doesn't have to handle components:

@Command
public void move(@BindingParam(row) MyRow row, 
                 @BindingParam(column) MyColumn column, 
                 @BindingParam(dragged) MyColumn dragged,) {

    //dropped onto row
    if(row != null) {
        //move column from old row into new row
        dragged.getRow().getColumns().remove(dragged);
        row.getColumns().add(dragged);
    }
    if(column != null) {
        //move column from into a specific position inside a row
        dragged.getRow().getColumns().remove(dragged);
        List<Columns> columns = column.getRow().getColumns()
        columns.add(columns.indexof(column), dragged);
    }
}

Since the MyRows and MyColumns objects are inside a ListModelList, the UI will update automatically (forEach will listen to listmodel changes)

In the end you now have a simple data structure MyRow/MyColumn you can persist and restore easily, the UI will just follow the data.

The code was not tested so (just written out of my head), in case of problems please provide a runnable example on https://zkfiddle.org so I can suggest changes directly.

link publish delete flag offensive edit

Comments

Thank you! This is exactly what I was looking for. I had another option to do it with jQuery, but I'd really prefer this solution.

pavelEW ( 2021-07-28 16:40:21 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2021-07-27 19:03:57 +0800

Seen: 5 times

Last updated: Jul 28 '21

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More