Hello guys (and dear host, David),
Please does someone have some experience for creating large interfaces ? I have to build a control panel for one of my apps interacting with a server's script. That's related to the way the views scale but each time I think I have fixed the positions of my controls and reports, when I change the resolution, I get different results.
Of course, I do know that responsive design is a hard part so, perhaps should I create some views for the large screens and redirect the smaller screens to a duplicated app ?
Many thanks
Hello Samuel,
Generally we must start based on a "mobile first" design. This means, for example, we must limit the number of controls per view, because we can place lot of controls in larger screens, but not in smaller screens. For example, supose an application that allow us to create, read, update and delete from a database. Instead of create one view with all the possible controls to do it (something that in a larger screen can be considered) we can use separate the tasks in various app's views.
On the other hand we can take the decision to work only for larger screens: then probably the best way is to not scale the app's views and controls. We can simply use certain common resolution and work in an application like that. Another thing to take in consideration is the usage of CSS queries and actions like "SetStyle", "SetViewSize", "Show", "Hide", etc., in order to adapt some controls according to the screen size, for example: we have app's events like "Resize" that can help us to achieve this.
Right we can also prepare certain app's views for certain screen sizes, but this is not doing automatically: we must use some app's event or app's view event to, based on the appropiate app's global variables ([App.InnerWidth], [App.InnerHeight]) redirect to one view or another. I mentioned the CSS media queries, but I will mention it again due to their power too. CSS media queries allow us to apply certain style(s) on controls depending on the screen size and without any Javascript nor App Builder's actions involved.
Take a look also at this help topic Samuel, and please, post here if you have any further question or comment about.
Hello David,
Thanks for the full explanation. It was very helpful. For some parts of my interface, I do use the SetStyle action to set the position of the control too (move the control).
If one wants to make the operation in the future, he wouldn't forget to convert the value returned by the browser as a String containing the "px" unit (by default, it seems). I did checked if the variable is a number and replace the unit by nothing
For example, to be able to change the position by increasing value:
Hello Samuel,
We can continue talking about, because, in fact App Builder allow us to take several approach to deal with this question. We can use CSS (with CSS queries), we can use Javascript (or App Builder actions), we can deal with the entire app's size (with the "SetViewSize" action, for example), we can also deal with specific controls (with the "SetStyle" action, for example), and we can deal with automatically scaling applications or fixed applications: even in runtime we can change the scale to fixed and viceversa with the "SetAppScaled" action.
For example, a possible approach to be ready with small and larger screens is to limit the app's size in larger screens, but maintaining the app automatically scale option. I updated App Builder right now to enhance the Calculator application sample. The Calculator sample scales well in small screens, and now also limit the maximum size for larger screens (see the Master View Show event and the app's Resize event too). In this case we no need to worry about specific controls, and the application scales and looks well in small and larger screens as you can see.
Has the Calculator sample been updated?
I want to take a look the 'a possible approach to be ready with small and larger screens is to limit the app's size in larger screens'
Hello Joshua,
Has the Calculator sample been updated?
I want to take a look the 'a possible approach to be ready with small and larger screens is to limit the app's size in larger screens'
Yes! If you download the latest AB release you can find the updated/enhanced Calculator sample.
Hello David,
Thanks for the Calculator's example modification. The use of the SetViewSize was something I did missed. And a great way you found because it gives that "special feeling" for a large interface. Your approach is excellent :)
Thanks a lot again
Hello Samuel,
Always thanks to you sir. And yes; some actions like "SetViewSize" or "SetAppScaled" must be taken with attention, since they can help us in this kind of issues. Certainly we can determine an scaled or fixed way in runtime (with "SetAppScaled") and these states (fixed of scaled) can work in combination with the app's size that can be determined by "SetViewSize".
Anyway I am open to hear more question about and to help when possible. :)
Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.
DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console. 
Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price! 
Design for small screen devices but deploy also (without changes) in larger devices like tablets. 
Take a look at our YouTube channel and subscribe to be notified about new videos! 
DecSoft Feeds