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

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 */
);

 
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"
			}
		};

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

 
gt.openTour();

 
		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;\">" +
						"<b>gCube Reporting</b> 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();
}