GLAYOUT - In a nutshell.

1.1. Get the files on www.rebol.org.

You can use the links on the download page to get the files.

You will need slim and glayout files copied to your disk. You can basically place them anywhere you like. It does not matter.

Just Keep a note of where you did save them, so that we can link to them after.

A good idea is to keep both slim and all modules in a directory called libs or something related. This will make it obvious to you that it contains library modules of code instead of complete scripts.

For this little demo to work, you will have to save slim.r and glayout.r within the same directory.

2.1. call do-events

It a good thing to mention that the current release of glayout expects you to explicitely call do-events, whenever you want the event handling to start. This will also allow glayout to start the layout mechanism and will cause the window and its contents to resize.

2.2. Copy/Paste examples

In this example, we will put all the code, copy/paste in a rebol console, and keep the console open after.

In The following examples, you just need to paste the code again, in the same console, and it will open the views.

Since this is a quick primer, we will launch slim directly within the script, like so:

do /path/to/libs/slim.r 

Of course, replace the example path to where you installed slim.

Refer to slim's setup guide, to know how to make slim automatically load itself when rebol is started.

Through slim, you do not use paths to load modules. Slim handles that for you, Slim also needs you to state a specific requirement on the module's version which is required to allow your application to function properly!

gl: slim/open 'glayout none
  ; none version allows you to load any version of a 
  ; library module.  Replace it by an integer, 
  ; decimal or tupple to require a specific module version.

NOTE that slim/open returns an object which you can assign to any word you like... which is not something to underestimate when working with tools from many authors at a time. This keeps your namespace tidy.

Refer to slim's setup guide, to know how you can keep your modules in a seperate directory from slim.r itself, which also supports having several library directories.

do /path/to/libs/slim.r

gl: slim/open 'glayout none

gl/view [
  vgroup [
    hgroup [
      text "to:"
      field
    ]
    hgroup [
      text "subject:"
      field
    ]
    hgroup [
      text-area def-size 200x200 min-size 100x100
    ]
    button "send"
  ]
]

do-events

5.1. nested layouts:

The first obvious difference, is the fact that you have several levels of panes included within the same layout block. vgroup is a vertical group, and hgroup is a horizontal one. The direction indicates how the content will be stacked. You can include groups and/or gadgets within any group, which means you are actually allocating an actual pane on the fly, and including its children inside it. So you don't have to create your panes as seperate steps anymore.

Note that some gadgets can detect the direction they are currently being displayed in and will act in that direction, which means the styles do not have to be redone in x and y, all the time.

5.2. Everything resizes:

You will also notice that everything resizes when you resize the window. This is one of the main functions of glayout. To create a tree of faces which know how to align themselves according to their neighbors.

5.3. New size words!

in order for the layout to be editable by you, some of the internal glayout words are made-available within the VID parser itself. This is the case for the various sizing values, which tell the system how you want the actual controls to react to its initial size, re-sizing and if you event want the face to allow re-sizing in the first place.

in the above example, we see the use of def-size and min-size. def-size is used to define the default size the face should take. min-size is used to define the minimum size a face is allowed to take. In theory, it should never scale smaller than this. Most glayout styles have some internal default values for sizing methods.

gl/view/center [
  vgroup [
    spacer 10
    hgroup [
      spacer 10
      vgroup [
        hgroup [
          text "to:"
          field
        ]
        hgroup [
          text "subject:"
          field
        ]
        spacer 10
        text-area def-size 200x200 min-size 100x100
        spacer 10
        hgroup [
          elastic
          button "send"
          elastic
        ]
      ]
      spacer 10
    ]
    spacer 10
  ]
]

do-events

6.1. simple spacers

Here we added two layers of panes, to put an edge all around the ui (by placing spacers before and after the nested panes) and we also added spacing in between the elements. Note that we use the spacer word instead of space or pad. In its current form, glayout does not include support for spacing, margins or padding. You can work around this limitation, by adding the above extra panes. Sorry for the inconvenience, but I'd rather continue with the implementation of classes, at this moment.

Note that spacers squash themselves when there is not enough space. This occurs before we actually squash the controls themselves!

Support for extended layout parameters are planned for the next full version of glayout.

6.2. elastics

Note that we also added a pair of elastic faces around the send button. You can see that elastics are the most easily stretched objects within any pane, so that they will take up all the extra space instead of the button. This will result in a pane where all non-elastic gadgets are evenly spread out. Any face can be elastic, text fields are a good example of an elastic control.

Elastic controls cause the window to be elastic. Without any elastic faces in a pane, the window will not be resizable, since it does not need it.

gl/view/center [
  vgroup [
    spacer 10
    hgroup [
      spacer 10
      vgroup [
        hgroup [
          vtext "to:  " 
            as-is
            static-size 60
            font [align: 'right]
            
          hpane [
            field edge gl/black-edge-spec
          ]
        ]
        hgroup [
          vtext "subject:  "
            as-is 
            static-size 60
            font [align: 'right]
            
          hpane [
            field edge gl/black-edge-spec
          ]
        ]
        spacer 10
        hpane [
          text-area def-size 200x200 
                    min-size 100x100
                    edge gl/black-edge-spec
        ]
        spacer 10
        hgroup [
          elastic
          hpane [
            hblk [
              button "send"
            ]
          ]
          elastic
        ]
      ]
      spacer 10
    ]
    spacer 10
  ]
]

do-events

7.1. Soft edges

By nesting different group looks directly one in another, we can get very nice edge looks.

You must understand that this DOES CONSUME MEMORY. We are in effect doubling or even tripling the amount of bitmap memory needed for the concerned area, so be carefull not to go crazy with this. In practice, I have noticed that using this methode effectively doubles the amount of RAM an application takes.

Note that it does not cause any perceptible speed hit. Glayout is much faster than view and the fact that it has more panes to handle, does not slow it. It might cause a slight speed decrease in view, which will have more panes to refresh, but it does not seem to be such a perceptually obvious problem. Remember that using this soft edge system, you are cause lower-grade machines to be hit harder.

7.2. VID dialect still accessible!

notice that VID functionality which does not have to do with layout is still completely accessible. In the polished ui above, I use the following words exactly like they would be used in standard VID: 'AS-IS 'FONT 'EDGE. Other words like 'WITH are expected to work as usual. If you do find words which cease to react, please send a mail, so I can look into it.

7.3. glayout preset objects...

Also note that I am using some often re-used styles which are allocated in glayout. Some fonts, edges and effects are defined once so they can be re-used later.

8.1. file browser

Glayout implements its own file browser which uses most features of glayout to profit.

Here is a screenshot

8.2. Full-featured

The glayout requester, allows you to do in-context editing of your files and directories. From renaming, to deletion, to directory creation.

9.1. Centering windows, before they open!

because you have no idea how large the window will be before its open, it can be hard to place it correctly on the screen. That is why there is a /center refinement to glayout's view command which will automatically center it for you, before opening it. This is especially usefull for modal windows (requesters and pop-ups), which tend to be small.

9.2. Glayout supports ALL versions of rebol!

glayout's design currently allows it to be used the same in all stable version of REBOL/view, from released 1.2.1 to latest betas (ex: 1.2.46).

9.3. Snapshot ui key shortcuts!

By pressing Ctrl + Shift + i you can snapshot (in an internal mem space) ANY glayout window or pop-up.

By pressing Ctrl + Shift + o you get a file browser allowing you to place the file on disk, where you want it, in png format.

9.4. Make your own requesters... its easy.

Using glayout, you can make ANY window a modal window. Yep!. Just use the /modal refinement of the gl/view method and that window will be the only one who accepts events.

Here is a quick example which defines an alert function which creates a pop-up. The alert is called when when you press on the test button of the main window...

alert: has [rval] [
  gl/view/center/modal [
    vgroup [
      spacer 10
      hgroup [
        spacer 10
        header "no mail was sent!"
        spacer 10
      ]
      spacer 10
      hgroup [
        elastic
        button "ok" [rval: "all is ok" hide-popup] 
        elastic
        button "damn" [rval: "user not happy" hide-popup]
        elastic
      ]
      spacer 10
    ]
  ]
  
  return rval
]


gl/view/center [
  vgroup [
    spacer 10
    hgroup [
      spacer 10
      vgroup [
        hgroup [
          vtext "to:  " as-is static-size 60 font [align: 'right]
          hpane [
            field edge gl/black-edge-spec
          ]
        ]
        hgroup [
          vtext "subject:  " as-is static-size 60 font [align: 'right]
          hpane [
            field edge gl/black-edge-spec
          ]
        ]
        spacer 10
        hpane [
          ta: text-area def-size 200x200
            min-size 100x100 edge gl/black-edge-spec
              "^/^/^/^/^PRESS ON TEST !!! ^/^/(no mail will be sent)"
        ]
        spacer 10
        hgroup [
          elastic
          hpane [
            hblk [
              button "test" [ta/text: alert show ta ]
            ]
          ]
          elastic
        ]
      ]
      spacer 10
    ]
    spacer 10
  ]
]
  


do-events

As usual, this requester can call requesters of its own.

last updated: 28-Jul-2004/5:38:09-4:00