Breakpoint Containers

Flexibility without Limits

The breakpoint layout is the most comprehensive choice when you want to develop a project that works for sessions of many shapes and sizes. Unlike column and flex layouts, which offer ways of controlling how a fixed set of components respond to changes in screen size, a breakpoint layout expects two entirely distinct subviews. This makes the breakpoint layout a powerful, but more involved choice of layout.

There are many circumstances that call for this layer of abstraction. Maybe operators using mobile phones need different control options than desktop computers at a coordinating hub. Or more fundamentally, maybe you can't quite pack as much functionality per view into a mobile screen as you can in its desktop counterpart, and need to add a couple more views to your mobile version to bridge the gap. 

A breakpoint layout might be a good idea if you want small and large versions of your session to have:

• Differing components
• Differing properties, bindings, or layout behavior
• Differing navigation options

When designing pages for mobile and desktop applications, it's important to consider not only the type of layout, but if your design fits nicely on a page in a mobile session. Some pages may work for a desktop session, but may not work for a mobile device such as expecting a user to enter data into multiple tables on a mobile session that don't fit seamlessly across a page.

Breakpoint Position and Root Properties

Position Properties

Position properties in a Breakpoint container indicate simply whether the component is in the large version of the container or the small version. For more information, see Perspective - Breakpoint Container.

Root Properties

Root properties are accessed by selecting the root folder for a Breakpoint View on the Project Browser tree.

Configuring a Breakpoint Container

A Breakpoint container can switch between two configurations based on how wide the container is. Here is a simple example of creating a Breakpoint layout using two different views. The components on each view are laid out a little differently because they both represent two different distinct ranges of layout widths: small and large. We are going to use the two views below to add as children to our Breakpoint container. Since you can only add a single component to each child in a Breakpoint container, we'll place each of these views, containing multiple components, in their own Embedded View. This example assumes you have a small view and large view already configured.

1. Create a new view using a Breakpoint container.
   
   
   
   

2. Let's configure the Breakpoint container to show the small view when the screen size is narrow, like on your mobile device, and the large view when you're on your desktop. 

3. In the Property Editor, the breakpoint is determined by using the Small and Large properties, or the slider at the top of the Designer workspace. In this example, the Breakpoint is set at 800 px. When the Breakpoint container is sized below minimum width, child position rules will fall back to the next set breakpoint rules.
   1. With the Breakpoint container open, click on the Small property in the Property Editor.
   2. Drag an Embedded View component onto the Breakpoint container.
   3. Select the EmbeddedView in the Project Browser.
   4. Set the path property to the name of your small view (i.e., Sml View) from the dropdown.
   5. Set the Position size property to small. Note: This lets the embedded view component know which child rule it is linked to, Small or Large.
      
      
      
      
4. Now let's repeat the steps above for the large view.
   1. With the Breakpoint container open, click on the Large property in the Property Editor.
   2. Drag an Embedded View component onto the Breakpoint container.
   3. Select the first EmbeddedView_0 in the Project Browser.
   4. Set the path property to the name of your large view (i,e., Big View) from the dropdown.
   5. Set the Position size property to large.  Note: This lets the embedded view component know which child rule it is linked to, Small or Large.
      
      
5. Now, when you toggle the Small and Large properties in the Property Editor, you'll see the window switch between the two different Small and Large views.
   
   
   
   
   
6. Now, let's open a Perspective Session by clicking on the Page Configuration  icon at the bottom of the Designer window to test your Breakpoint layout.
7. Right click on your Breakpoint container (i.e., bpview), and click on Launch Url.
   
   
   
   
8. With your Perspective Session open, stretch and shrink your browser window. You'll see the views change depending on the width of your browser.