Jump to content

Layout: advanced tutorial


mhmda

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

  • Like 1
  • Upvote 12
Link to comment
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.

Link to comment
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 ?

Link to comment
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. 

Link to comment
Share on other sites

  • 2 weeks later...
  • Administrators

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.

Link to comment
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

Link to comment
Share on other sites

  • 3 weeks later...
  • 4 weeks later...
  • 1 month later...
  • 4 months later...

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

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...