AppStudio 3: Moving, resizing and hiding controls

When planning for AppStudio 3, we realized we had to improve moving, resizing and hiding controls. There was little consistency: jQuery Mobile controls working differently than iWebKit, the names of the objects to be altered was inconsistent, jQeury Mobile 1.3 broke some stuff and certain operations that worked on Chrome and the desktop did not work at all on some versions of Mobile Safari.

Here’s what we did.

First, we added some new properties to all the controls: .Left, .Top, .Width and .Height. (Note they start with capital letters). Since these don’t conflict with the lower case versions of the same properties, we were able to customize how they work according the needs of the individual control. You can use them to set or get their values.

We made them more flexible than the built in properties. For example:

  TextBox1.Left = 100       'Sets the left position to 100px.
  TextBox1.Left = "100px"   'Does the same thing.
  TextBox1.Width = "50%"    'Makes the width of textbox 50% of the form width.
  HeaderBar1.Width = "100%" 'Makes the headerbar the full width of the form.

  TextBox1.Width = TextBox1.Height

Next, we came up with a single function to change all four of these at once:

  TextBox1.resize(100,100,"50%",32)

The order of the arguments is the usual one:

  .resize(left, top, width, height)

Hiding controls also needed some help. Setting .style.display=”none” stopped working on some of the jQuery Mobile 1.3 controls. The hide() function was inconsistently implemented. You can now do

  TextBox1.hide()
  TextNox1.show()

on all controls and get consistent results.

Please let us know if you find any controls which still misbehave. Keep in mind that some controls determine their bounds automatically based on their contents, so they may not always respect your wishes.