resizeble panel

how can I create a panel which is sizable like window?

Hi,

You need to extend the core Panel (both server and client side parts), and add that functionality using GWT.

thank you Jouni Koivuviita,
sorry I am new with vaadin can you explain more , or where can i find any tutorial for that

No problem, and don’t worry, no one expect you to be an expert from the beginning.

You should start by reading the chapter from the Book of Vaadin that covers creation of custom components/widgets. After that you can ask more specific questions, or if something is unclear in the book, we can clarify it here.


Chapter 10. Developing Custom Components

thank u again Jouni Koivuviita;
After reading this chapter , I try the sample constructed by vaadin eclipse plugin , and it works
now I want to send a vaadin component from server side to appear in client side , I made some changes in this sample but it fails please check this code and tell me where is the error.
1-MyComponent(server side)


	@Override
	public void paintContent(PaintTarget target) throws PaintException {
		super.paintContent(target);
		VerticalLayout layout = new VerticalLayout();
		Label label = new Label("I am a vaddin");
		layout.addComponent(label);
		target.addAttribute("layout", layout);
	
	}

2-MyClientSide


	public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
		if (client.updateComponent(this, uidl, true)) {
			return;
		}
		this.client = client;
		paintableId = uidl.getId();
		Widget widget = (Widget) uidl.getPaintableAttribute("layout", client);
		root.add(new Label("gwt label"));
		root.add(widget);
	}

You’ve misunderstood the communication mechanism a bit :slight_smile: but that’s ok, I’ll try and correct.

If you need to build your component as a composition of other components, you can do two things:

  1. Build the composition in the server, i.e. extend a core layout (like VerticalLayout) just in the server and add the components normally there (layout.addComponent(button) etc.). You don’t need to touch the paintContent method, that’s just internal Vaadin stuff you rarely want to touch (it handles the component serialization that is sent to the client).

  2. Extend a core layout in both the server and the client. In the server, add any necessary components that you need (like in the above case). In the client, add extra functionality that you need by overriding any methods you wish or adding new listeners etc.

The way you’ve tried to do it (add components as attributes to the serialization object inside paintContent) is a bit wrong. When you use the addAttribute(String, Component) method, you only add the id of the component to the UIDL, not the whole component rendering.

If you really wish to create this sort of component, that contains other components, you need to do something like this:


public class MyComponent extends AbstractComponent {

private Layout layout;

public MyComponent() {
     layout = new VerticalLayout();
     Label label = new Label("I am a vaadin");
     layout.addComponent(label);
}

public void paintContent(PaintTarget target) throws PaintException {
      super.paintContent(target);
      [b]
layout.paint(target);
[/b] // Ask the component to paint itself to the same UIDL target, creating a new "child" for this MyComponent
}

}
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
    if (client.updateComponent(this, uidl, true)) {
        return;
    }
    this.client = client;
    paintableId = uidl.getId();
    root.add(new Label("gwt label"));

    [b]
UIDL childUIDL = uidl.getChildUIDL(uidlPos);
[/b] // Get the layout components uidl 
    [b]
Paintable widget = client.getPaintable(childUIDL);
[/b] // Create a new Vaadin Paintable from the UIDL
    root.add(widget);
    [b]
widget.updateFromUIDL(childUIDL);
[/b] // Needs to be called after the component is attached to the document
}

I hope this somehow clarifies the mechanism :slight_smile:

Hi Ahmed,

I new with Vaadin too and I had your problem but I found a “trick” and works pretty well to me. I used a child window and some of its methods and I “converted” it into a sizeable panel and also I can easily style it.

I know this is not the best solution but it’s easy and practical giving you what you want: sizeable panel :slight_smile:

I hope this helps you.

-Sebastian.

thanks Jouni . now it works and I finished the resizeble panel , I will upload it for others as soon as possible

Hi Sebastian,
I donot want a popup window but resizeble panel inside other panel

Hi ahmed,
If you had completed finishing Resizable Panel Can u please help me technically how to achieve this,Source code will be more helpful