Dueuno Elements #5 — You look good today!

DISCLAIMER: WE DON’T CARE WHAT IT IS. WE CARE HOW IT LOOKS LIKE. BECAUSE WE ARE DECEIVABLE HUMAN BEINGS.

Companies invest in Brand Identity. They also invest in Employer Branding, which basically means selling your brand to your employees. This is not just a single activity, but you can bet your client is going to ask you to have their logo on the application their employees use daily.

The brand is a Logo

Every company has a logo. For the sake of this tutorial we are asking Google to give us one.

ATTENTION PLEASE: It must be a .png image so we can have transparency. We don’t accept any other format (again, I know, life is not fair and we are always in a hurry).

We also need a background for the login screen. Let’s ask Google this one too.

ATTENTION PLEASE: It must be a .jpg image

Create the folder ~/demo/src/main/resources/deploy/public/brand then copy and rename the files we just downloaded. The logo file can be duplicated and used for the other .png files.

/demo/src/main/resources/deploy/public/brand
 - login-logo.png
 - login-background.jpg
 - logo.png
 - favicon.png
 - appicon.png

From now on, each time we deploy the application for the first time, those files will be extracted and added into the following folder: ~/demo/demo/tenants/DEFAULT/public/brand

To see the results of our effort we need to remove the default branding already installed under the ~/demo/demo folder.

Delete the ~/demo/demo folder

Execute the application ./gradlew bootRun

We should see something like that. It looks cool but… we need to fix the colors.

The brand is a Color

Dueuno Elements applications can be configured from the Tenant Properties (System Administration -> Settings). That means each tenant can have a different setup.

Click on “System Administration -> Settings” on the Main Menu (on the left)

Search for “color”

Each Dueuno Elements application can be configured with three different colors:

• PRIMARY
  The color used for primary actions. Primary actions are main buttons, buttons that “create” stuff or buttons that we want the user to see as different from the others because they do something relevant in the context they are displayed.
• SECONDARY
  It’s the color used for all the other buttons, those buttons that do normal stuff.
• TERTIARY
  It’s the color used for the Content and the Form Fields.

Each color has three values:

1. BACKGROUND_COLOR
   The color used for the background of the element.
2. BACKGROUND_COLOR_ALPHA
   The index of transparency. This is used to shade the primary color when its flat version is not appropriate.
3. TEXT_COLOR
   The color used for texts.

Set the PRIMARY_BACKGROUND_COLOR to #018B84

Set the PRIMARY_BACKGROUND_COLOR_ALPHA to 0.25

Logout and login again

We don’t want to manually set the colors every time we install the applications. We can use the onInstall method to set the Tenant Properties like the follow.

We are also adding some copy under the login form with a link to our website to let the users know who we are.

Edit ~/demo/grails-app/init/BootStrap.groovy adding the following lines:

class BootStrap {

    ApplicationService applicationService
    TenantPropertyService tenantPropertyService

    ...

    def init = { servletContext ->

        applicationService.onInstall { String tenantId ->
            tenantPropertyService.setString('PRIMARY_BACKGROUND_COLOR', '#018B84')
            tenantPropertyService.setNumber('PRIMARY_BACKGROUND_COLOR_ALPHA', 0.25)
            tenantPropertyService.setString('LOGIN_COPY', '2024 &copy; <a href="https://my-company.com" target="_blank">My Company</a><br/>Made in Italy')
        }

    ...

}

The brand is Everywhere

We want everybody, not just the end users, be aware of the brand! That’s why we want to add a banner to our logs.

This way, every time the application is restarted, we will see an ASCII Art representation of our company name.

You can spend hours creating the perfect ASCII Art. I am lazy and will use a ASCII Text generator I found here: https://patorjk.com/software/taag

Create ~/demo/src/resources/banner.txt and copy the generated text leaving a blank line on the top

 __  __          ____
|  \/  |_   _   / ___|___  _ __ ___  _ __   __ _ _ __  _   _
| |\/| | | | | | |   / _ \| '_ ` _ \| '_ \ / _` | '_ \| | | |
| |  | | |_| | | |__| (_) | | | | | | |_) | (_| | | | | |_| |
|_|  |_|\__, |  \____\___/|_| |_| |_| .__/ \__,_|_| |_|\__, |
        |___/                       |_|                |___/

Execute ./gradlew bootRun

18:47:30.769 INFO  [restartedMain] o.s.boot.SpringApplication               : 
  __  __          ____
 |  \/  |_   _   / ___|___  _ __ ___  _ __   __ _ _ __  _   _
 | |\/| | | | | | |   / _ \| '_ ` _ \| '_ \ / _` | '_ \| | | |
 | |  | | |_| | | |__| (_) | | | | | | |_) | (_| | | | | |_| |
 |_|  |_|\__, |  \____\___/|_| |_| |_| .__/ \__,_|_| |_|\__, |
         |___/                       |_|                |___/


Configuring Spring Security Core ...
... finished configuring Spring Security Core

18:47:36.979 INFO  [restartedMain] d.elements.core.ApplicationService       : Available languages [en, it]
18:47:36.982 INFO  [restartedMain] d.elements.core.ApplicationService       : 
18:47:36.982 INFO  [restartedMain] d.elements.core.ApplicationService       : --------------------------------------------------------------------------------
18:47:36.982 INFO  [restartedMain] d.elements.core.ApplicationService       : APPLICATION: STARTING UP...
18:47:36.982 INFO  [restartedMain] d.elements.core.ApplicationService       : --------------------------------------------------------------------------------
18:47:36.987 INFO  [restartedMain] d.elements.core.ApplicationService       : Executing 'dueuno.elements.core.beforeInit'...
18:47:37.029 INFO  [restartedMain] d.elements.core.ApplicationService       : Executing 'com.example.init'...
18:47:37.030 INFO  [restartedMain] d.elements.core.ApplicationService       : Executing 'dueuno.elements.core.afterInit'...
18:47:37.042 INFO  [restartedMain] d.elements.core.ApplicationService       : --------------------------------------------------------------------------------
18:47:37.042 INFO  [restartedMain] d.elements.core.ApplicationService       : APPLICATION: STARTED.
18:47:37.042 INFO  [restartedMain] d.elements.core.ApplicationService       : --------------------------------------------------------------------------------
18:47:37.042 INFO  [restartedMain] d.elements.core.ApplicationService       : 
Grails application running at http://localhost:8080 in environment: development

Conclusions

We made our client happy. That means we are happy too. Do we need anything more?

In the next article we are going to see what happens when we use a Dueuno Elements application from a Desktop Computer, from a Tablet and from a Mobile Phone.

👉 Read the next article!

👍 Subscribe