Slide 1

WebApp development introduction

The WebApp team

What will we discuss

Overview of the client architecture

Integrations on the client: plugins vs. widgets

Integrations on the server: module

The anatomy of a WebApp plugin

Examples

Possibilities for theming

Documentation, manual & forum

WebApp Client Architecture

Integrations: Different kinds of addons

Widgets

Plugins

Integrations: Widgets

Integrations: Widgets

Integrations: When wanting more... plugins

Integrations: Two ways to integrate

Bidding system

Insertion points

Integrations: Bidding for image attachments

Integrations: Bidding for image attachments

MailCalendar 3rd-party pluginContainerClick on attachmentBid = 1

Bid = 2

Open

Attachment

Attachment

Attachment

Bid = -1

Integrations: Add buttons with insertion points

init : function(){ ... this.registerInsertionPoint('previewpanel.toolbar.right', this.createPreviewPanelBtn, this); ...}

createPreviewPanelBtn : function(insert){ return [{ xtype : 'menuitem', overflowText : _('Spreed Button'), iconCls : 'icon_spreed_setup', handler : this.onPreviewBtn, scope : this }]}

Integrations: Example of insertion points

Server integrations

The server-side of the WebApp is written in PHP

The client interacts with modules on the server

There are three ways to extend the serverWrite your own module

Use the insertion points/hooks on the server

Add default settings

Integrations: Example of server hook

The anatomy of a WebApp plugin

A closer look at the folder structure and manifest

Examples

Possibilities for theming

Majority of the WebApp is styled using CSS

At the moment limited theming can be done

A theming framework is on the roadmap

Documentation, manual and forum

Documentationhttp://developer.zarafa.com/webapp/

Manualhttp://developer.zarafa.com/webapp/manual.pdf

Forumhttps://forums.zarafa.com

Releases onhttps://community.zarafa.com