Difference between revisions of "Developing Portlets with GWT"

From Gcube Wiki
Jump to: navigation, search
(Configuring the portlet)
 
(84 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
[[Category:TO BE REMOVED]]
 +
 
How to write a portlet with the aim of GWT.
 
How to write a portlet with the aim of GWT.
  
 
== Pre-development Actions==
 
== Pre-development Actions==
===Modifying Tomcat===
 
# Replace ''$CATALINA_HOME/webapps/gridsphere/WEB-INF/CustomPortal/layouts/TemplateLayout.xml'' with the corresponding one found [http://dlib.sns.it/bscw/bscw.cgi/0/55048 here].
 
# Include gwt.js and script.html files found [http://dlib.sns.it/bscw/bscw.cgi/0/55048 here] in ''$CATALINA_HOME/webapps/gridsphere/html'' directory.
 
 
 
===Modifying Gridpshere Home===
 
===Modifying Gridpshere Home===
 
If you want you can also apply the respective changes to gridsphere's home directory.
 
If you want you can also apply the respective changes to gridsphere's home directory.
Line 18: Line 16:
 
===Creating a gwt project===
 
===Creating a gwt project===
 
In order to create a gwt project, you must execute:
 
In order to create a gwt project, you must execute:
<pre>
+
<br>
>cd $GRIDPSHERE_HOME/projects
+
<br>
>mkdir <module_dir_name>
+
<source lang="bash">
>cd <module_dir_name>
+
cd $GRIDPSHERE_HOME/projects
>$GWT_HOME/projectCreator -eclipse MyProject
+
mkdir <module_dir_name>
>$GWT_HOME/applicationCreator -eclipse MyProject org.diligentproject.<whatever>.client.<ModuleName>
+
cd <module_dir_name>
</pre>
+
$GWT_HOME/projectCreator -eclipse MyProject
 +
$GWT_HOME/applicationCreator -eclipse MyProject org.gcube.<whatever>.client.<ModuleName>
 +
</source>
  
 
Now you can develop your gwt project as you wish by using eclipse!<br>
 
Now you can develop your gwt project as you wish by using eclipse!<br>
FYI, there is a toolkit for eclipse that provides developers with a GUI so as to design their '''gwt modules'''.<br>
+
 
However, it's not free. If you wish to see its demos, click [http://www.instantiations.com/gwtdesigner/ here].<br>
+
===Writing a gwt application===
 +
You can find useful information about how to write a gwt application on the '''G'''oogle '''W'''eb '''T'''oolkit's official site: [http://code.google.com/webtoolkit/ http://code.google.com/webtoolkit/].<br>
 
<br>
 
<br>
You can find useful information about the '''G'''oogle '''W'''eb '''T'''oolkit on its official site: [http://code.google.com/webtoolkit/ http://code.google.com/webtoolkit/]
+
====<span style="color:red;">! IMPORTANT INFO</span>====
 +
In the entrypoint-class, in the onModuleLoad() method:
 +
When you are about to add your widget in the main page,<br>
 +
instead of writing:
 +
<source lang="java5">RootPanel.get().add(<your widget>);
 +
</source>
 +
you must write:
 +
<source lang="java5">RootPanel.get(<a unique id for the DIV>).add(<your widget>);
 +
</source>
 +
 
 +
So, the generated html will be placed in the predefined ''div'' instead of being placed in an unspecified location.
  
 
===Creating a jsr 168 portlet===
 
===Creating a jsr 168 portlet===
 
In oder to create an empty portlet project, you must execute:
 
In oder to create an empty portlet project, you must execute:
<pre>
+
<br><br>
>cd $GRIDPSHERE_HOME/
+
<div style="color:green;">
>ant new-project
+
>cd $GRIDPSHERE_HOME/<br>
    * insert: <Portlet's Title>
+
>ant new-project<br>
    * insert: <module_dir_name> --- This must be the same as in gwt project
+
* insert: &lt;Portlet's Title&gt;<br>
    * insert: jsr
+
* insert: &lt;module_dir_name&gt; -- This must be the same as in gwt project<br>
</pre>
+
* insert: jsr<br>
 +
</div><br>
  
 
Now, if you refresh the eclipse project, you can see that the "portlet-files" are generated.
 
Now, if you refresh the eclipse project, you can see that the "portlet-files" are generated.
  
 
====Creating the portlet class====
 
====Creating the portlet class====
* Create a class named: org.diligentproject.<whatever>.portlets.<portletClassName>
+
* Create a class named: '''''org.gcube.<whatever>.portlets.<portletClassName>'''''.
 
* Add the following content to the class:
 
* Add the following content to the class:
<pre>
+
<source lang="java5">
  
// JSP folder name
+
    // JSP folder name
public static final String JSP_FOLDER = "/jsp";
+
    public static final String JSP_FOLDER = "/jsp";
// JSP file name to be rendered on the view mode
+
    // JSP file name to be rendered on the view mode
 
+
    public static final String VIEW_JSP = JSP_FOLDER + "/<a_name_for_the_jsp_page>.jsp";
public static final String VIEW_JSP = JSP_FOLDER + "/<a_name_for_the_jsp_page>.jsp";
+
 
 
 
 
Line 61: Line 72:
 
// It does absolutely nothing else.
 
// It does absolutely nothing else.
 
// ------------------------------------------------------------
 
// ------------------------------------------------------------
   
+
 
    // Set the MIME type for the render response
+
//response.setContentType(request.getResponseContentType());
+
   
+
            request.getPortletSession().setAttribute("username", request.getRemoteUser(), PortletSession.APPLICATION_SCOPE);
// Invoke the JSP to render
+
 
   
+
// Invoke the JSP to render:
   
+
      PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(VIEW_JSP);
PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(VIEW_JSP);
+
 
rd.include(request,response);             
 
rd.include(request,response);             
 
     }
 
     }
  
</pre>
+
</source>
  
 
====Creating the jsp page====
 
====Creating the jsp page====
Line 79: Line 89:
  
 
*In this file you place the following content:
 
*In this file you place the following content:
<pre>
+
<source lang="asp">
 
<%@ page contentType="text/html" %>
 
<%@ page contentType="text/html" %>
 
<%@taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
 
<%@taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
Line 87: Line 97:
 
<!-- between html and your Web Toolkit module  -->
 
<!-- between html and your Web Toolkit module  -->
 
<!--                                          -->
 
<!--                                          -->
<meta name='gwt:module' content='org.diligentproject.<whatever>.client.<ModuleName>'>
+
<script src='<%=request.getContextPath()%>/html/org.gcube.<whatever>.<ModuleName>.nocache.js'></script>
+
 
<!--                                            -->
+
<!-- This script is required bootstrap stuff.  -->
+
<!-- You can put it in the HEAD, but startup    -->
+
<!-- is slightly faster if you include it here. -->
+
<!--                                            -->
+
  
<div id="<a unique name for the DIV">
+
<div id="<a unique id for the DIV>">
 
</div>
 
</div>
  
</pre>
+
</source>
  
I should mention here that the '''org.diligentproject.<whatever>.client.<ModuleName>''' is the one you defined when you created the gwt application.<br>
+
I should mention here that the '''''org.gcube.<whatever>.<ModuleName>''''' is the one you defined when you created the gwt application.<br>
Additionally, the id for the div is good to be a name related to the portlet-name.
+
Additionally, the id for the div is the one you used in the RootPanel.get() method.
  
 
===Configuring the portlet===
 
===Configuring the portlet===
* Modify the ''webapp/portlet.xml'' file as following:
+
* Modify the ''webapp/WEB-INF/portlet.xml'' file as following:
 
Instead of:
 
Instead of:
<code>
+
<source lang="xml">
        <!-- place portlet description here --><br>
+
        <description xml:lang="en">This Portlet is a sample</description><br>
+
        <description xml:lang="de">Diese Portlet ist ein sample</description><br>
+
        <!-- place unique portlet name here --><br>
+
        <portlet-name>SamplePortlet</portlet-name><br>
+
        <display-name xml:lang="en">A sample Portlet</display-name><br>
+
        <display-name xml:lang="de">Ein sample Portlet</display-name><br>
+
        <!-- place your portlet class name here --><br>
+
        <portlet-class>org.gridlab.gridsphere.portlets.SamplePortlet</portlet-class>
+
</code>
+
Write:
+
<pre>
+
 
         <!-- place portlet description here -->
 
         <!-- place portlet description here -->
         <description xml:lang="en">Your Portlet description</description>
+
         <description xml:lang="en">This Portlet is a sample</description>
 
         <description xml:lang="de">Diese Portlet ist ein sample</description>
 
         <description xml:lang="de">Diese Portlet ist ein sample</description>
 
         <!-- place unique portlet name here -->
 
         <!-- place unique portlet name here -->
Line 128: Line 121:
 
         <!-- place your portlet class name here -->
 
         <!-- place your portlet class name here -->
 
         <portlet-class>org.gridlab.gridsphere.portlets.SamplePortlet</portlet-class>
 
         <portlet-class>org.gridlab.gridsphere.portlets.SamplePortlet</portlet-class>
</pre>
+
</source>
 +
Write:
 +
<source lang="xml">
 +
        <!-- place portlet description here -->
 +
        <description xml:lang="en">Your Portlet description</description>
 +
        <!-- place unique portlet name here -->
 +
        <portlet-name>UniquePorltetName</portlet-name>
 +
        <display-name xml:lang="en">Portlet's Title</display-name>
 +
        <!-- place your portlet class name here -->
 +
        <portlet-class>>org.diligentproject.<whatever>.portlets.<portletClassName></portlet-class>
 +
</source>
  
 
==Deploying the gwt-portlet==
 
==Deploying the gwt-portlet==
In order to deploy the gwt-portlet.
+
In order to deploy the gwt-portlet you need to create a file in the main directory of your eclipse project which will contain the following:
 +
<source lang="bash">#!/bin/bash
 +
#This bash script compiles and deploys the gwt-portlet.
 +
 
 +
# Delete files from previous compilation / deployment:
 +
rm -rf webapp/html
 +
rm -rf webapp/WEB-INF/classes/org
 +
rm -rf .gwt-cache/
 +
rm -rf ./www/org.gcube*
 +
ant clean
 +
 
 +
#Stop Tomcat:
 +
$CATALINA_HOME/bin/shutdown.sh
 +
 
 +
#Compile the gwt project:
 +
./<ModuleName>-compile -out www/  ##### Replace the <ModuleName> with the actual one.
 +
 
 +
# Copy files from gwt project to portlet public place:
 +
mkdir webapp/html/
 +
cp -r ./www/org.gcube*/* webapp/html/
 +
 
 +
 
 +
ant compile
 +
cp -r ./build/classes/org/ webapp/WEB-INF/classes/
 +
 
 +
# Install the porltet on Tomcat:
 +
ant install
 +
 
 +
#Start Tomcat:
 +
$CATALINA_HOME/bin/startup.sh
 +
</source>
 +
 
 +
Finally, just execute this script, and the portlet will be deployed!!!
 +
<br>
 +
<br>
 +
 
 +
==Authors==
 +
[http://ddwiki.di.uoa.gr/mediawiki/index.php/User:Valia Valia Tsagkalidou]
 +
 
 +
[http://www.asidev.com/asidev/charter_members/luca_frosini.html Luca Frosini]
 +
<br>
 +
<br>
 +
 
 +
----
 +
--[[User:Valia|Valia]] 17:32, 1 March 2007 (EET)

Latest revision as of 18:04, 6 July 2016


How to write a portlet with the aim of GWT.

Pre-development Actions

Modifying Gridpshere Home

If you want you can also apply the respective changes to gridsphere's home directory. This can be useful if, for some reason, you want to redeploy gridsphere.

Installing GWT

  1. Download the latest version of GWT from here.
  2. Uzip the file.
  3. Set environmntal variable: GWT_HOME=<the name of the folder where you unpacked gwt files>

Creating a gwt-portlet

Creating a gwt project

In order to create a gwt project, you must execute:

cd $GRIDPSHERE_HOME/projects
mkdir <module_dir_name>
cd <module_dir_name>
$GWT_HOME/projectCreator -eclipse MyProject
$GWT_HOME/applicationCreator -eclipse MyProject org.gcube.<whatever>.client.<ModuleName>

Now you can develop your gwt project as you wish by using eclipse!

Writing a gwt application

You can find useful information about how to write a gwt application on the Google Web Toolkit's official site: http://code.google.com/webtoolkit/.

! IMPORTANT INFO

In the entrypoint-class, in the onModuleLoad() method: When you are about to add your widget in the main page,
instead of writing:

RootPanel.get().add(<your widget>);

you must write:

RootPanel.get(<a unique id for the DIV>).add(<your widget>);

So, the generated html will be placed in the predefined div instead of being placed in an unspecified location.

Creating a jsr 168 portlet

In oder to create an empty portlet project, you must execute:

>cd $GRIDPSHERE_HOME/
>ant new-project

  • insert: <Portlet's Title>
  • insert: <module_dir_name> -- This must be the same as in gwt project
  • insert: jsr

Now, if you refresh the eclipse project, you can see that the "portlet-files" are generated.

Creating the portlet class

  • Create a class named: org.gcube.<whatever>.portlets.<portletClassName>.
  • Add the following content to the class:
    // 	JSP folder name
    public static final String JSP_FOLDER = "/jsp";
    //	 JSP file name to be rendered on the view mode
    public static final String VIEW_JSP = JSP_FOLDER + "/<a_name_for_the_jsp_page>.jsp";
 
 
    public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException{
		// ------------------------------------------------------------
		// Note: The portlet is just diplaying a JSP for the AJAX Lab.
		// It does absolutely nothing else.
		// ------------------------------------------------------------
 
 
 
    	        request.getPortletSession().setAttribute("username", request.getRemoteUser(), PortletSession.APPLICATION_SCOPE);
 
		// Invoke the JSP to render:
       		PortletRequestDispatcher rd = getPortletContext().getRequestDispatcher(VIEW_JSP);
		rd.include(request,response);            
    }

Creating the jsp page

  • Create a file in the webapp/jsp directory named: <a_name_for_the_jsp_page>.jsp.
  • In this file you place the following content:
<%@ page contentType="text/html" %>
<%@taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
 
<!--                                           -->
<!-- The module reference below is the link    -->
<!-- between html and your Web Toolkit module  -->		
<!--                                           -->
<script src='<%=request.getContextPath()%>/html/org.gcube.<whatever>.<ModuleName>.nocache.js'></script>
 
 
<div id="<a unique id for the DIV>">
</div>

I should mention here that the org.gcube.<whatever>.<ModuleName> is the one you defined when you created the gwt application.
Additionally, the id for the div is the one you used in the RootPanel.get() method.

Configuring the portlet

  • Modify the webapp/WEB-INF/portlet.xml file as following:

Instead of:

        <!-- place portlet description here -->
        <description xml:lang="en">This Portlet is a sample</description>
        <description xml:lang="de">Diese Portlet ist ein sample</description>
        <!-- place unique portlet name here -->
        <portlet-name>SamplePortlet</portlet-name>
        <display-name xml:lang="en">A sample Portlet</display-name>
        <display-name xml:lang="de">Ein sample Portlet</display-name>
        <!-- place your portlet class name here -->
        <portlet-class>org.gridlab.gridsphere.portlets.SamplePortlet</portlet-class>

Write:

        <!-- place portlet description here -->
        <description xml:lang="en">Your Portlet description</description>
        <!-- place unique portlet name here -->
        <portlet-name>UniquePorltetName</portlet-name>
        <display-name xml:lang="en">Portlet's Title</display-name>
        <!-- place your portlet class name here -->
        <portlet-class>>org.diligentproject.<whatever>.portlets.<portletClassName></portlet-class>

Deploying the gwt-portlet

In order to deploy the gwt-portlet you need to create a file in the main directory of your eclipse project which will contain the following:

#!/bin/bash
#This bash script compiles and deploys the gwt-portlet.
 
# Delete files from previous compilation / deployment:
rm -rf webapp/html
rm -rf webapp/WEB-INF/classes/org
rm -rf .gwt-cache/
rm -rf ./www/org.gcube*
ant clean
 
#Stop Tomcat:
$CATALINA_HOME/bin/shutdown.sh
 
#Compile the gwt project:
./<ModuleName>-compile -out www/  ##### Replace the <ModuleName> with the actual one.
 
# Copy files from gwt project to portlet public place:
mkdir webapp/html/
cp -r ./www/org.gcube*/* webapp/html/
 
 
ant compile
cp -r ./build/classes/org/ webapp/WEB-INF/classes/
 
# Install the porltet on Tomcat:
ant install
 
#Start Tomcat:
$CATALINA_HOME/bin/startup.sh

Finally, just execute this script, and the portlet will be deployed!!!

Authors

Valia Tsagkalidou

Luca Frosini


--Valia 17:32, 1 March 2007 (EET)