Marquee with GWT and GQuery

Some people who had read my blog, asked me about “marquee” widget in GWT.  I must admit I have never needed to use this element in any of my applications, but maybe someone would find it useful. Writing it with GQuery is so simple and fast that I have decided to share this little functionality. You may enhance this code as needed.

Technologies I have used in the project and I assume you know a little about them:

  • GWT 2.5.1
  • GQuery 1.3.3
  • Maven 3.x
  • Git i.8.x

Demo

First, to see if this is what you are looking for, check the demo page where the basic functionality of g-marquee is presented: http://blog-demo.appspot.com/?#marquee. After the page loads, please click the “run marquee animations” button.

demo

If this is more or less what you are looking for, then you can follow the below instruction, download the code of plugin, try it out, add some functions which you need.

Get and run the project

You can download the code  from github : https://github.com/fascynacja/blog-demos/tree/master/gwt-marquee.

Run

After downloading the code you can import the project to your favourite IDE ( eg for eclipse type $mvn eclipse:eclipse in your console). If you want to run the project please go to to the directory g-marquee and type: $mvn install gwt:run – maven will compile the project and run it in a build in server.

Code

The code includes the marquee mechanism itself and a simple usage example. What will be interesting for you in the project are two files: GMarquee.java and Main.java

Gmarquee.java: (github link) contains the plugin itself

Main.java: (github link) shows simple usage of the plugin

This project can be a sandbox for upgrading or changing default behaviour of the Marquee.

Usage

1) Create the widget which you would like to be marqueed. It is important to explicitly set the width of the widget.

Label text2 = new Label("second text is rather short");
text2.setWidth("500px");
RootPanel.get("marqueePanel").add(text2);

2) Create GMarquee object which takes as parameter the reference to the previously created widget

final GMarquee marquee2 = new GMarquee(text2);

3) If needed apply additional configuration to the marquee. You can choose different speed and direction

marquee.setDirection(Direction.LEFT);
marquee.setSpeed(5);

4) Run the marquee. You can call the run() method immediatelly after you create GMarquee object or you can simply run it after clicking on a button or opening new window, etc.

marquee.run();

Notice

Presented code is very simple, therefore I haven’t designed it as a regular GWT plugin. If you would like to use it in your project you need to

1) update your classpath with gquery libriary. If you are using maven you just need to copy the dependency from my pom.xml

2) update your project.gwt.xml file adding:

  <inherits name='com.google.gwt.query.Query'/>
  <inherits name="com.google.gwt.logging.Logging"/>
  <set-property name="gwt.logging.popupHandler" value="DISABLED" />
 
3) Copy GMarquee.java class into your project.
From now on you can easily use and extend the class. If you would like to contribute or suggest some changes please let me know.

Useful links

GWT : http://www.gwtproject.org/
GQuery : https://code.google.com/p/gwtquery/
GQuery wiki : https://code.google.com/p/gwtquery/wiki/GettingStarted
GQuery Animations: https://fascynacja.wordpress.com/2013/10/11/gquery-animations-how-to-use-them/
Git help : https://help.github.com/
Maven : http://maven.apache.org/
GWT Maven Plugin : http://mojo.codehaus.org/gwt-maven-plugin/
Marquee general information: http://en.wikipedia.org/wiki/Marquee_element

Advertisements

5 Responses to Marquee with GWT and GQuery

  1. MansoorAhamed says:

    Thank you for this Marquee demo.. it very helpful for me.. cuz I’m new to programming and GWT.
    once again thank you….

  2. MansoorAhamed says:

    could you please give some reference to change style and look of tabpanel in gwt..!!

    Thanks in Advance..!! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: