Mailing List Archive: 49091 messages
  • Home
  • Script library
  • AltME Archive
  • Mailing list
  • Articles Index
  • Site search

[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
> 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
> AT, OFFSET or ORIGIN, and BELOW & ACROSS) to put a layout where I want it.
> have been able to change the X axis point, but the Y never seems to do
> 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 -
> 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 (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