Using calculations in bounds properties

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”

Responsive Design: Rotating Your Device

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”

Styleheaders: Advanced Styling

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”

What the $(“#?

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:
http://api.jquery.com/category/selectors/

You may see something like

  $("#Button1").css("color","red")

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:
http://api.jquery.com

By the way, you can also do the above as follows:

  $(Button1).css("color","red")

Rather than using a selector, we reference the control directly.