Sliding effect in GWT UI similar to one shown in Google Wallet website.

[Prashant]

Hi All,

I am a newbie in GWT. A few days back I have started learning the in/
outs of GWT and created a sample UI. Now, I want to provide a sliding
entry and exit to different pages (composites) of my application
similar to the work shown at google wallet website ("http://
www.google.com/wallet/" click the buttons at bottom). I tried almost
all the combinations of SlideRight and SlideLeft effects of GWT FX but
couldn't get success. I know it should be a quite easy task for you
guys, so please help me in achieving the same. All of views/composites
of my application are inside a vertical panel which has been placed in
centre area of dock panel.

Thanks in advance.

Prashant

[Adam T]

Hi Prashant,

I'm on holiday until middle August, so won't get chance to look at
this in detail, but if it was me, I would do something like the
following:

a) Create an AbsolutePanel, say called pageWindow, with fixed width
and height (the size of one of your pages/composites), set the CSS
overflow property of this panel to hidden - preferably in a style
sheet, or via pageWindow.getElement().getStyle().setOverflow method.
b) Add you pages (composites if I guess right from below) to a
HorizontalPanel, say called content, so they line up in a row - I
assume they are all of the same size.
c) Add the HorizontalPanel to the AbsolutePanel:
pageWindow.add(content)

Now you should see your first "page" visible when you add the
AbsolutePanel to the RootPanel (or in your case a DockPanel that is
itself attached to the RootPanel (eventually) and the other pages are
hidden (since you set the AbsolutePanel's overflow property to hidden.

With gwt-fx, I'm now advising now that people create effects directly
from styles rather than use the inbuilt ones, as it just makes things
(or should) clearer.

In this case, you want to play with the content's "left" css property,
i.e. making that more negative slides it to the left, and more positie
to the right. As the content is in thepageWindow, whose overflow
property is set to hidden, you'll only ever see a part of your
content.

You could write a function to slide between two pages, e.g.

NMorphStyle slide;
Widget content; // probably a HorizontalPanel

public void slide(int startPageNumber, int endPageNumber, int
pageWidth){
// Get rid of any previous definition, but don't tear down
(otherwise it might reset causing flickering)
slide.removeEffect(false);
// Create new definition based on new start/end pages and the page
width
// e.g a slide from page 0 to 3, where widths are 100px per page,
would mean moving the left attribute of content widget from -0px to
-300px
slide = new NMorphStyle(content.getElement(),
new Rule("s{left:-"+(startPageNumber * pageWidth)+"px;}"),
new Rule("e{left:-"+(endPageNumber * pageWidth)+"px;}");
// play the effect
slide.play(0.0, 1.0);
}

(sometimes you'll need to make sure things such as your DockPanel are
given dimensions otherwise things might not appear - best thing to do
if things look strange is inspect the DOM using a tool such as
FireBug)

Hope that helps trigger some thoughts, and Good Luck!

On 12 Juli, 13:40, Prashant <prashantid...@gmail.com> wrote:
> Hi All,
>
> I am a newbie in GWT. A few days back I have started learning the in/
> outs of GWT and created a sample UI. Now, I want to provide a sliding
> entry and exit to different pages (composites) of my application

> similar to the work shown at google wallet website ("http://www.google.com/wallet/"  click the buttons at bottom). I tried almost

[Prashant]

Hi Adam,

Thank you so much for quick and valuable feedback and I am really
Sorry for disturbing you in your vacation. Now I think I will be able
to complete this.
I will update you once I am done with this. Enjoy your vacation.

Thanks once again. Admire your dedicated towards group.

Prashant

[Prashant]

Hi Dr Adam,

First of all let me thank you for your line by line code for my
requirement. The animation is working perfectly fine except an issue.
The only issue now I am facing is with the contained area of running
effect. Width of Absolute panel which is working as a place holder for
my slides is 70% of central area of my DockRootPanel and is centrally
aligned. Somehow the animation is not starting within bounds of
absolute panel and it is running inside DockRootPanel's central area
(covering up the whole of screen). Requesting you to please suggest
something to resolve this issue.

Thank you in advance, and sorry for disturbing you again.

Prashant

On Jul 12, 8:47 pm, Adam T <adam.t...@gmail.com> wrote:

[ravi prakash Mishra]

Hi Prashant,

I have kind of same task to do as yours. I am facing problem in fixing width of the absolute panel. Even though setting overflow property as hidden content is crossing the parent panel's fixed width.