CollapsiblePanel and VCollapsiblePanel

Hi,

I’m trying to create a new widget that would basically allow to add clickable icon into the caption of a panel.
Additionally when you click on the icon you could make the panel collapse to just show the caption.

What i’m trying to do is to replace the captionNode of VPanel to be a HorizontalLayout. So far so good but when i add an Embedded object with an image to the HorizontalLayout which is displayed instead of the captionText the Embedded objext is not clickable anymore.

What do i need to do in the VCollapsiblePanel to register for event for the Embedded object.

CollabsiblePanel.java extends Panel


	private ComponentContainer captionContent = new HorizontalLayout();
	
	public CollapsiblePanel ()
	{
		super();
		captionContent.setParent(null);
        // Adds the event listeners for new content
		captionContent.addListener((ComponentContainer.ComponentAttachListener) this);
		captionContent.addListener((ComponentContainer.ComponentDetachListener) this);
		captionContent.setParent(this);		
		
	}
	
	@Override
	public void paintContent(PaintTarget target) throws PaintException {		
		super.paintContent(target);
        captionContent.paint(target);

	}


	public void addCaptionComponent(Component component)
	{
		captionContent.addComponent(component);
	}

VCollapsiblePanel.java extends SimplePanel


.
.
.

    protected final SimplePanel captionNode = new SimplePanel();

.
.
.

    public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {

.
.
.
        // Render the caption
        if(uidl.getChildCount() > 1)
        {        
	        final UIDL captionLayoutUidl = uidl.getChildUIDL(1);
	        final Paintable newCpationLayout = client.getPaintable(captionLayoutUidl );
	        if (newCpationLayout != captionLayout) {
	            if (captionLayout != null) {
	                client.unregisterPaintable(captionLayout);
	            }
	            captionNode.setWidget((Widget) newCpationLayout );
	            captionLayout = newCpationLayout ;
	        }
	        captionLayout.updateFromUIDL(captionLayoutUidl, client);
        }
.
.
.
}

so the application has the following piece of code. I add an embedded object to the caption but no event is fired when i click on the embedded object. When i add the same object to the content of the panel the nit works fine.


	                   CollapsiblePanel			panel = new  CollapsiblePanel();
 
		// a little test
		final Label someText = new Label("Here we have some text");
		Label caption = new Label ("here we have the caption");
		
		
		layout.addComponent(panel);
		
		Embedded test = new Embedded(null, new ThemeResource("plus.png"));
		Embedded test2 = new Embedded(null, new ThemeResource("plus.png"));
		
		panel.addComponent(someText);
		panel.addComponent(test);
		panel.addCaptionComponent(test2);
		panel.addCaptionComponent(caption);
		
		test2.addListener(new MouseEvents.ClickListener() {

			public void click(com.vaadin.event.MouseEvents.ClickEvent event) 
			{
				someText.setValue("clicked test2");
			}
			
		});
		
		
		test.addListener(new MouseEvents.ClickListener() {

			public void click(com.vaadin.event.MouseEvents.ClickEvent event) 
			{
				someText.setValue("clicked test");
			}
			
		});

So the listener for the embedded object added using addCaptionComponent is visible but no event are fired when clicked upon.

Any help is really appreciated.

Thx,
e

Regards,
Emanouil

ok after further investigation i found the solution.

I had to extend the SimplePanel and addd a method eg attachAll which just calls super.onAttach().

So on the VCollapsiblePanel i just added a call to attchAll and now events are registered.

I had to copy the whole VPanel implemenation as all members are private this is really unfortunate and to my opinion they should have been protected so that this would have been easy to develop.


    public class SimplePanelExt extends SimplePanel
    {
    	public void attachAll()
    	{
    		VConsole.log("Attaching and firing events");
    		super.onAttach();
    	}
    }

VCollapsiblePanel


    SimplePanelExt  captionNode = new SimplePanelExt();

    @Override
    protected void onAttach() {
        super.onAttach();
        
        captionNode.attachAll();
        
        detectContainerBorders();
    }

And now i can finally add the code to he widget to collapse it ;-). Next step is to add the collapse t the client side only so that no server call is reauired.

Regards,
e

For those who are interested in the code for a Panel that allows to add widgets to the caption (currently coded as a horizontallayout) and have the possibility to collapse the content of the panel just drop me a mail at ekzl@yahoo.com

regards,
e

Hi Emanouil,

This is what I was lookin for, thank you.

But the collapsible panel could be more generic to be widely used. The collapse arrows/buttons could be at any side of the panel (top, bottom, left, right), by configuration.
I would like to create a general component like this and contribute it as an add-on.

But i’m totally new to vaadin, so I could use your code as a starting point.

You suggested to write a private mail, but prefered to share my idea on this forum.

My mail address to send the source to is work.jupiter at gmail.

Thanks in advance.

Regards,
Peter

I just found the following threads related to this thread:

https://vaadin.com/forum/-/message_boards/view_message/239035
https://vaadin.com/forum/-/message_boards/view_message/102297
https://vaadin.com/forum/-/message_boards/view_message/160867

Maybe these would be useful.