Category: tips

AppStudio 8 brings Dark Mode support to your apps. To enable it, go into Project Properties and set backgroundColor to inherit

Dark Mode makes software easier on your eyes at night, according to some. It certainly makes it easier for other people in the room who are trying to sleep.

Here’s how to turn on Dark Mode on Windows and on MacOS.
For Android, the setting is in Chrome menu, settings, themes, dark. (Thanks, Gary!)

Dark Mode is a fairly new feature for both Windows and MacOS. Not all frameworks, utilities and apps are ready for it.

Dark Mode in AppStudio

Dark Mode is only partially supported in AppStudio 8.0. The Design Screen will show the app you are creating in Dark Mode (if your computer is set to Dark Mode). However, not all features in AppStudio itself support Dark Mode yet.

AppStudio 8 is built using wxPython 4.0, which is a wrapper for wxWidgets. The developers of wxPython expect to have support for Dark Mode in wxPython 4.1, which is under development. We expect to adopt that as soon as it is released.

AppStudio 8 brings a number of improvements to PhoneGap Build.

Two factors made these changes important. First, as of November 1, 2019, Google Play toughened up its requirements for apps. Second, as the number of device screen sizes proliferated, dozens of sizes of icons and splash screens had to be supplied, along with modifications to the config.xml.

We made things much simpler for our users. Just supply a 1024×1024 icon and a 2732×2732 splash screen, and AppStudio will automatically generate all the required images and update the config.xml file.
Continue reading “AppStudio 8: What’s new with PhoneGap?”

Electron is a tool which lets you build Windows and MacOS apps. Furthermore, it allows you to include Node libraries in your app. There are more than a million of them, adding all sorts of features.

AppStudio 8 makes it much easier to use Electron in your project. Add the libraries you need (if any), then choose Electron from the Run menu to build your project.

Specific changes in Version 8 are:

• ‘Make Desktop App using Electron’ added to Run menu
• ‘Make Desktop App for Distribution’ added to Run menu
• Electron build now uses the Electron-build library.
• ElectronWeather sample updated to use electron-build.
• Electron Wiki article updated to show how to use electron-build manually.

There is no need to used the command line or enter npm commands with AppStudio 8.

There is a tutorial which takes you through creating your first Electron app. You can try here: Using Node and Electron to build Desktop Apps

Also check out the electronWeather sample, which uses the weather-js Node library to get weather information from the MSN Weather API. You could access the API directly, but the library makes this much, much easier.

If you’re like everyone else, after a couple of hours of testing your app in Chrome, your Chrome window looks something like this:

Look at all those tabs!

You can stop that from happening and load your app more quickly using the Clutter Free extension.

Continue reading “Testing your app: Get rid of all those Chrome tabs!”

Apple has announced that the next version of Safari will no longer support SQLite. This has been confirmed in the beta of iOS 13 – it’s gone. Update: It can be turned back on. See “Update” below.

There’s no need to panic. There are workarounds, which I’ll get to later in this post. Also, there are no indications that Google will do the same with Chrome.

Some History

SQLite was introduced into browsers many years ago as WebSQL. It was a great idea: SQLite is small, powerful and solid. You can make great apps with it. The problem came from the standards committee. W3C prefers a clear standard with alternative implementations: saying “Just use SQLite” isn’t good enough. They decided, in 2009, to deprecate WebSQL and replace it with IndexedDB.

(Behind the scenes, I hear there were some heavy politics going on. Microsoft and Oracle were both very unhappy with WebSQL using SQLite – they each had their own established database software and did not want an upstart competitor to become standard.)

Regardless, Safari and Google continued to include WebSQL in their browsers. FireFox and IE did not. https://caniuse.com/#search=websql

The suggested replacement, IndexedDB, is not an SQL database. It’s more of an indexed file system. It’s been criticized for being slow, clumsy and inconsistently implemented. For more information, see this article: https://developers.google.com/web/ilt/pwa/working-with-indexeddb

Alternatives
Continue reading “The Future of SQLite (Updated)”

Version 7 of AppStudio made it easy to create Progressive Web Apps, which can be installed from the browser.

Chrome 76 just made installing them easier. Rather than going through a menu to install your app, there is now an easy plus (+) icon in the URL bar:

Thanks to Bernd Sommer for spotting this!

On your mobile device, sharing something is usually as simple as clicking the Share button, choosing which app you want to send it to, and then who you to share it with. Now you can add this capability to your own apps.

Here’s what the share button looks like on iOS:

Click on it, and you’ll see something like this:

Use the navigator.share() function in your app to bring up the Web Share picker. Not all browsers have this function, so check if it exists before calling.

You’ll need to put the data you want to pass to the app share in the argument to the share() function. For more details, see this Tech Note: https://wiki.appstudio.dev/Web_Sharing

Setting your app as a Web Share Target

On Android, you can add your app to the Web Share picker, so other apps can call yours. Your app has to be a PWA (which AppStudio now makes automatically) and needs to register itself.

It will now appear on the Web Share picker:

You can see the code to do this in this Tech Note: https://wiki.appstudio.dev/Web_Sharing.

AppStudio 7.4 brings support for Progressive Web Apps (PWA). The idea behind PWAs is to give users a more native app like experience when using Web Apps.

One of the important features of PWAs is the ability to run when there is no internet connection. To do this, the app needs to save all its components locally when it initially loads from the website. The app can then load those instead of going to the web each time you run the app.

Before version 7.4, AppStudio did this using Application Caching. Each app had a manifest containing the list of files to be cached. It worked fairly well, but was not perfect. PWA was designed to fix the problems with Application Caching. The Chrome and Safari teams have announced that Application Caching will be deprecated in future releases of their browsers.

With iOS 12, Apple now supports PWAs (Chrome has for a while), so it was time to update AppStudio to use the new standard.

The good thing is that the change is mostly transparent to AppStudio developers and their users. AppStudio takes care of all the code that is needed to implement a PWA automatically. There are two changes you’ll need to be aware of:
1. You’ll need to provide icons called 72.png, 192.png and 512.png. Put them in the ‘icons folder of your app.
2. The old ‘manifest’ property has been renamed ‘extrafiles’. Put the names of any extra files or folders your app needs here. They will then be deployed with your app. Files named in your old manifest property are automatically carried over.

There are more details about PWAs in our wiki: https://wiki.appstudio.dev/Progressive_Web_Apps.

With the release iOS 12.2, we are able to add a couple of new features to the Bootstrap 4 Input control. (These features are in Chrome 69+ as well). You’ll need AppStudio 7.3.1.2.

These new features will help users enter information more quickly and accurately.

DataList

DataList lets you control the hints the keyboard brings up as the user type into an Input control.

Suppose our datalist is the following: Bob, Carol, Ted, Alice and Caroline. Here how it will look on iOS:

Continue reading “New Bootstrap 4 Input features”

AppStudio 7.3.0 added support for Node and Electron. How does this fit into the AppStudio ecosystem?

In the top row, we have AppStudio itself. As always, you use it to create apps. They can be used immediately as web apps – no further processing is required. They’ll run wherever there is a compatible browser.
Continue reading “AppStudio, PhoneGap and Electron”