The following table describes each of the container types in Perspective.
|Root Container Type||Icon||Description|
|Coordinate||This is the most simple container type. Components inside this type use basic X, Y, Width, and Height position properties. They can be fixed in size, or be configured to grow and shrink proportionally when the view is stretched. To see the properties and scripting functions available, got to Perspective - Coordinate Container and Coordinate Containers.|
|Column||The Column type shows a column-based layout and has three breakpoints. Breakpoints help manage a view when the devices using your session are very different sizes. Components inside this container type can span one or more columns, and you can add as many rows as you want. Row heights are determined by the tallest component in that row. To see the properties and scripting functions available, got to Perspective - Column Container and Column Containers.|
|Tab||The Tab type is used to show multiple views in the same page, while cycling through them all by clicking on each tab. You can add a single component, container, or view to each tab space. Each child element uses a tabIndex property for its position. To see the properties and scripting functions available, got to Perspective - Coordinate Container and Tab Containers.|
|Breakpoint||A Breakpoint container type allows you to create multiple versions of a single container using a pixel width as the cutoff. This allows you to completely change the look or structure for displays on mobile versus desktop sessions. To see the properties and scripting functions available, got to Perspective - Breakpoint Container and Breakpoint Containers.|
|Flex||The Flex type shows a single row of components spanning the height of the container. It allows you to set each component to either stretch to fill the available width, or to use a static width. The components in this view type will reposition and realign based on the size of the view. To see the properties and scripting functions available, got to Perspective - Flex Container and Flex Containers.|
A simple strategy to accommodate radically different screen sizes is to design a view or container in several different ways, with each design tailored to different screen sizes. The column and breakpoint types accommodate this design strategy, by picking one of two or three different containers to open based on a specific range of pixel widths for the session. The term "Breakpoint" is a common piece of terminology used to describe this design - it is the width in pixels at which the Perspective session decides to use one container over another.
Using Column Containers
The Column container is a good option when you want to have the same components and views for every screen size, and simply want to lay them out differently at smaller or larger sizes.
Selecting one of the sizes will give you the opportunity to configure components' layouts for that size. For instance, selecting Small will allow you to position the components, embedded views, and containers in your view in a way that makes sense for mobile devices, since most mobile phones will sport a session width less than 480 pixels. Rearranging the same components in the Medium container would provide a nice design for larger smartphones, many tablets, and some desktops, while the Large configuration will yield a container that works for high-resolution monitors and televisions.
Using Breakpoint Containers
The Column container is an easy-to-use option for simple layouts, but more involved ones might require more customization. Perhaps you want desktop, tablet, and mobile sessions to look and feel quite different, or you want to use one of Perspective's new navigation components, but only for mobile devices. Even in these circumstances, you don't have to design several sets of pages, or even several projects, to all implement the same task.
Breakpoint containers enable you to design views tuned to different screen widths, but unlike a column container, where a single view can take on three forms, in a breakpoint container you actually specify two distinct views, each with their own components and functionality. Breakpoint containers are thus the more flexible option; as long as your "mobile" views share an essentially similar framework with your "larger" views, you will be able to develop the views concurrently, and the Perspective session will decide at runtime which set of views to use. You can think of a breakpoint container as bundling together two views that serve a similar purpose, but are tailored to different screen sizes.
Nesting Layouts Using Containers
Sometimes you may want to compartmentalize a view or container in a particular way, either to modify the component layout or organize the structure of your components in the Project Browser. Containers are a special kind of component that can contain children and can also be nested, which supports multiple layout strategies. Application designers can nest containers inside of other containers to compose layout strategies that are more complex and capable than any one container can provide.
You might want to use nested containers to create a more complex layout. For example, you could have a Tab container that has several tabs with very different information in each tab. In one tab, you might have a table that looks great on a desktop but terrible on a phone. Using a Breakpoint container inside of only one tab in a Tab container will allow you to make a more useful mobile experience while still showing a table on a desktop computer.
Sometimes you'll want to make a very simple view for use inside a higher-level setting, like a Carousel or a Breakpoint container. If you only need a view to hold a single component that fills the container, you can:
- Use a coordinate container in percent mode, and give the component X and Y of 0, and width and height of 1.
- Use a flex container, giving the component a basis of 100% or auto.
Sometimes you'll need to repeat the same container a specific number of times in a row or column, or you want to create a grid of child containers. For this purpose, you can:
Wrapping Existing Components into a New Container
Perspective features a one-step wrapping option. The Wrap In Container action, will "wrap" a component or group of components into a new container within the existing container. This feature provides design flexibility in that you can introduce additional containers to an existing app design in Perspective.
Wrap in Container is available on the right click menu from any Perspective component.
The following is the process going on "behind the scenes" in the Designer.
- Create a new container of the type you picked
- Copy the component you clicked on's "position" props into this new container
- Cut the component you clicked on
- Replace the component you clicked on with the new container
- Paste your component into the new container
In the following example we have a view with two Vessel components and a Time Series chart. We've decided that the Time chart needs to be in a separate container.
- Right click on the Time Series Chart.
- Select Wrap in
- Select the type of container you want, in this case we chose a Coordinate container.
- The Designer creates the Coordinate Container and moves the Time Series Chart Component inside. The component is deep selected.
For more information on options on the right-click menu, see Working with Perspective Components, Right-Click Menu.