Category: tips

Posted on

Sliding and Fading forms and controls

AppStudio 5 lets you use visual effects on controls and forms. The new functions are:

  • fadeIn(msecs): Fades a form or control in. msecs is milliseconds to take for the effect. A value of 2000 would be 2 seconds. The default is 500. It is the same as doing a ctrl.show() function or ctrl.style.display = “block”, with, but the visual effect.
  • fadeOut(msecs): Fades a form or control out. It is the same as doing a ctrl.hide() function or ctrl.style.display = “none”, but with the visual effect.
  • slideDown(msecs): Displays a form or control as if it slid down from the top. It is the same as showing, but with the visual effect.
  • slideUp(msecs): Hides a form or control as if it slid up to the top. It is the same as hiding, but with the visual effect.

These effects will work on all controls: buttons, textboxes, containers, grids, etc.

Examples

Image1.fadeIn(1000)      'Take one second to fade an image in
Image1.slideUp()         'Hide the image by sliding it up
MessageForm.fadeIn(2000) 'Display a form called MessageForm over the current one.

ChangeForm
You can also use visual effects with the ChangeForm command. It has some new parameters:

ChangeForm(newForm[, hideEffect[, showEffect[, msecs]]])

If you just have the first parameter, ChangeForm will work as it always has. The current form will be hidden and the newForm will be displayed. hideEffect and showEffect can be “fade”, “slide” or “hide”. If you only supply only one effect (which looks best) the same effect will be used for hiding the old form and showing the new one. The last parameter is the time to take performing the effect.

Examples

Fade the current form out and fade in Form2:

ChangeForm(Form2, "fade")

Slide Form2 in. Take 1 second to fade out, 1 second to fade Form2 in:

ChangeForm(Form2, "slide", 1000)

Hide Form1, then take 1 second to fade in Form2:

ChangeForm(Form2, "hide", "slide", 1000)

Use ChangeForm instead of Form1.fadeOut() and Form2.fadeIn(). It’s easier, and your form’s close and open functions will be called.

Posted on

Updated Open Samples window

As the number of samples that come with AppStudio ever increases, we wondered about ways to make to easier to find relevant samples. There are close to 200 of them now: something needed to be done.

Here’s the new Open Samples window for AppStudio 5:

opensamples

We made two major changes: Samples are now organized into folders and subfolders. Looking for samples showing mobile device features? They’re in the Features folder, in a subfolder named Device Features.

There is also a search bar. Enter in what you are looking for, and it will look in the names and descriptions of the samples for matches.

Click on the sample you need and it will open.

Posted on

New Function List for the Code Window

When we were coming up with ideas for AppStudio 5, we looked at the blank Toolbox space beside the Code Window. Could we do something useful with it?

Yes, we could: We display a list of the functions and subroutines in the current Code Module, along with their calling arguments:

Codewindow2

Plus, if you click on a function, it will go to it in your code. The items are sorted in alphabetic order, not in the order they actually appear in the code.

As a bonus, there are selections to go directly to the top or bottom of the page.

Posted on

Using the new Calculation control

The Calculation control lets you display the result of a calculation without doing any coding. As the input values of the formula are changed, the value displayed in the control is automatically updated.

Screen Shot 2015-01-16 at 11.15.43 AM

It’s much like a Label, in that it displays a simple text string. It has many of the same properties: font, alignment, etc. However, instead of a caption, it has a formula. Each time you enter a character on the screen, formula is reevaluated and the new result displayed.

Let’s have fun with some formulas:
Continue reading “Using the new Calculation control”

Posted on

Using the new Generic control

Note: This control was replaced by the Container control in AppStudio 5. It had the same features, plus lots more.

Recently, we added the new Generic control. It’s simply a wrapper to make it easy for you to create a custom control. To use it effectively, you need to know a little about HTML. The control, by default, creates a simple <div> element, with a number of standard properties.

By setting its HTMLTag, attribute and class properties, you can transform it into almost any kind of HTML element. It will position properly on the form and process all of its events.

Today, we are going to use it as a wrapper for a jQWidgets control. We have already implemented many of them in the Toolbox, but there are some which have not been done yet. Using a Generic control, we can wire them in.

We’ll pick a fairly simple one: the jqxDateTimeInput. It displays a nice looking calendar which can be used to pick dates.

Screen Shot 2015-01-21 at 2.43.24 PM
Continue reading “Using the new Generic control”

Posted on

Locking screen orientation on Android

Chrome 28 and higher now supports setting the orientation in your app. Simply do the following:

 screen.orientation.lock("landscape")
 screen.orientation.lock("portrait")

The screen will then shift to the orientation you specify and ignore the actual orientation of the device.

This only works on Chrome. If you try to execute this code on an iPhone, it will get an error and the orientation will not be affected. To improve the code above so it runs without errors, do the following:

If screen.orientation <> undefined Then
  screen.orientation.lock("landscape")
End If

The screen orientation still won’t change on an iPhone, but at least there won’t be an error!

Posted on

Using the PhoneGap CLI

iconTo date, we’ve encouraged our users to use PhoneGap Build to make their native apps. It’s quick, easy to use and meets the needs of most users. PhoneGap Build is a wrapper built on top of the open source Cordova engine. PhoneGap CLI lets you work directly with Cordova, which has a few advantages:

  • Build takes place on your local machine – no uploading to a service
  • Free – PhoneGap CLI is open source.
  • No limit on number of projects
  • Use the latest plugins: Sometime developers have newer versions of their plugin that are not in PhoneGap Build yet.
  • Use PlugIns which are not in PhoneGap Build at all.
  • Use custom PlugIns you have developed yourself.

But there are a few downsides too:
Continue reading “Using the PhoneGap CLI”