[REBOL] Re: View: How Does This Work?
From: brett:codeconscious at: 19-Nov-2001 10:17
Hi Donald,
> I am trying to figure out just why the box and the "panel" area to the
right
> of the box actually end up in their displayed locations. Can anyone help
> explain what is going on?
The word RETURN is the important one in this case.
Imagine an invisible cursor that Layout uses. As Layout places each element
it moves the cursor. The BELOW keyword instructs Layout to move the cursor
down vertically, the ACROSS keyword tells it to move the cursor
horizontally. As each element is place the cursor is moved to the extremity
of that element. So with this example:
view layout [below box red box green RETURN box blue]
the cursor is at the origin, is then moved to the bottom right of the red
box. Then it is spaced and moved into horizontal alignment with the red box
at which point the green box is placed and the cursor moves to the bottom
right of the green box.
A RETURN is encountered and the cursor is reset vertically (in this case) to
the previous GUIDE (here none has been specified but effectively there is
one at the start). Then the cursor is spaced and the blue box is placed,
with the cursor set to the bottom right corner.
This next example shows the interaction of GUIDE and RETURN:
view layout [below
box red box green RETURN
box blue GUIDE box yellow box orange RETURN
box purple
RETURN box gold box teal
]
> Experimenting with this problem, I had difficulty using an X,Y point
(using
> AT, OFFSET or ORIGIN, and BELOW & ACROSS) to put a layout where I want it.
I
> have been able to change the X axis point, but the Y never seems to do
what
> I expect of it, overlaying elements at the top of the window. How, then,
> does one code "put it here"?
This next bit of code demonstrates ORIGIN:
view layout [ORIGIN 0x0 below box red box green RETURN box blue]
Compare this example with the first example above. Here there is no margin
around the coloured boxes in this example.
Each box is 100x100 in size. Using AT we can set the cursor position at
which the next element will be placed. Here the green box overlaps the Red
box:
view layout [ORIGIN 0x0 below box red AT 40x40 box green RETURN box
blue]
AT uses an absolute position. Compare the last example with this:
view layout [below box red AT 40x40 box green RETURN box blue]
The green box is at exactly the same location in both examples, even though
in one example the origin is different.
This next code positions each box absolutely:
view layout [AT 10x10 box red AT 20x20 box green AT 30x30 box blue]
And here we can see how the cursor runs after such absolute positioning:
view layout [
ORIGIN 0x0
AT 10x10 box red
AT 20x20 box green
AT 30x30 box blue box yellow RETURN
box orange
]
As for OFFSET. I think there is an error in the user guide. Offset is a
refinement to the VIEW function and it also exists an attribute of a face,
but I do not think it is a keyword for use in the LAYOUT function. Here the
offset refinement is used
to position the whole window lower down the screen:
view/offset layout [below box red box green RETURN box blue] 300x300
> I also don't understand how 'panels is being used, in these lines of code.
>
> button "Panel 1" [panels/pane: panel1 show panels]
> button "Panel 2" [panels/pane: panel2 show panels]
> panels: box 220x140
>
> Panels/pane: seems to be defined as a subface (either 'panel1 or 'panel2 -
a
> good use for a toggle, no?), which then gets displayed; and then as a box.
> How can both definitions of 'panels work?
Permit me a short diversion into some little published "theory". You may
know it already, but I want to make a stab at making some concepts clearer.
It is not very obvious but there are two levels of abstraction when building
screens in View. The lower level is the face level. Here is a quote from
some *old* documentation for View:
"There is only one type of graphical display object in REBOL. It is
called a face."
So only faces can be displayed.
The higher level of abstraction is VID. Again from that documentation:
"The Visual Interface Dialect (VID) is designed to simplify the
implementation of View
scripts using styles. VID consists of a set of functions."
And from the new documentation:
"VID provides shortcut expressions that are automatically
translated into View objects and functions"
Those view objects are faces. So VID is a quick way to make faces. These
faces are then displayed. You have probably seen talk of "Glass", Max's work
in progress. Glass is another higher level abstraction. When it is finished
you will be able to choose to use VID or to use Glass to build screens.
The most important function in VID is LAYOUT. If you type HELP LAYOUT at
the console you will see the following as part of the description:
"Return a face with a pane built from style description dialect."
So you give LAYOUT a special little script written in a special language
(VID) and it gives you back a face. This face has a PANE, a collection of
faces (or sometimes a single face), which has been created from the rules
given to LAYOUT.
This code uses the layout function to create four faces (one main face that
has a PANE containing three faces of different colours):
example-face: layout [box red box green box blue]
print length? example-face/pane
view example-face
By the way, every face has a PANE attribute, but quite often this attribute
is set to NONE.
Ok back to the "how to". The document is demonstrating a technique for
manipulating complex faces. The example constructs a View object structure
that is dynamically manipulated and thereby implements the changing
subpanels. It is more specifically a demonstration of one way to change the
PANE of a face.
The strategy of the example code is to use LAYOUT three times to construct
three major faces. The first is the main face ("main"). The other two faces
("panel1" and "panel2") will be the subpanels. Inside the main face one
face, that created from the box and referred to as "panels", is intended to
be used as the subpanel container. On pressing a button the PANE attribute
of this face is changed; thereby changing the composition of the whole
graphical display.
The document I referred to earlier can be found here
http://www.rebolforces.com/archive/view099users.html (with thanks to Allen
Kamp for maintaining an imporant resource).
Let me know if this description is unclear or how it could be improved. I am
considering keeping it on my website to help others down the track.
Brett
