Web design is constantly evolving. Each year, new features are introduced to HTML, CSS and JavaScript. New page design trends emerge along with new style guides. AppStudio 6 has a number of changes to bring AppStudio development up to date with current best practices.
Responsive Web Design allows your apps to change how they display depending on screen size. Most new web development is based on RWD. AppStudio 6 has enhancements to better use RWD.
The position property, in Form Properties, is key to this. Its setting determines how controls are positioned on a form.
There are three useful settings: absolute, static and relative. (fixed is included for completeness, but not currently used by AppStudio).
Let’s discuss the differences and advantages of each.
Absolute
Absolute positioning is the simplest. Controls are put exactly where you place them and do not move depending on screen size. It’s very much like how Visual Studio lays out desktop apps.
When a control is added to the Design Screen, it is placed where you click. Dragging the control to a new position will move it to that position.
The problem with Absolute positioning is that if the screen is a different size, the controls are likely in the wrong spot.
Static
Static positioning is recommended for responsive apps. Controls position themselves based on the property settings and style rules you specify. The top, left, bottom and right properties are ignored. Use the margin property to set the distance from neighboring controls.
When a control is added the Design Screen, it will go to the left side of the form, positioned under the control before it. Dragging the control to a new position will have no effect: it will snap back to the same place.
Static is usually recommended as best practice for positioning. It’s more work to set up than Absolute: you have to think how each control should be positioned relative to other controls and how this should change if the screen size changes.
Techniques include the order of the controls, margins around controls, grouping by Containers and the use of layout grids. We’ll cover these more in another blog post.
Relative
Relative positioning was introduced in AppStudio 5. Controls position themselves based on the property settings and style rules you specify. It’s almost the same as Static positioning, except that the top, left, bottom and right properties are used. Using both these properties and the margin property can get confusing and sometimes lead to unpredictable results.
When a control is added the Design Screen, it will go to the left side of the form, positioned under the control before it. Dragging the control to a new position will have no effect: it will snap back to the same place. Setting values for top, left, width and height will affect the position.
This post is continued in Positioning Controls – Part 2.