Revision 4273b4a4 docs/source/webclient.rst

b/docs/source/webclient.rst
3 3

  
4 4
Introduction
5 5
------------
6

  
7
Document Revisions
8
^^^^^^^^^^^^^^^^^^
9

  
10
=====================  =====================================
11
Revision               Description
12
=====================  =====================================
13
0.1 (Apr 09, 2012)     Initial release.
14
=====================  =====================================
6
The Pithos+ Web client documentation contains information about installation and configuration of the web client along with information about the development of the client (development environment, tools, libraries, API usage etc).
15 7

  
16 8
Build instructions
17 9
------------------
18
prerequisites: git, jdk 1.6, ant
10
Prerequisites: git, jdk 1.6, ant
19 11

  
20 12
First get the source from the git repository
21 13

  
22 14
git clone https://code.grnet.gr/git/pithos-web-client
23 15

  
16
Enter the newly created folder
17

  
24 18
cd pithos-web-client
25 19

  
26
Edit the file runtime.properties and set the loginUrl and cloudbar properties to the correct values eg.
20
and run ant
27 21

  
28
loginUrl=https://accounts.staging.okeanos.grnet.gr/im/login?next=https%3A//pithos.staging.okeanos.grnet.gr/ui
22
ant
29 23

  
30
CLOUDBAR_ACTIVE_SERVICE = cloud;
24
Now go to the output folder
31 25

  
32
CLOUDBAR_LOCATION = https://accounts.staging.okeanos.grnet.gr/static/im/cloudbar/
26
cd bin/www/gr.grnet.pithos.web.Pithos
33 27

  
34
CLOUDBAR_SERVICES = https://accounts.staging.okeanos.grnet.gr/im/get_services
28
This folder contains the "binaries" (html and javascript actually). Those files should be put somewhere to be served by the web server.
29
For deploying to pithos.dev.grnet.gr, upload everything to /var/www/pithos_web_client where they are served under /ui.
35 30

  
36
CLOUDBAR_MENU = https://accounts.staging.okeanos.grnet.gr/im/get_menu
31
Important reminder: Due to Same-Origin-Policy the web client should be served under the same domain as the API.
37 32

  
38
Then run ant
33
Configuration
34
-------------
39 35

  
40
ant
36
All configuration exists as javascript variables in index.html file. The things that need to be configured are:
41 37

  
42
cd bin/www/gr.grnet.pithos.web.Pithos
38
loginUrl: The url that the client will redirect the user if she is not logged in (defailt: /im/login?next=). The next= parameter is determined automatically.
43 39

  
44
This folder contains the "binaries" (html and javascript actually). Those files should be put somewhere to be served by the web server.
45
For deploying to pithos.dev.grnet.gr, upload everything to /var/www/pithos_web_client where they are served under /ui.
40
authCookie: The name of the authentication cookie that is set by the login process which is external to the web client (default: _pithos2_a).
46 41

  
47
Important reminder: Due to Same-Origin-Policy the web client should be served under the same domain as the API.
42
feedbackUrl: The url that the client should use to POST feedback messages from the user when an error occurs (default: /im/feedback).
43

  
44
The CLOUDBAR_* set of variables is related to the bar that is displayed on the top of the web client 's page. This bar is used to navigate to other services of the cloud and also contains a menu for sendind feedback, inviting other people, logout etc. This bar is also externally configured and the web client just loads it as a script.
45

  
46
CLOUDBAR_ACTIVE_SERVICE: The service that we currently see (in case of the web client it is always pithos).
47

  
48
CLOUDBAR_LOCATION: The url that tha cloudbar script is loaded from (default: /static/im/cloudbar/).
49

  
50
CLOUDBAR_SERVICES: The url that is used to get the available service (default: /im/get_services).
51

  
52
CLOUDBAR_MENU: The url that the menu is loaded from (default: /im/get_menu).
53

  
54
Development environment
55
-----------------------
56
The development environment used is Eclipse Indigo with the Google Plugin for Eclipse but other environments can be used without problems. The libraries needed for development is
57

  
58
Google Web Toolkit (GWT) v.2.4.0 (http://developers.google.com/web-toolkit/)
59

  
60
The gwt-user.jar is needed in the classpath in order to compile the source. The gwt-dev.jar is needed to run the development mode server for debugging.
61

  
62
All dependencies are downloaded automatically by the ant build script (build.xml) in the dependencies folder if not already found there.
63

  
64
Building
65
^^^^^^^^
66
Building the project consists just of compiling the java source into javascript and html by the GWT compiler. This is done by the ant script (ant target "gwt-compile")
67

  
68
Debugging
69
^^^^^^^^^
70
Debugging is done using the GWT development server. The ant script has a special target (run-web-dev-mode) which starts the devmode server, but one can do the same thing from inside Eclipse. In order to use the devmode server, the GWT plugin is needed in the browser. This way the browser communicates with the devmode server and the developer can set breakpoints, examine variable values, evaluate expressions etc for the application that runs in the browser.
48 71

  
49 72
Technology and tools
50 73
--------------------
......
55 78

  
56 79
The web client does an adaptation of the container/object server-side data model to the more user-friendly folder/file data model. The client uses the API to retrieve info about the containers and objects from the server and displays them in a tree-like structure. It uses two special gwt widgets, CellTree (https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCellWidgets#celltree) and CellTable (https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCellTable) for the folder tree and filelist accordingly. The CellTree widget initiates calls to the API at the beginning and each time a subtree is expanded in order to fetch all info needed to display the subfolders. That way the datamodel is controlled by the widget.
57 80

  
81
Source code structure
82
---------------------
83
Java source code consists of the following packages:
84

  
85
gr.grnet.pithos.web.client: This is the root packages that containes the Pithos class which is the application entry point and various utility classes like menus, dialogs etc.
86

  
87
gr.grnet.pithos.web.client.foldertree: All classes related to the datamodel and tree widget that displays containers, folders and files.
88

  
89
gr.grnet.pithos.web.client.mysharedtree: All classes related to the datamodel and tree widget that displays the objects shared by me.
90

  
91
gr.grnet.pithos.web.client.othershared: All classes related to the datamodel and tree widget that displays the objects shared to me by other users
92

  
93
gr.grnet.pithos.web.client.grouptree: All classes related to the datamodel and tree widget that displays the groups and users used by the user in order to share files to groups of people more easily.
94

  
95
gr.grnet.pithos.web.client.commands: This packages contains the commands issued by the various menus (right-click menus and toolbar).
96

  
97
gr.grnet.pithos.web.client.rest: This package contains the classes that define the HTTP requests made to the API
98

  
99
gr.grnet.pithos.resources: This folder contains various images used as icons in the application 's UI. Those images are embeded in the javascript code by the GWT compiler for efficiency and therefore they are not served as static files.
100

  
101
gr.grnet.pithos.web.public: This folder contains the index.html page of the application and all related css and other files loaded by it (like the plupload scripts for multiple file uploading).
102

  
58 103
Authentication
59 104
--------------
60 105

  
61
Authentication is provided by an external service. Upon loading the web client checks for the existence of the authentication cookie named '_pithos2_a'. If the cookie is present then it is parsed for the username and authentication token. The format of the cookie content is
106
Authentication is provided by an external service. Upon loading,, the web client checks for the existence of the authentication cookie named '_pithos2_a'. If the cookie is present then it is parsed for the username and authentication token. The format of the cookie content is
62 107

  
63 108
username|token
64 109

  
......
66 111

  
67 112
If the auth cookie is not present in the first place then the user is immediately redirected to the login page.
68 113

  
69
The login page url is defined in the runtime.properties file and it must end with a 'next=' url parameter. The value of the parameter will be determined automatically. If the parameter is not present then the login page will not be able to redirect back to the client after a successful login and the use will end up at her profile page.
114
The login page url is defined in the index.html file and it must end with a 'next=' url parameter. The value of the parameter will be determined automatically. If the parameter is not present then the login page will not be able to redirect back to the client after a successful login and the user will end up at her profile page.
70 115

  
71 116
API Usage
72 117
---------
......
83 128

  
84 129
GET /v1/username?format=json
85 130

  
86
If there is a container named 'pithos' and a container named 'trash' then it proceeds to the folder tree construction. Otherwise the missing containers will be created with a request
131
If there is a container named 'pithos' and a container named 'trash' then it proceeds to the folder tree construction. Otherwise the missing containers will be created with requests
87 132

  
88 133
PUT /v1/username/pithos
89 134

  
......
101 146

  
102 147
GET /v1/username/pithos?format=json&delimiter=/&prefix=pithos_subfolder1
103 148

  
104
are made to server to fetch details of the subfolders. We need to know if a subfolder has its own subfolders so that we display the cross sign next to it.
149
are made to the server to fetch details of the subfolders. We need to know if a subfolder has its own subfolders so that we display the cross sign next to it.
105 150

  
106 151
Constructing the "Shared by me" tree
107 152
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
......
115 160

  
116 161
GET /v1/username/container?format=json&delimiter=/&prefix=
117 162

  
118
is made for each container. If the container is shared it is added to the tree (under "Shared by me") and the client continues to the next container (this has to be re-visited because it was based that due to the permission inheritance the subfolders are also shared. Since the inheritance has been removed this is no longer valid).
163
is made for each container. If the container is shared it is added to the tree (under "Shared by me") and the client continues to the next container (this has to be re-visited because it was based on the fact that due to the permission inheritance the subfolders are also shared. Since the inheritance has been removed this is no longer valid).
119 164

  
120 165
If the container is not shared we have to go deeper to find possible shared subfolders and files. So we examine each file in the folder and if shared we add it in the "Shared by me" folder and we also do a nested iteration getting each subfolder
121 166

  
......
133 178

  
134 179
GET /v1/username?format=json
135 180

  
136
to get the containers shared by the user and for each container we do the same sequence of requests as in the "Shared by me case". The difference no is that we don't need to check if the container/folder/file is shared because all requests with a different username always return only object that are visible to the logged-on user.
181
to get the containers shared by the user and for each container we do the same sequence of requests as in the "Shared by me" case. The difference here is that we don't need to check if the container/folder/file is shared because all requests with a different username always return only objects that are visible to the logged-on user.
137 182

  
138 183
Constructing the Groups tree
139 184
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
140 185

  
141
The groups tree is contructed with the initial request for the user account data which returns the groups defined be the user along with their members.
186
The groups tree is contructed with the initial request for the user account data which returns the groups defined by the user along with their members.
142 187

  
143 188
File sharing
144 189
^^^^^^^^^^^^

Also available in: Unified diff