Jump to content
uniGUI Discussion Forums
mhmda

Layout: advanced tutorial

Recommended Posts

Hello everybody,

 

It's very important to understand the layout and the best way to learn them is by practicing, and here is a project showing how to design a dashboard in uniGUI using layouts, I have searched the internet for a dashboard and found this one and this project for you.

 

I hope this will help you understand layouts.

 

Plus: responsive content ! + UniCharts (Pie & line) - try to resize your browser, and try to refresh page to see random results for the charts.

 

Online demo here: http://5.189.151.122:xxxx

 

Download project (with .exe) http://3msoft.net/mhmd/layout.rar

 

layout_1.png

  • Upvote 11

Share this post


Link to post
Share on other sites

Thank You !

 

Could You tell me what is the difference:

For example - left black menu panel.

In this project: Layout: vbox, LayoutConfig: Height 100%

The same result will be set: align: alLeft.

 

Is this the same or not ?

Share this post


Link to post
Share on other sites

Here the Client-side is responsible for the alignment and layout, the other way is using server side to to do the calculation and layout, for best results always use client-side and layout properties.

 

If you want a detailed explanation let me know.

Share this post


Link to post
Share on other sites

It is very interesting mohammad, thank You !

This is my main ignorance in UniGui technology. I think this should be most documented subject because this is main Delphi difference.

So, could You confirm:

There are Layout, Layout Attribs and Layout Config properties (available depends of used component). When I fill this values - layout positioning is at the client side.

When I use Alignment properties (like a delphi plain app) - layout calculation is at the server side - which I think is slower and increase server load.

 

But - the both methods gives the same results ? I mean for example browser type dependency. For example: is Alignment technology safer for some browsers ?

Share this post


Link to post
Share on other sites

 

There are Layout, Layout Attribs and Layout Config properties (available depends of used component). When I fill this values - layout positioning is at the client side.

When I use Alignment properties (like a delphi plain app) - layout calculation is at the server side - which I think is slower and increase server load.

 

Correct. When you want to use client-side layout management don't forget this (for forms and panels):

 

clnt.png

 

 

At the end when client-side managing layout it means the Sencha Extjs is managing that and Sencha Extjs is cross browser and you can count on it.

 

I think the power of unigui is that it uses Sencha Extjs/Touch for client side and Object pascal for back-end and these two tools are very trustful.

 

For us to make it easy and to understand unigui we should understand the web concept (client/server) and Extjs/Touch for that I always refer to Sencha Extjs API they have an excellent documentation. 

Share this post


Link to post
Share on other sites

So I'm curious did you do anything further with adding additional forms?  I tired setting a 2nd form's parent to the panel under UniPanel2 in the project, but it would never resize correctly.  Driving me crazy!  LOL

Share this post


Link to post
Share on other sites

So I'm curious did you do anything further with adding additional forms?  I tired setting a 2nd form's parent to the panel under UniPanel2 in the project, but it would never resize correctly.  Driving me crazy!  LOL

 

Parent panel should have a 'fit' layout so its child Form will occupy all client area.

Share this post


Link to post
Share on other sites

Perfect... :-)
More performance on resize full screen (and not) components, without ask to server...

It's a good optimization. If there are other optimizations using client features instead of remote resources, please tell us !!! 

 

Thanks

 

Stefano

Share this post


Link to post
Share on other sites

Hi Mohammad,

how to show a frame always at center of parent panel (that fits the entire browse, on resize)?

The frame scroll vertically, but it must be centered orrizontally in its container....

Thanks in advance!

Stefano

Share this post


Link to post
Share on other sites

Is it possible if you have 3 panels horizontally next to each other , when you resize the browser,  if the third panel doesn't  show , to be able to appear below , and if so how if it is possible to give an examle of how you can do this.

 

Thank you very much

Nick Lazidis

Share this post


Link to post
Share on other sites

×