[article rbarticle] New Release - 4.0.3

Posted by Thierry Ciot on 01-Nov-2015 19:21

Do not be deceived by the version number, this latest release is packed with lots of enhancements [:D]


At a high level, here is what is available in the new UI:

  1. Support for tablets and smart phones using the responsive UI, with a sprinkle of adaptive features !
  2. Support for ListView (Grid) Height as Percentage of Viewport [*]
  3. Support for Infinite Scrolling in ListView
  4. Ability for end user to change theme.
  5. Addition of the Nova theme
  6. Updated libraries
  7. Some performance improvements
  8. Troubleshooting improvements

Within the coming days, I will write up more details on all these features.  For now I'll leave it to an example with screenshots of 2 different devices:

You will see that the New UI on tablets and smart phones is targeted at end users, by that I mean it does not have setup and admin functions. 

We know we still have some ways to go to provide first class support on mobile devices and this release is a step towards that goal.  We hope you will enjoy the improvements.

Thierry.

Rollbase - Forum

All Replies

Posted by Thierry Ciot on 04-Nov-2015 12:47

Today, we want to share what we have done to improve support for Grid Height.

The grid height can now be specified as a percentage of the viewport as well as using the rem unit (until V4.0.2 we have support for px and em).

For example, by specifying 100% in page designer for list view object, the grid will automatically be sized to fit in the available space in the browser window.  

This is particularly useful:

  • For supporting multiple device sizes with a single policy.
  • For pages where the grid is the only element on the page and you want no white space around the grid no matter what the size of the user's browser window.

Also, in combination with infinite scrolling, we have received feedback from various customers that it does provide a very natural experience on mobile devices.[Y]

Here are a couple of screenshots from a tablet in portrait and then rotated to landscape.  The grid is set to use 100% height and to use infinite scrolling.

Below you will find all the details on the various units and how we now support them.

Hope you will find this useful too.

Happy rapid coding

Thierry.

In page designer, application designer can specify grid height as either:

  • px: specify the height of the grid in pixel
  • em:specify the height of the grid in unit of the font size of the container
  • rem:specify the height of the grid in unit of the font size of the root element
  • %:  specify the height of the grid in relation to the available space from the page without having to scroll (the viewport).  We calculate the height based on percentage by considering available content space, if value is less than minimum height as specified by rb.newui.options.listView.minHeightWhenUsingPercentage (250px by default), then we pick minHeight otherwise we will use user defined value.

Also, styles like margin and padding from rb-styleable-content-box (the overall container/sometime called canvas) are taken into account to size grid properly.  For example, if rb-styleable-content-box as a 20px bottom margin, 20px of empty space will show at the bottom (for a grid set at 100% height and assuming the grid is the only section on the page.

Note: One can set grid at 100% and still add other sections to the page.  The sizing in that case works exactly the same as described above.

empty or -1:

If infinite scrolling is set:we will set the grid height to rb.newui.options.listView.minHeightForInfiniteScrolling (default to 330px).

If infinite scrolling is not set: no height is computed and the grid shows all available rows (based on page size) - this is the compatible mode with classic ui.

If not unit is specified, we default to pixel.

Posted by Thierry Ciot on 04-Nov-2015 12:57

And for completeness here is a screenshot from a smart phone of the same application and the same list view:

This thread is closed