Jump to content


Photo

Layout: advanced tutorial


  • Please log in to reply
24 replies to this topic

#1 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 690 posts
  • LocationKufur Kassem, Palestine

Posted 27 January 2017 - 09:56 PM

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:8077/

 

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

 

layout_1.png


  • 8

#2 fcarvalho4

fcarvalho4

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 100 posts
  • LocationLisboa

Posted 27 January 2017 - 10:00 PM

Great thanks!


  • 0

#3 Schuiab

Schuiab

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 318 posts

Posted 27 January 2017 - 10:30 PM

Thank you brother Mohammad

 

:)


  • 0

#4 Guillermo E. Paulino

Guillermo E. Paulino

    Advanced Member

  • Members
  • PipPipPipPip
  • 171 posts

Posted 27 January 2017 - 10:38 PM

[dcc32 Error] E1026 File not found: 'MainModule.dfm'


  • 0

#5 Guillermo E. Paulino

Guillermo E. Paulino

    Advanced Member

  • Members
  • PipPipPipPip
  • 171 posts

Posted 27 January 2017 - 10:41 PM

Sorry it was my antivirus that was corrupting the file


  • 0

#6 majori

majori

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 125 posts

Posted 28 January 2017 - 07:32 AM

thank you mohammad

greate work and help to us


  • 0

#7 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 690 posts
  • LocationKufur Kassem, Palestine

Posted 28 January 2017 - 09:51 AM

Online Demo: http://5.189.151.122:8077/


  • 0

#8 bahry

bahry

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 58 posts
  • LocationAmman

Posted 28 January 2017 - 04:34 PM

Very Thanks Mohammad,

it looks very greate


  • 0

#9 Farshad Mohajeri

Farshad Mohajeri

    Administrator

  • Administrators
  • 9876 posts

Posted 28 January 2017 - 05:28 PM

Pinned!

 

Thanks for sharing this.


  • 0

#10 jaromir

jaromir

    Member

  • uniGUI Subscriber
  • PipPip
  • 44 posts

Posted 31 January 2017 - 08:35 AM

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 ?


  • 0

#11 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 690 posts
  • LocationKufur Kassem, Palestine

Posted 31 January 2017 - 09:31 AM

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.


  • 0

#12 jaromir

jaromir

    Member

  • uniGUI Subscriber
  • PipPip
  • 44 posts

Posted 31 January 2017 - 10:11 AM

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 ?


  • 0

#13 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 690 posts
  • LocationKufur Kassem, Palestine

Posted 31 January 2017 - 11:34 AM

 

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. 


  • 0

#14 Clarke

Clarke

    Newbie

  • uniGUI Subscriber
  • Pip
  • 7 posts

Posted 14 February 2017 - 03:05 PM

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


  • 0

- Clarke


#15 Farshad Mohajeri

Farshad Mohajeri

    Administrator

  • Administrators
  • 9876 posts

Posted 17 February 2017 - 09:10 PM

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.


  • 0

#16 Stefano Monterisi

Stefano Monterisi

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 114 posts

Posted 21 February 2017 - 12:26 PM

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


  • 0

#17 devya

devya

    Member

  • Members
  • PipPip
  • 11 posts

Posted 23 February 2017 - 07:48 AM

Thank you so much,

I am new here, still need a lot to learn

 

 

Regards,

 

Devy


  • 0

Regards,

 

Devy


#18 Mohammed Nasman

Mohammed Nasman

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 139 posts
  • LocationGaza - Palestine

Posted 14 March 2017 - 02:57 PM

Wonderful Mate :)


  • 0

#19 Stefano Monterisi

Stefano Monterisi

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 114 posts

Posted 16 March 2017 - 10:08 AM

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


  • 0

#20 nyy216

nyy216

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 08 April 2017 - 12:28 AM

greate work, thank you for share
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users