UI Builder

Windows

In Anacleto each window is represented by a json object, this object contains all the info needed to render the entire window.

Below is an example

{
  "id": "home",
  "windowName": "Home",
  "component": "GridContainer",
  "components": [
    {
      "id": "home_sample_form",
      "component": "Form",
      "isCard": true,
      "toggleable": false,
      "title": "Welcome form",
      "containerClassName": "col-12 md:col-6",
      "className": "mt-0 md:mt-4",
      "components": [
        {
          "component": "Label",
          "className": "col-12 font-bold text-3xl",
          "id": "title",
          "label": "ANACLETO_SAMPLE"
        },
        {
          "component": "Label",
          "className": "col-12 mt-3",
          "id": "subtitle",
          "label": "Thank you for installing Anacleto Builder! 🦉"
        },
        {
          "component": "Label",
          "className": "col-12 mt-3",
          "id": "subtitle-2",
          "label": "This is an example window created using Anacleto, use the Builder to customize it and start building your application."
        },
        {
          "component": "Button",
          "containerClassName": "col-auto mt-5",
          "className": "col-12 md:col-6",
          "id": "btnBuilder",
          "label": "Go to Builder 👷‍♂️",
          "events": {
            "onClick": {
              "body": "window.open('/admin', '_blank').focus();"
            }
          }
        },
        {
          "component": "Label",
          "className": "col-12 mt-5",
          "id": "subtitle-3",
          "label": "If you have any questions check out the Docs or contact us on GitHub. 🧐"
        },
        {
          "component": "Button",
          "containerClassName": "col-12 md:col-6 mt-5",
          "className": "col-12",
          "id": "btnDocs",
          "label": "Docs 📖",
          "events": {
            "onClick": {
              "body": "window.open('https://github.com/anacletobuilder/anacleto.wiki.git', '_blank').focus();"
            }
          }
        },
        {
          "component": "Button",
          "containerClassName": "col-12 md:col-6 mt-5",
          "className": "col-12",
          "id": "btnGit",
          "label": "GitHub 🗂",
          "events": {
            "onClick": {
              "body": "window.open('https://github.com/anacletobuilder/anacleto', '_blank').focus();"
            }
          }
        }
      ]
    },
    {
      "id": "home_sample_grid",
      "component": "DataTable",
      "store": "sample_store",
      "emptyMessage": "No owls",
      "isCard": true,
      "toggleable": false,
      "title": "Owls",
      "containerClassName": "col-12 md:col-6",
      "className": "mt-0 md:mt-4",
      "sortable": true,
      "stripedRows": true,
      "skeletonRow": 5,
      "paginator": true,
      "paginationType": "client",
      "globalFilterMode": "client",
      "globalFilterFields": ["name", "scientificName", "type"],
      "columns": [
        {
          "field": "name",
          "header": "Name",
          "sortable": true
        },
        {
          "field": "scientificName",
          "header": "Scientific Name",
          "sortable": true
        },
        {
          "field": "type",
          "header": "Owl type",
          "sortable": true,
          "pugTemplate": "return `div.flex.flex-row\n\tspan.flex-shrink-0.p-tag.surface-300\n\t\tspan.text-600.flex-shrink-0 ${data['type']}`;"
        },
        {
          "field": "dangerOfExtinction",
          "header": "Danger of extinction",
          "sortable": true,
          "pugTemplate": "let emoj = '😊';\nif(data['dangerOfExtinction']===1){emoj='😨'}\nif(data['dangerOfExtinction']===2){emoj='😱'}\nreturn `span ${emoj}`"
        }
      ],
      "events": {
        "onSelectionChange": {
          "parameters": "event",
          "body": "if(event.value){ alert(`${event.value.name} is so cute!`) } ;"
        },
        "afterRender": {
          "body": "this.load();"
        }
      }
    }
  ]
}

It is essential for each component to specify the id attribute, this will allow us to interact with the control via Javascript.

For example, suppose we want to change the label of the title input field inside the home_sample_form panel, what we need to do is:

this.panelsContext.home_sample_form.setRecord({})

The id of an component is NOT the id of the html tag

Avoid DOM manipulation with Javascript

NEVER use js functions such as: document.getElementById or document. querySelector to modify a window.

Anacleto was developed in React and to use its full potential we must forget the existence of these methods, in React every graphic control is linked to states and to modify it you have to act on these states.

Layout

When creating a window you can choose between 2 types of layouts, using the layout property

• grid

• flex

If no property is specified, the default grid will be used.

Grid layout

"layout" : "grid"

When using the grid layout Anacleto is completely autonomous in arranging the panels within a window, the only thing you need to do is give the panels a weight from 1 to 12.

If a weight is not specified by default the value is 12.

The weight of a panel must be specified through the className property using the appropriate classes col-1, col-2 ... col-12.

If you decide to use col without specifying a weight, the columns will be evenly distributed.

If you want to give a column a specific dimension use col-fixed and specify the desired dimension in the style.

You can define a different weight for different screens, to do this use the prefixes:

• sm

• md

• lg

• xl

Imagine the screen divided into 12 columns, in the code below the panel width will default to 12 (the full screen width). On medium sized screens the panel will occupy 8 columns (2/3 of the screen), while on large (or very large) large screens the panel will occupy 6 columns of 12 (ie half the screen).

"className" : "col-12 md:col-8 lg:col-6"

You can use classNames to add the other panel class, for example col-offset-1..col-offset-12 classes allow you to define the left margin, useful if you want to add spaces or center a panel.

You can combine multiple grid layouts to create more complex layouts, an example is below.

{
    "window": "home",
    "layout":"grid",
    "components": [

        {
            "id": "panel_0",
            "component": "Gridcontainer",
            "classNames" : "col-8",
            "title": "Col 8",
            "isCard": true,
            "components": [
                {
                    "id": "panel_1",
                    "component": "Form",
                    "classNames" : "col-6",
                    "title": "Col 6",
                    "isCard": true,
                    "components": [
                        {
                            "id": "button1",
                            "type": "Button",
                            "classNames" : "col-12",
                            "label": "Button 1"
                        }
                    ]
                },
                {
                    "id": "panel_2",
                    "type": "form",
                    "classNames" : "col-6",
                    "title": "Col 6",
                    "isCard": true,
                    "components": [
                        {
                            "id": "button1",
                            "component": "Button",
                            "classNames" : "col-12",
                            "label": "Button 1"
                        }
                    ]
                },
                {
                    "id": "panel_3",
                    "component": "Form",
                    "classNames" : "col-12",
                    "title": "Col 12",
                    "isCard": true,
                    "components": [
                        {
                            "id": "button1",
                            "type": "button",
                            "classNames" : "col-12"
                            "label": "Button 1"
                        }
                    ]
                }
            ]
        },
        {
            "id": "panel-4",
            "component": "Form",
            "title": "Col-4",
            "classNames" : "col-4",
            "isCard": true,
            "components": [
                {
                    "id": "button1",
                    "type": "button",
                    "classNames" : "col-12",
                    "label": "Button 1"
                }
            ]
        }
    ]
}

neted grid

Flex system

"layout" : "flex"

Flex, flex and more flex...if you don't know what we're talking use Google 😊 below some tutorial:

• Docs

• Video

• Video 2

If you want to be free to draw a window as you like, set the window attribute layout=flex, from now on you will be free to position the panels as you wish using the classNames property

When you use the flex layout, Anacleto di provides some classes that can help you.

• flex-row set flex-direction: row;

• flex-row-reverse set flex-direction: row-reverse;

• flex-column set flex-direction: column;

• flex-column-reverse set flex-direction: column-reverse;

• flex-wrap set flex-wrap: wrap;

• flex-wrap-reverse set flex-wrap: wrap-reverse;

• flex-nowrap set flex-wrap: nowrap;

• flex-auto set flex: 1 1 auto;

• flex-1 set flex: 1 1 0% !important; useful when you want to give weight 1 to a panel (if you put 3 panels with flex 1 all 3 will be the same width)

• flex-2 set flex: 2 2 0% !important; useful when you want to give weight 2 to a panel (it will always be twice as wide as a panel with flex 1)

• flex-grow-0 set flex-grow: 0;

• flex-grow-1 set flex-grow: 1

• flex-shrink-0 set flex-shrink: 0;

• flex-shrink-1 set flex-shrink: 1;

All these classes support sm, md, lg, xl use them to create proper responsive applications

Gap

In the responsive DO NOT use margins and padding, use the gap

• gap-0 set gap: 0;

• gap-1 set gap: 0.25rem;

• gap-2 set gap: 0.5rem;

• gap-3 set gap: 1rem;

• gap-4 set gap: 1.5rem;

• gap-5 set gap: 2rem;

• gap-6 set gap: 3rem;

• gap-7 set gap: 4rem;

• gap-8 set gap: 5rem;

• row-gap-0 set row-gap: 0;

• row-gap-1 set row-gap: 0.25rem;

• row-gap-2 set row-gap: 0.5rem;

• row-gap-3 set row-gap: 1rem;

• row-gap-4 set row-gap: 1.5rem;

• row-gap-5 set row-gap: 2rem;

• row-gap-6 set row-gap: 3rem;

• row-gap-7 set row-gap: 4rem;

• row-gap-8 set row-gap: 5rem;

• column-gap-0 set column-gap: 0;

• column-gap-1 set column-gap: 0.25rem;

• column-gap-2 set column-gap: 0.5rem;

• column-gap-3 set column-gap: 1rem;

• column-gap-4 set column-gap: 1.5rem;

• column-gap-5 set column-gap: 2rem;

• column-gap-6 set column-gap: 3rem;

• column-gap-7 set column-gap: 4rem;

• column-gap-8 set column-gap: 5rem;

Prime flex

Anacleto is based on PrimeFlex, at this link you can find many other useful classes PrimeFlex

Style

For each panel (or control) you can use the style property to define in-line styles. Use it with caution, in general it's always better to define a class!

Es:

style: {
    "gap": "1rem"
}

Translations

Anacleto allows you to translate your application and will use the browser language to show the correct translation.

Docs

Components

In an Anacleto window you can insert different types of component

Components