Difference between revisions of "Adding a Quick tour guide to your portlet"

From Gcube Wiki
Jump to: navigation, search
(→‎Adding a gCube Quick tour guide to your gCube Portlet Project)
(→‎Complete working example)
Line 133: Line 133:
  
 
<source lang="java">  
 
<source lang="java">  
−
private void showGuidedTour() {
+
private void showGuidedTour() {
 
TourStep step1 = new GCUBETemplate1Text1Image(true) {
 
TourStep step1 = new GCUBETemplate1Text1Image(true) {
  
 
@Override
 
@Override
 
public String setStepTitle() {
 
public String setStepTitle() {
−
return "From Wikipedia";
+
return "gCube Reporting";
 
}
 
}
  
 
@Override
 
@Override
 
public String setStepImage() {
 
public String setStepImage() {
−
return "//upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Moai_Rano_raraku.jpg/200px-Moai_Rano_raraku.jpg";
+
return "images/tour/tour_1.jpg";
 
}
 
}
  
 
@Override
 
@Override
 
public String setStepBody() {
 
public String setStepBody() {
−
return "Easter Island (Rapa Nui: Rapa Nui, Spanish: Isla de Pascua) is a Polynesian island " +
+
return "<div style=\"line-height: 19px; padding: 10px; font-size: 14px; \">" +
−
"in the southeastern Pacific Ocean, at the southeasternmost point of the Polynesian triangle. " +
+
"<div style=\"padding-bottom: 40px;\">" +
−
"<br /><br />A special territory of Chile that was annexed in 1888, Easter Island is famous for its 887 extant monumental statues, " +
+
"<span style=\"font-weight: bold;\">gCube Reporting</span> allows users to create Reports and generate different " +
−
"called moai, created by the early Rapanui people. It is a World Heritage Site (as determined by UNESCO) with much " +
+
"export formats (OpenXML, HTML, PDF) based on retrieved results from the infrastructure." +
−
"of the island protected within Rapa Nui National Park. <br /><br />In recent times the island has served as a warning of the cultural" +
+
"</div>" +
−
" and environmental dangers of overexploitation. Ethnographers and archaeologists also blame diseases carried by European " +
+
"<div style=\"padding-bottom: 40px;\">" +
−
"colonizers and slave raiding of the 1860s for devastating the local peoples"+
+
"gCube Templates are partially filled out by both dynamic and static parts." +
−
"<p><b>Easter Island is claimed to be the most remote inhabited island in the world</b></p>";
+
"</div>" +
 +
"<div style=\"padding-bottom: 40px;\">" +
 +
"gCube Templates can be loaded by the <b>gCube Report Generator</b> to produce actual reports." +
 +
"</div>" +
 +
"<div style=\"padding-bottom: 10px;\">" +
 +
"<b>Take the opportunity</b> " +
 +
"to follow this quick tour to discover its <b>most important features</b>" +
 +
"</div>" +
 +
"</div>";
 
}
 
}
 
};
 
};
  
−
TourStep step2 = new GCUBETemplate1Text2Image(true) {
+
TourStep step2 = new GCUBETemplate1Text1Image(false) {
  
 
@Override
 
@Override
 
public String setStepTitle() {
 
public String setStepTitle() {
−
return "Name";
+
return "Toolbox";
 
}
 
}
  
 
@Override
 
@Override
 
public String setStepImage() {
 
public String setStepImage() {
−
return "//upload.wikimedia.org/wikipedia/commons/thumb/5/50/AhuTongariki.JPG/220px-AhuTongariki.JPG";
+
return "images/tour/tour2.jpg";
 
}
 
}
−
 
 
@Override
 
@Override
−
public String setStepOtherImage() {
+
public String setStepBody() {
−
return "//upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Hodges_easter-island.jpg/220px-Hodges_easter-island.jpg";
+
return "<div style=\"line-height: 19px; font-size: 16px; padding: 10px;\">" +
−
}
+
"<div style=\"padding-bottom: 90px;\">" +
 +
"Define the <b>desired structure</b> by selecting among Toolbox components." +
 +
"</div>" +
 +
"<div style=\"padding-bottom: 80px;\">" +
 +
"Choose among <b>several components:</b><br />" +
 +
"<span style=\"font-style: italic;\">title, headings, images, comments</span> and much more!</b>" +
 +
"</div>" +
 +
"<div style=\"padding-bottom: 10px;\">" +
 +
"Choose between <b>two different layouts:</b> " +
 +
"select whether you want one column or double column layout for each section." +
 +
"</div>" +
  
−
@Override
+
"</div>";
−
public String setStepBody() {
+
−
return "The name \"Easter Island\" was given by the island's first recorded European visitor, " +
+
−
"the Dutch explorer Jacob Roggeveen, who encountered it on Easter Sunday 1722, while searching for Davis or David's island. " +
+
−
"Roggeveen named it Paasch-Eyland (18th century Dutch for \"Easter Island\").[6] " +
+
−
"The island's official Spanish name, Isla de Pascua, also means \"Easter Island\"." +
+
−
"<p>The current Polynesian name of the island, <b>Rapa Nui, \"Big Rapa\"</b>, was coined after the slave raids of the early 1860s, " +
+
−
"and refers to the island's topographic resemblance to the island of Rapa in the Bass Islands of the Austral Islands group." +
+
−
" However Thor Heyerdahl argued that Rapa was the original name of Easter Island, and that Rapa Iti was named by refugees from there.</p>";
+
 
}
 
}
 
};
 
};
Line 192: Line 201:
 
@Override
 
@Override
 
public String setStepTitle() {
 
public String setStepTitle() {
−
return "History";
+
return "Tables";
 
}
 
}
  
 
@Override
 
@Override
−
public String setStepOtherImage() {
+
public String setStepImage() {
−
return "//imageseu.homeaway.com/vd2/files/HR/400x300/2/8495/7540_1321012895481.jpg";
+
return "images/tour/tour3_1.jpg";
 
}
 
}
  
 
@Override
 
@Override
−
public String setStepOtherBody() {
+
public String setStepBody() {
−
return "Estimated dates of initial settlement of Easter Island have ranged from 300 to 1200 CE, approximately coinciding with the arrival of " +
+
return "<div style=\"line-height: 19px; padding: 10px; font-size: 16px; \">" +
−
"the first settlers in Hawaii. Rectifications in radiocarbon dating have changed almost all of the previously-posited early settlement " +
+
"<div style=\"padding-bottom: 80px;\">" +
−
"dates in Polynesia. Rapa Nui has more recently been considered to have been settled in the narrower range of 700 to 1100 CE.";
+
"You can add static or dynamic <b>Tables</b>" +
 +
"</div>" +
 +
"</div>";
 
}
 
}
  
 
@Override
 
@Override
−
public String setStepImage() {
+
public String setStepOtherImage() {
−
return "//www.archidose.org/Blog/tikopia4.jpg";
+
return "images/tour/tour3_2.jpg";
 
}
 
}
  
 
@Override
 
@Override
−
public String setStepBody() {
+
public String setStepOtherBody() {
−
return "The history of Easter Island is rich and controversial. Its inhabitants have endured famines, epidemics, " +
+
return "<div style=\"line-height: 19px; padding: 10px; font-size: 16px; \">" +
−
"civil war, slave raids, colonialism, and near deforestation; its population declined precipitously more than once." +
+
"<div style=\"padding-bottom: 10px;\">" +
−
"However, this hypothesis contradicts radiocarbon dating, according to which other sites preceded Anakena by many years, " +
+
"You can merge table cells, add/remove rows and much more!" +
−
"especially the Tahai, whose radiocarbon dates precede Anakena's by several centuries.";
+
"</div>" +
 +
"</div>";
 
}
 
}
 
};
 
};
  
−
TourStep step4 = new GCUBETemplate1Text1Image(true) {
+
TourStep step4 = new GCUBETemplate1Text1Image(false) {
  
 
@Override
 
@Override
 
public String setStepTitle() {
 
public String setStepTitle() {
−
return "Merchandise";
+
return "Sections";
 
}
 
}
  
 
@Override
 
@Override
 
public String setStepImage() {
 
public String setStepImage() {
−
return "//rlv.zcache.com/easter_island_tshirt-p235231819274168933ohvp_400.jpg";
+
return "images/tour/tour4.jpg";
 
}
 
}
  
 
@Override
 
@Override
 
public String setStepBody() {
 
public String setStepBody() {
−
return "<h3>Easter Island Pull Over Sweatshirt</h3><br /><h3>Only Euro 28.55 per shirt <input type=\"button\" value=\"Buy Now!\" onClick=\"Javascript:window.alert('Do you really wanna buy it? That was a joke man!')\"></h3>";
+
return "<div style=\"line-height: 19px; padding: 10px; font-size: 16px; \">" +
−
}
+
"<div style=\"padding-bottom: 70px;\">" +
 +
"You can divide your template into <b>Sections.</b>" +
 +
"</div>" +
 +
"<div style=\"padding-bottom: 50px;\">" +
 +
"Sections can be <b>imported</b> and <b>exported</b> from existent reports or templates." +
 +
"</div>" +
 +
"</div>";
 +
}
 
};
 
};
 +
//step1.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
 
step2.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
 
step2.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
−
GCUBEGuidedTour gt = new GCUBEGuidedTour("Easter Island", GuidedTour.class.getName(), 750, 450, false, ThemeColor.AQUAMARINE);
+
step3.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
 +
step4.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
 +
GCUBEGuidedTour gt = new GCUBEGuidedTour("gCube Template Creator", TemplateCreator.class.getName(), 780, 450, false);
 
gt.addStep(step1);
 
gt.addStep(step1);
 
gt.addStep(step2);
 
gt.addStep(step2);
Line 245: Line 267:
 
gt.addStep(step4);
 
gt.addStep(step4);
 
gt.openTour();
 
gt.openTour();
−
}
+
}
 
</source>
 
</source>

Revision as of 17:06, 3 February 2012

gCube Quick tour guide

gCube Quick tour guide is a customizable dialogBox that can be loaded when your portlet starts up for new users. It is shipped with a built-in clickable option that allows a user to specify to not open it again.

See it in action

gCube Quick tour guide comes with 12 different themes and is highly customizable. See some available themes in the picture below.

GCubeThemes.jpg

Adding a gCube Quick tour guide to your gCube Portlet Project

  • Download the latest jar from here: gcube-quicktour.jar and add it to your build path.
  • Add the following to your project .gwt.xml file
<!-- inherits GCUBE Quick tour -->
<inherits name='org.gcube.portlets.user.guidedtour.GuidedTour' />
  • Add the following to your project web.xml file (Replace $YOUR_SERVLET_URL_PATTERN with your actual servlet url patter value)
	<!-- quicktourServlet -->
	<servlet>
		<servlet-name>quicktourServlet</servlet-name>
		<servlet-class>org.gcube.portlets.user.guidedtour.server.TourServiceImpl</servlet-class>
	</servlet>
 
	<servlet-mapping>
		<servlet-name>quicktourServlet</servlet-name>
		<url-pattern>/$YOUR_SERVLET_URL_PATTERN/quicktourServlet</url-pattern>
	</servlet-mapping>

You are ready to use it.

Show Quick tour guide at your portlet startup

In order to load the quick tour at portlet startup create a private (void) method in your GWT EntryPoint class, say you name it showGuidedTour() then you would put showGuidedTour() and the end of your public void onModuleLoad() method.


Customize Quick tour guide for your portlet

Within the showGuidedTour() method you must instanciate the GCUBEGuidedTour class (org.gcube.portlets.user.guidedtour.client.GCUBEGuidedTour)

There are several constructors you can use, allowing you to set its size, its theme, whether you want animation transitions or not and much more. Please refer to documentation to find the one that fits your needs.

As an example, see the code below: 

GCUBEGuidedTour gt = new GCUBEGuidedTour(
"gCube Framework", /* caption */
 MyClass.class.getName(),  /* uniqueid (needed for implementing the don'tShowThisAgain feature) */
 750, /* width */
 350, /* height */
 false,  /* mask (When enabled, the background will be blocked with a semi-transparent panel) */
 ThemeColor.MAGENTA /* themeColor */
);

will eventually create the following:

StepsArea.jpg

Adding steps to the tour

GCUBEGuidedTour supports templates(GCUBETemplate) for its steps. Although any Composite (com.google.gwt.user.client.ui.Composite) will do, we reccomend to use predefined Templates as shown in the following.

Creating Step from template

There are 3 Templates you can choose from, in each of these three the window is divided in two areas vertically.

  • GCUBETemplate1Text1Image: 

html | image
  • GCUBETemplate1Text2Image:
 
         image
 html |       
         image
  • GCUBETemplate2Text2Image:
html | image
         
html | image


According to the GCUBETemplate you choose for your step you will have to implement some methods, the following example shows how to instanciate a step with a GCUBETemplate1Text1Image as template: 

 
TourStep myFirstStep = new GCUBETemplate1Text1Image(true) {
 
			@Override
			public String setStepTitle() {
				return "What's gCube";
			}
 
			@Override
			public String setStepImage() {
                                //get the image from the web, use relative path to get it from your project
				return "//www.gcube-system.org/templates/gcube/images/logo-top.gif";
			}
 
			@Override
			public String setStepBody() {
				return "gCube is a framework dedicated to scientists. It enables the declarative and interactive creation of transient Virtual Research Environments"
			}
		};

You then need to add the step to the GCUBEGuidedTour instance created previously: 

 
gt.addStep(step1);
 
//the following would set the text vertical alignment (default is TOP)
myFirstStep.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);

and eventually show the tour on screen 

 
gt.openTour();

Complete working example

The following shows how to create a Quick Guided tour in Java. See it in action 

 
		private void showGuidedTour() {
		TourStep step1 = new GCUBETemplate1Text1Image(true) {
 
			@Override
			public String setStepTitle() {
				return "gCube Reporting";
			}
 
			@Override
			public String setStepImage() {
				return "images/tour/tour_1.jpg";
			}
 
			@Override
			public String setStepBody() {
				return "<div style=\"line-height: 19px; padding: 10px; font-size: 14px; \">" +
						"<div style=\"padding-bottom: 40px;\">" +
						"<span style=\"font-weight: bold;\">gCube Reporting</span> allows users to create Reports and generate different " +
						"export formats (OpenXML, HTML, PDF) based on retrieved results from the infrastructure." +
						"</div>" +
						"<div style=\"padding-bottom: 40px;\">" +
						"gCube Templates are partially filled out by both dynamic and static parts." +
						"</div>" +
						"<div style=\"padding-bottom: 40px;\">" +
						"gCube Templates can be loaded by the <b>gCube Report Generator</b> to produce actual reports." +
						"</div>" +
						"<div style=\"padding-bottom: 10px;\">" +
						"<b>Take the opportunity</b> " +
						"to follow this quick tour to discover its <b>most important features</b>" +
						"</div>" +
						"</div>";
			}
		};
 
		TourStep step2 = new GCUBETemplate1Text1Image(false) {
 
			@Override
			public String setStepTitle() {
				return "Toolbox";
			}
 
			@Override
			public String setStepImage() {
				return "images/tour/tour2.jpg";
			}
			@Override
			public String setStepBody() {
				return "<div style=\"line-height: 19px; font-size: 16px; padding: 10px;\">" +
						"<div style=\"padding-bottom: 90px;\">" +
						"Define the <b>desired structure</b> by selecting among Toolbox components." +
						"</div>" +
						"<div style=\"padding-bottom: 80px;\">" +
						"Choose among <b>several components:</b><br />" +
						"<span style=\"font-style: italic;\">title, headings, images, comments</span> and much more!</b>" +
						"</div>" +
						"<div style=\"padding-bottom: 10px;\">" +
						"Choose between <b>two different layouts:</b> " +
						"select whether you want one column or double column layout for each section." +
						"</div>" +
 
						"</div>";
			}
		};
 
		TourStep step3 = new GCUBETemplate2Text2Image(false) {
 
			@Override
			public String setStepTitle() {
				return "Tables";
			}
 
			@Override
			public String setStepImage() {
				return "images/tour/tour3_1.jpg";
			}
 
			@Override
			public String setStepBody() {
				return "<div style=\"line-height: 19px; padding: 10px; font-size: 16px; \">" +
						"<div style=\"padding-bottom: 80px;\">" +
						"You can add static or dynamic <b>Tables</b>" +
						"</div>" +
						"</div>";
			}
 
			@Override
			public String setStepOtherImage() {
				return "images/tour/tour3_2.jpg";
			}
 
			@Override
			public String setStepOtherBody() {
				return "<div style=\"line-height: 19px; padding: 10px; font-size: 16px; \">" +
						"<div style=\"padding-bottom: 10px;\">" +
						"You can merge table cells, add/remove rows and much more!" +
						"</div>" +
						"</div>";
			}
		};
 
		TourStep step4 = new GCUBETemplate1Text1Image(false) {
 
			@Override
			public String setStepTitle() {
				return "Sections";
			}
 
			@Override
			public String setStepImage() {
				return "images/tour/tour4.jpg";
			}
 
			@Override
			public String setStepBody() {
				return "<div style=\"line-height: 19px; padding: 10px; font-size: 16px; \">" +
						"<div style=\"padding-bottom: 70px;\">" +
						"You can divide your template into <b>Sections.</b>" +
						"</div>" +
						"<div style=\"padding-bottom: 50px;\">" +
						"Sections can be <b>imported</b> and <b>exported</b> from existent reports or templates." +
						"</div>" +
						"</div>";	
				}
		};
		//step1.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
		step2.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
		step3.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
		step4.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
		GCUBEGuidedTour gt = new GCUBEGuidedTour("gCube Template Creator", TemplateCreator.class.getName(), 780, 450, false);
		gt.addStep(step1);
		gt.addStep(step2);
		gt.addStep(step3);
		gt.addStep(step4);
		gt.openTour();
}
Retrieved from "https://wiki.gcube-system.org/index.php?title=Adding_a_Quick_tour_guide_to_your_portlet&oldid=13194"