KlugDialog

Overview

AIR's built-in alert on the Mac looks like it comes from another decade. KlugDialog shows the real thing: native macOS alert sheets attached to your app window, with the app icon, the system font and the familiar button styles.

Beyond simple alerts it covers what desktop apps need every day: dialogs with text fields (for example user name and password, also as secure fields), several buttons with their own styles, and a progress sheet ("Connecting…") that your code updates and dismisses when the work is done.

Everything is asynchronous: show() returns at once, and your callback receives the chosen button. KlugDialog runs in the Mac version of our apps, our proof of concept.

New on Android: the same dialogs as native Android dialogs. Text fields stay above the keyboard on every screen, also in landscape on tablets, where the buttons used to disappear behind it; passwords, user names and e-mail addresses are never auto-capitalised, and e-mail fields get the e-mail keyboard. The Android version also stacks long button lists and offers a plain spinner, and runs in the Android version of our apps.

Also on iOS: since version 1.2 the same API shows native iOS alerts, dialogs with text fields and a progress dialog, so one code path serves Android, iOS and macOS.

Features

• Self-contained: one ANE, no core library or dependency ANEs to add
• Native macOS alert sheets with up to three buttons
• Informational, warning and critical styles
• Dialogs with any number of buttons and text fields, including secure fields
• Progress sheet that can be updated and closed from code
• Dialogs can be dismissed from code
• Callbacks with the chosen button and the entered values
• Android: fields above the keyboard, no auto-capitalised passwords, e-mail / number keyboards, light and dark theme

Supported platforms

On other platforms isSupported returns false, so your app can fall back to its usual dialogs there.

Getting started

Add the extension to your application descriptor:

<extensions>
    <extensionID>com.klug.dialog.Dialog</extensionID>
</extensions>

Code examples

Five complete flows. Every call returns at once; the result arrives later in your callback, so the app never blocks while a dialog is open. Full documentation →

import com.klug.dialog.Dialog;

var dialog:Dialog = Dialog.getInstance();

if ( dialog.isSupported )
{
    dialog.show( "Saved", "The recording is in your library." );   // one "OK" button
}
else
{
    showAppAlert( "Saved" );   // your app's own fallback dialog, e.g. on Windows
}

dialog.show( "Delete recording?", "This cannot be undone.",
    [ "Delete", "Keep" ],
    function( index:int ):void
    {
        // index = position in the buttons array;
        // -1 = closed without a button, e.g. the Android back key
        if ( index == 0 ) deleteRecording();   // your app
    },
    Dialog.STYLE_WARNING );   // alert style of the macOS sheet

var buttons:Array = [
    { label:"Cancel",  style:4, tag:0 },   // style 4 = cancel, 3 = destructive
    { label:"Sign in", style:0, tag:1 }
];
var fields:Array = [
    { placeholder:"E-mail", text:lastEmail, keyboardType:7 },   // 7 = e-mail keyboard
    { placeholder:"Password", secure:true }                 // never auto-capitalised
];

dialog.present( "Sign in", "Please enter your account.", true, buttons, fields,
    function( tag:int, values:Array, cancelled:Boolean = false ):void
    {
        if ( cancelled ) return;   // closed without a button (tag -1)
        if ( tag == 1 ) signIn( values[0], values[1] );   // values in field order
    },
    null, "dark" );   // theme on Android and iOS; macOS follows the system

// your own id: the same dialog is updated and closed with it
dialog.progressShow( "connect", "Connecting", "Contacting the server…", false,
    function():void { trace( "progress dialog closed" ); } );   // fires once

dialog.progressUpdate( "connect", "Signing in…" );

// when the work is done, or has failed
dialog.progressDismiss( "connect" );

// pass your own id as the 7th parameter to close the dialog later
dialog.present( "Waiting for the camera", "Tap Cancel to stop waiting.", false,
    [ { label:"Cancel", style:4, tag:0 } ], null,
    function( tag:int, values:Array ):void { stopWaiting(); },   // your app
    "waitCamera" );

// the camera has answered: close the dialog, no callback fires
dialog.presentDismiss( "waitCamera" );

API overview

Buy KlugDialog

A yearly licence for one AIR application, with all updates for 12 months. After payment you receive the extension, the ActionScript library and the documentation by e-mail, usually within one business day. Licence and terms

Requirements