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).