If you’ve created a PhoneGap version of your project, the top of your screen might look like this on iOS:
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:
With the StatusBar plugin installed, you have a bunch of additional options for managing the status bar. See the full documentation here.
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.
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!
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.
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:
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.
(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:
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.
We’re pleased to announce AppStudio 5.2.1 is ready. New and improved stuff includes:
- All: Copyright date is now 2016.
- Chrome Icon: Home Screen icon updated for Chrome 47.
- Chrome SplashScreen: Add Description property.
- Chrome SplashScreen: If orientation is “natural”, set value to default (blank).
- Chrome SplashScreen: Use splashscreenTitle if set up.
- Controls: Twitter Follow now follows ‘user’.
- Installer: Fix version number
- Libraries: jQuery updated to 2.2.0
- Localization: Language files updated. Thanks, translators!
- PhoneGap: Sound files get deployed with project.
- Preferences: Fix item graying out.
- Project Properties: Fix StopOnError so it can be turned off.
- Runtime: Fix errors in older devices without Audio support.
- Runtime: Fix problem with PlaySound filenames.
- Runtime: PlaySound refactored for consistency with PlayTone.
- Samples: New PhoneGapMedia sample.
- Samples: PhoneGap samples now have icons.
- Toolbox files: new !i conversion.
- 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.
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:
This plays a middle A for 1 second.
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.