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 results retrieved from the infrastructure." +
						"</div>" +
						"<div style=\"padding-bottom: 40px;\">" +
						"gCube Templates are dynamically and statically completed." +
						"</div>" +
						"<div style=\"padding-bottom: 40px;\">" +
						"gCube Templates are loaded by the <b>gCube Report Generator</b> to produce actual reports." +
						"</div>" +
						"<div style=\"padding-bottom: 10px;\">" +
						"<b>Discover</b> gCube Reporting features through this quick tour." +
						"</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;\">" +
						"<b>Define</b> your template by selecting from the Toolbox components." +
						"</div>" +
						"<div style=\"padding-bottom: 80px;\">" +
						"Choose from <b>several components:</b><br />" +
						"<span style=\"font-style: italic;\">title, headings, images, tables </span> and much more!</b>" +
						"</div>" +
						"<div style=\"padding-bottom: 10px;\">" +
						"Choose from <b>two different layouts:</b>: one column or double columns for each section." +
						"</div>" +
 
						"</div>";
			}
		};
		TourStep step3 = new GCUBETemplate2Text2Image(false) {
 
			@Override
			public String setStepTitle() {
				return "ToC & Reporting";
			}
 
			@Override
			public String setStepImage() {
				return "images/tour/tourToc.jpg";
			}
 
			@Override
			public String setStepBody() {
				return "<div style=\"line-height: 19px; padding: 10px; font-size: 16px; \">" +
						"<div style=\"padding-bottom: 10px;\">" +
						"Add a dynamic component for automatic <b>Table Of Content</b> creation." +
						"</div>" +
						"</div>";
			}
 
			@Override
			public String setStepOtherImage() {
				return "images/tour/tourFormat.jpg";
			}
 
			@Override
			public String setStepOtherBody() {
				return "<div style=\"line-height: 19px; padding: 10px; font-size: 16px; \">" +
						"<div style=\"padding-bottom: 10px;\">" +
						"<b>Format text</b> as you would in a word processor using the Formatting Bar." +
						"</div>" +
						"</div>";
			}
		};
		TourStep step4 = 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;\">" +
						"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;\">" +
						"<b>Merge</b> table cells, add/remove rows and much more!" +
						"</div>" +
						"</div>";
			}
		};
 
		TourStep step5 = 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;\">" +
						"Divide your template into various <b>Sections.</b>" +
						"</div>" +
						"<div style=\"padding-bottom: 50px;\">" +
						"Sections can be <b>imported</b> and/or <b>exported</b> from existing 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);
		step5.setTextVerticalAlignment(VerticalAlignment.ALIGN_MIDDLE);
 
		GCUBEGuidedTour gt = new GCUBEGuidedTour("gCube Template Creator", TemplateCreator.class.getName(), "$MyUserGuideURL", 780, 450, false, ThemeColor.BLUE);
		gt.addStep(step1);
		gt.addStep(step2);
		gt.addStep(step3);
		gt.addStep(step4);
		gt.addStep(step5);
		gt.openTour();
	}

 
...
			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 results retrieved from the infrastructure." +
						"</div>" +
						"<div style=\"padding-bottom: 40px;\">" +
						"gCube Templates are dynamically and statically completed." +
						"</div>" +
						"<div style=\"padding-bottom: 40px;\">" +
						"gCube Templates are loaded by the <b>gCube Report Generator</b> to produce actual reports." +
						"</div>" +
						"<div style=\"padding-bottom: 10px;\">" +
						"<b>Discover</b> gCube Reporting features through this quick tour." +
						"</div>" +
						"</div>";
			}
.....

/**
  * IntroHTML.java
  */ 
package org.gcube.portlets.user.guidedtour.client.sample;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.HTML;
 
 
public class IntroHTML extends HTML {
 
	interface IntroHTMLUiBinder extends UiBinder<Element, IntroHTML> {
	}
 
	private static IntroHTMLUiBinder uiBinder = GWT.create(IntroHTMLUiBinder.class);
 
	public IntroHTML() {
		setHTML(uiBinder.createAndBindUi(this).getInnerHTML());
	}
} //end class

 
...
public String setStepBody() {
				return new IntroHTML().getHTML();   //no more HTML in Java Strings
			}
...

 
	interface Resources extends ClientBundle {
 
		  @Source("org/gcube/test/client/resources/GuidedTour.xml")
		  GuidedTourResource quickTour();
	}

 
		GCUBEGuidedTour.showTour(MyApplication.class.getName(), new GuidedTourResourceProvider() {
 
			@Override
			public GuidedTourResource getResource() {
				Resources resources = GWT.create(Resources.class);
				return resources.quickTour();
			}
		});

	GCUBEGuidedTour gt = new GCUBEGuidedTour("gCube Template Creator", TemplateCreator.class.getName(), 
"http://www.myguide.com", 780, 450, false, ThemeColor.BLUE, TourLanguage.EN, TourLanguage.IT);  //add as many as TourLanguage you want here

         TourStep step1 = new GCUBETemplate1Text1Image(true)

         TourStep step1 = new GCUBETemplate1Text1ImageML(true)

			@Override
			public HashMap<TourLanguage, String> setStepTitle() {
				HashMap<TourLanguage, String> languages = new HashMap<TourLanguage, String>();
				languages.put(TourLanguage.EN, "Tables");
				languages.put(TourLanguage.IT, "Tabelle");
				return languages;
			}