Grid layouts in Lianja 3.1

[barrymavin]

Building a responsive UI that can adjust to various form factors is quite straightforward in Lianja.

To further improve UI layouts "Grid" layouts have been added to Lianja Custom Containers in Lianja 3.1.

This new grid layout works in Desktop, Web and Mobile.

Bear in mind that containers can be nested and each container can have its own layout.

Here are a few screenshots of an example I have put together. It is written in JavaScript but the Lianja/VFP code is the same except for the ; at the end of the lines.

The code for the custom section.



The rendering of the layout in a Desktop App.



And finally the rendering in a Phone App.



As I progress with Lianja 4.0 there will be enhancements made to Form sections that allow then to be laid out more effectively with a grid coordinate scheme based on Grid Layouts -- all developed with NoCode -- accomplished by customizing the attributes.

[phabio]

Very very nice...
now I have to think about where that I can be useful ..

In the container there is a chance to "scroll" it?

thanks
Fabio

[barrymavin]

Hi Fabio

The grid layout fits cells into the geometry of the container.

Containers are not scrollable.

In my opinion, It is a better UI design to split forms into tabs like a wizard does.

[phabio]

Yes Barry, I agree, but sometime the number of object inside a container is not prevedible..

thanks for all
Fabio

[barrymavin]

You need to use a combination of "horizontal" layouts that contain "vertical" layouts as columns. Then as you add UI controls they can flow over to the next column. That's just a coding issue you have to work through.

"grid" layouts are responsive.

Just to clarify, you have several layouts on a container.

Horizontal
Vertical
Form
Grid

They can be nested.