This document provides an overview of WebApp development and integrations. It discusses different types of addons like plugins and widgets, how to integrate them through bidding systems and insertion points, and examples of integrating on both the client and server through hooks and modules. The anatomy of a plugin and possibilities for theming are also covered, along with where to find documentation, manuals, forums and releases.

1. WebApp development introduction
The WebApp team

2. 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

3. WebApp Client Architecture

4. Integrations: Different kinds of addons
Widgets
Plugins

5. Integrations: Widgets

6. Integrations: Widgets

7. Integrations: When wanting more... plugins

8. Integrations: Two ways to integrate
Bidding system
Insertion points

9. Integrations: Bidding for image attachments

10. Integrations: Bidding for image attachments
Attachment
Click on attachment Open Mail Bid = 1
Attachment
Container Calendar Bid = -1
Attachment
3rd-party plugin Bid = 2

11. Integrations: Add buttons with insertion points

12. Integrations: Example of 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
}]
}

13. 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 server
Write your own module
Use the insertion points/hooks on the server
Add default settings

14. Integrations: Example of server hook
<?php
class Pluginexample extends Plugin {
function Pluginexample(){}
function init(){
$this->registerHook('server.core.properties.addressbookitem.mailuser');
}
function execute($eventID, &$data){
switch($eventID){
case 'server.core.properties.addressbookitem.mailuser':
$this->addABObjectProps($data);
break;
}
}
function addABObjectProps(&$data) {
$data['properties']['propname'] = "PT_TSTRING:PSETID_Address:0x9999";
$data['properties']['propname2'] = PR_PROPERTY_DEFINITION;
}
}
?>

15. The anatomy of a WebApp plugin
A closer look at the folder structure and manifest

16. Examples

17. 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

18. Documentation, manual and forum
Documentation
http://developer.zarafa.com/webapp/
Manual
http://developer.zarafa.com/webapp/manual.pdf
Forum
https://forums.zarafa.com
Releases on
https://community.zarafa.com