DecSoft's App Builder

Index of ContentsResponsive apps

App Builder apps can run in lot of differents platforms, mobile and desktop browsers. We want to offer here various approach to be take in consideration in order to get our apps working on most possible platforms, mobile and desktop browsers.

Auto scaled apps

We can use another app option: "Scaled", in order to show our apps scaled into the screens. This approach works well if we plain our apps for mobile devices, since small changes in the screen sizes can be scaled more or less well. Maybe this is option is the more easy to use and works well to fit the different screens of mobile devices.

You have at your disposition the SetAppScaled action, which can be used to set the app scaled mode in runtime.

Programatically

App Builder put available certain app global variables that we can use to know the screen width and height, and also the screen orientation: portrait or landscape. Using this variables and actions like GetStyle, GetStyle, AddClass, SetAppScaled, we can try to fit our app views controls into the screen.

Media queries

Using app files we can incorporate our own CSS stylesheets in our apps. Doing this we can use certain CSS media queries in order to apply certain specific styles on our app views controls. Remember every app view control have their own ID, which is determined by the control name. Then we can refer to this control ID in a CSS stylesheet in order to apply certain style to that control in particular.

For example, supose this CSS style in one of our app CSS stylesheet file:

@media screen and (max-width: 300px) 
{
  #Button1
  {
    width: 100px;
  }
}

The above CSS change the size of our "Button1" control if the screen is smaller than 300 pixels wide.

CSS classes

The last but not least approach to get our apps more or less screen size responsives is the use of CSS classes. We can define whatever CSS classes in our own CSS stylesheet files, but, since App Builder use the Bootstrap CSS framework, we can also have available some useful CSS classes, some of them specifically designed to fight with responsive designs.

Cordova options

The Apache Cordova screen app options can help us if we plain to compile our apps using Apache Cordova. In particular we can specific that our app must be always run in portrait or landscape viewport. The default behaviour is allow the user to change the screen orientation in our app, but we can specifically establish that our app must run in portrait or landscape. This can be useful because our efforst must be reduced to one of this possible screen orientations.

Conclusion

Made an app which runs in all the possible screen sizes probably it's not possible or become extremelly complicated. If our target platforms are mobile devices or mobile web browsers, probably the above explained "Scaled" option can be the most easy approach to take. If we center the app on the screen we also can get good results from small to medium and also larger screens: if our app is designed more or less smaller.

In any other case we can play with other of the above approach, or, probably, play with all the possible aproach together in order to get the best possible results.