Using System Fonts

Since the iPhone came out, Helvetica has pretty much been the standard font for all devices. It’s clean, simple and readable. However, both Apple and Google are tinkering with the default font to make it look even better on small screens. Here are the contenders:

helvetica

San Francisco

roboto

Starting with AppStudio 5.1.2, you have more control over these fonts, giving your apps a more native look.

Here’s how it works:
Continue reading “Using System Fonts”

AppStudio 5.1.2 released!

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

  1. Code Window: fix a false negative syntax message
  2. Controls: FlipToggle fixed on Windows 7 + IE11.
  3. Controls: Fix problem with Panels overlapping. (Thanks, Buck!)
  4. Design Screen: Add some retry/delays to deal with IE refresh issues.
  5. Design Screen: Fix problem with RTL languages.
  6. Libraries: revert jQuery-modal. Newer version has issues.
  7. PhoneGap: Add new SplashScreen commands to configxml.
  8. Runtime: ChangeForm now calls onShow after transition completes.
  9. Runtime: Updates to speech support
  10. Runtime: Use system fonts where possible.
  11. Samples: New Breakout game sample using CodeHS library.

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

Using calculations in bounds properties

Ever try to center a button on a form? Dead center, from top to bottom, from right to left, no matter how the size of the form changes?

You can’t put a number like 100 into the left or top property. It won’t respond to different screen sizes.

You can’t put a percentage (like 50%): it will align the top or left of the button at 50%, not the center of the button.

There’s a handy calc() function you can use instead.
Continue reading “Using calculations in bounds properties”

PhoneGap: Change to configxml for SplashScreens

(This blog posted was updated with additional information on Oct 23, 2015, Thanks, Vagner!)

The recent updates to PhoneGap have resulted in another change being needed to your configxml.

In Project Properties, add these lines anywhere in the middle of PhoneGap configxml:

<gap:plugin name="cordova-plugin-splashscreen" source="npm" />
<preference name="AutoHideSplashScreen" value="true" />

Without this, your splashscreens will not appear.

AppStudio 5.1.1 released!

We’re pleased to announce AppStudio 5.1.1 is ready. New stuff includes:

  • Language: new Speak(text, voice) function.
  • MacOS: IDE language defaults to the local language.
  • Education: New Kesbath Computer Games course.
  • Controls: HTMLView – contentEditable fixed.
  • IDE: Fix some spelling errors.
  • Libraries: jQuery-modal bumped to 0.5.9
  • MakeEXE: Python version bumped to 2.7.10
  • Open Sample: Search results now much easier to see.
  • Runtime: Python version bumped to 2.7.10
  • Samples: New Speak sample.
  • Samples: new SpeechSynthesis samples.
  • Translations: Many of the translations are now caught up to Version 5.
  • Projects: backgroundImages for Projects and Forms cleaned up.
  • Forms: backgroundImage added to manifest automatically.
  • MakeEXE: problem with window style attributes fixed.
  • Forms, Projects: Gradient images work consistently in backgroundImage.
  • Forms: If designHeight and designWidth are 0, they default to Form’s height and width.

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

PhoneGap: Important change to configxml WhiteList

If your PhoneGap app accesses external websites, there is an important change you need to make to your configxml Project Property.

Make the the following lines are in your configxml:

<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<allow-navigation href="*" />
<access origin="*" />

The change seems to be a result of PhoneGap switching to npm to store its plugins. Be sure to read this blog post for more information on the change.

Edited 05/18/2016: Added allow-navigation line. It’s recommended that the href argument be as specific as possible. More information here: https://www.npmjs.com/package/cordova-plugin-whitelist

PhoneGap Build: iOS 9 support delayed

The PhoneGap team posted the following to their blog yesterday:

iOS 9 is not officially supported yet, and there are some known issues. The Cordova open-source project team is hard at work on Cordova iOS 4.0, which will include iOS 9 support. For loads of helpful Cordova iOS news, keep an eye on Shazron’s blog, as well as the Apache Cordova blog.

Some of the problems notes by users on the PhoneGap Build Support forum are:

  • Scaling is wrong – elements are the wrong size.
  • System bars are wrong size.
  • In app browser issues

In the meantime, PhoneGap advises using the latest version (if you don’t specify “phonegap-version” configxml, the latest version will always be used) and to use the npm plugins (see this blog post!)

PhoneGap Build: npm plugins

PhoneGap Build is changing how they organize their plugins. You will need to make some changes to configxml in Project Properties as a result.

For each PhoneGap plugin you use, you need to add a line to configxml which declares the name of the plugin. PhoneGap Build can then add it to your app. These used to be saved in a folder on PhoneGap’s servers: they are now stored in an npm repository.
Continue reading “PhoneGap Build: npm plugins”