Using Layouts

When designing applications for mobile devices, it is good practice to organize elements on the screen into layouts.

Layouts in Profound UI are special types of widgets that can contain other widgets within them. They are divided into one or more container sections. Depending on the type of layout used, the container sections can stretch to fill up the space available. Layouts can also embed other layouts, which provides a lot of flexibility for your application design.

Most importantly, elements placed within layouts can be positioned and sized relative to their parent container rather than absolutely. This is significant because we cannot always predict the screen size of the device. The user can also rotate the device, which changes the effective screen size on the fly.

Profound UI ships with several types of layouts and they can all work together. For example, let’s say you wanted to build a screen that looks as follows:

You want the labels and the buttons to size proportionally, no matter what type of device is used and how it is rotated. Here are the steps to accomplish this:

First, add a Mobile Device Layout and maximize it to take up the full screen. A Mobile Device Layout contains 3 sections: a top bar (optional), a content section, and a bottom bar (also optional).
Drag a heading label to the top bar. Set the left property to 10% and the width to 80%; then set the text align property to center. The heading will now resize and center automatically within the top bar.
Add a table layout to the content section and maximize it to fill up the entire section. By default, a table layout has 2 rows and 2 columns, sized equally.
Add buttons to each cell of the table. Set the buttons’ left and top properties to 10% and the width and height properties to 80%. Now, the buttons will resize automatically as well.

Custom Styles for Mobile Layout

To change the styles for the "mobile layout" template, create some custom CSS that overrides the Profound UI mobile layout style, and save it in a style-sheet on the web server (e.g. in /www/profound/htdocs/mobilecss/custom.css):

Sample Style

div.my-mobile-layout td.top-bar, div.my-mobile-layout div.top-bar {
  background: unset; /*clear the default gradient background.*/
  background-color : lightgray;
}

div.my-mobile-layout td.content-section, div.my-mobile-layout div.content-section {
  background-color: white;
}

div.my-mobile-layout td.bottom-bar, div.my-mobile-layout div.bottom-bar {
  background: unset;
  background-color : gray;
}

Also, in the Designer, select the layout and find the "css class" property, right-clicking it, and select "Add Another CSS Class":

Then, set "css class 2" to "my-mobile-layout".

For your style-sheet to be loaded in the mobile application, the record format's "external css" property can be set to the CSS file:

Note: because of a limitation in the rendering framework, files referenced in "external css" may not be loaded before the mobile layout is rendered for the first time. Profound UI's mobile-layout rendering code expects certain elements to have widths and heights before rendering. Therefore, if the layout's "css class" does not include "mobile-device-layout", then unexpected results may happen in a mobile application.

Mobile Scroller Layout

The Mobile Scroller Layout should only be used in the context of a mobile/touch screen application. Outside of that context, a Simple Layout should be used.

Using Mobile Scroller Layout in a mobile application requires a little of know-how. The Mobile Scroller belongs inside another layout–for instance the Mobile Device Layout or CSS Panel Layout–whose height and width are generally set to 100%.

Typically you add content to the Mobile Scroller Layout and then set the layout's height tall enough to contain the contents. Width can be set to 100% if there is no horizontal scrolling.