Easy Screen Flexibility
A Column Layout is a simple approach to what could be termed responsive design - the process of developing the same view, or similar ones, in different ways to seamlessly accommodate everything from phone screens to 4K televisions in a single project and set of pages.
Breakpoints encapsulate this strategy in Perspective. The column layout offers the opportunity to establish three different versions of your view, which will then be used at different ranges of screen widths. You can find and configure these versions from the top of the Perspective Property Editor for a Column container; they are:
- Small (default 0 px)
- Medium (default 480 px)
- Large (default 996 px)
The px values denote at what minimum screen width (in pixels) the view or container should use a given configuration. Selecting one of the sizes will give you the opportunity to configure component positions and spans for that size. This gives more refined control over how a given view or container scales. A column layout is appropriate when your view or container meets some specific criteria:
- You don't need your components to scale vertically, outside of the three provided breakpoints.
- You want to include the same components in the view regardless of screen size.
- You want the components to behave the same way at any size (in terms of scripting, navigation, bindings, etc.)
- You don't need screens at different sizes to use different views.
Here is an example of a column view, configured with small, medium, and large breakpoints.
Column Container Position and Root Properties
Position properties in for a Column container indicate the height of the component placed in each column and the name and order of the breakpoints. For more information, see Perspective - Column Container.
|height||Height, in pixels of the component placed in the column.||int|
Root properties are accessed by selecting the root folder for a Column view on the Project Browser tree.
|columns||Number of column spacings the container is divided into. Children plot layouts across groups of columns, or wrap to the next line when space does not allow. Default is 12.||value: numeric|
Width breakpoints declarations for child layouts. When container is sized below minWidth, child position rules will fall back to the next set breakpoint rules.
Amount of space, in pixels, to place between child components.
|style||Sets a style for this view. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.||object|
Configure a Column Container
The Column container allows you to switch between three different views depending on the size of your Perspective Session. In this example, let's create a data entry form for the company's client list. We'll create a view and add components, then we'll switch between the views to arrange the components for each layout size.
Create a new view using a Column container.
- With the new Column container selected, you'll see the column breakpoints at the top of the Property Editor. Set each of the breakpoints to the following:
- Small breakpoint - 0
- Medium breakpoint - 500
- Large breakpoint - 1000
Select the Small breakpoint in the the Property Editor.
It's important to pay attention to which Breakpoint is selected. Any changes you make will be applied only to the currently selected breakpoint.
Click and drag the square handle on the right side of the view to shrink the width of the container to just under 500 px wide. Arrow guidelines along the top of the component show where the small breakpoint ends and medium breakpoint begins at 500 px.
- Let's add some components to the Column container.
- Drag a Label component on to the container and expand it to fill all 12 columns in the first row.
- Drag a Text Field component on to the container and expand it to fill all 12 columns of the second row.
- Repeat Steps a and b until you have four Labels and four Text Fields.
- Add a Button component at the bottom of the screen and expand it to fill all 12 columns.
- In the Property Editor, update the text property of the Label and Button components and assign them a useful description:
- First Label: Company Name
- Second Label: City
- Third Label: State
- Fourth Label: Industry
- Button: Add Record
- This is a good time to Save your project before continuing.
- Now, let's switch to the Medium breakpoint. Select the Medium breakpoint at the top of the Property Editor. Notice that all of the components are still showing, but they are now unorganized.
- Using the square handle on the right side of the view, click and drag it to expand the width of the container to approximately 500 px wide. This will give you a better idea of what the view will look like in the browser.
- Move the components around so each row has Label and one Text Field.
- Set each Label to the first four columns.
- Set each Text Field to be the last eight columns.
- Keep the Button component in its own row at the bottom and shrink it to be centered with eight columns.
- Save your project.
- Now, select the Large breakpoint in the Property Editor. Once again, you'll notice that the all the components are showing, but they are unorganized.
- Using the square handle on the right side of the view, click and drag it to expand the width of the container. This will give you a better idea of what the Large view will look like in the browser.
- Move the components around so each row has two Labels and two Text Fields on each row.
- Set each Label to be two columns wide and each Text Field to be four columns wide.
- Keep the Button component on its own row at the bottom and shrink it to be centered with four columns.
- Save your project.
- Let's launch a Perspective Session to test our breakpoint views. Click on the Page Configuration icon at the bottom of the Designer window.
- Right click on your column container and select Launch Url.
- With your Perspective Session open, stretch and shrink your browser window and you'll see the views change depending on the width of your browser.