Problem to start developing

rgsell

Hi,

I find it very hard to start developing Webapp Plugins using the documentation.

After some basic information you get some javascript snipplets, which don’t work by themself. Nowhere is mentioned that you need to create these files in /usr/share/kopano-webapp/plugins/own_plugin_name. Shouldn’t that be the first information?

I also don’t know which files are mandatory to start with and which are optional.
Do I need the manifest.xml, which most (all?) of the plugins have in their main directory? What about the config.php?

A commented skeleton plugin that add one button would be very helpful - just like the theme example plugin.

The guide to activate the zdeveloper-plugin is outdated.
Is it possible to use it in the modern Webapp? If yes, how?

What I want to do sounds very simple:
When you create a new appointment in the calendar, a new Tab called “Scheduling” appears with all the free/busy information.
I would like to add a button which opens this scheduling right away without the need to create an appointment in the first place.

Any help is greatly appreciated.

EDIT: I’m also wondering how to debug a webapp plugin.
When I write some malfunctioning code and relog into the webapp I usually get an endlessly rotating loading icon and I don’t know where to start looking for the problem.
Cheers,
Roland.

marty

@rgsell said in Problem to start developing:

Hi,

I find it very hard to start developing Webapp Plugins using the documentation.

After some basic information you get some javascript snipplets, which don’t work by themself. Nowhere is mentioned that you need to create these files in /usr/share/kopano-webapp/plugins/own_plugin_name. Shouldn’t that be the first information?

I also don’t know which files are mandatory to start with and which are optional.
Do I need the manifest.xml, which most (all?) of the plugins have in their main directory? What about the config.php?

A commented skeleton plugin that add one button would be very helpful - just like the theme example plugin.

I agree the documentation is a bit outdated and hard to read.
I think a great start for you is to use this plugin to generate a ‘skeleton plugin’.
https://github.com/jelly/generator-kopano-webapp-plugin

Also have a look at one of the plugins in our own repository:
https://stash.kopano.io/projects/KWA
They are better examples than the plugins mentioned in the developer manual.

The guide to activate the zdeveloper-plugin is outdated.
Is it possible to use it in the modern Webapp? If yes, how?

Install -> Activate -> Reload WebApp.
By default included if you use a checkout of WebApp
https://stash.kopano.io/projects/KW/repos/kopano-webapp/browse/plugins/zdeveloper

What I want to do sounds very simple:
When you create a new appointment in the calendar, a new Tab called “Scheduling” appears with all the free/busy information.
I would like to add a button which opens this scheduling right away without the need to create an appointment in the first place.

Any help is greatly appreciated.

EDIT: I’m also wondering how to debug a webapp plugin.
When I write some malfunctioning code and relog into the webapp I usually get an endlessly rotating loading icon and I don’t know where to start looking for the problem.

Webserver error log, JS console will most of the time tell you the issue.

Cheers,
Roland.

rgsell

Hi,

thanks for all that information. It helps a lot.

I also wish to report a bug with zdeveloper:

First problem I encountered was that there is no zdeveloper.css, but the plugin is looking for it. There’s only zdeveloper-styles.css
I just made a copy with the requested name.

However, it still didn’t load. The JS console told me, that there is no js/zdeveloper.js, which is correct. It’s called js/ZDeveloper.js
So, after renaming it, zdeveloper works finally.

marty

Seems to me you are mixing a release setup with a source setup. Source z developer, Release WebApp.

<client>
					<clientfile load="release">js/zdeveloper.js</clientfile>
					<clientfile load="debug">js/zdeveloper-debug.js</clientfile>
					<clientfile load="source">js/ZDeveloper.js</clientfile>
				</client>
				<resources>
					<resourcefile load="release">resources/css/zdeveloper.css</resourcefile>
					<resourcefile load="source">resources/css/zdeveloper-styles.css</resourcefile>
				</resources>

rgsell

Right, my bad, sorry.

Last week I tried to find the relevant js part responsible for drawing the scheduling tab in the appointment panel.
This is what I came up as a first try:

Ext.namespace('Zarafa.plugins.planen');

Zarafa.plugins.planen.PluginPlanen = Ext.extend(Zarafa.core.Plugin, {
    initPlugin: function () {
        Zarafa.plugins.planen.PluginPlanen.superclass.initPlugin.apply(this, arguments);
        this.registerInsertionPoint('context.calendar.toolbar.item', this.createScheduleButton, this)
    },

    createScheduleButton: function () {
        var button =
            {
                xtype: 'button',
                text: _('Open Schedule'),
                iconCls: 'icon_new',
                navigatorContext: container.getContextByName('calendar'),
                handler: this.showFreebusytab()
            }
        return button;
    },
    showFreebusytab: function()
    {
        Zarafa.calendar.dialogs.FreebusyTab()
    }
});

Zarafa.onReady(function() {
	container.registerPlugin(new Zarafa.core.PluginMetaData({
		name : 'planen',
		displayName : _('planen'),
		pluginConstructor : Zarafa.plugins.planen.PluginPlanen
	}));
});

Of course it’s not that easy. This plugin actually messes up the webapp quite hard.

The question is now, if the goal I want to achieve is just a few line away, which I can possibly find out by myself with no javascript experience yet or is this plugin not as simple as I thought and needs some deep understanding of ExtJS?

Either way, can someone recommend a good tool for developing?
Usually I work with python3-kopano, so I use PyCharm Professional which also has some JS highlighting and code completion, but I’m not sure if it is the right choice. There are other apps for that by Jetbrains, but we don’t have a license for it, and I would hate to love the trial version and then find out that it’s too expensive for us. ;-)

What do you guys use? Are there open source alternatives or community editions?

Thanks in advance,
Roland.

EDIT: actually using PyCharm and Chrome is pretty ok as long as ext-base-all.js is included in the project for code completion.