iOS 11: The top of the screen

iOS 11 brought a change to the way your app gets positioned on the screen. A reason for this is the new iPhone X, with its ‘notch’ at the top. However, this change affects all iOS devices, not just the iPhone X.

Apple introduced a new parameter for web pages called viewport-fit. iOS devices have a ‘Safe Area’, which is screen space the app can safely use. viewport-fit defines how your app uses the Safe Area. If set to contain (the default) your app will be confined to the Safe Area. If set to cover, it will use the entire screen.

In AppStudio 6.3.0.3 (released today), we have added a new viewportFit project property you can use for your app. It works together with the StatusBar property to define what is on top of the screen.

Let’s look at the various combinations:

StatusBar: black-transluscent viewportFit: contain

This is how many apps will look running iOS 11 with AppStudio before 6.3.0.3. Notice the empty space above the Header? It actually takes the color of your app’s background. The status bar info is there, but invisible since it is white on white.

StatusBar: black-transluscent viewportFit: cover

By changing viewportFit to cover, the app now fills the whole screen. But now the status bar info is showing IN our Header. If you want to use this combination, add 20 pixels on top of the Header for the status bar.

StatusBar: black viewportFit: contain

Making the status bar black means that your app gets positioned below it. No problems here!

StatusBar: black viewportFit: contain

If the status bar is black, it doesn’t seem to matter if you use cover or contain.

Accessing Volt from a PhoneGap app

A couple of days ago, one of our users asked a good question on our discussion board: Can Volt’s services be used from a PhoneGap app?

It sounds like a reasonable request. PhoneGap apps are compiled web apps which run as native apps. AppStudio is very good at making these. Volt is a collection of services, including features such as serverStorage, which lets users of your apps easily save or share data on a server.

It turns out it is easy to do and works nicely. You need to do two things:
1. In Project Properties, set the Volt Domain to the location of your app on Volt. For example,
storage-introduces-owlishly.volt.live.
2. In Project Properties, add the path of the Volt library to extraheaders. For example:
<script src='https://storage-introduces-owlishly.volt.live/api/client/volt.js'>

(Replace storage-introduces-owlishly with whatever your app’s domain name is. Custom domains will work fine too.)

Use your own Domain Name with your Volt App

You can now specify your own custom Domain Name for your Volt app. Your app can have a friendly URL such as

https://myapp.mycompany.com

instead of the name Volt assigns it. You’ll need a Volt membership to do this.

Notice the “https”? It even takes care of making sure there is a certificate in place, so your site is secure. The app is still served from the Volt server, so all the files and MIME types are in the right place.

Here’s how to set this up.
Continue reading “Use your own Domain Name with your Volt App”

Making your app fit: ScreenMode

We’ve had a few blog posts discussing how to use Responsive Web Design to make apps which look great on any screen size. But what if that is too much trouble or your app is already done? Are there any options?

AppStudio 6.2.3 brings a new feature to help with that. ScreenMode is a form property which sets how a form will display on the screen at runtime. It has four settings:

  • Full Screen
  • Actual Size
  • Center
  • Zoom

Continue reading “Making your app fit: ScreenMode”

What does “useStrict” do?

AppStudio 6 introduces a new project property called useStrict. It catches a number of previously non fatal errors in your code and gives error messages.

Here’s an example. If you have the following code:

a = "george"

where a has not been defined, you will get an error with useStrict set to True. There is no error if it is False. UseStrict forces you to have better code.

The solution is to declare the variable before use, using Dim for BASIC and var for JavaScript.

Dim a    ' BASIC
var a;   // JavaScript
a = "george"

Caution: If you turn useStrict on with an existing project, you need to do a complete retest of every part of your project. It will throw errors in code which worked before.

Here is a list of issues found by useStrict:

  • Disallows global variables. (Catches missing var declarations and typos in variable names)
  • Silent failing assignments will throw error in strict mode (assigning NaN = 5;)
  • Attempts to delete undeletable properties will throw (delete Object.prototype)
  • Requires all property names in an object literal to be unique (var x = {x1: “1”, x1: “2”})
  • Function parameter names must be unique (function sum (x, x) {…})
  • Forbids octal syntax (var x = 023; some devs assume wrongly that a preceding zero does nothing to change the number.)
  • Forbids the with keyword
  • eval in strict mode does not introduce new variables
  • Forbids deleting plain names (delete x;)
  • Forbids binding or assignment of the names eval and arguments in any form
  • Strict mode does not alias properties of the arguments object with the formal parameters. (i.e. in function sum (a,b) { return arguments[0] + b;} This works because arguments[0] is bound to a and so on. )
  • arguments.callee is not supported
  • Keywords are checked, including some new ones: implements, interface, let, package, private, protected, public, static, and yield.

Using appStorage to save App-level Data

Previously, we looked at serverStorage, which allows you to save data from your app on the Volt server instead of on the device. serverStorage is saved for the user of the app – other users cannot look at it.

appStorage is data which is shared by all the users of the app. Some possible uses are:

  • A product list, with the latest prices and availability.
  • A message to all users.
  • A table with the latest tax rates or exchange rates.

appStorage works just like serverStorage. It has the same functions. The big differences are that all users of the app see the exact same data, and only Dashboard apps can modify it.

Regular users of the app can use getItem() and getAllItems.

The function clear(), removeItem() and setItem() can be used if the following two conditions are met:

  1. Dashboard Access in Project Properties is set to true.
  2. The name used to sign into the app is the same as the name used to upload the app to Volt.

To use these functions, there is an additional 3rd parameter with the VoltID of the app whose appStorage is to be changed:

appStorage.setItem("SimpleString", "ABCD", "XxXxXx", done);

Dashboard apps include the Dashboard itself, as well as apps which have Volt Dashboard Access project property set to True. You can check NSB.voltDashboardAccess at runtime to see if Dashboard access is enabled.

This is a powerful features, but it should be used wisely. Set Volt Dashboard Access to false for your users so they only read the data in appStorage. If you have an app which creates and changes data for them, do so in a separate app with Volt Dashboard Access set to true.

Using serverStorage to save data on the Volt Server

AppStudio 6.1 brings a new Volt feature: serverStorage. It lets you save and retrieve data on the Volt server. Here are a few uses:

  • As a backup: Keep critical data in the server, so if the phone gets lost or damaged, information is not lost.
  • Multiple devices: If the user runs your app on multiple devices (desktop included), your app can pick up where it left off with the same data.
  • Support: As the owner of the app, you can examine what is in your user’s serverStorage.
  • Data Sharing: The owner of the app can read and write to users’ serverStorage using a different app. Use this to send specific information to users, or to get data the user has collected.

It’s easy to use. You save and retrieve values using a named key. The values can be of any data type: numbers, strings, arrays or objects. There are no limits on the number of values you keep, nor how big the values can be, other than that they be reasonable. If you need to use a lot of data, check with us at support. Here are some examples:
Continue reading “Using serverStorage to save data on the Volt Server”

Using the Clipboard

ClipboardData lets you access the data on the Clipboard. You can:

  • Use and modify the data cut or copied to the clipboard
  • Use and modify data pasted from the clipboard.

It can be used in Input, Textarea and Textbox controls in all frameworks. It controlled by the oncopy, oncut and onpaste events. The information about the clipboard is passed as a parameter to these events.
Continue reading “Using the Clipboard”