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

Post new topic  Reply to topic     Home » Forums » zApp Developers
Castaway
GURU


Joined: 10 Oct 2000
Posts: 793
Location: Swindon, England

PostPosted: Fri Jul 29, 2005 4:14 pm   

Layouts, alignments etc
 
Hey folks,

I thought I'd fiddle with zApp some, and already I'm stumbling for lack of a clue on how to align stuff. "All" I'm trying to do is have items line up one under the other, and be as wide as they need to be to show their content.

I managed to get two items one under the other, but neither show their full content/captions, what am I missing?

Also, is it worth suggesting that this system, like most other GUI widget sets I've come across, defaults to lining up the contents of a frame/panel one after the other, and not over top of each other?

Lady C.

Code:

  <window name='mainwin' caption='zApp Widgets' width='640' height='480'>
    <dock position='top'>
      <toolbar name='mainmenu' />
    </dock>
    <panel name='mainview'>
      <label autotop='true'>
        <![CDATA[
          <h2>zApp Widget Demonstration</h2>
          Click on the buttons below to start the individual demonstrations
        ]]>
      </label>
      <button name='button1' caption='1. Labels (text and images)' align='top' autotop='true'/>
    </panel>
    <statusbar name='Status' align='bottom' />
  </window>
Reply with quote
Zugg
MASTER


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

PostPosted: Fri Jul 29, 2005 5:08 pm   
 
First tip is that you should never use "autotop" on the first control within a panel. AutoTop tells zApp to align the current control with the same left edge as the previous control. Since the first control in a panel doesn't have a previous control, this can cause problems.

If you just want controls to line up vertically and take up the entire width, then just use the align='top' option for all of the controls.

So, I think in your above example code, you just need to get rid of the "autotop" statements in both the label and button, and then add a align='top' to the label. Then both the label and button will have the align='top' and should work.

The other alternative is to use align='top' in the label to get it set to the top, and then use the autotop='true' on subsequent controls.

Take a look at the CALC.ZML example for complex layout and alignment examples. The basic idea is to position the first control in the panel where you want it, and then just use AutoTop or AutoLeft to position subsequent controls.

In general, do not mix the Align property and the AutoTop/AutoLeft property in the same control.

There have been many questions with alignment and I've promised to do a demo/tutorial for alignment and control positioning in the future.
Reply with quote
Castaway
GURU


Joined: 10 Oct 2000
Posts: 793
Location: Swindon, England

PostPosted: Fri Jul 29, 2005 6:44 pm   
 
Zugg, thanks for the tips, it's better, but still not taking up the entire width of the frame. (That's with align='top' in both, or align='top' in the first, and autotop='true' in the second, same effect)

http://desert-island.dynodns.net/bilder/diverse/zappwidgets.bmp
http://desert-island.dynodns.net/zapp/widgets.zml

Also, I hope you are planning to make zApp more robust, since the aim is for non-programmers to use it, i.e. ignore any attributes in places they make no sense..

Lady C.
Reply with quote
theNerd
Adept


Joined: 01 Mar 2005
Posts: 277

PostPosted: Fri Jul 29, 2005 7:04 pm   
 
I had the same problem, Castaway. Once Zugg does a form designer zApp will be the easiest development environment in the world. It will conquer entire nations and bring world leaders to their knees. It will cure hunger and fight deadly disease, haha, and then we'll be able to travel through time and we'll.... *Zugg walks up, slaps theNerd across the face, and then walks away* Shocked But boy, I sure would like a form designer.
Reply with quote
Zugg
MASTER


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

PostPosted: Fri Jul 29, 2005 8:48 pm   
 
I tried this myself and the problem is the H2 tag that you are trying to use. The LABEL component only supports a very limited amount of HTML. See the HTML in Labels help topic for the list of allowed HTML tags.

When I got rid of the H2 and just put a BR tag after the first line, then using Align='top' for the label, and AutoTop='true' for the button worked fine.

Remember that in HTML, things like H1 and H2 don't actually mean anything. It's up to the client to render these tags and deside what font, weight, etc to use. The HTML used in the Labels supports only the direct formatting tags. So you need to decide exactly how you want the text displayed and use the appropriate FONT tag for it.

I have no idea what the control is trying to do with the H2. Seems like it should just ignore it. To be honest, I hate the other components from the company that wrote the HTML Label control I'm using the zApp (TMS Software). There code is poorly written. But it was the best HTML label component I could find for now. Unfortunately DevExpress doesn't support HTML in their labels (except within the Grid control itself).
Reply with quote
Zugg
MASTER


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

PostPosted: Fri Jul 29, 2005 8:54 pm   
 
I'm not sure what you mean by making zApp more robust. I can't just ignore illegal tags and stuff...if your file isn't in XML format then zApp just won't read it (because the XML parser isn't going to read it). As far as combinations of properties that cause trouble (like the Align and AutoTop stuff), I try to minimize the number of these that exist.

Unfortunately, in this case I have little control over it since the Align tag is a Delphi property, and the AutoTop property is something I added myself to try and make alignment a bit easier. Alignment can get complicated since only controls that use "align" can be tracked by Delphi and work correctly. As soon as I make a change to the left,right,top,bottom of a control, then Delphi sets the Align property internally to "Custom" and no longer recognizes that this control is aligned in any way. So if you add an Align='top' control after this, Delphi will put it at the top of the form, ignoring the previous Custom-aligned control.

It's impossible to create a development system that doesn't have some oddities like this. Many times these oddities come from Windows itself. In this case it comes from Delphi. But you get features at a price. The alignment system in Delphi is very powerful and not worth throwing out just because of quirks like this. Development systems are always going to have a learning curve. Just because it's designed to be easier for end-users, it's still "programming" and still takes some learning. Just look at the macro programming in Excel...lots of people use it even though it has a huge learning curve. I'm afraid that any development environment that was trivial to learn would also be trivial in functionality.

But that's the whole reason for doing an IDE so that this kind of stuff is even easier. And I still think it's a lot easier than dealing with VBOXes and alignment issues in XUL (Mozilla) for example.
Reply with quote
Castaway
GURU


Joined: 10 Oct 2000
Posts: 793
Location: Swindon, England

PostPosted: Fri Jul 29, 2005 9:12 pm   
 
Doh! I missed that list, thanks! Well, it's not green any more, but I still have the same sizing problem :(

New screenshot/.zml files in the same location as before..

Lady C.
Reply with quote
Castaway
GURU


Joined: 10 Oct 2000
Posts: 793
Location: Swindon, England

PostPosted: Fri Jul 29, 2005 10:05 pm   
 
I basically meant stuff like autotop on the first control, for example. If its not useful there, then zApp should purposely ignore it, and not explode when someone accidentally uses it.

Which gives me an idea for another useful function/toy - a syntax checker of some kind that checks this kind of thing. I'm not trying to make it sound easy to do this stuff, I know it isn't, an IDE will hopefully go a long way to making it available to the not-so-knowing (though theres still the scripting to do, even if the layouting is done) I'm just thinking, if I'm already having problems, then there needs to be more help from the software itself, documentation on aligning etc is a great idea, but not everyone will want to go read, so we also need syntax/error checking built in.

Lady C.
Reply with quote
Zugg
MASTER


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

PostPosted: Sat Jul 30, 2005 2:11 am   
 
Yeah, it should be easy enough to ignore the AutoTop when there is no previous control. Right now I think it treats the previous panel as the previous control.

I can't reproduce the problem you are having now and I still can't get the second link to work. Can you just past your updated code into the forum again?

For syntax checking, what I'm planning to do eventually is release the DTD file for the XML syntax. Then you can use any XML editor that has syntax checking with it. Might as well stick with the standards instead of inventing something else myself.

Also, of course, the IDE will handle all of the syntax stuff for you as any good IDE will do. For scripting it will have color-highlighting of the major scripting languages. But full syntax checking of stuff like VBScript is beyond the scope of the IDE. As we have seen in zMUD, syntax checking tends to easily get in the way.
Reply with quote
Castaway
GURU


Joined: 10 Oct 2000
Posts: 793
Location: Swindon, England

PostPosted: Sat Jul 30, 2005 5:17 am   
 
Oops, its widget.zml, not widgets, sorry!
http://desert-island.dynodns.net/zapp/widget.zml or

Code:

<?xml version='1.0' encoding='ISO-8859-1' ?>
<!DOCTYPE zapp [
  <!ENTITY AppTitle "zApp Demo: Widgets">
  <!ENTITY AppAuthor "Jess Robinson">
  <!ENTITY AppVersion "1.0">
  <!ENTITY AppURL "">
  <!ENTITY AppImage "ZAPP">
  <!ENTITY AboutBox SYSTEM "aboutbox.xml">
  ]>
<zapp>
  <head>
    <toolbar name='mainmenu'>
      <menu caption='&amp;File'>
        <item action='_FileExit' />
      </menu>
      <menu caption='&amp;Help'>
        <item caption='&amp;About' script='core.execwindow( "About")' />
      </menu>
    </toolbar>
  </head>
  <window name='mainwin' caption='zApp Widgets' width='640' height='480'>
    <dock position='top'>
      <toolbar name='mainmenu' />
    </dock>
    <panel name='mainview'>
      <label align='top'>
        <![CDATA[
          <font size="12">zApp Widget Demonstration</font><br />
          Click on the buttons below to start the individual demonstrations<br />
        ]]>
      </label>
      <button name='button1' caption='1. Labels (text and images)' autotop='true'/>
    </panel>
    <statusbar name='Status' align='bottom' />
  </window>
</zapp>


.. and I'd llove to see a DTD!

Lady C.
Reply with quote
Zugg
MASTER


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

PostPosted: Sat Jul 30, 2005 4:52 pm   
 
I located the problem!

Your PANEL (name='mainview') is not aligned in any way, so it just gets the default size and position. Add a Color='Blue' property to the panel and you'll see what is actually being created.

So, if you just add a Align='client' to the panel, that will tell zApp to use the entire rest of the window for the panel, and now your following controls will look the way you expect.

So it really was doing what you told it...it was using the full width of the panel for your label and button. The problem was that the panel itself wasn't set to use the full width of the window.

The resulting code is:
Code:
    <panel name='mainview' align='client'>
      <label align='top'>
        <![CDATA[
          <font size="12">zApp Widget Demonstration</font><br />
          Click on the buttons below to start the individual demonstrations<br />
        ]]>
      </label>
      <button name='button1' caption='1. Labels (text and images)' autotop='true'/>
    </panel>
Reply with quote
Castaway
GURU


Joined: 10 Oct 2000
Posts: 793
Location: Swindon, England

PostPosted: Sat Jul 30, 2005 6:10 pm   
 
Yay Zugg! Why didn't I think of that? ;) Thank you!

So, back to the drawing board.. And more questions:

1. Can I make that button a hyperlink instead, or make it look less like a button and more like a link?
2. How do I either, align the button caption to its left edge, or make the button exactly as long as its caption? (without giving it an exact width).

Lady C.
Reply with quote
Display posts from previous:   
Post new topic   Reply to topic     Home » Forums » zApp Developers 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