Hi,
In this blog post i will show how to develop plugin that will be integrated into the right pane of the Web IDE.
Prerequisites
Right Pane Plugin
In Web IDE you can create different types of plugins (e.g. editor plugin, menu plugin, right/left pane plugins and more)
in this tutorial i will show how to create plugin that will be integrated into the SAP Web IDE right pane area.
currently under the right pane area you will be able to find the following plugins:
Let's get started!!
Open SAP Web IDE
Create a new plugin project template
* Please notice that from here this tutorial will be based on the plugin name that you entered in the Plugin Name text field
Review the generated code
Plugin configurations
Plugin configuration content - Let's fill in our plugin.json file with some relevant content.
{
"name": "rpaneplugin",
"description": "my first right pane plugin",
"i18n" : "rpaneplugin/i18n/i18n",
"requires": {
"services": [
"usernotification",
"log",
"command",
"commandGroup",
"perspective",
"selection",
"content",
"resource"
]
},
"provides": {
"services" : {
"player" : {
"implements": "rpaneplugin.service.Player",
"module": "rpaneplugin/service/Player"
}
},
"interfaces": {
"rpaneplugin.service.Player": "rpaneplugin/service/Player"
}
},
"configures": {
"services": {
"player:styles" : [
{ "uri" : "rpaneplugin/css/style.css" }
],
"command:commands" : [
{
"id" : "rpaneplugin.open",
"label": "Toggle Player",
"service" : "rpaneplugin/command/Open",
"available" : true
}
],
"commandGroup:items": [
{
"parent": "view.otherPanes",
"command": "rpaneplugin.open",
"prio": "30"
}
],
"perspective:views": [
{ "id": "player", "service": "@player", "area": "right", "visible": "false", "cssclass": "explorer splitterContainer"}
]
}
},
"subscribes": {
}
}
Let's get our hands dirty with some code!!
Create the Open command
define({
execute : function() {
var that = this;
return this.context.service.player.isVisible().then(function(bVisible) {
return that.context.service.player.setVisible(!bVisible);
});
},
isAvailable : function() {
return true;
},
isEnabled : function() {
return true;
}
});
Create the player service (2 files)
Create the service interface -
{
"name" : "rpaneplugin.service.Player",
"description" : "my first service",
"extends" : ["sap.watt.common.service.ui.Part"] ,
"methods" : {
"isAvailable" : {
"params" : [
{
"name" : "oDocument",
"type" : "object"
}
],
"returns" : "object"
},
"isEnabled" : {
"params" : [
{
"name" : "oDocument",
"type" : "object"
}
],
"returns" : "object"
}
}
}
Create the service implementation -
define(["sap/watt/common/plugin/platform/service/ui/AbstractPart"], function(AbstractPart) {
"use strict";
var Player = AbstractPart.extend("rpaneplugin.service.Player", {
init: function() {
},
configure: function(mConfig) {
this.context.service.resource.includeStyles(mConfig.styles).done();
},
getContent: function() {
var oButton = new sap.ui.commons.Button({
text: "Right Pane Button"
});
var oLayout = new sap.ui.layout.VerticalLayout({
width: "100%",
height: "100%",
content: [oButton]
});
oLayout.addStyleClass("playerLayout");
return oLayout;
},
isEnabled: function(oDocument) {
return true;
},
isAvailable: function(oDocument) {
return true;
}
});
return Player;
});
Currently (For Part 1 of the user guide) our plugin is very basic. It contains only a button and that's it.
In Part 2 (coming soon...) of the guide I will show how we can enhance it with more capabilities...
Last but not least create the css file
.playerLayout {
width: 100%;
height: 100%;
background-color: white;
position: relative;
}
Finally!! Run the plugin in Web IDE
That's it! Now that you know how to create plugin to the Web IDE you can extend and customize the Web IDE capabilities according to your needs!
Please refer to Part 2 of this guide that will guide you how to integrate your Facebook feed inside the plugin that you've just created...
The specified item was not found.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
33 | |
25 | |
10 | |
7 | |
7 | |
7 | |
6 | |
6 | |
5 | |
4 |