LayerComps | Introduction

AAG | LayerComps (LayerComps for short) is a plugin for LiveCode that works just like the Layer Comps palette from Adobe Photoshop. It allows you to record the rect and visibility of controls in a card and switch between these recorded states with ease.

You can use that for many things, but the most obvious usage scenarios are:

The different recorded states can be activated using the plugin or by code if you start using LibLayerComps stack. The plugin can copy this library stack into your topstack if you want.

How it works

A movie is worth a thousand words, so please watch the movie below where I show the basics like creating a Layer Comps, saving states, activating states both using the plugin and by code.

As you saw in the movie, it is fairly easy to create and update these recorded states. Basically you just select them and press the save button when you want to record a state. To activate a state, you can double click it, use the bottom navigation arrows or call:

SwitchLayerComp<the name of the layer comp>

Using it to prototype different control arrangements

Sometimes you have mixed ideas about how a design should go. Should the logo be on the left or on the right? Should this field go all the way or should we have a permanent sidebar? Instead of wondering what is the perfect answer AAG|LayerComps allow you to record all those different states and switch between them with a double click. This way, you can gather opinions from clients and friends and experiment with the different layouts without the tedious and error prone job of layouting everything by hand again.

Mobile development

LiveCode can build for iPhone, iPad and the gazillions of Android devices out there. For each of those devices you need to handle landscape and portrait orientations. The geometry can be dauting at first but not for those that have AAG | LayerComps.

Just create a stack as big as your largest platform, say 1024x1024. Use layer comps to record the positions, sizes and visibility of your controls as you create layouts for all the resolutions and oridentations.

And then you can use code like:

  on preOpenStack
    switch iphoneDeviceOrientation()
    case "portrait"
    case "portrait upside down"
      switchLayerComp "iPhone portrait"
    case "landscape left"
    case "landscape right"
      switchLayerComp "iPhone landscape"
    end switch
  end preOpenStack

That is very CROSS-MOBILE-PLATFORM, it allows you to reuse your code a lot without thinking to much about how to calculate geometry at run-time.

Complex interfaces

Have you ever tried to create complex interfaces in LiveCode? As much as LiveCode helps and empowers us developers, when the time comes to build complex interfaces, it can get really slow. How many times you’ve written code to hide a dozen groups or to reveal another dozen controls when needed? Creating interfaces like iPhoto, Photoshop, where sidebars and inspectors play a big role can be a tedious work, specially when there is a lot of code like:

  hide group "possible inspector #1"
  hide group "possible inspector #2"
  hide group "possible inspector #3"
  hide group "right sidebar"
  if tMediaType is "image" then
    show group "image inspector"
  end if

It is much easier to do something like:

  if tMediaType is "image" then
    switchLayerComp "image inspector"
  end if

And have all the unneeded stuff disappear and the correct stuff displayed.

How do I use a LiveCode Plugin

Refer to How to install custom user plugins lesson for more information.

Oh Man, this is really useful, how do I get it?

LayerComps is a part of the AAG | Tools plugin collection. This collection is a commercial offering, you can learn more about it by clicking here. You can buy the collection for U$40 by using the Buy Now button below.

Don’t miss the bundle

There is now a bundle of the Network Tracer, AAG | Tools plugin collection and DBLib for the discounted price of GBP 100, this is 30% off the normal price. You can get all the plugins from AAG | Tools plus the most developer friendly database library, plus the new Network Tracer together in this bundle. To take advantage of this bundle, use the buy now button below: