Layout Rules

In this Lesson

You will

  • Learn how to create scenes that can adapt to the various screen sizes your customers may by using.
  • Learn how the Soiree client displays information that exceeds the length of the visual element.
  • Learn about the z-order of elements

Concepts

Your solutions may be deployed on many different devices. Because of the large variety of screen sizes you may find that what looks good on one device may be unusable on another. The goal is to make each solution viable on as many devices as possible while keeping your costs low and your sanity intact.

At the surface this may sound like a fairly straightforward task. After all, Soiree provides support for three different platforms. Create three faces for your product: desktop, iOS, and Android and you are good to go. Are are you?

The real challenge for the design team is the ever-increasing variety of devices within a platform. When you create a solution for Android what size display are you going to design for? The smallest phone or the largest tablet? What about iOS? Even desktops present a challenge if for no other reason than the customer is able to change the size of the window on the fly.

The dominant approach to solving this problem is to use a layout manager. Layout managers are a set of rules, constraints, and relationships that allow the visual components to be ‘laid out’ according to the proclivity of the layout manager. The idea is to have the layout manager determine the size and location of each component based on the total amount of available space. While there are many different types of layout managers there is one thing nearly all of them have in common: most require some type of coding to configure them for their task. Coding a layout manager would prevent non-programmers from creating the visual layer so Soiree takes a different approach.

Layout Rules

Soiree provides layout rules that do not require programming skills. These layout rules are hints used to describe how elements should respond to changes in the size of the display area.

Example

What should happen when this area changes size?



You might want to adjust the elements as described here.



Stick-like behavior

Soiree’s layout rules act like sticks that connect an element’s edge to its container’s edge.



1:1 rules act like hard sticks that move the attached edges at the same rate.



1:2 rules act like stretchy sticks that move the element’s edge 1 unit for each 2 units of the movement in the container.



% rules act like stretchy sticks that move the element’s edge in proportion to the change in the container’s edge.



Important Info
Layout rules make use of additional space. When space is reduced they will not make elements smaller than their designed size.

Using Layout Rules

In this exercise you will see the effect of adding layout rules to the PartyDefinition scene.

  1. Use DBeaver to create a very long party name for one of the parties in your table. Use the party name Winter Festival – celebrating the history of the great white north and the people that live there



  2. Start the solution and advance to the party list.



    Important Info
    The Soiree client uses Ellipsis to show that some of the information cannot be displayed.
  3. Drag the lower right corner of the Soiree client’s window to increase its width and height.



  4. Open the PartyDefinition scene
  5. Switch to the Layout perspective



  6. Drag the Width scales 1:1 rule to the right edge of the vertical styled grid



  7. Drag the Height scales 1:1 rule to the bottom edge of the vertical styled grid



  8. You should now see width and height rules attached to the edges of the vertical styled grid



  9. Save the scene
  10. Return to the Soiree client and click on the Add button at the bottom of the vertical styled grid

    The vertical style grid size will change to fill the additional space created by the larger window.



  11. Drag the lower right corner of the Soiree client’s window to make the scene larger and smaller and watch the vertical styled grid size change.
    Notice
    The layout rules will not decrease the size of the vertical styled grid below its designed size.
  12. Return to the scene editor
    • Drag the Width scales 1:1 rule to the right edge of the party name element
    • Drag the Width scales 1:1 rule to the right edge of the host name element
    • Drag the X scales 1:1 rule to the LEFT edge of the party date element



  13. Save the scene
  14. Return to the Soiree client and click on the Add button at the bottom of the vertical styled grid

    The fields inside the vertical styled grid will move to match the width of the row.



Make the fish swim behind the list

  1. Return to the scene editor
    • Drag the X scales 1:1 rule to party fish image
    • Drag the Y scales 1:1 rule to party fish image



  2. Save the scene
  3. Return to the Soiree client and click on the Add button at the bottom of the vertical styled grid
  4. Drag the lower right corner of the Soiree client’s window to make the scene larger and watch the fish swim to the right and dive behind the vertical styled grid.



Make the fish swim in front of the list

  1. Return to the scene editor
    • Switch to the Design perspective
    • Click on the fish image and bring it to the front. This changes the element’s z-order.



  2. Save the scene
  3. Return to the Soiree client and click on the Add button at the bottom of the vertical styled grid
  4. Drag the lower right corner of the Soiree client’s window to make the scene larger and watch the fish swim in front of the vertical styled grid.



Remove rules

You can remove layout rules by dragging them off the design canvas and onto the gray area outside of the canvas.

  1. Return to the scene editor
    • Switch to the Layout perspective
    • Drag the X and Y rules for the fish image onto the gray border area



    • The layout rules should now be removed from the fish image element



  2. Save the scene
  3. Return to the Soiree client and click on the Add button at the bottom of the vertical styled grid

    The fish will no longer swim around. [ poor little fish ]

That concludes this lesson.