PhoneGap: Don’t overwrite the iOS Status Bar

If you’ve created a PhoneGap version of your project, the top of your screen might look like this on iOS:
Screen Shot 2016-04-26 at 11.36.57 AM

See how the title of the screen (“Volt”) is crowded into the status bar?

It’s easy to fix this. Add the following lines into configxml in Project Properties (PhoneGap section):

<plugin name="cordova-plugin-statusbar" source="npm" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="StatusBarStyle" value="lightcontent" />

Your app will now look like this:
Screen Shot 2016-04-26 at 11.36.37 AM

With the StatusBar plugin installed, you have a bunch of additional options for managing the status bar. See the full documentation here.

Posted in PhoneGap, tips | Comments Off on PhoneGap: Don’t overwrite the iOS Status Bar

How to read barcodes

There are a few options for reading bar codes: for web apps, for Phonegap apps and using an external scanner. Let’s look at each one and see what works.
Continue reading

Posted in tips | Comments Off on How to read barcodes

What’s new in iOS 9.3?

Apple announced iOS 9.3 yesterday. Almost 80% of iOS devices are on iOS 9, so you can expect most of your users to be on it in the near future. What’s new for AppStudio developers?

Probably the biggest change is that the 300ms delay on tapping the screen is gone. We have been including FastClick as a workaround. Android Chrome got rid of the need for FastClick a while ago. Unless you have lots of users with old devices, you can probably set FastClick in Project Properties to ‘No’. Your app will be a little smaller and load more quickly.

There is no sign that the outstanding bugs we have reported were fixed.

Here’s a pretty good description of more which is new in iOS 9.3:

Safari on iOS 9.3, Responsive Images, iPhone SE, shrink-to-fit and other new APIs

Let us know if you spot anything else!

Posted in news | Comments Off on What’s new in iOS 9.3?

Android Web Apps: SplashScreens and Icons

Splash screen support for Android Home screen apps was added in Chrome 47, released in December 2015. It gives your web apps a look much more like a native app at startup.

There are a few new items in Project Properties for this. They are grouped together under the ‘WebApp Chrome’ heading.
Continue reading

Posted in Android, tips | Comments Off on Android Web Apps: SplashScreens and Icons

PhoneGap Build News: Google, Icons and Splashscreens

Breaking news – PhoneGap has just announced that PhoneGap 6.0.0 is now being used by PhoneGap Build. Here’s the announcement:

it’s still too new for us to say what difference it will make.

To use it with AppStudio, put ‘cli-6.0.0’ into PhoneGap Version in Project Properties.

Today, a roundup of news having to do with PhoneGap Build and AppStudio. As usual, let us know if you figure out solutions (or find more problems).

Google Play Store

Users with apps compiled with PhoneGap Build are getting this message from Google:
Continue reading

Posted in news, tips | Comments Off on PhoneGap Build News: Google, Icons and Splashscreens

Making Apps which Scroll

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

Posted in tips | Comments Off on Making Apps which Scroll

CSS Styling: The importance of !important

(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

Posted in tips | Comments Off on CSS Styling: The importance of !important

AppStudio 5.2.1 released!

We’re pleased to announce AppStudio 5.2.1 is ready. New and improved stuff includes:

  1. All: Copyright date is now 2016.
  2. Chrome Icon: Home Screen icon updated for Chrome 47.
  3. Chrome SplashScreen: Add Description property.
  4. Chrome SplashScreen: If orientation is “natural”, set value to default (blank).
  5. Chrome SplashScreen: Use splashscreenTitle if set up.
  6. Controls: Twitter Follow now follows ‘user’.
  7. Installer: Fix version number
  8. Libraries: jQuery updated to 2.2.0
  9. Localization: Language files updated. Thanks, translators!
  10. PhoneGap: Sound files get deployed with project.
  11. Preferences: Fix item graying out.
  12. Project Properties: Fix StopOnError so it can be turned off.
  13. Runtime: Fix errors in older devices without Audio support.
  14. Runtime: Fix problem with PlaySound filenames.
  15. Runtime: PlaySound refactored for consistency with PlayTone.
  16. Samples: New PhoneGapMedia sample.
  17. Samples: PhoneGap samples now have icons.
  18. Toolbox files: new !i conversion.
  19. ToolBox: Add new files to jqxColorPicker

Download the latest version from ‘Check for Updates’ under then AppStudio Help menu. It is a free upgrade for AppStudio 5 users.

Posted in news | Comments Off on AppStudio 5.2.1 released!

New PlayTone() function

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

Posted in tips | Comments Off on New PlayTone() function

PhoneGap: Getting rid of the Content-Security-Policy warning

I was messing around with a PhoneGap app using the Chrome Debugger’s Inspect feature, which lets me examine a running PhoneGap app for error messages, source code, elements, etc. I noticed an error message in the console I hadn’t seen before:

No Content-Security-Policy meta tag found. Please add one 
when using the cordova-plugin-whitelist plugin.

Continue reading

Posted in PhoneGap, tips | Comments Off on PhoneGap: Getting rid of the Content-Security-Policy warning