Changing a template source in the CustomLayout on the fly

Hi all,

What I'm trying to do is to change component positions added in the CustomLayout. So, I have two tamplates with two HTML tables with different cell structure(Vertical and Horizontal position). On the Checkbox click the CustomLayout should change a template f.e. from Horizontal to Vertical position. Is it possible to change template in the CustomLayout in the way ? The snipped code below is example of one of my attempt:

public class MyCustomLayout extends CustomLayout {
	
	
	private boolean verticalPosition = false;
	

	public MyCustomLayout() {
		super();
		setVerticalPosition(false);
	}

	protected static String HORIZONTALL_TEMPLATE_HTML = 
			"<table width=\"500px\">" +
			"	<tr>" +
			"		<td align=\"left\" width=\"250px\" style=\"white-space: normal;\">" +
			"			<div location=\"cap_field\">" +
			"			</div>" +
			"		</td>" +
			" 		<td align=\"left\" width=\"5px\" style=\"color:red\">" +
			"			<div location=\"req_field\">" +
			"			</div>" +
			"		</td>" +
			"		<td valign=\"middle\" align=\"left\">" +
			"			<div location=\"inp_field\"></div>" +
			"		</td>" +
			"	</tr>" +
			"</table>"; 
	protected static String VERTICAL_TEMPLATE = "topinputlayout"; 
	
	
	protected static String VERTICAL_TEMPLATE_HTML = 
			     "<table width=\"100px\">" +
					"<tr>" +
						"<td align=\"left\" width=\"50px\">"+
							"<div >" +
								"<div style=\"float:left\" location=\"cap_field\"></div>"+
								"<div style=\"float:left\" location=\"req_field\" style=\"color:red\"></div>"+
								"<div style=\"clear:both\"></div>"+
							"</div>"+
						"</td>"+
					"</tr>"+		
					"<tr>"+	
						"<td align=\"left\">"+
							"<div location=\"inp_field\"></div>"+
						"</td>"+
					"</tr>"+
				"</table>";
	
	protected ByteArrayInputStream getTemplateSource(String templateXHTML){
		return new ByteArrayInputStream(templateXHTML.getBytes());
	}
	
	
	
	public void setVerticalPosition(boolean verticalPosition) {
		setTemplateName(verticalPosition);
	}
	
	public void setTemplateName(boolean verticalPosition){
		try {
			initTemplateContentsFromInputStream(verticalPosition ? getTemplateSource(VERTICAL_TEMPLATE_HTML) : getTemplateSource(HORIZONTALL_TEMPLATE_HTML));
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
}

And this is a init method in TestApplication

public void init() {
		
		final Window mainWindow = new Window("Test Application");
		setMainWindow(mainWindow);
		mainWindow.setTheme("test");

		Label caption = new Label("Caption");
		TextField question = new TextField("Question");
		final MyCustomLayout myCustomLayout = new MyCustomLayout();
		myCustomLayout.addComponent(caption, "cap_field");
		myCustomLayout.addComponent(question, "inp_field");
		
		mainWindow.addComponent(myCustomLayout);
		
		CheckBox cb = new CheckBox("Set Vertical");
		cb.addListener(new Property.ValueChangeListener() {
		    public void valueChange(ValueChangeEvent event) {
		        boolean value = (Boolean) event.getProperty().getValue();
		        myCustomLayout.setVerticalPosition(value);
		        myCustomLayout.requestRepaint();
		        mainWindow.showNotification("Check: " + value); 
		    }
		});
		
		cb.setImmediate(true);

		mainWindow.addComponent(cb);
		
	}

I'm using a Vaadin 6.6.7

Tnx in advance.
MB

Any hints?

Kind regards,
MB

Mladen Babic: What I'm trying to do is to change component positions added in the CustomLayout. So, I have two tamplates with two HTML tables with different cell structure(Vertical and Horizontal position).

This question keeps coming up (the javadoc definitely needs to be improved), so: the current client side implementation does not support changing the template on the fly.

See ticket #5774, which also has an attached forked version of CustomLayout that does support template changes - just check that it is up to date with more recent Vaadin versions.

Tnx , Henri.

It helps a lot.

Best regards,
MB