Dueuno Elements #6 – It’s showtime!

DISCLAIMER: SOMETIMES WE JUST HAVE TO RELAX AND ENJOY THE RESULTS WE OBTAINED. LIKE DRINKING BEER, IT IS A SKILL.

Today we are going to see what the User Experience of a Dueuno Elements application looks like on different devices.

Getting ready

Before we go ahead, let’s complicate a little bit the person form so we can see how it changes with different resolutions.

We first add some optional fields to the domain object.

Edit ~/demo/grails-app/domain/com/example/TPerson.groovy

package com.example

import grails.gorm.MultiTenant
import org.grails.datastore.gorm.GormEntity
import java.time.LocalDate
import java.time.LocalDateTime

class TPerson implements GormEntity, MultiTenant<TPerson> {
    LocalDateTime dateCreated

    String firstname
    String lastname
    LocalDate birthdate

    String address
    String city
    String postCode
    String state
    String country

    static constraints = {
        address nullable: true
        city nullable: true
        postCode nullable: true
        state nullable: true
        country nullable: true
    }
}

We then update the table view to display the new columns.

Edit the method index() in ~/demo/grails-app/controllers/com/example/PersonController.groovy

def index() {
    def c = createContent(ContentList)
    c.table.with {
        filters.with {
            fold = false
            addField(
                    class: DateField,
                    id: 'birthdate',
                    cols: 3,
            )
            addField(
                    class: TextField,
                    id: 'find',
                    cols: 9,
            )
        }
        sortable = [
                lastname: 'asc',
        ]
        columns = [
                'firstname',
                'lastname',
                'birthdate',
                'address',
                'city',
                'postCode',
                'state',
                'country',
        ]
    }

    c.table.body = personService.list(c.table.filterParams, c.table.fetchParams)
    c.table.paginate = personService.count(c.table.filterParams)

    display content: c
}

To layout the fields in a Dueuno Elements Form we use the cols parameter. It represents the number of columns the field will occupy in a line. Since Dueuno Elements uses Bootstrap under the hood, we use its Grid System to decide how to layout fields in a form.

In short, we have 12 invisible columns for each row. Each field can occupy one single column or any number of columns up to 12. It’s up to us to decide what layout best fits our needs.

Edit the method buildForm() in ~/demo/grails-app/controllers/com/example/PersonController.groovy to add the new fields to the form

private buildForm(TPerson obj = null) {
    def c = obj
            ? createContent(ContentEdit)
            : createContent(ContentCreate)

    c.form.with {
        validate = TPerson
        addField(
                class: TextField,
                id: 'firstname',
                cols: 6,
        )
        addField(
                class: TextField,
                id: 'lastname',
                cols: 6,
        )
        addField(
                class: DateField,
                id: 'birthdate',
                cols: 6,
        )
        addField(
                class: Separator,
                id: 's1',
                icon: 'fa-earth-americas',
                cols: 12,
        )
        addField(
                class: TextField,
                id: 'address',
                cols: 12,
        )
        addField(
                class: TextField,
                id: 'city',
                cols: 6,
        )
        addField(
                class: TextField,
                id: 'postCode',
                cols: 6,
        )
        addField(
                class: TextField,
                id: 'state',
                cols: 6,
        )
        addField(
                class: TextField,
                id: 'country',
                cols: 6,
        )
    }

    if (obj) {
        c.form.values = obj
    }

    return c
}

Finally, since we have confgiured the application to work with an H2 database on a file, we can just delete the application demo folder and let the application reinstall from scratch and recreate the database.

Delete the ~/demo/demo folder

Execute the application ./gradlew bootRun

It’s showtime!

We are now ready to watch some home made videos. I know you like home made videos…

12" Laptop

14" Touchscreen Laptop

Apple iPad

Apple iPhone

Meta Quest 2

Conclusions

As we have seen, Dueuno Elements applications work out of the box on different devices.

They are not optimized for any one of them, but hey, they work without you having to worry about it.

To answer the question you have in your mind right now: yes, we can optimize them but that requires building specific components. It will cost more, of course.

In the next article we are going to create a One-To-Many relationship on our database and see how we can manage it on the screen.

👉 Read the next article!

👍 Subscribe