Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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):

Code Block
languagecss
titleSample 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":

Image Added

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

Image Added

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:

Image Added


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.

...