BlurbItem overflow (does not work?)

[s.bedunkevich]

Hi,

I'm using: v9.0p_2014-01-14/Pro Deployment (built 2014-01-14). And I running into some problems:

I have a field in the DB (mysql, TEXT type) containing some HTML code.
And I'm trying to use BlurbItem for displaying data from that field, but I cannot find any possible solutions for displaying the item with scroll bars.

Tried to set

setClipValue(false)

, but it does not work, because of DynamicForm. The form will have overflow:hidden CSS attribute even if I set:

form.setOverflow(Overflow.AUTO);

So the BlurbItem will inherit the same.

P.S. I'm trying to display it in the popup window with such config:

VLayout composite = new VLayout();
setIsModal(true);
setShowModalMask(true);
centerInPage();
addItem(composite);

Sources for DynamicForm and BlurbItem with the problem:

private void createView(VLayout composite) {
        DynamicForm form = new DynamicForm();
        form.setOverflow(Overflow.SCROLL);
        form.setWidth100();
        form.setHeight100();
        BlurbItem item = new BlurbItem();
        item.setDefaultValue(HTML_CODE);
        item.setShouldSaveValue(false);
        item.setWidth(580);
        item.setHeight(400);
        item.setShowTitle(true);
        item.setWrap(true);
        item.setCanSelectText(true);
        item.setClipValue(true);
        item.setCanFocus(true);
        item.setCanEdit(true);
        form.setItems(item);
        composite.addMember(form);
 }

And browser: Google Chrome, version: 35.0.1916.153 m

Please could you let me know how to fix this, or could you provide better solution (maybe using CanvasItem instead) for me?

Thanks,
S.

[Isomorphic]

BlurbItem does not support scrolling. A canEdit:false TextAreaItem is probably what you want.

[s.bedunkevich]

Hi, Isomorphic, thank you for advice.

A canEdit:false TextAreaItem is probably what you want.

Unfortunately, it is not working for me. TextAreaItem displays html code in the <textarea>, but I need a correct solution for displaying html as a part of page (not as source code).

BlurbItem provides such possibility, but unfortunately, it does not support scrolling.

Is it possible there are any other solutions for my problem?

Thanks,
S.

[Blama]

Hi s.bedunkevich,

just a shot in the dark: Did you already see DataSourceField#escapeHTML?

Best regards,
Blama

[s.bedunkevich]

just a shot in the dark: Did you already see DataSourceField#escapeHTML?

Hi Blama,

My goal is to render html, it is not just show its code.
So using TextAreaItem, actual result:
<textarea> with html code (html code does not rendered) (e.g. for field with value "Hello <br> world", it will be similar to <textarea>Hello <br> world</textarea>)
but expected:
rendered html (for string I wrote above should be: Hello _newline_ world).

Does it make a sense?

Thanks,
S.

[Blama]

It makes perfect sense. My suggestion was to databind the suggested TextAreaItem to your DB-Field, with e.g.:

DynamicForm form = new DynamicForm();
form.setDataSource(yourDS);
TextAreaItem tai = new TextAreaItem("yourField");
form.setFields(tai);
form.fetchData(...)

Then use the suggested .ds.xml setting and set escapeHTML="false" for your DB-field.

I don't know if it will work, but it is worth a try.

Best regards,
Blama

[s.bedunkevich]

I don't know if it will work, but it is worth a try.

Understand, but unfortunately smartGWT renders TextAreaItem as <textarea> and its content will be placed between <textarea> and </textarea> and its content will be displayed as html code.

I've solved the problem with similar code (mini wrapper for BlurbItem), as below:

DynamicForm form = new DynamicForm();
form.setOverflow(Overflow.AUTO);

// setting other properties like height, width, etc.
BlurbItem item = new BlurbItem();
item.setWidth("*");
item.setHeight("*");
form.setItems(item);

CanvasItem canvasItem = new CanvasItem();
canvasItem.setCanvas(form);
// setting other properties like height, width, etc.

// enable form events (get/set value, see api docs for CanvasItem)
canvasItem.setShouldSaveValue(true);
canvasItem.addShowValueHandler(new ShowValueHandler() {
      @Override
      public void onShowValue(ShowValueEvent event) {
          // on form.editRecord
          Object value = event.getDataValue();
          // some manipulations with value ...
      }
});

Thank you for your replies, Isomorphic and Blama.

Regards,
S.