Develop of a social networking platform:

Desktop.fbk.eu

Michele Dalla Torre

FBK Stage's Report

IndexIntroduction..........................................................................................................................................5

What is FBK?...................................................................................................................................5What is SoNet?................................................................................................................................5Purposes of SoNet group.................................................................................................................5Research and development strategies of SoNet group.....................................................................5

The Web application: Desktop.fbk.eu..................................................................................................6Use cases, screenshots, explanation of the system .........................................................................6

Header.........................................................................................................................................7Sidebar........................................................................................................................................7Widgets.......................................................................................................................................8Chat.............................................................................................................................................9

Architecture of the system..................................................................................................................102-tier architecture: back end and front end....................................................................................10

Back end: CakePHP .................................................................................................................10Main characteristics .............................................................................................................10Comparison with other frameworks.....................................................................................10

Front end: ExtJS........................................................................................................................11Main characteristics .............................................................................................................11Comparison with JQuery......................................................................................................11

Database and log procedure...........................................................................................................11Communication protocols: ............................................................................................................12

REST.........................................................................................................................................12Back end - front end communication: JSON............................................................................12JSON vs XML...........................................................................................................................12Example of a JSON response:...................................................................................................12

Debugging tool: FireBug...............................................................................................................14Tutorial: how to create a feedback widget..........................................................................................14

Back end:.......................................................................................................................................16Front end:.......................................................................................................................................18

License................................................................................................................................................20Bibliography.......................................................................................................................................21

Introduction

What is FBK?FBK (Fondazione Bruno Kessler) is an important scientific research center in Trento, Italy. “The foundation, with more than 350 researchers, conducts studies in the areas of Information Technology, Materials and Microsystems, Italo-Germanic studies, and Religious sciences.

Thanks to a close network of alliances and collaborations, FBK also conducts research in theoretical nuclear physics, networking and telecommunications, and social sciences (studies of public policy effectiveness).

The objectives of the foundation are to:

•Conduct research that obtains recognition at an international level

•Carry out applied research of strategic importance to the province

•Publicize scientific results and promote economic development

•Encourage innovation throughout the province”[1]

What is SoNet?SoNet[2] group has been established in the early months of 2008 under the guide of Maurizio Napolitano and Paolo Massa. Its name "SoNet" comes from "Social Networking".

Purposes of SoNet groupThe goals of SoNet are twofold: both theoretical and applied research.

The theoretical research aims to collect data from social networks, to analyze them in order to characterize social networks and their evolution in time, to discover use patterns and to design intelligent services on top of social networks.

The applied research side has the objective of experimenting with creating social network platforms and deploying them to real users.

In concrete SoNet project wants to provide new advanced services to the users, developing a real social networking system inside FBK, via a web based internal portal. This website will be developed on the real needs of the FBK researchers and employees, investigating what they really want and think would be useful to make their daily work activity more efficient.

The other project of applied research is to create a social networking platform to offer this instrument to young people, in order to approach them to the technology and research world. It is a fact indeed that young people are the main actors at the base of the huge success of social networking all over the world; it is for us so very important and interesting to study this phenomenon which is going to grow and change our society.

The last purpose is to advertise research and share work with other international entities such as research centers and companies in order to make FBK stand out in this particular research area.

Research and development strategies of SoNet groupSoNet project's values are the same on which web 2.0 is based on. Web 2.0 “is a term describing changing trends in the use of World Wide Web technology and web design that aims to enhance creativity, secure information sharing, collaboration and functionality of the web.” [3]

5

The values of web 2.0 are aggregation, sharing, collaboration, dissemination.

Aggregation means aggregation of data into a single page, to improve the work flow without spending much time to search information.

Sharing means share knowledge and important facts for the community and allow everybody to experience it and improve it.

Collaboration means collaboration between people to help each other developing a task and discover groups of people working on the same topics.

Dissemination means distribute knowledge all over the Internet in order to make your activity visible and usable by everybody.

In order to reach its goals SoNet adopts the following strategies.

● "Eating your own dog food": this means using the software developed by the company inside it, giving to the employees confidence in the products of their company.

● Champions: we chose initially a restricted number of people, called "champions", to test our application and give us feedbacks before giving access to all the people inside FBK. While we hope that they will find SoNet very useful and that they will spread it, with word of mouth, among the other researchers, we are gradually increasing the number of the champions.

● Controlled viral spreading: giving access to a restricted number of people is useful to control the spreading in the use of our application inside FBK.

● "Always in beta": this strategy, adopted by all the main web 2.0 websites, consist of having a product always in development, improving it while the users try it and give feedbacks.

● Prosumer: this figure which is became the most important actor in web 2.0, is the result of a consumer plus a producer: the user itself it's no more only a consumer, a passive actor, instead it actively contributes to the improvement of the platform, becoming in this way a producer too.

● Open source: we will release under a proper open source license our application.

● Mashup: SoNet aims to aggregate information coming from different sources in a unique place, integrating already existent services.

One of the most interesting example is the aggregation of users' publications: we use a database which is inside FBK but at the same time outside our SoNet group to retrieve information and aggregate it inside desktop.fbk.eu. Other examples are the web calendar, which displays events from a calendar outside FBK, news feeds and so on.

These distinct applications were developed using widgets that are then displayed together in the web page.

● Widgets: a widget is a portable chunk of code that can be embedded in a web-page, adding some dynamic content to it. Widgets are very useful because they can be reused in different applications. Due to this reason they are usually third party developed, although they can be home developed too, as in our case.

The Web application: Desktop.fbk.eu

Use cases, screenshots, explanation of the system Our original intention was to develop a portal, in other words something similar to igoogle[4] or netvibes[5]. We found an interesting example of this kind on the ExtJS website called "Portal". As you can see from the image 1, the browser window is divided into three parts:

1. the header, which can contains the site's logo and has a choice button to select the theme for the portal

6

2. the left panel, which contains more tab, useful to display information related to the widgets

3. the content windows, which contains many widgets of different types, in this case grids other panels

We started developing this application introducing new features and adapting it to our aims. We could do this because ExtJS has an open source license[6], so we were allowed to get the code, study it and extend it.

Image 1: ExtJS Portal

HeaderWe added the Desktop.fbk.eu logo on the left, while on the right we added the user name, a link to edit the profile, a link to add new widgets, a link to set desktop.fbk.eu as homepage, a page of FAQ (Frequently Asked Questions) and finally the logout button. (See Image 2)

In the center of the header we then added a random advice that can be hidden by the user, explaining some hints and features of the portal.

SidebarThe sidebar, that we called "Manager Panel" is used to display information about the users. It comprises two tabs:

● User profile: when the application loads, this is the default visualized tab. It contains information about the currently logged user, such as a photo of the user (customizable as we will see later on), two links to edit the profile and the photo, then the user name (editable), login, e-mail, homepage and FBK unit (the FBK group to which he/she belongs to).

● Edit profile: this tab, that can be viewed clicking on the "+" button in the bottom of the sidebar, allows the user to change his/her personal data such as date of birth, e-mail, phone number, personal web page and a description. In the bottom contains links to save the changes, cancel them, edit the photo

7

or view the profile.

Clicking on “Edit photos” link make the photos manager appear. Every user is given the possibility to upload as many photos as he/she wants through a simple photos manager. It can be added a description to them and, simply clicking on one of them, the photo can become the default photo for the user profile. Other operations are allowed such as renaming or set the visibility to public or private.

The sidebar is very strong social component: every time a user clicks on another user name in some widgets, it displays information about the requested user. For example we can search for other FBK colleagues through the "Search user" widgets, then clicking on their name we can see their profile (photo, name, phone, ...) directly in the sidebar.

WidgetsThe core of the entire system is based on widgets, that can be added to the portal clicking on the "add widgets" link in the top right of the screen (see Image 2). This causes a modal window to be displayed, containing a list of all the widgets, as well as a description, popularity counter, creation date and so on. Clicking on the "+" icon, as described in the window, loads the new widget inside the portal without need of reloading the entire page. Some widgets offer then configuration options, such as how many items to display.

Each widget has then three icons in the upper right corner: the first one collapses/expands it, the second one shows the widget in full screen, the third one closes it.

There are many different types of widgets:

● search widgets: these are used in order to search for something on Google, wikipedia or other websites. It is possible to limit the search to one kind of content only, for example videos. We have

8

Image 2: The Edit panel on the left and the Add widget in the center

then developed internal search widgets in order to search for FBK colleagues or inside FBK wikis.

● RSS widgets: these are used in combination with a RSS link to display information. RSS is “a family of Web feed formats used to publish frequently updated works – such as blog entries, news headlines, audio, and video – in a standardized format”[7]. Because nowadays almost all websites have a RSS link, it is clearly visible the relevance of this type of widgets: simply changing the RSS link (obviously one user can have many RSS widgets, each one for a different service) it is possible to have the most different data, such as the weather in the city, the latest news from a journal, the latest video in youtube and so on.

We developed some "ready-to-go" RSS widgets too, that means widgets already configured: for example the latest conferences in FBK (obtained through a web calendar) and the latest video of FBK uploaded in youtube

● other widgets: this category comprises static widgets (for example the latest features of desktop.fbk.eu, a list of useful links, ...) and utility widgets (for example the note widget which allows to save some text or the feedback widget which allows to send suggestions)

ChatOne of the most popular widget is the chat. This widget allows users to be in real time contact with all FBK researchers. This is very useful in order to exchange information between different areas of research, to maintain contacts between different groups and in general to improve each other work flow from a point of view of collaboration and dissemination.

Every user is given the possibility to set his/her status between “available”, “away”, “do not disturb” and “invisible”. The “invisible” status prevents other users to interact with the one who set it, protecting his privacy.

Image 3: Desktop.fbk.eu: general view

9

Architecture of the system

2-tier architecture: back end and front endSoNet application can be classified as a 2-tier architecture, divided into:

● back end: the back end level is implemented in CakePHP, a PHP framework to deploy web-application

● front end: the front end level is implemented in Javascript, in particular ExtJS, which stands for Extended Javascript. This is a client-side cross-browser Javascript framework used for building rich Internet applications.

Back end: CakePHP

Main characteristics “CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications. Using commonly known design patterns like MVC and ORM within the convention over configuration paradigm, CakePHP reduces development costs and helps developers write less code.” [8]

CakePHP is based on the MVC (Model-View-Controller) pattern: the model defines the relations between the new database tables and the others; the controller contains the code that is called to return data and the view is needed in order to let CakePHP know how to display data. In a MVC architecture communication is triangular: the View sends data to the Controller, the Controller updates the Model, and the View gets updated directly from the Model.

CakePHP is licensed under MIT licence.

To extend a CakePHP application, we need to create a view, a model and a controller. We always have to create all these three files, inside the relative folders. Later on in the tutorial section you can find a practical example.

Comparison with other frameworksThere are many alternatives SoNet researchers considered before starting developing the application, like Java-based environments, Ruby on Rails[9], Symfony[10] and Zend[11].

The group discarded the idea of using a Java-based environment because of the richness of it: Java is surely one of the best choices when used to write a stand-alone application, but in the web field is suggested only when the web application to develop is very complex, for example in the case of a website for a shop where the main requisites are dealing with credit cards and checking privileges of the user to avoid problem of security. This was not the case.

Ruby on Rails “is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern”[9]. At the moment SoNet group decided to develop its application, Ruby on Rails had few developers, so the group searched for something similar to it. CakePHP directly derives from Ruby on Rails: it is the transcription of it into a PHP framework.

The others PHP frameworks, such as simphony and zend, all promote the use of the MVC architectural pattern. They are very similar to CakePHP but we choose this last one because it is the most MVC oriented and has a clean design.

10

Front end: ExtJS

Main characteristics “ExtJS is a cross-browser JavaScript library for building rich internet applications.” [12]

The main advantage of using a JavaScript library in our application is the fact that we can deal in a direct way with JavaScript objects and structures.

Comparison with JQueryJQuery[13] is a Javascript open source framework which allows mainly to apply in an easy way changes to the DOM of a website through Ajax and Javascript calls, instead ExtJS gives a huge set of components in order to be able to create a Rich Internet Application. JQuery is therefore a basis on which a developer can build more complex applications, because it has many libraries, called plugins, that add many functionalities to it.

The choice between ExtJS and JQuery relies on what type of application is to be developed: for a complex Rich Internet Application ExtJS is surely recommended because it provides a complete library of components, similar to many available to develop desktop application. This carries otherwise to a worsening in terms of speed because of the heaviness of the libraries. Another negative aspect of ExtJS is that a user who has Javascript disabled on his browser can not visualize the site. On the contrary one of the most mentioned values of JQuery is its lightness. For this reason is perhaps the best solution whenever the developer only wants to add new features to an already existing website or wants to create a website following the Progressive Enhancement strategy: this means using Javascript as a mean to add features to help the user instead of building the website upon the Javascript framework, allowing therefore the user who disabled Javascript to view the website too. It is possible, adding the right plugins, to build a Rich Internet Application with JQuery too, but this is a quite complex task because this is not what JQuery is meant to do.

The slowness in terms of loading can not be considered inside a Intranet, and this is exactly our case, while on the Internet this could be a big problem. There are some tricky ways to limit this negative behavior, for example using the YUI compressor[14]: this is an application developed by Yahoo that analyzes the Javascript and CSS code, understands how it is structured and then prints out the improved code, generated omitting as many white space characters as possible and replacing all local symbols by a 1 (or 2, or 3, etc.) letter symbol whenever the substitution is possible.

Last but not least ExtJS is very well documented.

Database and log procedureIn order to keep data organized and to easy interact with them, a database is a compelled choice.

We got a view on the already existent MSSQL (Microsoft SQL) FBK internal database to be able to access and manipulate employees data. Our group chose to use MySQL instead of MSSQL for various reasons: it works well with CakePHP, it satisfies our need, it is open source and has no cost. The MSSQL in fact is not open source and this was in contrast with our purposes.

We had to keep our MySQL database updated with the FBK internal MSSQL database. In order to do this, we developed a script in Java language that, through a crontab, an application that permits programs scheduling, periodically connects to the MSSQL database and updates our MySQL database.

The database is used to store data about our users and their preferences too. For example we store the widgets everyone uses, the position where these widgets are and so on. This give us the possibility to publish interesting statistics (What is the most used widget? Whose is the most viewed profile?) and deeply understand the real requirements the users have. This data analysis is very important because we can carry a theoretical research about this data.

11

Communication protocols:

RESTREST[15] is the acronym of Representational Transfer State and it is a paradigm in the development of web applications in order to allow manipulations of data through POST and GET and other HTTP methods.

In other words REST system allows to easily identify and describe web resources, putting them in the center of the attention. In practice this means that it is possible to call a function through a URL, as we will see in the next example of a JSON response.

Back end - front end communication: JSONJSON[16] (JavaScript Object Notation) is a data-interchange format, simple to read and write, both for machines and humans. JSON is a pure text format and therefore it is very lightweight, making it almost an ideal data-interchange language.

JSON is built on two structures:

1. A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.

2. An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

JSON vs XMLJSON, thanks to its characteristics specified above, is a data-interchange format that aims to be “textual, minimal, and a subset of JavaScript”[17].

XML is a more complex markup language used to describe structured data and to serialize objects.

We chose JSON mainly because we already had to deal with JavaScript (ExtJS), so we could directly send the JSON statement to the JavaScript code. Instead, a parser for XML was needed.

Example of a JSON response:We used JSON to retrieve information in a simple form, then to display it. Through the REST interface described above, making a JSON query is very easy.

Let's analyze the random users widget.

In the CakePHP controller users_controller.php we add this function which randomly extracts five users from the database:

12

Then, thanks to the REST interface provided by CakePHP, we can call this function typing this URL:http://desktop.fbk.eu/users/getrandomusers/5/

This results in the following HTML page, which is a unique JSON statement:

This code identifies an array of five objects, each of them containing an ID, a name, a surname and a login. This JSON statement is passed to the widget users.js which loads it into a store, reads it and finally displays it into HTML code in the web application.

13

Code 2: JSON response

[{"id":"242","name":"Galileo","surname":"Galileo","login":"ggalilei"},{"id":"456","name":"Giovanni","surname":"Keplero","login":"gkeplero"},{"id":"329","name":"Niccolò","surname":"Copernico","login":"ncopernico"},{"id":"577","name":"Isaac","surname":"Newton","login":"inewton"},{"id":"108","name":"Albert","surname":"Einstein","login":"aeinstein"}]

Code 1: snipped of users_controller.php

function getrandomusers($n=5) { Configure::write('debug', '0'); $this->layout = 'ajax';

if ($n > 30) $n = 30; $this->User->recursive = 0; $users = $this->User->find('all', array( 'fields' => array('id', 'name', 'surname', 'login'), 'order' => 'RAND()', 'limit' => $n ) ); $users = Set::extract($users, '{n}.User'); $this->set('users', $users); }

Debugging tool: FireBugBecause of the characteristics of the web application, debug is not possible through unit testing or other commonly used programming debugging tools and it is very difficult in general.

We used therefore FireBug which is a really useful tool, more precisely it comes as the browser Firefox extension, in order to check JavaScript code at runtime, to see how it works and what is exactly does. It lets you modify source code together with HTML or CSS code on the fly and see the changes immediately without always have to reload the page.

Tutorial: how to create a feedback widgetIn this last section we are going to deeply and practically understand how the entire system works, expanding it with a simple widget. We will add a feedback widget, that is a widget that contains a text area where users can write their comments and then send them to the server (see Image 4).

NOTE:

The following tutorial refers to the folders tree developed in desktop.fbk.eu application, as shown in Code 4: the cake application is inside /cake/desktop.

Controllers are in /cake/desktop/controllers, views and models similar.

In /cake/desktop/webroot there are different folders for the css, the images (such as the favicon, the logo, etc.) and the JavaScript files. ExtJS widgets (JavaScript files) are all located inside /cake/desktop/webroot/js/portal/widget.

14

Code 3: users.js widget

UsersPortlet = function(json){ var store = new Ext.data.JsonStore({ url: json.url+'/5/'+json.showPhoto, root: '', fields: ['id', 'name', 'surname', 'login'] }); store.load(); var resultTpl = new Ext.XTemplate( '<tpl for=".">', '<div class="user-wrapper">', '<div class="user-item user-{login}">', '{name} {surname}', '</div>', '</div>', '</tpl>' );

// code omitted because of no interest in this example};Ext.extend(UsersPortlet, Ext.Panel);

Usually widgets are composed of 2 parts:

● back end (server-side), written in CakePHP

● front end (client-side), written in ExtJS

It is very important to decide first if database tables are needed, which ones and how they are related with already existing database tables. If you specify the relationship CakePHP will provide all the relevant methods to you, as you will see later in this tutorial. Then you create model, views and controllers inside CakePHP. We created a very simple view for every method in the controller in order to display what the method in the controller returns.

For the front end, you have to decide how to show information and consequently which ExtJS objects do you want to use.

The feedback widget we have developed aims to create a simple window, inside which the user can write his ideas, comments or whatever he wants. In details, the feedback widget is divided into two main parts:

● the title bar, which displays the widget's title, the relative icons and, on the right, three icons to respectively collapse/expand, full screen or close the widget

● the content, which contains a text to invite the users to write their feedback, a text area where the user can write his opinions and at the bottom a submit button to send the information to the database

Let's start with the backed, that is the code that makes CakePHP understand what to do and give us the information we need.

15

Code 4: Desktop.fbk.eu (partial) folders tree with feedback files locations shown for this tutorial

/cake/desktop

/config/controllers

feedbacks_controller.php/models

feedback.php/vendors/views

/feedbacksadd.ctp

/webroot/css/img/js

/portal/widget

feedbacks.js

Back end:

We start creating a new view inside /desktop/views/feedbacks/

and call it add.ctp. The extension "ctp" stands for "Cake templates". In fact we can have different templates, not only HTML code but also PDF, AJAX and so on.

This view is used when the relative controller is called. What it does it simply returns the content of the PHP variable $response encoded in JSON language, using the PHP function json_encode.

We have to define a new model in CakePHP too, in order to specify the relations between the feedback widget and the other database tables. What we have to do is to create a new file feedback.php in

/desktop/models/This is a new class that extends the AppModel, the basic CakePHP class which contains the most widely used functions.

We call it "Feedback" and we add the relation belongsTo with the previously created model User, in order to put the database table of the feedback model and the user model in relation, allowing therefore us to do queries over them: in other words, a find operation on the feedback model will also fetch a record related to the User model, if it exists.

16

Code 5: add.ctp (CakePHP view of the feedback widget)

<?php echo json_encode($response); ?>

Code 6: feedback.php (CakePHP model of the feedback widget)

<?php

  class Feedback extends AppModel{    var $name = 'Feedback';    var $belongsTo = 'User';  }

 ?>

Image 4: the three steps of the feedback widget: writing a comment, sending data and the response

Finally, let's add the controller feedbacks_controller.php in the folder

/desktop/controllers/

The controller contains the PHP code that extracts information from the database and then displays them through the view we have previously defined.

Our class FeedbacksController (see Code 7) will extends the CakePHP class AppController, similarly with the class Feedback in the model which extends AppModel.

The function beforeFilter is really useful because it will be executed before each action. We use it to check the session, that is to check if a user is logged and so has the privileges to executes some actions, or he is not.

Then we define a new function add, which is the core of the feedback widget.

We use the configure::write function in order to set the debug variable defined inside CakePHP configuration file to 0, changing therefore the debug level to production.

this->layout = ‘Ajax’ sets the layout to the ajax layout, one already defined in CakePHP. This layout, instead of the default one, will output the data without adding HTML code. We need therefore to use the Ajax layout because we will choose in the front end through ExtJS how to display data.

The rest of the code checks whether the box with the name text contains some text, in this case it saves it together with the session id of the user on the database, setting the PHP variable $response['success'] to true. Otherwise it means an error occurred, so we set $response['success'] to false and add some text to inform the user about this problem.

Finally we use $this->set('response', $response); to set to the variable response the content of the PHP variable with the same name. This function is used in order to pass data from the controller to the view, where we will be able to read and then display it.

17

Front end:Until here we have extended our CakePHP application adding a new model, controller and view that give as result a flow of data. Because we don't simply want to write data as HTML code but instead our aim is to create a new ExtJS widget, we have to create a new Javascript file which displays a new ExtJS window containing our data.

First of all we have to create a new Javascript file feedback.js inside webroot/js/portal/widget. We create a new function, called Feedback, which defines the widget. We then have to extend the Feedback with the Ext.Panel in order to inheriting the functionality of the superclass.

Inside our Feedback function we define a new Ext.form.FormPanel which is a particular type of ExtJS panel. We set feedback_widget as the baseCls, that means that feedback_widget will be the CSS class applied to this panel element. We set then some properties like the height, the body style and the alignment of the buttons.

Then we add items to the panel, in our example we add a label, a simple text displayed inside the widget, and a text area to allow the user to write his/her feedbacks.

Finally we add the buttons, in our case there is only the submit button, which has a function called whenever the button is pressed. This send data to another page, then displays a message to inform the user about the success of the action.

18

Code 7: feedbacks_controller.php (CakePHP controller of the feedback widget)

<?php

class FeedbacksController extends AppController {    var $name = 'Feedbacks';    function beforeFilter()    {        parent::beforeFilter();        $this->checkSession();    }

    function add() {        Configure::write('debug', '0');            $this->layout = 'ajax';               if (!empty($this->params['form']['text'])){            $data['text'] = $this->params['form']['text'];            $data['user_id'] = $this->Session->read('id');            $this->Feedback->save($data);            $response['success'] = true;                  }        else {            $response['success'] = false;            $response['errors']['text'] = 'Write a message, please';        }        $this->set('response', $response);    }

}

?>

19

Code 8: feedback.js (ExtJS feedback widget)

Feedback = function(){ this.form = new Ext.form.FormPanel({ baseCls: 'feedback_widget' ,autoHeight: true ,bodyStyle:'padding:10px' ,buttonAlign: 'center' ,items: [ { xtype: 'label', cls: 'feedback_label', text: "Your suggestions and feedback are very important for us!                    Please, write here below any kind of suggestion (in Italian or English, as you prefer),                    even quick one word suggestions are perfect! Thank you!" ,anchor: '0 30%' },{ xtype: 'textarea', hideLabel: true, cls: 'feedback_text', grow: true, name: 'text' ,anchor: '0 50%' // anchor width by percentage and height by raw adjustment }], buttons: [{ text: 'Submit', handler: function(){ this.form.getForm().submit( { url:'feedbacks/add', waitMsg:'Saving Data...', success: function(form,action){ Ext.example.msg('Sent, thanks for your message!', form.getValues().text); form.reset();} } ); }, scope: this, formBind: true } ] }); Feedback.superclass.constructor.call(this, { autoHeight: true, autoWidth: true, defaults: { autoScroll: true }, items: this.form ,layout: 'fit' }); };Ext.extend(Feedback, Ext.Panel);

It is interesting to know that when the web application starts, it loads from the database the widgets that are active for the current user and put each one inside a portlet, simple windows containing data. The title of the portlets is obtained from the database too, as well as the positions of each widget.

LicenseThe whole code developed during this project, in agreement on the base principles upon which web 2.0 and the SoNet project are ground, will be released under Affero GPL[18] license (at the time being it is not yet available) that is appropriate for web services, allowing and encouraging everyone who wants to make any derived works.

20

Bibliography1. About FBK, http://www.fbk.eu/about, November 4, 20082. SoNet website, http://sonet.fbk.eu, November 4, 20083. Web 2.0 on Wikipedia, http://en.wikipedia.org/wiki/Web_2.0, November 4, 20084. Igoogle website, http://www.google.it/ig, November 4, 20085. Netvibes website, http://www.netvibes.com/http://www.netvibes.com/, November 4, 20086. ExtJS licence, http://extjs.com/products/license.php, November 4, 20087. RSS on Wikipedia , http://en.wikipedia.org/wiki/RSS_(file_format), November 4, 20088. CakePHP website, http://cakephp.org/, November 4, 20089. Ruby on Rails homepage, http://www.rubyonrails.org/, November 4, 200810. Simphony website, http://www.symfony-project.org/, November 4, 200811. Zend website, http://framework.zend.com/, November 4, 200812. ExtJS website, http://extjs.com/, November 4, 200813. JQuery website, http://jquery.com/, November 4, 200814. YUI compressor website, http://developer.yahoo.com/yui/compressor/, November 4, 200815. REST on Wikipedia, http://en.wikipedia.org/wiki/Representational_State_Transfer, November 4, 200816. JSON website, http://www.json.org/, November 4, 200817. JSON vs XML debate, http://www.infoq.com/news/2006/12/json-vs-xml-debate, November 4, 200818. Affero GPL website, http://www.affero.org/oagpl.html, November 4, 2008

21