[Pythoncard-users] Sizers in layoutEditor

[Alex T. <al...@tw...>]

Docs for snapshot 1.0


Almost everything for sizers is done from the new "Sizer" Window. It 
should be open by default when the layoutEditor starts up, or can be 
made (in)visible from the menu View / Sizer window (Ctrl-I)

The sizer window shows the complete sizer tree, including a root called 
"ALL" (which isn't really used directly for anything). Beneath this 
there are two nodes :
  TOP SIZER, within which the real sizer tree will be built up
  UNPLACED which holds any components which have not yet been placed.

If you open a pre-existing resource file (i.e. no sizer info), then all 
the components will be be put into the UNPLACED section.

At the top of the sizer window are 3 buttons, used to create vertical, 
horizontal and grid sizers (last one is not yet operational, of course). 
(There will later be a button for adding a spacer).  Clicking on one of 
these buttons will create a new sizer - any components which have been 
selected in the main layout window (and which are not yet placed) will 
be put into that sizer, in the order they were selected (i.e. in the 
same order as they appear in the list in the Property Editor window).  
This new sizer will be put at the end of the unplaced section.

(Note - if you do this when some of the selected components are already 
placed, it will fail with an error that a component is already placed. 
Need to decide whether to proceed with placing the other components. 
Also, components which have been put into a sizer, but that sizer is 
still unplaced do not count, they are still considered as ;unplaced; and 
hence may be moved into the new sizer. Is this right ?  I'm unsure.)

Apart from this, almost everything in the sizer window is done by 
selecting an element within the tree, and then context-clicking 
(right-clicking on Win or Mac) to bring up a context-sensitive menu.  
This menu will contain the relevant items from the following list (not 
all apply in all cases):

1. Edit Properties .....
   Brings up a dialog allowing you to set properties of the item. These are:
       border (currently applies to all sides)
       horizontal growth   (value between 0 and 100)
       horizontal align (will only be used if the horGrowth is 0, *and* 
if the item is placed within a vertical sizer)
       hor span - only useful for grid sizers
       verGrowth, ver align, ver span - same, but vertically.

(For those who are already familiar with sizers in wxPython: the 
'growth'  values are used as either the proportion or the 
setting/non-setting of the wx.EXPAND flag in the parent sizer).

If the item in question is a sizer, rather than a component or spacer, 
the growth values are in the range -1:100, where 0:100 have the same 
meaning as for components. The special value of "-1" means that the 
sizer should determine whether to set its growth based on the settings 
of each of its children; if any of them have a non-zero growth value, 
then the sizer will also. This is the default for a sizer.

(Known bug : spacers currently allow -1, but it doesn't mean anything - 
will fix for next release).

2. Delete     (Should perhaps be changed to "remove" ?? )
If it's a component - it is moved to UNPLACED
If it's a spacer - it is deleted
If it's a sizer, it is deleted, and any children will be moved to unplaced.

3. Insert selected components before here
    Insert selected components into here    (only for sizers)
    Insert selected components after here

These all do the obvious - and selected components (if not already 
placed) will be inserted before / after / into the selected item.
Note that for a sizer, components inserted into it are put at the end of 
the sizer.

4. Move up a level.
The selected item is taken *out* of its current sizer, and placed 
immediately *after* it.

5. Add empty slots to sizer
Does nothing, may later be deleted. (?)

6. Insert spacer after here.
Inserts a spacer after the selected item.


The other thing you can do is drag-n-drop items within the sizer tree. 
Click and hold on any item, drag it to another item and release it.
If you drop onto a component or spacer, the dragged item is placed 
*after* that component; if yo drop onto a sizer, the dragged item is put 
*into* the sizer. [I felt was too intrusive and slowed things too much 
to have a dialog to choose here, and was too "indirect" to  have a 
setting for placing before / into / after on a drag operation - feedback 
welcome.]

This means that you can't easily drag/drop items to all places you might 
want to put them (e.g. after a sizer). Use "Move up a level" to do this.

That's about it - at any time you can Save the file, and the Run it to 
see how it behaves a a sizer-based design (assuming you have placed some 
components - if none are placed, the sizer will not be used). Note there 
are settings within menu Edit / Background info... and Dialog info ... 
to control the resizability and whether or not to use sizers.  There is 
also a "Run option" to give some visual feedback on where the sizers are.

Remember this version also has Undo / Redo implemented, please test that 
also.


Other requested feedback :

Should I take over the Property Window rather than using a separate 
Sizer Window ?
   if the "use sizer" flag is set, take the right-hand half of the 
Property Editor window for the sizer tree.
   if  it is not set, stick to current usage (i.e. align, distribute, 
etc. controls).
This would require another button to switch between sizer tree visible 
and individual component properties visible (only when there is a single 
component selected - when there is either no component, or multiple 
components, it would simply show the sizer tree).


btw - there are some sample sizer layouts in 
tools/resourceEditor/t1.rsrc.py, t2.rsrc.py, t3.rsrc.py

Also, if you try out taking the existing samples and adding sizers to 
them, you need to be aware that some of them already implement sizers in 
their code - this generally needs to be removed because it will 
over-ride the resource-based sizer mechanism.


-- 
Alex Tweedly       http://www.tweedly.net



-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.7.3/350 - Release Date: 28/05/2006