Author: George Henne

Recently, there has been discussion on the web board about the proper way to make an app which can scroll. You might need to have more input fields than can fit on the screen at once: rather than going to a new form, why not have the user scroll the form down to get to the rest of the fields?

Web pages scroll easily. Native apps look different: they don’t scroll like web pages. To make AppStudio apps look more like native apps, that type of scrolling is turned off by default. But what if your app needs that functionality?

In the past, the only way to do this was to turn on ‘scrolling’ in Form Properties, which activates the iScroll library on the form. It works, but isn’t perfect, since it does not use the native scrolling of the device.

In AppStudio 5.2, we added ‘enableAppScrolling’ in Project Properties. It turns on native scrolling for your app. Let’s look at a couple of examples how to use this.
Continue reading “Making Apps which Scroll”

(This post is contributed by Frank Königl – Vielen Dank, Frank!)

I recently ran into an interesting problem. I wanted to change the color of a jQuery Mobile button when I hovered over it. The normal way to do this is to add this to styleHeaders in Project Properties:

  button:hover {background-color:yellow;}

This technique worked fine for other controls (like Container), but not jQuery Mobile Button.

I analyzed the source code using the Chrome Developer Tools and found something.
Continue reading “CSS Styling: The importance of !important”

AppStudio has had a PlaySound() function for some time which lets you play mp3 and other sound files. In AppStudio 5.2, we added a PlayTone() function, which lets you play sounds with a specific frequency, duration and optional volume.

Tones can provide useful feedback to users. They can also be used to for games, melodies and even to create musical instruments.

Here is how it looks:

PlayTone(440, 1000)

This plays a middle A for 1 second.
Continue reading “New PlayTone() function”

The latest build of Chrome on the desktop makes it easier than ever to open the Chrome Debugger to look at an app running on a device. This works on apps running in the browser, apps running from the Home Screen and PhoneGap apps. Here’s how:

1. Connect your device to your desktop (PC or Mac) via USB cable.

2. Open the Chrome Developer tools.

3. Click on the icon circled in red. Select “More tools”, then “Inspect devices…”:

4. The Dev Tools Devices window will pop up. Choose the running web app you want to debug and click on “inspect”.

5. A fresh Chrome Developer Tools window will pop up, connected to the app running on your device.

Here’s a YouTube video showing the same process:

https://youtu.be/Rp4HO7G0xJI

A number of our tutorials use weather data from OpenWeatherMap’s website. It provides information about current conditions for anywhere in the world, with an easy to use API. Best of all, it’s free, so long as you do not make more than 60 calls a minute or 50,000 per day.

Recently, they added a requirement for an API Key to access their service. An API Key is a string you supply with your request containing your unique identifier. They’re free: you can get them at http://openweathermap.org/appid.
Continue reading “OpenWeatherMap’s new API Key”

FileReader lets you read files into your app. While it has a few restrictions, it’s by far the quickest way to get the data from a file so you can manipulate it. It’s also surprisingly fast.
Continue reading “Using FileReader”