Free form layout

Flow
1

Hi,

I would like to build a layout which is like a Label (ie get new lines when it is too long) containing some text inputs. The thing is that there can be any number of inputs, anywhere in the text. The purpose is to generate text with blanks to fill in.

Example of generated html code:

[code]

The cat is (to go) to eat the mouse.
[/code] instead of [code]
The cat is (to go) to eat the mouse.
[/code]

Any idea?

Sylvain

2

This is actually quite a bit harder to do in HTML than it seems. The main problem is that you would like to layout the components as display: inline-block, but only some browsers support this. See CSS2 - The display declaration for better explanation.

Could of implementation strategies to achieve what (I believe that) you want to do:

  • Forget about layouting TextFields. Instead build a customized HTML-mode label where you can but html that contains input-tags. Transfer the contents of the inputs as string array variable. You can do this by extending Label-component - just add this new variable and implement the input-tag value pre-fill and change submits.
  • Create layouting component by adding spans instead of inputs in the text. Put the child-components absolute positioned on top of these spans by calculating the positions with JavaScript. Whenever the component sizes change, relayout. My guess is that getting this to be reliable cross-browser will be tricky.
  • Use inline-block display mode and just support the browsers that support inline-blocks.
3

A rather static way is to use templates:

Java: [code]
void example_FillInForm(final Window main, String param) {
// Create a custom layout from the fill-in-form.html template.
CustomLayout fillinlayout = new CustomLayout(“fill-in-form”);

	// The style will set the display to be "inline".
	fillinlayout.addStyleName("fillinlayout");
	
	// Create the fields that occur in the text.
	TextField field1 = new TextField();
	TextField field2 = new TextField();
	fillinlayout.addComponent(field1, "q1");
	fillinlayout.addComponent(field2, "q2");
	
	main.addComponent(fillinlayout);
}

[/code]
The template fill-in-form.html: The <div location="q1"></div> is mightier than <div location="q2"></div>.
The style sheet:[code]
@import url(…/default/styles.css);

//
/* For example_FillInForm() */
//
.i-customlayout-fillinlayout div {display: inline;}

[/code]
It will look as follows:

4

Hi!

You are making it all too difficult. Our ordered layout with default settings is just simple div elements after each other. With some css we can make div elements displayed inline.

So simple code



        OrderedLayout ol = new OrderedLayout();
        ol.setStyleName("inline");

        ol.addComponent(new Label("The "));
        ol.addComponent(new TextField());
        ol.addComponent(new Label(" is mightier than "));
        ol.addComponent(new TextField());
        ol.addComponent(new Label("."));

And some simple CSS for it into theme:


.i-orderedlayout-inline div div {
	display:inline;
}
5

How well do you think we can trust in the permanence of the implementation of the horizontal OrderedLayout? I suppose it could be implemented as a table as well or with some other structure that could break the above solution that assumes that it’s implemented with divs.

Earlier there was a parameter OrderedLayout.ORIENTATION_FLOW, which if I remember correctly was not actually implemented, but I suppose was intended for this purpose? Do you think we could have such a layout explicitly in the API? Perhaps it should have its own class, such as FlowLayout?

6

Hi,

Thanks for all the replies, especially on a Friday afternoon. At the moment, the proposition of Matti is really fine.

Sylvain

7

Added a layout component for this purpose to wishlist
http://dev.itmill.com/ticket/1664
.