smartgwt inline text plus form items

[oespanyol]

I am trying to setup a template form using smartgwt that combines text plus form items, but I don't know what smartgwt structure is best suited. This is what I am trying to do:

1. The basic form is some predefined long text,
2. At some predefined places in the text, insert form widgets, like a combo box or a date picker.
3. The whole structure should be presented to the user as continuous text with the options to select on the combobox, date, etc.
4. The text should wrap around the end of lines of the containing element (a paragraph container)
5. The form inputs (combobox, etc) should flow next to the end of the preceding text in the same line.

The problem I am experiencing with smartgwt forms is that they are presented to the user within a table structure using rows and columns that doesn't fit the concept of continuous text. My text is wrapped around the containing cell of the table and the flow of the form is lost.

If I set the text to no wrap with .setWrap(false), then the text doesn't wrap in the containing cell, but it doesn't wrap either at the end of the line for the paragraph stracture. It is difficult to use 'colspan' and 'rowspan' because the size of the text varies for different templates.

Any ideas on how to implement this? Any help appreciated.

Many thanks in advance,

[Isomorphic]

Use a separate DynamicForm with a single FormItem in it for each form you want to place in the text.

[oespanyol]

Thanks for the prompt response. Please see below the test form that I have implemented. However, it doesn't display as I would like it because there is no flow between the elements. Since I would like:
1. That the form items are next to the end of the text in the same line, not in the next one.
2. That the text doesn't start on a new line after a text item
2. That there are no spaces left between the form items

Please see images attached for:
A. The current form corresponding to the code below (currentForm.jpg)
B. The actual target form format for clarification (targetForm.jpg)

Thanks in advance for your support

	final FlowLayout layout = new FlowLayout();	
	
	layout.setPosition(Positioning.RELATIVE);				
	layout.setOverflow(Overflow.VISIBLE);
		
	layout.setWidth(500);
	layout.setHeight100();
		
        HTMLFlow htmlFlowA = new HTMLFlow();
        htmlFlowA.setWidth100();
        String contents =  
        		"This is just some sample text. This is just some sample text. This is just some sample text." +
        		"This is just some sample text.";  		
        htmlFlowA.setContents(contents);  
        layout.addTile(htmlFlowA);
		
	DynamicForm form1 = new DynamicForm();
	DateItem date = new DateItem("date");
	date.setShowTitle(false);
	form1.setFields(date);
	layout.addTile(form1);
		
        HTMLFlow htmlFlowB = new HTMLFlow();
        htmlFlowB.setWidth100();
        String contentsB =  
        		"This is just some sample text. This is just some sample text. This is just some sample text." +
        		"This is just some sample text. This is just some sample text. This is just some sample text.";  		
        htmlFlowB.setContents(contentsB);  
        layout.addTile(htmlFlowB);

	DynamicForm form2 = new DynamicForm();
	SelectItem selItem2 = new SelectItem("formItem");
	selItem2.setShowTitle(false);
	selItem2.setValueMap("Cat", "Dog", "Giraffe", "Goat", "Marmoset", "Mouse");
	form2.setFields(selItem2);
	layout.addTile(form2);

        HTMLFlow htmlFlowC = new HTMLFlow();
        htmlFlowB.setWidth100();
        String contentsC =  
        		"This is just some sample text. This is just some sample text. This is just some sample text." +
        		"This is just some sample text. This is just some sample text. This is just some sample text.";  		
        htmlFlowB.setContents(contentsC);  
        layout.addTile(htmlFlowC);

	DynamicForm form3 = new DynamicForm();
	SelectItem selItem3 = new SelectItem("formItem");
	selItem3.setWidth(50);
	selItem3.setShowTitle(false);
	form3.setFields(selItem3);
	layout.addTile(form3);
		
	DynamicForm form4 = new DynamicForm();
	SelectItem selItem4 = new SelectItem("formItem");
	selItem4.setWidth(10);
	selItem4.setShowTitle(false);
	form4.setFields(selItem4);
	layout.addTile(form4);
		
	DynamicForm form5 = new DynamicForm();
	SelectItem selItem5 = new SelectItem("formItem");
	selItem5.setShowTitle(false);
	selItem5.setWidth(80);
	form5.setFields(selItem5);
	layout.addTile(form5);

	DynamicForm form6 = new DynamicForm();
	SelectItem selItem6 = new SelectItem("formItem");
	selItem6.setShowTitle(false);
	selItem6.setWidth(100);
	form6.setFields(selItem6);
	layout.addTile(form6);
		
	DynamicForm form7 = new DynamicForm();
	SelectItem selItem7 = new SelectItem("formItem");
	selItem7.setShowTitle(false);
	form7.setFields(selItem7);
	layout.addTile(form7);
		
        HTMLFlow htmlFlowD = new HTMLFlow();
        htmlFlowD.setWidth100();
        String contentsD =  
        		"This is just some sample text. This is just some sample text.";  		
        htmlFlowD.setContents(contentsD);  
        layout.addTile(htmlFlowD);
		
	DynamicForm form8 = new DynamicForm();
	SelectItem selItem8 = new SelectItem("formItem");
	selItem8.setShowTitle(false);
	form8.setFields(selItem8);
	layout.addTile(form8);
		
	DynamicForm form9 = new DynamicForm();
	SelectItem selItem9 = new SelectItem("formItem");
	selItem9.setShowTitle(false);
	selItem6.setWidth(50);
	form9.setFields(selItem9);
	layout.addTile(form9);
		
	DynamicForm form10 = new DynamicForm();
	SelectItem selItem10 = new SelectItem("formItem");
	selItem10.setShowTitle(false);
	form10.setFields(selItem10);
	layout.addTile(form10);

	addMember(layout);

[Isomorphic]

Your requirement for flowing items into text necessarily gets you into some pretty low-level browser hacking, because you need to basically know where the browser has placed individual words on the screen. So consider carefully whether you really want your UI to work this way - it's an uncommon design, and for good reason: the pseudo-random layout of the UI components prevents a user from learning standardized spatial locations and becoming more efficient with the UI.

If you decide you want to go ahead with this design, the approach we would recommend is:

1. write placeholder DOM elements (eg <span>s) into the contents you put in an HTMLFlow for every place where you will be putting a UI component

2. use direct-to-DOM coding techniques to determine the coordinates of the placeholder DOM elements. While SmartGWT obviously has internal APIs to do this, by design, SmartGWT does not offer a documented API for this (too many browser bugs and too many ways to get into trouble). But you could use GWT's Element class, or another framework like JQuery.

3. add the DynamicForms as children, reverting to using absolute positioning, and place them at the coordinates where you've determined the placeholders appear in the current text flow

4. rerun the measuring and placement code every time the HTMLFlow resizes.

[oespanyol]

Ok, I understand, thanks. I though there would be a more straightforward way to do it, but I'll spend some time to see if I can implement this approach or rethink the design.

[Isomorphic]

Just a note that the code to do this as described is pretty straightforward.

The question is how many browser bugs you'll hit :)

If this design is definitely the one your users will prefer, and you don't have to support IE8 or earlier, and the controls are always going to be embedded in just plain text, you might get lucky and never have a problem.