4. Extending WebApp

4.1. Ways of Extending WebApp

Refer back to “WebApp architecture overview”, showing the software stack. Here, a few plug-ins are given as an example. However, there are actually three ways of extending WebApp, we call them contexts, plugins and widgets.

Contexts are implemented as plugins, and third-party developers can develop their own contexts to extend or customise the application. Three examples of contexts: the Mail, Calendar and Note contexts. Each context is a kind of special plugin that has additional functionality allowing it to take over the toolbar and main content section of the screen. Only a single context can be active at any given time. For example, folders in the folder hierarchy are linked to contexts that display their contents, so that when a user clicks his or her inbox, the Mail context is shown.

The main application screen consists of several areas. Some of these are independent shown in e.g. “Mail context”. The UI provides a standard hierarchy panel showing a list of folders the user has access to, as well as a bottom tool bar. Each context has its own content panel and tool bar, but only the ones belonging to the currently active context are visible while all others are hidden. This is achieved by loading the toolbars and content panels of all contexts into their respective areas and using card layouts to switch between them.

Mail context

Mail context

Calendar context

Calendar context

Notes context

Notes context

Plugins can be of arbitrary complexity; they have the liberty to work with dialogs, stores and other extended Zarafa features. When you need a deeper integration with Zarafa, you will need to work with a plugin. Example plugins are the XMPP plugin and Facebook plugin.

Plugins can be shown visually as some UI components which trigger some work: buttons or context menu items to integrate Facebook events, etc.

Finally, Widgets appear only in the Today context and the side bar.

They can be be added or removed from there by the user. Each time the Today context is opened, the configured widgets are shown. Also, if you enable and lock the side bar, the widgets put in there are shown continuously. Widgets are small plugins, usually only visual, with very simple functionality. Example widgets: a simple visual shell game, a customized clock.

Now that we have seen what the possibilities are we will explain in the next parts the background and show how to implement a plugin that actually extends WebApp. We will use the plugins that were introduced in the introduction chapter.

This part is probably the most useful one to casual plugin and widget developers. We explain how to implement a widget, a dialog, and how to access globally available data. After going through this we are ready for the real advanced topics.

4.2. What’s new dialog

In KW-1241 we introduced a utilty to notify the user about new features of a specific version. Example code block:

Recommended is placing this above the initPlugin function.

whatsNew : {
        version: '0.3',
        features: [{
            title: 'Some plugin for WebApp',
            description: 'With this plugin version we introduced something awesome.',
            image_url: 'img/title.jpg'
        }]
    },