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.
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:
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.
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:
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.
True, I made the last release in such a rush I skipped updating the repository. It’s up-to-date now.
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
I removed the !important since I can’t remember any more why I added it in the first place.
Well bummer, this is what you get when you make fixes and releases in a terrible hurry. Should be fixed now.
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.
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:
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.
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?
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.
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.
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!
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
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!
