App styles

DecSoft App Builder helps you to create apps that can run in several browsers, platforms and screen sizes. How we design the app it's important in order to get an app that can look well and can be use in these several browsers, platforms and screen sizes.

When you creates a new app in DecSoft App Builder, by default, their designer size is 320x480 pixels. This is the size for all the app views and app dialogs. Also by default, the app uses the "scaled" style, means the app is scaled wen running in larger screens.

The app can be deployed using the "fixed" and the "scaled" style and it's also possible to change between these styles in runtime by using the app setAppFixedStyle() method and the app setAppScaledStyle() method.

Fixed style

When the app is deployed or the fixed style was set in runtime, their designing size is maintained also in runtime. That is, supose you design an app with a resolution of 800x600 pixels and use the fixed style, then this is the size of the app in runtime, no matter the final user screen size, in other words, the app expect at least an available resolution of 800x600 pixels.

Scaled style

In addition to the app fixed style, the apps can also be deployed or change in runtime to the app scaled style. In fact, this is the app style used by default when you create a new app. When the app is deployed or the app scaled style is set in runtime, the app automatically scales their size, from their designed size, to the screen size.

Take a look at the below GIF image. You can see the VideoPlayer sample app, which is designed with a 320x480 pixels resolution. The app style is "scaled", and therefore, when we run the app and the screen size changes, the app adapt their size to the new screen size.

About the "scaled" style

There is something important about the app "scaled" style: it's intended to scale from the designed size to the screen size, but not at the contrary.

The app "scaled" style works as expected scaling the app size from the designer size to larger screen sizes. For this reason the default designer size is 380x480 pixels. It's apparently a smaller size, but guarantee that our app can work in smaller devices screens and also in devices with larger screens.

One way to control how the app "scaled" style works is to use the app MaxWidth option and MaxHeight option, which allows to limit the "scaled" style. By default these properties has a "-1" value, means there is no limit in the app "scale", but we can establish these properties to some positive values, in order to limit the app "scaled" style.