Author: George Henne

One of the new controls in AppStudio 5 is the Container. It has a couple of uses: you can create your own controls with it, or you can use it as a container for other controls. We’ll deal with the first use in this article.

First, a bit of background. Late in Version 4, we introduced a new Generic control. We realized that a lot more could be done with it, so for Version 5 we enhanced it and renamed it Container.

Any page of HTML is made up of Elements. The specifications for HTML define a few dozen Elements. Examples are Paragraph (“<p>”), Input (“<input>”) and Button (“<button>”). Each of these has a whole bunch of parameters, grouped by Classes, Attributes and Styles.

Controls (also called Widgets) are structures made up of one or more Elements, with their parameters defined to provide a particular appearance or behaviour.

What AppStudio essentially does is create fancy HTML pages by making it easy to set up these Controls, then let you use them in your program. The Container gives you a control with complete control over its appearance.
Continue reading “Container, Part 1: Make your own control”

Want to test how your app will look without have to download to a device? Recent enhancements to Chrome make this possible. Now it’s easy to watch the affect of different screen sizes and rotation on your app – all within the Chrome Debugger.

Run your app locally as usual. It will get started in Chrome. Open the Chrome Debugger by hitting F12 (option-command-J on Mac). See the phone shaped icon in the tab bar?

Continue reading “Simulate an Actual Device for Testing”

The Project Explorer is the table of contents for your app. Whenever you add a Form or a Control to a Form, it gets added to the Project Explorer. You can include files in your app by dragging them into the Project Explorer: in AppStudio 5, we expanded the types of files which can be dragged in. Here’s a project with a lot of different types:

Continue reading “Including Files with your App”

AppStudio lets you make native apps using PhoneGap Build (PGB) quickly and easily. PGB is a web service which compiles your web app into a native app and lets you download it, usually within 30 seconds. It’s much easier than downloading the whole PhoneGap toolchain to do this locally.

In AppStudio 5, we made a number of improvements to this process.
Continue reading “New, Improved Native Build Status”

AppStudio 5 makes it easy to have Modal Forms in your app. A Modal Form pops up over your app, dimming out the rest of the screen. The user has to close the Modal Form before continuing with the app. It’s useful for messages, password input or confirmations.

Modal Forms are created just like any other form. They can have the same controls, colors and backgrounds. A few properties need to be set differently:

• modal: True
• fullScreen: False
• left and top: value does not matter – form will be centered.
• width and height: pixels, percentages or ‘auto’

At runtime, show and hide modal forms like any other form:

Modal1.show()

There are a number of options you can set when opening a modal form. Set these using object syntax: inside {} braces, put key, value pairs. For example, to fade in the modal form over 1 second with a completely opaque overlay, do this:

  Modal1.show({fadeDuration: 1000, opacity: 1})

For the full set of options, see the docs.