Difference between revisions of "General guidelines about Portlet StyleSheets"

From Gcube Wiki
Jump to: navigation, search
Line 1: Line 1:
 
{{UnderUpdate}}
 
{{UnderUpdate}}
  
'''Homogenizing the DILIGENT interface'''
+
'''Homogenizing the D4Science interface'''
 
==Pre-development Actions==
 
==Pre-development Actions==
 
===Downloading Gridpshere===
 
===Downloading Gridpshere===
The official DILIGENT gridsphere version is: '''''2.2.7'''''.<br>
+
The official D4Science gridsphere version is: '''''3.1'''''.<br>
 
All the portlet developers must use this version.
 
All the portlet developers must use this version.
To download it click [http://www.gridsphere.org/download/pub/gridsphere/gridsphere-2.2.7-src.tgz here].
+
<!-- To download it click [http://www.gridsphere.org/download/pub/gridsphere/gridsphere-2.2.7-src.tgz here]. -->
  
 
===Preparing the environment===
 
===Preparing the environment===
Line 13: Line 13:
  
 
===Patching Gridpshere Home===
 
===Patching Gridpshere Home===
In order to be able to use DILIGENT header themes, you should first patch gridsphere.
+
In order to be able to use D4Science header themes, you should first patch gridsphere.
 
The needed steps are:
 
The needed steps are:
#Download the patch from [http://ddwiki.di.uoa.gr/mediawiki/images/a/a8/Diligent-theme-patch.tgz here]
+
#Download the patch (coming soon) <!-- [http://ddwiki.di.uoa.gr/mediawiki/images/a/a8/Diligent-theme-patch.tgz here] -->
 
#Unzip / Untar the file
 
#Unzip / Untar the file
 
#Execute: <span style="color:green;">cd &lt;patch-folder&gt;; ./patch.sh $GRIDSPHERE_HOME</span>
 
#Execute: <span style="color:green;">cd &lt;patch-folder&gt;; ./patch.sh $GRIDSPHERE_HOME</span>
Line 26: Line 26:
 
===Installing GridSphere===
 
===Installing GridSphere===
 
*Execute: <span style="color:green;">cd $GRIDSPHERE_HOME; ant install</span>
 
*Execute: <span style="color:green;">cd $GRIDSPHERE_HOME; ant install</span>
*The server url is: ''<nowiki>http://localhost:port/diligent/gcube</nowiki>''
+
*The server url is: ''<nowiki>http://localhost:port/gcube/portal</nowiki>''
  
 
==StyleSheet Classes==
 
==StyleSheet Classes==
 
===Header===
 
===Header===
 
For using the diligent-header class, you should add in your html tag the following code:<br>
 
For using the diligent-header class, you should add in your html tag the following code:<br>
<span style="color:navy;">class="diligent-header"</span><br>
+
<span style="color:navy;">class="d4science-header"</span><br>
 
'''Example:'''<br>
 
'''Example:'''<br>
 
In order to have the following result:<br>
 
In order to have the following result:<br>

Revision as of 19:40, 6 September 2008

Alert icon2.gif THIS SECTION OF GCUBE DOCUMENTATION IS CURRENTLY UNDER UPDATE.


Homogenizing the D4Science interface

Pre-development Actions

Downloading Gridpshere

The official D4Science gridsphere version is: 3.1.
All the portlet developers must use this version.

Preparing the environment

  1. Unzip / Untar the file
  2. Add a new environmental variable: export GRIDSPHERE_HOME=<grdsphere-folder>

Patching Gridpshere Home

In order to be able to use D4Science header themes, you should first patch gridsphere. The needed steps are:

  1. Download the patch (coming soon)
  2. Unzip / Untar the file
  3. Execute: cd <patch-folder>; ./patch.sh $GRIDSPHERE_HOME

! Important Info 1:
This patch also contains the changes needed on Gridsphere so as to consume GWT applications.
! Important Info 2:
If you want to use credentials you also have to patch gridpshere for credentials. You can find the needed info here

Installing GridSphere

  • Execute: cd $GRIDSPHERE_HOME; ant install
  • The server url is: http://localhost:port/gcube/portal

StyleSheet Classes

Header

For using the diligent-header class, you should add in your html tag the following code:
class="d4science-header"
Example:
In order to have the following result:
Diligent-header.PNG
You must write:

<table>
    <tr class="diligent-header">
        <td><img src="browse.png"></td>
        <td>Browse</td>
    </tr>
</table>

Body

For the body you should you the css class named "portlet-section-body"
Diligent-body.PNG

Importing Custom-made CSS files

There are two ways to import a custom-made css file:

  1. In doView() method of your portlet, you write: response.addProperty("CSS_HREF", request.getContextPath() + "/html/<css-filename>.css");
  2. Directly in the jsp page: <link rel="stylesheet" href="<%= request.getContextPath()%>/html/<css-filename>.css" type="text/css">





--Valia 19:22, 25 May 2007 (EEST)