[Engine-devel] UI Plugin API improvements

Vojtech Szocs vszocs at redhat.com
Thu Mar 28 15:24:59 UTC 2013


Hi guys,

I've just merged some UI Plugin patches that improve existing API functions, as well as add some new API functions. Please read on to learn what's new.


Modal dialog API
================

Function improved: showDialog

New signature:
    showDialog(title, dialogToken, contentUrl, width, height [, options])

Example usage:
    showDialog('My Dialog', 'my-dialog', 'http://www.foobar.com/', '800px', '600px', {
            // Default value = empty array (no buttons)
            buttons: [
                {
                    label: 'Do stuff',
                    onClick: function() {
                        alert('Bump!');
                    }
                }
            ],

            // Default value = false
            resizeEnabled: true,

            // Default value = true
            closeIconVisible: true,

            // Default value = true
            closeOnEscKey: true
    });

Notable changes:
* modal dialogs now look & feel the same as standard WebAdmin dialogs
* width & height are strings containing CSS units
* the reason why buttons default to empty array is to give plugin authors the choice to provide custom buttons (or similar input elements) via dialog content (iframe), and use HTML5 window.postMessage to call the plugin (coming soon!)

--

New function: setDialogContentUrl

New signature:
    setDialogContentUrl(dialogToken, contentUrl)

Example usage:
    setDialogContentUrl('my-dialog', 'http://www.example.com/')

--

New function: closeDialog

New signature:
    closeDialog(dialogToken)

Example usage:
    closeDialog('my-dialog')


Tab API
=======

Functions improved: addMainTab & addSubTab

New signatures:
    addMainTab(label, historyToken, contentUrl [, options])
    addSubTab(entityTypeName, label, historyToken, contentUrl [, options])

Example usage:

    // Tab is left-aligned by default
    addMainTab('Foo Tab', 'foo-tab', 'http://www.foo.com/');

    // Tab is right-aligned via options object
    addSubTab('VirtualMachine', 'Bar Tab', 'bar-tab', 'http://www.bar.com/', {
        alignRight: true
    });

--

Regards,
Vojtech



More information about the Devel mailing list