Introducing GWT-Tour 0.1

[Alain]

GWT-Tour is a small GWT library that can help you implement a nice tour of your GWT/Web app.

So if you ever wanted to show your users how to use your application in an interactive way this can be usefull.

GWT-Tour works with regular web app as well as with GWT Widgets.

A demo can be seen here : http://eemi2010.github.io/gwt-tour/

Enjoy :)

Alain 

[Prakash M]

Really cool.. Thanks for sharing..

Regards,

Prakash M

2013/6/21 Alain <jazzma...@gmail.com>

Alain 

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Juan Pablo Gardella]

Excelent work Alain!!

2013/6/21 Alain <jazzma...@gmail.com>

Alain 

--

[JoyaleXandre]

Wow this is something I really wanted to integrate in my project. Thanks a lot for the good work!

[JoyaleXandre]

I can't make it work with the jar. I get this message and nothing append when I click on launch the GwtTour.startTour event. Does the jar works?

[WARN] 404 - GET /img/sprite-green-0.3.png (127.0.0.1) 1410 bytes

   Request headers

      Host: 127.0.0.1:8888

      Connection: keep-alive

      Accept: */*

      User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

      Accept-Encoding: gzip,deflate,sdch

      Accept-Language: en-US,en;q=0.8

      Referer: http://127.0.0.1:8888/Cervello.html?gwt.codesvr=127.0.0.1:9997

   Response headers

      Content-Type: text/html; charset=iso-8859-1

      Content-Length: 1410

Le vendredi 21 juin 2013 18:22:57 UTC-4, Alain a écrit :

[Alain Ekambi]

First  Thx for the nice feedback.

The Jar should work.

Can you please post your sample code ? 

2013/6/22 JoyaleXandre <joyale...@gmail.com>

--

[JoyaleXandre]

This is my entry point.

package com.ibal.cervello.client;

import com.ibal.cervello.client.views.AddInvoice;

import com.ibal.cervello.client.views.MenuBar;

import com.eemi.gwt.tour.client.GwtTour;

import com.eemi.gwt.tour.client.Placement;

import com.eemi.gwt.tour.client.Tour;

import com.eemi.gwt.tour.client.TourStep;

import com.github.gwtbootstrap.client.ui.Button;

import com.github.gwtbootstrap.client.ui.constants.IconType;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.user.client.ui.RootPanel;

/**

 * Entry point classes define <code>onModuleLoad()</code>.

 */

public class Cervello implements EntryPoint {

/**

* This is the entry point method.

*/

public void onModuleLoad() {

RootPanel.get().add(new MenuBar());

RootPanel.get().add(new AddInvoice());

Button btnTour = new Button("Test Tour");

btnTour.setBaseIcon(IconType.ENVELOPE);

RootPanel.get().add(btnTour);

// Define the tour!

final Tour tour = new Tour("myTour");

TourStep step = new TourStep(Placement.LEFT, btnTour);

step.setContent("Test button");

step.setTitle("Comment");

tour.addStep(step);

// Start the tour!

btnTour.addClickHandler(new ClickHandler() {

@Override

public void onClick(ClickEvent event) {

GwtTour.startTour(tour);

}

});

}

}

2013/6/22 JoyaleXandre <joyale...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsub...@googlegroups.com.

[Alain Ekambi]

It s strange the code below is working for me. I m missing the image too.

This is because I did nt included them in the jar file. You will need to download them from GitHub.

But the tour should be working.

 /**

     * This is the entry point method.

     */

    public void onModuleLoad() {

        final Button sendButton = new Button("Send");

        RootPanel.get().add(sendButton);

        final Tour tour = new Tour("my-Tour");

        TourStep step = new TourStep(Placement.RIGHT, sendButton);

        step.setTitle("Test");

        step.setContent("Hello");

        tour.addStep(step);

        sendButton.addClickHandler(new ClickHandler() {

            @Override

            public void onClick(ClickEvent event) {

                GwtTour.startTour(tour);

            }

        });

    }

2013/6/22 JoyaleXandre <joyale...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

[JoyaleXandre]

Sorry, that's just because I was displaying the popup on the left and my button was completely on the left side of the browser. So I could not see it. What a newbie lol.

Thanks for your help. Again, nice work.

2013/6/22 JoyaleXandre <joyale...@gmail.com>

2013/6/22 JoyaleXandre <joyale...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Alain Ekambi]

Sweet.

I m glad it works for you.

Enjoy and build some nice Tour :)

Cheers

2013/6/22 JoyaleXandre <joyale...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

[Francesco Izzi]

Cool!

+1

2013/6/22 Alain Ekambi <jazzma...@gmail.com>

--

Francesco Izzi
CNR - IMAA
geoSDI
Direzione Tecnologie e Sviluppo

C.da S. Loja
85050  Tito Scalo - POTENZA (PZ)
Italia

phone:  +39 0971427310
fax:      +39 0971 427271
mob:    +39 3666373172
mail:     frances...@geosdi.org
skype:  neofx8080

web:     http://www.geosdi.org

[doright]

this looks great Alain.  I'm going to give it a go tomorrow on my GWT app...

thanks!

[Alain Ekambi]

Thx.

I hope you will find it useful like we did.

Please build from source since I added some bug fixes since the last release.

Regards,

Alain 

2014/1/16 doright <doug.s...@gmail.com>

--

[Boris Brudnoy]

That's pretty awesome. Why not post it on the G+ community page?

BORIS BRUDNOY

Java/GWT Web Software Developer (LinkedIn, Careers 2.0)

[Alain Ekambi]

I did post in the G+ community short after the 0.1 release.

Feedback was pretty cool there too.

Thank you guyz :)

2014/1/16 Boris Brudnoy <boris....@healthometry.com>

[Danilo Reinert]

Great Alain!

Does it support chaging History?

--

D. Reinert

2014/1/16 Boris Brudnoy <boris....@healthometry.com>

2014/1/16 doright <doug.s...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsub...@googlegroups.com.

[Alain Ekambi]

@Danilo

Thx.

What do you mean by changing history ?

2014/1/17 Danilo Reinert <danilo...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

[Danilo Reinert]

Changing history state, for navigation.

Suppose I want a tour navigating through some history tokens and exploring each one of them.

--

D. Reinert

2014/1/17 Danilo Reinert <danilo...@gmail.com>

2014/1/16 Boris Brudnoy <boris....@healthometry.com>

2014/1/16 doright <doug.s...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

[doright]

Hey Alain,

this is working really nicely in my project, thanks again.

Question - what's the recommended way to change the font?  (I don't want to do some ugly hack if there's a neat way)

many thanks,

FYI, you've got some typo's on your  demo page:

in the early examples you use:

TourStep step1 = new TourStep("header", Placement.BOTTOM);

but it looks like you switched around the parameters at some stage, as shown your example at the bottom of the page:

TourStep step = new TourStep(Placement.BOTTOM, "gwt-tour-title");

thanks!

[Alain]

Thx for reporting the typo.

I will fix it asap.

The best way to change the font is to see what style is getting apply and override it with your own css.

That s how I do it for now :)

[Alain]

A solution could be to call Gwt.nextStep() or GwtTour.showStep(int index) on history change ?

Would nt that work for you ? 

[Ronan Quillevere]

Nice work, excellent

[doright]

thanks Alain, that's the font sorted.

FYI, I can't get the " step.setNextTargetOnClick(true);" feature to work.

Am I right in thinking, that if a user presses on a button, with the same DOM id as the current step, its supposed to take us to the next step in the tour, when we have this option set?

if so what am I missing?  This is the last bit I need to get working before I can put this live..

many thanks again!

Doug

[Alain Ekambi]

@Doright

Yes that s the goal of  setNextOnTargetClick.

I will investigate and get back to you.

cheers,

Alain

2014/1/23 doright <doug.s...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

[doright]

Hi again Alain,

we might want to take this offline, you're call.

I love this tool, and am pretty close to releasing a whole 'training academy' subsection of my site, using GWT-Tour, but I really need programmatic control of the tours.  For example when a user clicks on a target I'm asking them to, in a tour, I need it to move to the next step of my tour.

I know you're looking at why 'setNextOnTargetClick'doesn't work as planned, but it occurred to me that is might not work for me anyway coz my targets won't always be buttons, they might be menu items, icons etc.

So I've been looking at implementing this using my own application 'event bus' then retrieving the tour, and updating programmatically. But there are quite a few features documented but not actually exposed in the GWT-Tour API, for example:

Tour.onClose()

GwtTour.getCurrTour()

I'd happily add them to your project myself, but I'm not familiar with contributing to other people's projects:

- how do I build the project into a JAR?

- how do I get permission to contribute to your project?

thanks again,

Doug

[Alain Ekambi]

I Pmd you.

A tour's Tarbet must not be a button. It can be any DOM Element. You just need to pass the ID of the Element as target.

So I think setNextOnTargetClick  might work after all ?

GwtTour is on GitHub  https://github.com/eemi2010/gwt-tour

You could just fork the project and send some pull requests.

The project you are working on sounds interesting. 

Hopefuly you can share the link when u are done.

Cheers,

Alainn

2014/1/24 doright <doug.s...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

[doright]

thanks, 

yes, I will feedback my implementation to the group.

cheers,

Doug

[Doug Stoddart]

as promised, a video of a gwt-tour implementation in my web app.

http://youtu.be/cqUg3b7x4ew

It's subscription only access so you can't access the web app, but background website is here:

www.bikerentalmanager.com

thanks again Alain,

Doug

You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/FXzc-mvNDMQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

[strut]

Thank you for the excellent work.

As i started implementing my first tutorial, i found that the green sprite png was missing and i have downloaded it from the github.

However when i packaged the jar including the img file ,it still giving me the same warning.

404 - GET /img/sprite-green-0.3.png

Can you please let me know where should i add img while creating the jar.

folder structure,

--com

  -eemi

    -gwt

      -tour

        client

             -*\*.java

        res

           *\*.js 

            -img

                sprite-green-0.3.png

Thanks,

Bharath N

My folder structure is as follows,

[Alain Ekambi]

Hi, 

Thank you :)

Try adding the css and js in the res folder anaolog to here : https://github.com/eemi2010/gwt-tour/tree/master/src/main/resources/com/eemi/gwt/tour/res

Also make sure that you .gwt.xml file then looks like : https://github.com/eemi2010/gwt-tour/blob/master/src/main/resources/com/eemi/gwt/tour/GwtTour.gwt.xml

Cheers,

Alain

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

[Bharath Kumar]

Thanks ! Just figured out it was my image placing issue . Changed the background:transparent url(../img/sprite-green-0.3.png) to background:transparent url(/gwttour/img/sprite-green-0.3.png) in the css file and then it worked.

[Alain Ekambi]

Sweet. Glad it worked.

Enjoy :)