Ever try to center a button on a form? Dead center, from top to bottom, from right to left, no matter how the size of the form changes?
You can’t put a number like 100 into the left or top property. It won’t respond to different screen sizes.
You can’t put a percentage (like 50%): it will align the top or left of the button at 50%, not the center of the button.
There’s a handy calc() function you can use instead.
Continue reading “Using calculations in bounds properties”
Vertical and horizontal centering is hard. Here, from CommitStrip.com:
Here’s a good resource with suggestions on vertical and horizontal centering:
Let’s work through an example. Continue reading “Responsive Design: Centering a button vertically”
When designing an app for mobile devices, you need to consider what happens if the device is rotated. You can just put up a message asked the user to rotate back, or you can design your app so it looks good in both portrait and landscape modes.
AppStudio 5 introduced Responsive Web Design as a way to layout your forms. RWD is a design approach for making apps size themselves to varying sizes of screens.
In this blog post, we’ll use Responsive Design to handle rotation in a simple layout with three buttons. The techniques can be used for much more complex layouts, of course.
Continue reading “Responsive Design: Rotating Your Device”
Styles are a powerful tool for shaping the appearance of your controls. To a large extent, AppStudio lets you avoid having to learn a lot about them: it just handles them for you. But if you want to do something special, it’s easy to add extra styling of your own.
The most common place to put a simple style rule is in the ‘style’ property of a control. This is very specific: it will only apply to that specific control. Where the concept of styles gets powerful is the ability to have style rules apply to groups of controls.
Continue reading “Styleheaders: Advanced Styling”
Here’s a great question from the web board. What is it with the $(“# you will sometimes see in the code?
It’s a jQuery thing. Valid function names can start with a letter or certain special characters. “$” is a valid character to use in a function name. In this case, it’s the entire function name: $().
(jQuery is a utility library which is included in AppStudio apps)
jQuery’s $() function is a selector. It looks for elements in your app. It has a lot of different ways to select them:
You may see something like
The # means to look for an element with the id of “Button1”. What follows is the function to perform on the selected elements. There are a lot of functions that can be called:
By the way, you can also do the above as follows:
Rather than using a selector, we reference the control directly.