Hi ,
This blog post is part 2 of "How to develop right pane plugin for Web IDE".
In part 1 you learned the following:
In part 2 i will take you one step further and show how to aggregate your Facebook feed inside Web IDE right pane area.
Please notice! the following blog contains hundreds lines of code that should be copied from here into your Web IDE environment. In blog posts it is not possible to do pretty print to lines of code so after you paste the code to Web IDE you can use the Beautify option that will do pretty print to your code. The keyboard shortcut of beautify command is Ctrl + Alt + B
In this section you will create a new Facebook app which will enable interaction from Web IDE to Facebook API.In order to integrate with Facebook API's you will need to use Facebook JavaScript SDK. Details about how to use Facebook JavaScript SDK with user guides and examples can be found here:
https://developers.facebook.com/docs/javascript
For creating a new Facebook App please do the following steps:
In this section you will enhance your plugin to work with MVC approach and prepare the view that will hold your Facebook feed.
var that = this;
if (this._oView === undefined) {
return this.context.service.pluginmanagement.getPluginPath("rpaneplugin").then(function(sResult) {
jQuery.sap.registerModulePath("rpaneplugin", sResult);
that._oView = sap.ui.view({
id: "fbfeedview",
viewName: "rpaneplugin.view.feed",
type: sap.ui.core.mvc.ViewType.JS,
viewData: {
context: that
}
}).addStyleClass("FB_View");
return that._oView;
});
} else {
return this._oView;
}
The getContent method returns the content that should be aggregated into the right pane content area. The old code returns a layout which contain one button, now we change it to return a view instance since we want to work with MVC.
In the view code we will build all the necessary UI elements and in the controller we will take care on the business logic, events etc.
Test your plugin
select the feed.view.js file which located under view folder and open it for editing
Replace the content of createContent method with the following:
var oButton = new sap.ui.commons.Button({
text: "Test button"
});
return oButton;
If everything works you are now ready to start with aggregating your Facebook feed.
In this section you will add the actual feed from Facebook to right pane view.The result of the following steps will be that you will be able to see a very basic info from your Facebook home feed inside the Web IDE right pane.The info that will be shown will be a list of posts with the name and profile picture of the user who created the post and the post content.
Using the same API calls you will also be able to show additional data like: number of likes, comments, attached videos or photos, links and more.
FB.init({
appId: '{your_facebook_app_id}',
xfbml: true,
version: 'v2.1'
});
from
define(["sap/watt/common/plugin/platform/service/ui/AbstractPart"], function(AbstractPart) {
to
define(["sap/watt/common/plugin/platform/service/ui/AbstractPart", "//connect.facebook.net/en_US/sdk.js"], function(AbstractPart) {
var oLayout = new sap.ui.layout.VerticalLayout({
width: "100%",
height: "100%"
}).addStyleClass("FB_VLayout");
this.oUserDetailsLayout = new sap.ui.layout.HorizontalLayout({
width: "100%",
visible: false
}).addStyleClass("FB_UserDetailsLayout");
var oUserProfilePicture = new sap.ui.commons.Image({
width: "40px",
height: "40px"
}).addStyleClass("FB_UserProfilePicture");
this.oUserDetailsLayout.addContent(oUserProfilePicture);
var oUserDisplayNameLabel = new sap.ui.commons.Label({
text: "user display name"
});
this.oUserDetailsLayout.addContent(oUserDisplayNameLabel);
oLayout.addContent(this.oUserDetailsLayout);
this.oFeedRowRepeater = new sap.ui.commons.RowRepeater({
numberOfRows: 70,
design: sap.ui.commons.RowRepeaterDesign.Transparent,
noData: new sap.ui.commons.TextView()
}).addStyleClass("FB_FeedRowRepeater");
// Row repeater template
this.oFeedRowRepeaterTemplate = new sap.ui.layout.HorizontalLayout({
width: "70%"
}).addStyleClass("FB_RowRepeaterTemplateLayout");
var oPostedByImage = new sap.ui.commons.Image({
height: "40px",
width: "40px"
}).addStyleClass("FB_UserProfilePicture");
oPostedByImage.bindProperty("src","picture");
this.oFeedRowRepeaterTemplate.addContent(oPostedByImage);
var oPostedByName = new sap.ui.commons.Label().addStyleClass("FB_PostedByLabel");
oPostedByName.bindProperty("text","from");
var oPostContent = new sap.ui.commons.TextView({
wrapping: true
}).addStyleClass("FB_PostTextView");
oPostContent.bindProperty("text","message");
var oFeedContentLayout = new sap.ui.layout.VerticalLayout().addStyleClass("FB_PostContent");
oFeedContentLayout.addContent(oPostedByName);
oFeedContentLayout.addContent(oPostContent);
this.oFeedRowRepeaterTemplate.addContent(oFeedContentLayout);
this.oFeedRowRepeater.bindRows("/data", this.oFeedRowRepeaterTemplate);
oLayout.addContent(this.oFeedRowRepeater);
return oLayout;
.FB_VLayout {
width: 100%;
height: 100%;
background-color: white !important;
position: absolute;
top: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
}
.FB_View {
background-color: white;
position: relative;
height: 100%;
overflow-x: hidden;
}
.FB_UserDetailsLayout {
background-color: #4e69a2;
color: white;
font-size: 15px;
width: 100%;
padding: 10px;
}
.FB_PostContent {
margin-left: 10px;
}
.FB_UserProfilePicture {
height: 40px;
width: 40px;
border-radius: 20px;
}
.FB_PostedByLabel {
color: #3b5998;
font-weight: bold;
padding: 0;
}
.FB_FeedRowRepeater {
text-align: center;
margin-top: 10px;
overflow-x: hidden;
}
.FB_RowRepeaterTemplateLayout {
width: 90%;
border-bottom: 1px solid #e9eaed;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
.FB_FeedTitle {
padding: 10px;
}
.FB_PostTextView {
height: auto !important;
width: 90%;
font-size: 14px;
}
sap.ui.controller("rpaneplugin.view.feed", {
_oFbUser: undefined,
onInit: function() {
var that = this;
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.api('/me', {}, function(response) {
if (response && !response.error) {
that._oFbUser = response;
that._setUserDetails(that._oFbUser);
}
});
} else {
// Login user
FB.login(function(response) {
if (response && !response.error) {
FB.api('/me', {}, function(response) {
if (response && !response.error) {
that._oFbUser = response;
that._setUserDetails(that._oFbUser);
}
});
}
}, {
scope: 'read_stream'
});
}
});
},
_setUserDetails: function(oUser) {
var oView = this.getView();
var oUserDisplayNameLabel = oView.oUserDetailsLayout.getContent()[1];
var oUserProfilePicture = oView.oUserDetailsLayout.getContent()[0];
oUserDisplayNameLabel.setText(oUser.name);
oView.oUserDetailsLayout.setVisible(true);
oView.oFeedRowRepeater.setBusy(true);
FB.api(
"/me/picture",
function(response) {
if (response && !response.error) {
oUserProfilePicture.setSrc(response.data.url);
}
}
);
FB.api(
"/me/feed",
function(response) {
oView.oFeedRowRepeater.setBusy(false);
if (response && !response.error) {
var oResults = {
data: []
};
for (var i=0; i < response.data.length; i++){
var oRecord = response.data[i];
var sMessage = oRecord.message !== undefined ? oRecord.message : oRecord.story;
var sPictureUrl = "//graph.facebook.com/" + oRecord.from.id + "/picture";
oResults.data.push({
message: sMessage,
from: oRecord.from.name,
picture: sPictureUrl
});
}
var oModel = new sap.ui.model.json.JSONModel(oResults);
oView.oFeedRowRepeater.setModel(oModel);
}
}
);
}
});
Your last step is to review the results of what you just created.
Congratulations! you have completed developing a plugin which presents your Facebook feed in your Web IDE environment.
You are now ready to rock and create amazing and innovative stuff for Web IDE.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
39 | |
25 | |
17 | |
13 | |
7 | |
7 | |
7 | |
7 | |
6 | |
6 |