Version 4 > Developer's Guide > User Interface

User Interface

The administrator back-end is at:

/cgi/ex.cgi/admin
/cgi/ex.cgi/admin/<Module>

The base panel of the admin interface is a launcher menu that lets you launch other panels and interfaces, as needed. It includes all of your plugins, organized into categories. The Overview category includes general views of your whole system or site, including:

  • alternative launcher panels, such as the v3 webtop, special Dashboards
  • links to your website front-ends
  • help

Control Panels

If your plug-in partitions its material by section, you can start with a section selector, as in v3. For CMS tools, it may be friendlier (fewer clicks) to just show all of the available child objects with their section identified. For example, a calendar tool could just show all of the available calendars in all sections the admin has access to, rather than asking them to select a section first.

2-pane control panels (as used in the old Document plug-in, for instance) are no longer supported.

UI Class

The ExSite::UI class replaces v3's ExSite::HTML class. It has a lot of the same sorts of widgets, but they are called in an OOP manner, eg.

$out .= &ExSiite::HTML::BasicBox(%options);   # v3
$out .= $ui->BasicBox(%options);   #v4

Although similar, many of the widgets have been replaced with Bootstrap equivalents. There are a few new widgets in v4:

widgetdescription

navitem

generic clickable element

dispitem

generic display element

ErrorMsg

displays an error message

SuccessMsg

displays a confirmation message

HelpMsg

displays help information

SuccessBox

same as SuccessMsg, but with a title and frame

HelpBox

same as HelpMsg, but with a title and frame

AlertBox

a floating dialog, that can be dismissed

Figure

a graphic with a caption

TreeView

replaces old DynList

OverlayFrame

an iframe that floats over the main screen

TitleBar

an application titlebar with optional links

Menu

a vertically-stacked menu of links

Spinner

a please-wait spinner

FATool

a small icon tool button, using Font Awesome

The calling conventions of these widgets have been normalized and made consistent across all calls. There are some standard parameters that can be passed to many of these widgets:

parameterdescription

tone

good, bad, warning, important, neutral - sets the general styling of the widget

size

l, m, s - sets the size of the widget

ucicon

name of a unicode icon to use

faicon

name of a Font Awesome icon to use

icon

url of an image to use as an icon

confirm

pops up a confirmation dialog with this message when clicked

Note that buttons and tools, which accept an url parameter to link to something, can also accept a links parameter, which is a list of things to link to. This will generate a pop-up menu when clicked.

The OverlayFrame widget is particularly useful when you switch contexts, such as:

  • jumping to a different plug-in module
  • showing a preview of a front-end page or item
  • when your main screen is slow to generate, and you don't want to lose it as the user works through sub-views
  • anywhere you might consider using a popup window

To make use of the OverlayFrame, simply insert it into your page:

$out .= $ui->OverlayFrame();

To make a link open in the OverlayFrame, use this method:

my $link = $ui->OLFrameLink($url);
$out .= $ml->a("open in OverlayFrame",{href=>$link});