Here is mine: It uses JsInterop. I always wanted to make this available on github but I never found the time...
Αnyway the story of 3rd party jsinterop libs in GWT is not so great:
- Most of the js libs expect to be loaded in the page while the GWT code lives in an iframe.
- You need code to load the js, css and possibly dynamically adjust the paths of assets such as sprites.
- The loader code should protect the page from multiple inclusion.
- and probably more that I can't remember
If you are interested I could probably unearth the instructions on how to properly load HopScotch and how to use it.
The howto use it should be obvious though since it is jsinterop which means that you can rely on the js documentation.
Vassilis
package com.yourcompany.lib.gwt.client.js;
import elemental2.core.JsArray;
import jsinterop.annotations.JsFunction;
import jsinterop.annotations.JsOverlay;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsType;
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "hopscotch")
public class Hopscotch {
public static class Event {
public static final String start = "start";
public static final String end = "end";
public static final String next = "next";
public static final String prev = "prev";
public static final String show = "show";
public static final String close = "close";
public static final String error = "error";
}
public static class Placement {
public static final String top = "top";
public static final String left = "left";
public static final String bottom = "bottom";
public static final String right = "right";
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Step {
// Mandatory
/**
* target [STRING/ELEMENT/ARRAY] - id of the target DOM element or DOM element itself. It is also possible to
* define an array of several targets. If an array is provided, Hopscotch will use the first target that exists
* on the page and disregard the rest.
*
*/
public Object target;
public String placement;
// Optional
public String title;
public String content;
public int width;
public int padding;
public int xOffset;
public int yOffset;
public int arrowOffset;
public int delay;
public int zindex;
public boolean showNextButton;
public boolean showPrevButton;
public boolean showCTAButton;
public String ctaLabel;
public boolean multipage;
public boolean showSkip;
public boolean fixedElement;
public boolean nextOnTargetClick;
public Callback onPrev;
public Callback onNext;
public Callback onShow;
public Callback onCTA;
@JsOverlay
public static Step create(String placement, String target) {
final Step step = new Step();
step.placement = placement;
step.target = target;
return step;
}
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Tour {
// Mandatory
public String id;
public JsArray<Step> steps;
// Optional
public int bubbleWidth;
public int bubblePadding;
public boolean smoothScroll;
public int scrollDuration;
public int scrollTopMargin;
public boolean showCloseButton;
public boolean showPrevButton;
public boolean showNextButton;
public int arrowWidth;
public boolean skipIfNoElement;
public boolean nextOnTargetClick;
public Object container;
public boolean fixedContainer;
// These are objects so they could accept strings / arrays for the
// helper
// registration interface to work.
public Object onNext;
public Object onPrev;
public Object onStart;
public Object onEnd;
public Object onClose;
public Object onError;
// i18n
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class I18N {
public String nextBtn;
public String prevBtn;
public String doneBtn;
public String skipBtn;
public String closeTooltip;
public String[] stepNums;
}
public I18N i18n;
@JsOverlay
public static void initTour(Tour tour) {
tour.i18n = new Tour.I18N();
tour.steps = new JsArray<Step>();
}
@JsOverlay
public static Tour createTour() {
final Tour tour = new Tour();
initTour(tour);
return tour;
}
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Callout extends Step {
// Mandatory
public String id;
}
/* this may be step ? should we delete this */
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "HopscotchBubble")
public static class Bubble {
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "HopscotchCalloutManager")
public static class CalloutManager {
public static native Bubble createCallout(Callout callout);
public static native Bubble getCallout(String id);
public static native void removeCallout(String id);
public static native void removeAllCallouts();
}
@JsFunction
public static interface Callback {
public void execute();
}
public static native Hopscotch startTour(Tour tour, int stepNum);
public static native Hopscotch startTour(Tour tour);
public static native Hopscotch showStep(int idx);
public static native Hopscotch prevStep();
public static native Hopscotch nextStep();
public static native Hopscotch endTour();
public static native Hopscotch endTour(boolean clearCookie);
public static native Hopscotch configure(Tour options);
public static native Tour getCurrTour();
public static native int getCurrStepNum();
public static native String getState();
public static native Hopscotch listen(String eventName, Callback callback);
public static native Hopscotch unlisten(String eventName, Callback callback);
public static native Hopscotch removeCallbacks(String eventName, boolean tourOnly);
public static native Hopscotch removeCallbacks(String eventName);
public static native Hopscotch removeCallbacks();
public static native void registerHelper(String id, Callback helper);
public static native void unregisterHelper(String id);
public static native Hopscotch resetDefaultI18N();
public static native Hopscotch resetDefaultOptions();
public static native CalloutManager getCalloutManager();
}
On Tue, Aug 22, 2023 at 5:05 PM Frank <frank.wynants@gmail.com> wrote:
Looking at my code.
It seems that I also had troubles getting this to work. I actually copied code from the GWT-tour project in my own project.
Also looking at the code I see this is using JSNI. If this is a new project, you probably want to avoid using JSNI in favor of JsInterop.
I could not found any JsInterop library for hopscotch, so best bet is to create it yourself, or look for another library which does the same thing. Or create your own pure GWT library doing this...--Op dinsdag 22 augustus 2023 om 15:58:54 UTC+2 schreef Frank:I think gwt-tour is part of Ahome as far as I know.
Have you had this working in the past and if so what change broke it?
What version of GWT are you using? I have this working in GWT2.9.0...Op donderdag 17 augustus 2023 om 14:45:22 UTC+2 schreef Colin Alworth:I'm broadly aware that gwt-tour exists (though it hasnt had an update in 8 years), but I don't see any com.ait packages or references in it. On the other hand, I think com.ait.toolkit.core refers to https://github.com/dikalo/ahome-core/, which is a different thing entirely. It appears that ahome-core shadows a few GWT classes, which likely makes it incompatible with newer GWT versions - did you recently update GWT version and then start having this issue?On Thursday, August 17, 2023 at 7:11:43 AM UTC-5 prasenji...@altizon.com wrote:GWT Module com.ait.toolkit.core.Core not found in project sources or resourcesin Gwt-Tour library HopScotch.gwt.xml has inherited com.ait.toolkit.core.Core which is not found bye goal org.codehaus.mojo:gwt-maven-plugin
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/6c238278-9295-46bd-ab8a-b520cd4cedefn%40googlegroups.com.
--
Vassilis Virvilis
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit/CAKbOjExx534f72JZoV3qOuq78n%3D27Ox%3DDzZjLJnYrkT-CeLN2w%40mail.gmail.com.
