Register to post in forums, or Log in to your existing account
 

This forum is locked: you cannot post, reply to, or edit topics.  This topic is locked: you cannot edit posts or make replies.     Home » Forums » General zApp Discussion
The Raven
Magician


Joined: 13 Oct 2000
Posts: 463

PostPosted: Wed Sep 08, 2004 11:29 pm   

Alignment Question
 
How would I align something like this:

Code:
 _______________________________________________
(                    Control                    )
 _________  _________________________  _________
( Button1 )(         EditBox         )( Button2 )
 _______________________________________________
(                                               )
(                                               )
(                                               )
(                  ClientWindow                 )
(                                               )
(                                               )
(_______________________________________________)


When I resize it, I want it to resize Control, EditBox, and ClientWindow, keeping Button1 and Button2 at the left and right.

Code:
 _______________________________
(            Control            )
 _________  _________  _________
( Button1 )( EditBox )( Button2 )
 _______________________________
(                               )
(                               )
(                               )
(          ClientWindow         )
(                               )
(                               )
(_______________________________)


I tried to figure out the alignments I would need... this was my first attempt, in pseudo-Zeus:

<control align=top/>
<button1 align=nexttop/>
<editbox align=nextleft/>
<button2 align=nextleft/>
<clientwindow align=client/>

Result:
Version 0.1
Code:
 _______________________________
(            Control            )
 _______________________________
(                               )
(                               )
(                               )
(                               )
(          ClientWindow         )
(                               )
(                               )
(                               )
(_______________________________)


Well... that's no good. The client window covered up the controls. Bleh. Well, let's temporarily get rid of the client window so we can see behind it...

Result:
Version 0.2
Code:
 _______________________________
(            Control            )
 _______________________________  _________  _________
(            Button1            )( EditBox )( Button2 )


Ugh. So aligning something as 'nexttop' also made it fill the entire top of the window by default. I fixed that by adding a width= parameter to Button1, and put the ClientWindow back in with align=nexttop.

Result:
Version 0.3
Code:
 _____________________________________
(               Control               )
 _________  _________  _________
( Button1 )( EditBox )( Button2 )
                       ______________
                      (              )
                      ( ClientWindow )
                      (______________)


Fun. So, without align=client, the memo field of course makes itself the default small size. I suspected this, but I had to try it. Also, the Editbox and Button2 are aligned left, they do not stretch to the right edge or resize themselves at all.

I'm getting very confused here, and running out of alignment types to play with. Would someone be so kind as to shed some light on how this would be done properly? I want to avoid, if not eliminate entirely, hardcoded width and margin settings. If I need a numbered parameter, then it's not the way I'd prefer to solve it.

Note: Viewing the source in the links provided is easy with IE. Also, the important parts are easier to see if you close <head>, <dock>, and the second <window...> tag.
Reply with quote
Zugg
MASTER


Joined: 25 Sep 2000
Posts: 23379
Location: Colorado, USA

PostPosted: Thu Sep 09, 2004 1:21 am   
 
This is when you need to use panels to help. Here is the result:

Code:
<control align=top/>
<panel align=top height=22>
  <button1 align=left/>
  <button2 align=right/>
  <editbox align=client/>
</panel>
<clientwindow align=client/>


Adjust the height property of the panel to take up whatever amount of room you want.

What's tricky about this is that the alignments "top,bottom,left,right,client" are from Delphi and the others are added by Zeus. Since the Delphi alignments have no knowledge of the other modes that are added, when you use "client" alignment, it only looks at the other controls with "top,bottom,etc" to determine how much space to take up.

One trick you can use is to know that the order of the properties is the order they are executed, so if you put align=client you can then do something like autotop=true to modify the top of the control to be at the bottom of the previous control. That would have fixed your first situation I think.

But using panels is a more straightforward way to do things. You can actually achieve any effect at all using panels and the default Delphi alignments.
Reply with quote
Rainchild
Wizard


Joined: 10 Oct 2000
Posts: 1551
Location: Australia

PostPosted: Thu Sep 09, 2004 1:49 am   
 
align="chaotic neutral" ;)

One thing I find annoying (or lacking) in Delphi/C++Builder which would be nice to see automatic in zeus is sure you can do the panel / align left, right, client, but you can't do width = 33% and have them proportionally resize... always the left and right stay the same size while the client one gets much bigger.

Some kinda percentile widths would be nice to have if it's not too annoying to code (heh, I gave up bothering with my C++Builder appz because it was annoying to code).
Reply with quote
Zugg
MASTER


Joined: 25 Sep 2000
Posts: 23379
Location: Colorado, USA

PostPosted: Thu Sep 09, 2004 5:13 pm   
 
It's pretty complex to code, and it interfers with the existing Delphi anchoring and alignment. But I think I have a trick that I working on...

I've got a set of "splitter" components that I'm adapting for Zeus because the default <SPLITTER> (which wraps the Delphi TSplitter component) basically doesn't work in any useful way. One of the properties of these new splitter components is the ability to handle proportional resizing and percentage sizing.

So, what you would end up doing is something like this:

<Left Control/>
<SPLITTER Percentage='33' Proportional='true'/>
<Right Control/>

Or something close to that. I don't have this implemented yet, but that is what I am thinking. The Splitter will take the control just before it and the control just after it and put them into the two panels used by the splitter.

So now the only trick is finding a way to hide the splitter itself so that it looks like you just have two panels with proportional alignment. I'm hoping that I can find a way to do that.
Reply with quote
slicertool
Magician


Joined: 09 Oct 2003
Posts: 459
Location: USA

PostPosted: Thu Sep 09, 2004 8:17 pm   
 
How would this work with 3 or more items in a row? Would the splitter component try to cascade the percentage being as it looks at the before and after controls?
_________________
Ichthus on SWmud: http://www.swmud.org/
Reply with quote
Krule
Adept


Joined: 12 Nov 2000
Posts: 268
Location: Canada

PostPosted: Thu Sep 09, 2004 10:50 pm   
 
Panels..reminds me of java...Man laying out stuff in java is !fun...perhaps we'll see a Gui programer to help develop zeus apps one day?
Reply with quote
Zugg
MASTER


Joined: 25 Sep 2000
Posts: 23379
Location: Colorado, USA

PostPosted: Thu Sep 09, 2004 11:48 pm   
 
The splitter control will take the control before it and the control after it and encapsulate them into a new panel that is "client" aligned, with the two controls aligned within this panel with a splitter between them.

Now, if you want multiple controls where the first control is 10%, the second is 30% and the third is 60%, for example, then my guess is that you will need to do something like this:

<control1/>
<splitter1 percentage='10' proportional='true'/>
<control2/>
<splitter2 percentage='40' proportional='true'/>
<control3/>

The first splitter (splitter1) takes the control before (control1) and control after (control2) and puts them into a panel with a splitter between them, giving control1 10% of the space.

The second splitter (splitter2) takes the control before (which is now a panel containing a splitter and the other 2 controls) and creates a new panel where the first control has 40% of the space, and the remaining control (control3) has 60%.

But I'm just speculating. Until I actually implement this and find out how the 3rd party splitter component really works, I won't really know how this will work. As always my goal is to make it straightforward and as easy as possible.

And yes, a GUI (or IDE) is on my list for the far future if Zeus does well. But I'm trying to make the XML code easy to understand. It is certainly not going to be as much of a pain as it is in Java. Fun = Not!. I'm trying to make it so that the simple XML does what you'd expect as a default, and then if you want to tweak it you can do that with more complicated properties.
Reply with quote
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.     Home » Forums » General zApp Discussion All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
© 2009 Zugg Software. Hosted on Wolfpaw.net