Fun With Layers

In this Lesson

You will become more acquainted with Scene Layers and the role they play in the user experience.

This lesson builds on the concepts you learned in the Creating a Scene lesson.

Concepts

Scenes are the visual building blocks of your solution. Scene composition is the invisible structure in which the user experience is created.

The scene composition infrastructure is organized as follows

  • Scenes (which contain layers)
  • Layers (which contain elements)
  • Elements (what your customer sees)

Layers are similar to transparent panes of glass on which visual elements may be placed. A scene may contain an unlimited number of layers and those layers may be opened or closed during the lifetime of the scene. The user will only see the elements contained in the open layers.



Layers may be opened and closed. Closing a layer will remove its elements from the scene.



Layers can be opened or closed in response to events. For example, clicking a button can cause layers to be opened or closed.

Create some layers

There is nothing like a good visual design and what we will now ask you to create in this lesson is nothing like a good visual design. We will concentrate on the mechanics and not on good visual design practice. We will leave all the visual design creativity to you!

  1. Open the PartyDefinition scene by double clicking on it.



  2. Right click in the layer list and select Create New layer.



    A new empty layer will be created.



  3. Provide a name for the layer



  4. Pin the first layer.
    Notice
    Pinned layers remain visible even when they are not the active layer.



    Tip
    Pinning a layer makes it easy to see how its elements are positioned relative to the elements in other layers.
    Notice
    Layer pinning is a design-time function used only by the scene editor.
    Visible by default is a run-time behavior used by the Soiree client.
  5. Make layer 2 the active layer by clicking on its thumbnail.
    Notice that the elements in layer 1 are displayed but are not selectable.



  6. Add two buttons to layer 2 as shown below by dragging buttons from the Elements palette onto the design canvas.



  7. Create another layer by duplicating layer 2.
    Name the new layer “Play 2”
    Pin layer 2 (Play 1)



  8. Ensure layer 3 (Play 2) is active.
  9. Press the left mouse button and drag it around the 2 buttons in layer 3.
    Release the mouse button after the selection area is around both buttons.



  10. The two buttons should now be in a selected state as illustrated by the drag handles that appear on the buttons.



  11. Click and drag the selected buttons to the position shown below.
    Rename the buttons as shown.


  12. Make a copy of the Close Play Layers button



    Tip
    You can also copy selected elements into the clipboard and then paste them into this scene or into some another scene.
    Scene Platform
    You may only copy and paste elements between scenes for the same platform. For example, elements in an iOS scene cannot be pasted into a Desktop or Android scene.
    Tip
    When you paste elements from the clipboard into the design canvas the elements will be placed at the location of the mouse cursor.
  13. Reposition and rename the new button as shown below



  14. Create one button on layer 1 than can be used to open layer 2 as shown below.



  15. You should now have a scene with three layers that looks like this



  16. Unpin layers 1 and 2 by right clicking on their thumbnail and selecting Pinned



  17. Click on each of the layer thumbnails to ensure that the design canvas shows only the elements that you expect to see on each layer.

Opening and Closing Layers

You will now add some event handling that will open and close layers in this scene.

  1. Activate layer 1 by clicking on its thumbnail.



  2. Open the property sheet for the Open Layer 2 button by right clicking on it.



  3. Drag the layer 2 thumbnail to the Open box in the property sheet. The property sheet should now look like this



    Press OK to close the property sheet.
  4. Activate Layer 2



  5. Configure the Close Layer 2 button to close layer 2.



  6. Configure the Open Layer 3 button to open layer 3.



  7. Activate Layer 3



  8. Configure the Close Layer 3 button to close layer 3.



  9. Configure the Close Play Layers button to close layers 2 and 3.



  10. Configure the Close All Layers button to close all layers.



  11. Save The Scene

Test The Scene

  1. Start the Server



  2. Start the Client



  3. Test out all the buttons you added to the scene.



Notice
The client closes itself when there are no active layers to display.

Reordering Layers

Layers are added to the scene like a stack of transparent glass panes – one on top of another. The order in which they are stacked is determined by the layer number. The layer with the highest number is on top (most visible) and the layer with the lowest number is on the bottom (and is covered up by all other layers).

The order in which layers are stacked is referred to as their Z-order.

Z-Order
The term “Z-order” refers to the order of objects along the Z-axis. In coordinate geometry, X typically refers to the horizontal axis (left to right), Y to the vertical axis (up and down), and Z refers to the axis perpendicular to the other two (forward or backward).

The layer number determines its Z-order. Layers toward the left of the thumbnail list are covered up by those towards the right.
[ it’s a bit like the newest one wins ]

In this exercise you will experiment with layer Z-order.

  1. Create a new layer that contains a Color-filled Container as shown here.
    [pin layers 1 and 2 to help determine the proper position of the container element in layer 4]


  2. Ensure the layer is Visible by default
  3. Save the scene
  4. Run the solution and notice that layer 4 is stacked on top of all other layers.



  5. Drag layer 4 to first position in the layer list.



  6. Save the scene
  7. Run the solution and notice that layer 4 is stacked below all the other layers.



That’s it for this lesson.