Animator add-on

This really is as cool as it sounds! :) Based on code looks very simple to use.
I think animations for transition are a good way way to emphasize something. Not that we are going to overuse them or anything...

Sami Ekblad: Based on code looks very simple to use.

Oh, right, forgot to add a simple example code:

Animator anim = new Animator(new Label("Animate Me!"));
anim.rollDown(300, 200);
anim.fadeIn(300, 400);
addComponent(anim);

Eric Seckler: Hi Jouni,

Thanks for this great component :-)
Is there a way to set the state of the animator to rolled up / faded out before its creation (so that its hidden on first display)?
I haven't found a way (but I don't know if I've overlooked something), so I created setters and getters for your rolled / faded fields:

You're welcome! Nice to see someone using it.

I threw this component together quite quickly, and this simple use case slipped from the first release. I realized the need myself later on as well.

Your workaround is good, I'll add those methods myself when I get back to this pet project. Or did you have something more elegant in mind?

I am getting the following error when I try to use Animator, what does it mean? I am using Vaadin 6.3-pre-release and GWT 2.0.3

Widgetset does not contain implementation for org.vaadin.jouni.animator.Animator. Check its @ClientWidget mapping, widgetsets GWT module descrioption file and re-compile your widgetset. Unrendered UIDL:

org.vaadin.jouni.animator.Animator(NO CLIENT IMPLEMENTATION FOUND)

Thank You

Peter

Hi Peter,

Just tested it with a new Vaadin project. Works seamlessly.

I bet you've forgotten to re-compile your widgetset (like it says in the error message). If you're using the Eclipse plugin, just click the "Compile Vaadin Widgets" button in the toolbar, wait for it to finish, and reload the browser.

Anybody planning on creating an Animator version of a Drawer or DisclosurePanel like GWT has?

Just trying to use Animator 1.1 (from the Directory) with Vaadin 6.3.4, but having some issues that I can't figure out.

I am trying to animate a Panel with a small button to act something like the Drawer component.

In IE8, when my Form is first populated from a item selected in a Table list, the Panel is displayed, though the component thinks it's rolled up. When I first click the button, the animator thinks its rolled up so I call rollDown(). But then, the animator works as expected, rolling up and down on each click of the button.

It also works correctly from this point on when I select different rows from my Table list (that is, the animator remains closed if it was previously closed, or stays open if it was previously open) and I update the contents of my Panel's VerticalLayout.

But in FF 3.5.10, it has the same initial behavior, but it never will roll up. Each button press causes the toggling between calls to rollDown() and rollUp(), but the Panel itself always appears as though it's rolled down.

It has the same always rolled down functionality on Chrome 5 and Safari 5 and Opera 10. Only IE8 seems to be working.

When I create my Form, I create the Panel, create the Animator for the Panel, create the button and then add them both to my Form's layout:

permPanel = new Panel();
VerticalLayout permPanelLayout = (VerticalLayout)permPanel.getContent();
permPanelLayout.setMargin(false);
permPanelLayout.setSpacing(false);

permPanelAnim = new Animator(permPanel);
permPanelAnim.setRolledUp(true);
permPanelAnim.rollUp(0,0);
permPanelAnim.setWidth(100, UNITS_PERCENTAGE);
permPanelAnim.setImmediate(true);

permPanelButton = new Button("Permissions", new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				if ( permPanelAnim.isRolledUp() ) {
					permPanelAnim.rollDown();
				} else {
					permPanelAnim.rollUp();
				}
			}
		});
permPanelButton.setStyleName(ChameleonTheme.BUTTON_SMALL);
permPanelButton.setVisible(false);

layout.addComponent(permPanelButton);
layout.addComponent(permPanelAnim);

I used both setRolledUp(true) and rollUp(0,0) as attempts to have it be initially considered in the rolled up state, which does seem to be the case, even though when I first put data into the panel, it is visible as though the Panel were rolled down.

When I click on an item in the Table list, my setItemDataSource() basically does the following for the animator after creating 3 TwinColSelects that are stored inside the panel so that the button is visible with a caption that shows my bean's name, which works as expected:

VerticalLayout permLayout = (VerticalLayout)permPanel.getContent();
// Remove any previous TwinColSelects in my panel's VerticalLayout
permLayout.removeAllComponents();
// add in my new TwinColSelects populated with appropriate data from bean
permLayout.addComponent(permListSelect); 
permLayout.addComponent(permViewDetailsSelect);
permLayout.addComponent(permUpdateSelect);

// Make button visible if not already so....
permPanelButton.setCaption("Open/close " + mybean.getName());
permPanelButton.setVisible(true);

It seems somewhat straightforward to me, but not sure why the other browsers can't roll up, or why it's initially shown like it's rolled down, even though the component itself thinks it's rolled up.

I did try ?debug option and noted that the layouts appeared to be okay (no errors).

Okay, I found that while ?debug had no layout errors, if I changed my Form (which is embedded in a SplitPanel which is embedding in a TabSheet which is in a SplitPanel which is in a VerticalLayout of the MainWindow) to use setSizeFull() instead of just setWidth("100%"), then the Animator started to work with the Panel on all my browsers.

But oddly enough, I'd then end up with horizontal scrollbars (odd because 100% width was already set, but adding 100% height then caused horizontal scrollbars, something you'd think would be impacted only by width) no matter how wide I make the browser window. So I reverted to the 98% width hack so it looks normal (though 100% width didn't show this before 100% height was added to the Form).

However, on the initial view (first item selected and shown in the Form), the Animator Panel continues to be visible even though I try to have it be rolled up. If I open the Form in a new window (instead of the lower part of the SplitPanel with Table list on top), it is rolled up as expected.

So somehow, there's still some issue on that very first item being selected and the Animator's status (which believes it is rolled up, though it's actually visible). Once you click the button to toggle it open/closed, it behaves normally, and as new items are selected, they are shown correctly open/closed. And it works fine if I open the same Form in its own Window rather than in the bottom component of a SplitPanel.

If anybody is interested, I have an Animator+Panel+Button custom component that is not as "simple pretty" as the Drawer, but doesn't have any issues with the layout, reloads, etc. and includes a hack I found I needed for Animator to work on page reloads, etc. It's not generalized at all and assumes our needs. And the Fat Cow icon for "right" is just bullet_arrow_up.png rotated 90 degrees to the right (not sure why they didn't include all directions).

// Open eSignForms - Web-based electronic contracting software
// Copyright (C) 2010 Yozons, Inc.
//
// This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License 
// as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; 
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
// See the GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License along with this program.  
// If not, see <http://open.esignforms.com/agpl.txt> or <http://www.gnu.org/licenses/>.
// Contact information is via the public forums at http://open.esignforms.com or via private email to open-esign@yozons.com.
//
package com.esignforms.open.vaadin.widget;

import org.vaadin.jouni.animator.Animator;

import com.vaadin.addon.chameleon.ChameleonTheme;
import com.vaadin.terminal.ThemeResource;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.Panel;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Button.ClickEvent;

/**
 * A simple component that wraps a button and Animator + Panel for our general ESF use (not generalized).  
 * That is, assumes we're our ESF-based Chameleon Theme, small button, borderless panel, using our Fat Cow icons for the button, etc.
 * 
 * @author Yozons Inc.
 */
public class DisclosurePanel extends CustomComponent {
	private static final long serialVersionUID = 3437640755454758542L;

	static ThemeResource closedIcon = new ThemeResource("icons/fatcow16/bullet_arrow_right.png"); 
	static ThemeResource openIcon = new ThemeResource("icons/fatcow16/bullet_arrow_down.png"); 
	
	VerticalLayout layout;
	Button button;
	Panel panel;
	final Animator animator;
	
	/**
	 * Creates a DisclosurePanel component with no caption on the button, the Panel is "rolled up" (closed - not visible).
	 * CSS style name is 'disclosurePanel' on the CustomComponent level.
	 */
	public DisclosurePanel() {
    	setStyleName("disclosurePanel");
 
    	layout = new VerticalLayout();
    	layout.setMargin(false);
    	layout.setSpacing(false);
    	
		panel = new Panel();
		panel.setStyleName(ChameleonTheme.PANEL_BORDERLESS);
        VerticalLayout panelLayout = (VerticalLayout)panel.getContent();
        panelLayout.setMargin(false);
        panelLayout.setSpacing(false);

        animator = new Animator(panel);
        animator.setRolledUp(true);
        animator.setWidth(100, UNITS_PERCENTAGE);
        animator.setImmediate(true);

        button = new Button("", new Button.ClickListener() {
			private static final long serialVersionUID = 1348946058036802825L;

			public void buttonClick(ClickEvent event) {
				if ( animator.isRolledUp() ) {
					animator.rollDown();
					button.addStyleName("down");
					button.setIcon(openIcon);
					if ( ! panel.isVisible() ) {
						panel.setVisible(true);
					}
				} else {
					animator.rollUp();
					button.removeStyleName("down");
					button.setIcon(closedIcon);
				}
			}
		});
        button.setStyleName(ChameleonTheme.BUTTON_SMALL);
        button.setIcon(closedIcon);

		layout.addComponent(button);
		layout.addComponent(animator);
		
		setCompositionRoot(layout);
    }
    
	/**
	 * Creates a Disclosure panel with the initial setting of the button caption and the specified contents of the panel.
	 * @param buttonCaption the String caption to show for the button
	 * @param panelContents the VerticalPanel initial contents of the Panel
	 */
	public DisclosurePanel(String buttonCaption, VerticalLayout panelContents) {
		this();
		setButtonCaption(buttonCaption);
		setPanelContent(panelContents);
	}
	
	/**
	 * Sets the caption on the button.
	 * @param caption the String caption for the button
	 */
	public void setButtonCaption(String caption) {
		button.setCaption(caption);
	}
	
	/**
	 * Sets the disclosure panel as visible or not.  When visible is turned off, the animator is also rolled up.
	 */
	public void setVisible(boolean v) {
		super.setVisible(v);
		
		// Hack to make appear rolled up on initial load
		if ( animator.isRolledUp() && panel.isVisible() ) {
			panel.setVisible(false);
			button.removeStyleName("down");
			button.setIcon(closedIcon);
		}  

		if ( v ) {
			button.setVisible(true);
		} else {
			button.setVisible(false);
			animator.rollUp(0,0);
		}
	}
	
	/**
	 * Gets the VerticalLayout contents of our panel.
	 * @return the VerticalLayout of our panel.
	 */
	public VerticalLayout getPanelContent() {
		return (VerticalLayout)panel.getContent();
	}

	/**
	 * Sets a new VerticalLayout to use for our panel's content.
	 * @param panelContents the VerticalLayout to use for our panel's content.
	 */
	public void setPanelContent(VerticalLayout panelContents) {
		panel.setContent(panelContents);
	}
}

Hi Jouni,

first of all, thanks for the great component, it's really easy to use and has great features.

However while testing the fade animation with IE8, I got the problem, that the component does not fade in, but suddenly appears. I get the same result when using the online demo provided with IE8. When I click on the "Fade" Button the text simply appears or dissapears.

Everything works fine in FF though, just as I wanted. And the roll animation works fine in both browsers.

Is this a general problem with IE8?

Greetings

Sebastian

Sebastian Mezzavilla: However while testing the fade animation with IE8, I got the problem, that the component does not fade in, but suddenly appears. I get the same result when using the online demo provided with IE8. When I click on the "Fade" Button the text simply appears or dissapears.

Thanks for noticing. I'm pretty sure I tested it on IE8 as well, but guess not. IE7 and 6 probably work OK.

Sebastian Mezzavilla: Is this a general problem with IE8?

There seems to be something wrong in GWT so that setting the opacity using GWT's methods doesn't affect IE8. I'll take a look at asap and try to fix it. I have a couple of more updates to the add-on anyhow.

I'm trying to see if I can use Disclosure as a replacement for Drawer in my Forms. But maybe I need to take a different approach as well.

Today, when the Form is created, I create the Disclosure. Then when an Item is selected, I create the appropriate layout to show in the Disclosure, populated with data from that Item, then call

disclosure.setContent(gridlayout);
disclosure.setVisible(true);

This only appears to work for the first Item set in the Form. When a subsequent Item is set, the call to disclosure.setContent(gridlayout) takes place, but the Disclosure itself is not updated. It appears that I cannot change the content of the Disclosure based on the Item coming in. Is this a problem, or should my approach be to create a new Disclosure for each Item and replace the Disclosure in my Form's layout?

I tried adding requestRepaintAll(), but that had no effect.

I then tried recreating the Disclosure each time, and that works, but does require I keep track of the previous so I can either add/replace the component in my Form's layout.

However, can you make the 'open' variable accessible with a "public boolean isOpen() { return open; }" accessor in Disclosure so when I replace the Disclosure, I can open the new one if the previous was open?

Sorry to post yet another item today, but just noted that IE8 is showing an alignment issue with the Disclosure arrow. It seems that FF, Safari, Chrome and Opera show it fine, and your demo site in my IE8 looks fine. When the arrow is "open" (down), nothing is clipped, but it's still high up.

As far as I know, I don't put any additional CSS, but I am using your Chameleon Theme (1.0.1) with the "blue" option with Vaadin 6.4.8.

The Disclosure arrow is the "Member" one, with the one below actually from Drawer.

Thoughts on what I might check?

David Wall: Sorry to post yet another item today --

No worries, I'm just happy to hear someone is using the Animator and finds it useful enough to ask for help :)

David Wall: -- but just noted that IE8 is showing an alignment issue with the Disclosure arrow. It seems that FF, Safari, Chrome and Opera show it fine, and your demo site in my IE8 looks fine. When the arrow is "open" (down), nothing is clipped, but it's still high up.

As far as I know, I don't put any additional CSS, but I am using your Chameleon Theme (1.0.1) with the "blue" option with Vaadin 6.4.8.

The Disclosure arrow is the "Member" one, with the one below actually from Drawer.

Thoughts on what I might check?

That's most likely just a CSS problem, and you need to tweak the background-position for the v-disclosure-caption element a bit.

David Wall: Today, when the Form is created, I create the Disclosure. Then when an Item is selected, I create the appropriate layout to show in the Disclosure, populated with data from that Item, then call

disclosure.setContent(gridlayout);
disclosure.setVisible(true);

This only appears to work for the first Item set in the Form. When a subsequent Item is set, the call to disclosure.setContent(gridlayout) takes place, but the Disclosure itself is not updated. It appears that I cannot change the content of the Disclosure based on the Item coming in. Is this a problem, or should my approach be to create a new Disclosure for each Item and replace the Disclosure in my Form's layout?

This was caused by an obvious programming error on my part in the Disclosure component. I never tested the setContent method properly, and it didn't actually change the component to the hierarchy, it just changed the internal variable reference.

Released a new version (1.5.2), now in the Directory, that fixes the setContent problem. I also added isOpen() mehtod, and made all the private variables protected.

Thank you so much for the impossibly fast turnaround, Jouni.

The setContent() solution works perfectly again.

For the IE8 issue, this seemed to put the arrows in better positions (but the original values are fine on other browsers):
.v-ie8 .v-disclosure-button .v-button-caption { background-position: 2px -35px; } /* was 2px -39px */
.v-ie8 .v-disclosure-button-open .v-button-caption { background-position: -9px -7px; } /* was -9px -11px */

Not sure why, but on FF, I found the caption getting clipped on the bottom (on letter 'g'), so changed my CSS as follows:
.v-disclosure-button { height: 19px !important; } /* was 18px */

And I switched the style to be more like a link:
.v-disclosure-button .v-button-caption { font-weight: normal; text-decoration: underline; } /* was font-weight: bold */

Ugh! I know you made all the fields protected, so I can subclass to do this, but can you perhaps update Disclosure one more time for a use case that I hadn't seen yesterday, and that's the ability to change the caption.

Disclosure.setCaption() right now sets the component's caption, not the caption of the Button. And there's no accessor method for the Button to set it directly. So perhaps the following would be great:

1) String getDisclosureCaption() { return caption.getCaption(); }
2) setDisclosureCaption(String caption) { caption.setCaption(caption); }

The second is really all I need. I figure giving access to the Button itself could be done, but have no need myself for that and if you are tweaking the button beyond the caption, perhaps subclassing would make sense.

Pretty please! :love:

David Wall: Ugh! I know you made all the fields protected, so I can subclass to do this, but can you perhaps update Disclosure one more time for a use case that I hadn't seen yesterday, and that's the ability to change the caption.

Disclosure.setCaption() right now sets the component's caption, not the caption of the Button. And there's no accessor method for the Button to set it directly. So perhaps the following would be great:

1) String getDisclosureCaption() { return caption.getCaption(); }
2) setDisclosureCaption(String caption) { caption.setCaption(caption); }

The second is really all I need. I figure giving access to the Button itself could be done, but have no need myself for that and if you are tweaking the button beyond the caption, perhaps subclassing would make sense.

Pretty please! :love:

Hi,

Was a bit busy during the end of the week and weekend, but here's an update: uploaded 1.6.1 to Directory just now (1.6 had one small bug that I missed before uploading), and includes hopefully the things you need.

I added those methods you proposed. Hope they are enough.

Also, as and added bonus, I added preliminary size and position animation support for all components. You can now animate any component's size and position using the AnimType.SIZE and setData("width=200,height=200",x=+20,y=-10")

The position animation depends largely on the layout structure around the animation target, since most layouts clip the content outside the reserved component slot. And as you see from the syntax, relative/incremental sizing/positioning is also supported, so you can move/size a component by some amount of pixels instead of an absolute end value.

Testers and feedback welcome!

// Update: Hold it! Still found bugs in the release (damn, I should test better). Making a new release (again).
// Update: 1.6.2 now in the Directory.

Jouni Koivuviita: Was a bit busy during the end of the week and weekend, but here's an update: uploaded 1.6.1 to Directory just now (1.6 had one small bug that I missed before uploading), and includes hopefully the things you need.

I added those methods you proposed. Hope they are enough.

Are you kidding me, you are terrific. Thanks again for the speedy turnaround. It works like a charm!

I'm back! By the way, it looks like the source code you link to from the Directory is not up to date.

In your recent changes, I discovered that I have a few CSS issues:
1) FYI: I used to use v-disclosure-button, but it's name has changed to v-disclosure-caption. No biggie, but if anybody else had used this, they have to rename their style.

2) Your v-disclosure-caption uses "height: 18px !important;" -- not sure why you need the !important, but that was overridding mine when I declared it to be 19px. I have found that IE8/Opera works fine with 18px, but on FF/Chrome/Safari, I need it to be 19 in order for the bottom of a 'g' to not be clipped. I seem to have a browser-specific work-around with these that will override your !important :

.v-ff .v-disclosure-caption, 
.v-webkit .v-disclosure-caption { 
    height: 19px !important; 
    } /* found we need 1 px bigger than animator.css defaults to on FF/Chrome/Safari */

But you also introduced a bug in Disclosure.setContent(). When I initially create the Disclosure, I set no content, just the caption. When the Form is populated, I create a layout that I then set as the content. I'm not entirely sure what you are trying to do, but you have this:

public Disclosure setContent(Component newContent) {
        if (content != null && content != newContent) {
            removeComponent(content);
            if (open && newContent != null) {
                super.addComponent(newContent);
            }
            content = newContent;
        }
        return this;
    }

and I think it needs to be something more like this (since content==null and newContent!=null in my case):

public Disclosure setContent(Component newContent) {
        if (content != null && content != newContent) {
            removeComponent(content);
            if (open && newContent != null) {
                super.addComponent(newContent);
            }
        }
        content = newContent;
        return this;
    }

Again, not positive if that makes sense for what you are doing, but I need content to be set to newContent regardless.

Thanks!

Hello,

I'm trying to recompile the widgetset to include the Animator addon, but I get this error message :

[ERROR] Errors in 'jar:file:[snip]/bundles/tomcat-6.0.26/webapps/ROOT/WEB-INF/lib/animator-1.6.2.jar!/org/vaadin/jouni/animator/client/ui/VAnimatorProxy.java'
[ERROR] Line 26: The import com.vaadin.terminal.gwt.client.VConsole cannot be resolved
[ERROR] Line 179: VConsole cannot be resolved

I'm using Liferay 6.0.5, which includes Vaadin 6.3.4. By looking into the vaadin.jar I can tell that there is no VConsole class for this version, but on the addon's page it's written that the addon is compatible with "Vaadin 6.3 upwards" ...

That class is only used once for logging. Maybe removing it would fix the problem for that version.

David Wall: I'm back! By the way, it looks like the source code you link to from the Directory is not up to date.

True, I made the last release in such a rush I skipped updating the repository. It's up-to-date now.

David Wall: In your recent changes, I discovered that I have a few CSS issues:
1) FYI: I used to use v-disclosure-button, but it's name has changed to v-disclosure-caption. No biggie, but if anybody else had used this, they have to rename their style.

Yeah, sorry about that, forgot to mention it in the release notes in the Directory. I just thought it's a better class name semantically. Won't change it again, I promise :)

David Wall: 2) Your v-disclosure-caption uses "height: 18px !important;" -- not sure why you need the !important, but that was overridding mine when I declared it to be 19px. I have found that IE8/Opera works fine with 18px, but on FF/Chrome/Safari, I need it to be 19 in order for the bottom of a 'g' to not be clipped. I seem to have a browser-specific work-around with these that will override your !important :

.v-ff .v-disclosure-caption, 
.v-webkit .v-disclosure-caption { 
    height: 19px !important; 
    } /* found we need 1 px bigger than animator.css defaults to on FF/Chrome/Safari */

I removed the !important since I can't remember any more why I added it in the first place.

David Wall: But you also introduced a bug in Disclosure.setContent(). When I initially create the Disclosure, I set no content, just the caption. When the Form is populated, I create a layout that I then set as the content. I'm not entirely sure what you are trying to do, but you have this:

public Disclosure setContent(Component newContent) {
        if (content != null && content != newContent) {
            removeComponent(content);
            if (open && newContent != null) {
                super.addComponent(newContent);
            }
            content = newContent;
        }
        return this;
    }

and I think it needs to be something more like this (since content==null and newContent!=null in my case):

public Disclosure setContent(Component newContent) {
        if (content != null && content != newContent) {
            removeComponent(content);
            if (open && newContent != null) {
                super.addComponent(newContent);
            }
        }
        content = newContent;
        return this;
    }

Again, not positive if that makes sense for what you are doing, but I need content to be set to newContent regardless.

Well bummer, this is what you get when you make fixes and releases in a terrible hurry. Should be fixed now.

New version in the Directory (1.6.3)

Jouni Koivuviita: [...] I removed the logging line, and it should compile with 6.3 now as well. [...]

It's working now, thanks for fixing it !

David Wall: Okay, this time I tested all the instances of Disclosure in my app and it appears to be working great. I can replace the content, update the caption, keep it open/closed in a Form when I select new Items and it holds the state, including on browser refresh. Perfect! Thanks much.

Good to hear I finally got it right :)

Hi Jouni!

It would be good if you rename README:txt contained in your component jar. We use maven and our build failes when we try to add dependency to your artifact:

...
[ERROR] BUILD ERROR
[INFO] ------------------------------------------------------------------------
[INFO] Failed to create assembly: Error creating assembly archive : Problem crea
ting jar: unknown protocol: readme
...

Thanks in advance,
Anatoly Shirokov

Darn, thanks for the notice. I‘ve somehow mistyped that. I’ll fix it next monday latest.

Update: Well, didn’t quite make it for monday, but I made a new release on tuesday evening that should fix the readme filename.

1.6.4 now in the Directory.

Hi, Im having the following problem - > In my application I set My mainWindow's content to full And after I'm adding the Animator proxy to my application's main window it brokes my application :

Please tell me is there a way to pass through that problem.

Manvel Saroyan: Hi, Im having the following problem - > In my application I set My mainWindow's content to full And after I'm adding the Animator proxy to my application's main window it brokes my application :

Please tell me is there a way to pass through that problem.

Hi,

Either set the expand ratio of the animator proxy to zero or the expand ratio of the main part of your app to non-zero.

((VerticalLayout) mainWindow.getContent()).setExpandRatio(animatorProxy, 0);

or

((VerticalLayout) mainWindow.getContent()).setExpandRatio(myAppLayout, 1);

Thank you Jouni Koivuviita It now works OK
:grin:

Hi folks!

One more that uses and likes the animator addon!
Good work Jouni - and all of the Vaadin Team.

One question:
Is it by design that

PasswordField tfPass = new PasswordField("Password");
        final Animator atP = new Animator(tfPass);
        atP.setRolledUp(false);
        vlo.addComponent(atP);

removes the caption from Textfields and ComboBoxes? Any workarounds/fixes?
Without the Animator caption renders correctly...

Maybe on more general question:

When putting things together in Vaadin, I mean positioning of components, tuning spaces and distances: Is there a general guideline on how to achieve this, or is it the "recommended" way, to tweak-tune the css until the result looks as expected?

TIA

stf obc: One more that uses and likes the animator addon!
Good work Jouni - and all of the Vaadin Team.

Thanks! Great to hear people like the addon.

stf obc: Is it by design that

PasswordField tfPass = new PasswordField("Password");
        final Animator atP = new Animator(tfPass);
        atP.setRolledUp(false);
        vlo.addComponent(atP);

removes the caption from Textfields and ComboBoxes? Any workarounds/fixes?
Without the Animator caption renders correctly...

Yes, that's by design. The Animator wrapper component wraps the component you give it with a CustomComponent, which doesn't have a caption (the caption is on the contained component, and the CustomComponent doesn't render captions unless you add an additional layout inside it).

Workaround 1: add the caption to the Animator component: atP.setCaption("Password");
Workaround 2: wrap the password field with a CssLayout before you add it to the animator component.
Workaround 3: use the AnimatorProxy component instead of the old Animator wrapper component. That one should work better in most cases, and provides more animation types as well.

stf obc: When putting things together in Vaadin, I mean positioning of components, tuning spaces and distances: Is there a general guideline on how to achieve this, or is it the "recommended" way, to tweak-tune the css until the result looks as expected?

Use Firebug/Web Inspector/Developer Tools to check the generated DOM structure and tweak CSS accordingly (see the available selectors and properties etc.). This is currently mostly trial & error based tweaking, but things should get better in V7.

Just a quick note: I now finally pushed the code to GitHub, and you can now use the issue tracker as well for any feature requests and bug reports.

Hi Jouni,

I'm now using this add on and its working great! I have a bunch of very neat looking animations, if you are interested in seeing it in action I would be happy to send you a link!

One thing I keep running into however, is missing right close and left open animations. I was able to work around it by using animate size, but would be great to have those added in as standard options. Would be happy to add in an issue if that helps.

Thanks again for the add on, making a big difference for me!

Mark

Hi Mark,

I would indeed be very interested in seeing the Animator in real use, demos are always great to see!

About the right close/left open: I left those out initially because I was undecided how they should behave exactly and because the implementation wasn't trivial. So regarding the right close animation, would you like the animation to move the curtain from the left edge of the component to the right edge while simultaneously keeping the components right edge in place (i.e. not moving the left side of the component, only clipping the component visually from the left to right)?

And yes, making it a formal issue usually helps me remember what to improve next :)

Hi Jouni,

OK, sure thing, I'll arrange a demo by email.

Well, I'll enter a couple of issues for the different animations, and once you see the demo it'll be clear why those options would help.

Yes, your description of the right close is perfect.

For the Left Open, the component should be in place and fully hidden at the start, and the curtain should reveal from right to left.

Thanks very much, I would gush about how much I love the work that you guys do and how responsive you are if I thought it would come across the right way! ;)

Mark