Functional skins in action

The idea about functional skins was discussed here

Let's see real life example now. All the actions are done based on Graaasp: http://graaasp.epfl.ch

We have a space that contains four gadgets: Google map search, Quick Latex, Todo list and English resource browser. Graaasp provides us with the following default view for this space:

You can see every gadget one by one, but you can't see few gadgets on the page at the same time (similar to iGoogle view). In Graaasp you can attach a functional skin to a space which could change the representation of this space. Let's do that. Let's add the following gadget as a functional skin: http://graaasp.epfl.ch/gadget/rolespace/rolespace.xml

Now we can click on the button "View space with skin" and we see the following view, where all widgets are displayed on the page as a grid:

We can go further and add another skin to a space that contains youtube videos.
I have few videos in my space and default view for it is as follows:

Now I add the next functional skin to this space: http://graaasp.epfl.ch/gadget/viewer/viewer.xml
And I see the space differently, all youtube videos are open and can be played:

You can easily write your own functional skin and use Graaasp's space as you wish.

Few points on implementation. Graaasp implements Opensocial APIs via Shindig. Plus it uses Space extension to Opensocial. Gadget finds out the space to which it belongs and then retrieves gadgets for this space as in the example below.



Once list of gadgets is received, they are built in a standard Apache Shindig way.
You have to only require a feature


In the second functional skin you retrieve list of assets for a space in a similar way.

What is a "Functional skin"?

To understand what Functional skin is, why and how it can be useful, you have to first understand what is a space. You can read more information about it here: Space.

For now you can see it as a place where you have few friends and you share some resources with them: few youtube videos, slideshare presentations and some applications: opensocial gadgets (calendar, todo list) for example. We can call such space as group.

Let's say that the container's default view of your space is as in the picture below

Default view

Let's say that you are not always satisfied with this view and you want a different one, where videos are directly shown on the page on the left and friends are shown as a list in the right column. And it also has some additional functionality as "Play all" button, that will play all youtube videos one-by-one. Like in image below

Play view

Easy! That is exactly what the functional skin is supposed to do.
The goal of functional skin is to take your space information (list of applications in a space, list of resources in a space, list of people in space) and build some functionality and visual representation for it. Once such functional skin is implemented, it can be attached to any space and space can be presented in different ways.

Well, easier said than done. How actually it can be done? There is one suggestion on how to do that. First, use Opensocial gadget for this functional skin. You implement required functionality as opensocial gadget, then you attach this gadget to a space. 
But how does gadget know about this space and how it can get list of people and videos for this space?
This should be managed by a space extension to Opensocial. Read more about it here.

Once this function skin gadget is ready, you can switch between different views for a space.
It is like a skin but the main goal is to provide new functionality (view all videos at once in current scenario), this is why we call it Functional skin.

For more detailed information, please refer to the paper:
Contextual Spaces with Functional Skins as OpenSocial Extension

What is a "Space" and what is it used for?

A space is an abstract concept that shapes the context in which user is currently placed. A space can represent a group of people, a university course, a company division, a folder, a forum, a blog, etc.

A space normally consists of people, tools, assets and other sub-spaces. Tools are different applications and agents that exist inside a space and can be used by people inside this space (opensocial gadgets for example). Assets are different resources that can be added to space, this includes documents (attachments, html pages), online resources (youtube videos, slideshare presentations), etc. A space can contain other sub-spaces as well.

Space concept allows to model such concepts as group of people, community, event, competition, etc. It is an important part of our social lives, that's why we proposed it as an extension to Opensocial specification.

See below more information and discussions about space.

Space proposal to Opensocial 2.0
Space extension draft
Space proposal discussion

How do I add my own database to Java Shindig (Updated July 2011)

This post is a continuation of the previous post where we connected a database to Java Shindig. Now I will use my own database with shindig. In other words when a social request is executed, the data will be taken from my own social database.
To start with you have to have a working version of shindig-database connection as described in previous post.

1) Imagine I have a social MySQL database with only one table 'people' and three colums:
This will be my own social database that I want to connect to Shindig. (To make life easier you can just remove tables and redundant columns from shindig database (generated in previous post) and rename 'person' table to 'people' table). Add the following data into table: . 2) Now we have to tell shindig not to generate database every time it loads. Normally it should be possible to do through java/samples/src/main/resources/META-INF/persistence.xml but it seems Shindig's samples implementation doesn't take those properties from that file. So I had to change the following file: java/samples/src/main/java/org/apache/shindig/social/opensocial/jpa/eclipselink/Bootstrap.java

3) Now we have to change the file java/samples/src/main/java/org/apache/shindig/social/opensocial/jpa/PersonDb.java so that it takes needed for us data from the database. Read the explanations in comments.



4) Now recompile project and run jetty server
5) Now execute a social request in your browser. You should get back a json response (I had to reload page 3 times to get it) So, now you are ready to change PersonDb.java, etc. files according to your own social database implementation! Concerning JPQL syntax I found the following useful: JPQL Language Reference

Java Shindig: how to connect to real database (Updated July-2011)

I decided finally to switch to Java Shindig from PHP Shindig due to the better support and development of the first one. I had my working shindig installation for PHP with my own social database. I wanted to have the same with Java Shindig. It turned out to be much harder to set it up in Java (maybe because of my java and maven ignorance). In PHP I only changed the database settings and added my own PersonService, AppDataService implementations. In Java the concept is the same but the way it is done was not that obvious for me. So, here is what I did.

1) I downloaded the shindig trunk from here:


2) To use database in Shindig one could take advantage of existing in shindig "samples" project that uses JPA and EclipseLink to connect to the database from Java. This how I compile the project:
3) First of all we need to add JPASocialModule.java into Shindig's Guice modules. This module will provide real database implementations for PersonService, AppDataService, etc. One should add this module in java/server/src/main/webapp/WEB-INF/web.xml. Some default Guice modules should be removed from this file in order to avoid compilation problems. This is how this file looks for me.

I also had to change the SocialApiGuiceModule.java to add a sample OAuthDataStore. I also had to change the JPASocialModule.java to add a sample implementation for MediaItemService, MessageService, AlbumService. 4) We will have to recompile shindig with database support now. We have to change 3 files. trunk/pom.xml - add samples module to default "all" and "run" and to dependencyManagement.
trunk/java/server/pom.xml - add dependency on shindig-samples

trunk/java/samples/pom.xml - add dependency on mysql driver (since I use mysql database)


Now to compile the project with maven command as in 2)

5) Generate signing keys for oAuth with the following commands.
Add the keys information into java/common/conf/shindig.properties. Don't forget the full path to your oauthkey.pem!! 6) Add your database information to java/samples/src/main/resources/socialjpa.properties. I use mysql database, so my settings are mysql specific. 7) Create database shindig and give access to it for user "shindig" with password "shindig". 8) Compile now the project and run jetty server according to 2). The tables will be created in the database based on shindig's default database structure. 9) When database is created, add manually a row to the Person table with oid = 1, person_id = 1 and display_name = Shindig User 10) Run the jetty server as explained in 2) (Ignore errors that tables already exist). Now execute a social request in your browser. You should get back a json response (I had to reload page 3 times to get it) So, this is a proof-of-concept step on how to connect Shindig to a real database. Next will be how to change shindig classes to connect to my own database!

Apache Shindig: Java vs. PHP (part 2)

In my previous post I decided to make the Friends Gadget work on PHP Shindig. I managed to do so, thus I will stay with PHP version of Apache Shindig.

I will use the gadget that lists friends of the user. Notice that http://shindig/ is where you have your shindig installation (http://localhost:8080, for example). Here is the gadget code:


Now we want Apache Shindig to get a list of friends for a user with id=2 from my database 'graaasp_development'.

Here is a url that does it.

The most important parameter here is a "st" parameter, that stands for security token.


Owner_id means id of the owner of the gadget. Viewer_id means id the current user watching the gadget.
Application_id means the id of the gadget instance in the database.
In other words, in 'graaasp_development' database we have a gadget with id=12. Owner of this gadget is user with id=2 and the same user watches the gadget at the moment.

Now we have to add some code to shindig to let it know that 'graaasp_development' database should be used as a backend for gadgets requests.
First of all in the folder "shindig/php/config/" we should create a file 'local.php' with the following content.



This will force Shindig to use the code specific to the 'graaasp_development' database, which is located in '/Library/WebServer/Documents/graaasp'.

Now we have to rewrite the classes that will respond to opensocial code with data from 'graaasp_development' database.
1) in the file config.php we should change the database settings as follows:


2) In file PartuzaDbFetcher.php we have the code that gets friends from 'graaasp_development' database.


The output of the widget will be similar to the following:
Friends of User1:
* Guest
* User2
* User3

Reminder: svn ignore

A reminder on how to work with svn ignore.

In every folder svn keeps a list of all files/folders to ignore. By using the command "svn propset svn:ignore" you change this list. From my experience the best way is to have a text file "ignore.txt" (where you keep the list of all ignore rules) for every folder. The command "svn propdel svn:ignore ." will remove all rules for this folder and "svn propset svn:ignore -F ignore.txt ." will apply all the rules from the file "ignore.txt" for this folder.

The scenario: you are in a folder "MyFolder" and you want to ignore in this folder all svg files, the whole folder "log" and the whole folder "tmp". Then, you want to remove all ignore rules for this folder.

To add svn:ignore property for folder "MyFolder"
1) Make sure a file/folder to be ignored is not committed to svn repository.
If it is there, remove it from svn repository
2) Create a file "ignore.txt" in the "MyFolder" with the following content:

3) Go to the folder "MyFolder"
4) Run the following command to apply the rules

5) Commit the changes

To remove svn:ignore property for the folder "MyFolder".
1) Go to "MyFolder"
2) Run the following command to remove all the ignore rules.

2) Commit the changes

To do it recursively for all subfolders add "-R" to the command.